诗语，作者 Avada 文档 - 第 53 页共 79 页

Using The Sliding Bar

The Avada Sliding Bar is a widgetized section that can collapse and expand by clicking the active icon. This is perfect for adding information,content, widgets, buttons, menus etc to engage your audience. You can choose between 1-6 columns for the sliding bar, and you can choose the position of the sliding bar to be the top, left, right, or at the bottom of your site. You can also choose to make it sticky (for top or bottom position only). See the sliding bar live in some of our demos here: Classic, Promote, Adventure, University, and Information Technology, and watch the video below for a visual overview.,OverviewHow To Setup The Sliding Bar
The Sliding Bar Position

Number Of Sliding Bar Columns

Sliding Bar Toggle Style
Adding The Sliding Bar To An Instance Of The Menu Element
How To Add Widgets To The Sliding Bar

Sliding Bar Options,How To Setup The Sliding BarStep 1 – Navigate to Avada > Options > Sliding Bar.
Step 2 – The Slider Bar can be enabled/disabled on desktop and mobile using the 『Sliding Bar on Desktops』 and 『Sliding Bar On Mobile』 options. Using the sliding bar on mobile is limited due to space, please see the description in the Global Options, and the important note below.
Step 3 – Choose where you want it to be positioned (Top, Right, Bottom, or Left). For Top and Bottom positions, you will have the option to make it sticky.
Step 4 – Decide whether or not the sliding bar opens on page load by default, the number of columns (1-6), and the content alignment (Left, Center, Right).
Step 5 – New features were added in Avada version 5.5 – these options are 『Sliding Bar Width』, 『Sliding Bar Column Alignment』, and 『Sliding Bar Content Padding』. The 『Sliding Bar Width』 and 『Sliding Bar Column Alignment』 options are only available if you choose Right or Left position only. Set these options the way you prefer.
Step 6 – Styling options are found under Sliding Bar Styling section and under this section, you can set the style you want for the sliding bar toggle. You can choose from Triangle, Rectangle, Circle, or Main Menu Icon options.
Step 7 – For the other styling options, you can choose a background color, background color opacity, toggle color, heading font size, font color and more. You can also choose to turn on or turn off the border on your sliding bar.
Step 8 – Once you』re done setting the options, click 『Save Changes』 button.
Please continue reading below to learn more about each of the Sliding Bar options.
Please Note – If the sliding bar is turned on for mobile, it is important to note that due to mobile screen sizes and overlapping issues, the triangle toggle style in the top right position will be forced on mobile regardless of your selections and desktop styles.767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Sliding Bar PositionThe Sliding Bar position can be selected as Top, Right, Bottom, or Left. This is set in the Theme Options: Avada > Options > Sliding Bar > Sliding Bar Position.
On top of this, the Sliding Bar can be made sticky when in either the Top or Bottom position. This means that the Sliding Bar stays visible at the Top or the Bottom of the viewport when you scroll. This Sticky setting is not needed when choosing Left or Right, as the Sliding Bar will always be visible when in those positions.
Another main option is the Sliding Bar Width. This controls the width of the sliding bar on left/right layouts. With Top, and Bottom positions, the widget content determines the height of the Sliding Bar.
Finally, in the Toggle Style Option, you can also choose Main Menu icon, which of course, places the Sliding Bar Toggle as a plus symbol in the Main Menu itself.
These changes go a long way towards enabling the type of setup, long asked for by users, such as the custom Sliding Bar on our Demo sites that show the other demos. With some imagination and the right content, almost anything is possible with the Sliding Bar.
IMPORTANT NOTE: To add a Sliding Bar to a Menu when using Custom Layouts, we have added the Sliding Bar Toggle as a Special Menu Item in the WordPress Menu Settings. See the Menu Settings Doc for more info.,Number Of Sliding Bar ColumnsWith the Sliding Bar, you can have anywhere from 1 to 6 columns. This is set in the Theme Options – Avada > Options > Sliding Bar > Number of Sliding Bar Columns.
When using the Left or Right positions, there is also an option for the alignment of the columns. Select between Stacked or Floated. This effectively makes your widget content display in rows (Stacked) or columns (Floated).
For Top, and Bottom positions, the columns themselves are evenly distributed across the full site width. There is also the option to control the content padding in the columns via the Sliding Bar Content Padding section.,Sliding Bar Toggle StyleThere are also several styles you can choose to style your Sliding Bar Toggle. These are Triangle, Rectangle, Circle, and Main Menu Icon. These options are found in the Global Options: Avada > Options > Sliding Bar > Sliding Bar Styling > Sliding Bar Toggle Style. See a screenshot of the area here.
These options also affect the placement of the Sliding Bar Toggle. For the Triangle, the Toggle is at the very corner of the viewport (corresponding to the position you have selected). For the Rectangle, the Toggle is placed in from the edge to create a tab effect, while the Round option positions the Toggle freestanding, away from the edge. The Main Menu Icon option places the Toggle in the Main Menu instead, as a + symbol. You can select the color of the Toggle via the Global Options.,Adding The Sliding Bar To An Instance Of The Menu ElementWhen assigning a Header via the Global Options, there is an option to add a Sliding Bar Toggle to your main menu. When using the Menu Element in a Custom Header, however, you have to assign a Sliding Bar in a different way. As the Global Option for the Sliding Bar Toggle Style > Main Menu Icon will not work when using the Menu Element, there is the option to add a Sliding Bar Toggle to your Menu via the Avada Special Menu Items. Read more about this from the link below.
Read About The Avada Special menu Items,How To Add Widgets To The Sliding BarStep 1 – To add your widget areas to the Sliding Bar, navigate to WP Dashboard > Appearance > Widgets.
Step 2 – You will see a 『Sliding Bar Widget X』 section on the right hand side for each Sliding Bar column (from 1-6 columns) selected in theme options. To add the widgets, drag and drop the widgets you want from the left side into the sliding bar widget areas on the right side.
To learn more about widgets and all they can do across the theme, please visit the Widget section of our documentation.
View Widget Documentation,Sliding Bar OptionsThe Global Options for the Sliding Bar can be found at Avada > Options > Sliding Bar. See below for a rundown of each option.
Sliding Bar on Desktops – Allows you to display the sliding bar on desktops.
Sliding Bar on Mobile – Allows you to display the sliding bar on mobiles. Important Note: Due to mobile screen sizes and overlapping issues, when this option is enabled the triangle toggle style in the top right position will be forced for square and circle desktop styles.
Sliding Bar Open On Page Load – Allows you to have the sliding bar open when the page loads.
Sliding Bar Position – Allows you to set the position of the sliding bar to be in the top, right, bottom, or left of your site.
Sliding Bar Width – Allows you to set the width of the sliding bar on left/right layouts. Enter value including any valid CSS unit. For example: 300px
Sticky Sliding Bar – Allows you to enable a sticky sliding bar. Note: This option is available for top/bottom position only.
Number of Sliding Bar Columns – Allows you to set the number of columns you want to have in the sliding bar.
Sliding Bar Column Alignment – Allows you to have the sliding bar columns be stacked (one above the other) or floated (side by side). Note: This option is available for right/left position only.
Sliding Bar Content Padding – Allows you to set the top/right/bottom/left paddings of the sliding bar area. Enter values including any valid CSS unit. For example: 35px, 30px, 35px, 30px
Sliding Bar Content Alignment – Allows you to set the sliding bar content alignment to Left, Center, or Right.
Sliding Bar Toggle Style – Allows you to set the appearance of the sliding bar toggle to Triangle, Rectangle, Circle, or Main Menu Icon.
Sliding Bar Background Color – Allows you to set the background color of the sliding bar.
Sliding Bar Item Divider Color – Allows you to set the divider color in the sliding bar.
Sliding Bar Toggle/Close Icon Color – Allows you to set the color of the sliding bar toggle icon and the close icon when using the Main Menu Icon as toggle style.
Sliding Bar Heading Font Size – Allows you to set the font size for the sliding bar heading text. Enter value including CSS unit (px, em, rem). For example: 13px
Sliding Bar Headings Color – Allows you to set the text color of the sliding bar heading font.
Sliding Bar Font Color – Allows you to set the text color of the sliding bar font.
Sliding Bar Link Color – Allows you to set the text color of the sliding bar link font.
Sliding Bar Link Hover Color – Allows you to set the text hover color of the sliding bar link font.
Border on Sliding Bar – Allows you to display a border line on the sliding bar which makes it stand out more.

How To Control Spacing in Avada

Controlling spacing in websites has traditionally been very difficult for non developers. Custom CSS has long been used to style pages, including margins and padding. But Avada Builder goes a long way towards making spacing a breeze, even if you have no coding knowledge whatsoever. Read below to find out where and how to take control of your site spacing using Avada Builder.,Overview
The Difference Between Margins and Padding

Where To Control Spacing

Controlling Spacing With Global Options

Element Global Options

Controlling Spacing With Page Options

Controlling Spacing With Containers

Controlling Spacing With Columns
Controlling Spacing Between Elements
Custom CSS,The Difference Between Margins and PaddingOne of the first things to understand when trying to take control of spacing, is the difference between margins and padding. Simply put, margins are the space around the outside of elements, between one container, column or element and the next. Padding, on the other hand, is the space around the internal content of a container or column. The following diagram is very simple, but it should illustrate the concept clearly enough. If you want further information, try this article.
There are other types of spacing we can control throughout the theme, like column spacing, letter spacing and line heights etc, but in this post we will mostly be focusing on the main ones of margins and padding.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Where To Control SpacingThere is no one place to control margins, padding or column spacing; there are many. Let』s start at the highest level and work our way down. At each level, there are options that control spacing, either globally or locally, so let』s start by looking at the Global Options, then the Page Options, and then down into the Containers, Columns and Elements, and finally to Custom CSS.
Controlling Spacing With Global OptionsIn the Avada Global Options, there are several settings that directly affect spacing throughout your site. If you use the Boxed Mode layout, for example, the Boxed Mode Top/Bottom Offset setting will control how much margin there is above and below the box. If you use the Wide layout, the Page Content Padding option will control how much padding there is above and below your body content (under the Header and the Page Title Bar and above the Footer). Finally, if you use the 100% Width page template, there is a setting called 100% Width Padding to specify how much left and right padding there will be on content that goes full width.
All of these options can be found in the Theme Options at Avada > Global Options > Layout. These options affect every page, but they can also be overridden on a page by page basis via the Page Options (see below).
Read our doc on Page Top & Bottom Padding!Element Global OptionsStill in the Global Options, there are some Elements which have global options for margins and padding. These are found under Avada > Global Options > Avada Builder Elements > and the individual elements.
The following Elements have the option to set either global margins, padding, or column spacing: Blog, Column, Container, Content Box, Events, Gallery, Portfolio, Syntax Highlighter, Tagline Box, Text Block, and the Title Element. These can also be overridden in the actual Element options, when adding the Element.
Controlling Spacing With Page OptionsThe next level down is to control spacing on a page by page basis. These are overrides for the option we have set in the Global Options, but only apply to one page at a time. Settings that can override global spacing are found in the Content Tab.
These may seem minor, but, as an example in the image below, if you have 55px global Page Top Content Padding, and on a specific page you want it to be 0px, you will be very grateful to find the override setting right there on the page in question.
Controlling Space With ContainersNow we find ourselves in the Fusion Builder. As we are building our pages, we have the opportunity to control the various spacing through the elements we use, starting with the very Containers that make up our page.
By default, Containers have no margins or padding set, unless you are using the 100% width template, where the default padding is 30px left and right. You can of course adjust these settings, either in the Container Settings in the Theme Options (Avada > Global Options > Avada Builder Elements > Container) as seen below, or on a Container by Container basis on your individual pages.
Controlling Space With ColumnsColumns, by default, have 20px bottom margin, and 0px padding. Generally, it is most appropriate to set margins and padding on columns and containers, and to use separators to control the space between elements, if there is more than one in a column. But it really must be looked at on a case by case basis.
Read our doc on Column Spacing!Controlling Spacing in Avada LiveWhether you are using the back or front end version of the Avada Builder, controlling spacing in columns and containers is the same, just with some interface differences. Please see the Adjusting Margins & Padding in Avada Live doc & video for more details on controlling spacing when using the front-end builder.
Controlling Space Between ElementsCurrently, there are only a few Elements that have some form of margin and padding control, and a few others have margins built in. In a future version of Avada, we will be introducing full margin and padding control on all elements as well.
The Separator ElementSpecial mention must be made of the very versatile Separator Element. This Element can be used to space out a page, and can be visible or invisible. See the Separator Element Doc for detailed info.
But plainly put, the Separator Element is a very useful element to space out elements within the same column. Most Elements have no margins or padding themselves, and so when multiple elements are placed in the same Column, separators can be very useful as a design tool.,ExamplesHere are a few examples of controlling spacing using margins and padding in various places.
This column has 40px top margin set, which creates a space between it and the column above. I』ve given the column a background color so you can see the margin is outside and above the column. Below is the 20px padding from the paragraph (within the grey area) and the 20px bottom default margin of the column (outside the grey areas).
This column has 50px padding set all around, which creates a large space around the text within the column. Below is the 20px padding from the paragraph and the 20px bottom default margin of the column. I』ve given the column a background color so you can see the padding is within the column.,Custom CSSFinally, there are times when you will have no choice but to revert to Custom CSS to control your site completely. Some elements have built in margins that have no override, and certain designs and advanced layouts can only be achieved by the clever use of Custom CSS. This is beyond the scope of this document, and quite often, this sort of customization is even beyond the scope of Official Support, but there are links below to our docs on CSS, and our awesome Community Forum and the very active Facebook Avada User』s Group.
So, as you can see, there are a lot of places and ways to control the spacing on your website, but getting familiar with the various places to control it will help you make beautiful designs in no time at all, using nothing but your imagination, and Avada.

How to Change Side Navigation Text Color By Itself

All menu text is controlled via theme options for consistency. If you want to only change a side nav, you can use the CSS below. Copy and paste that into the Custom CSS field in Theme Options.
Copy to Clipboard.side-nav li a { color: #FFFFFF !important; }
.side-nav li a:hover { color: blue !important; } 1.side-nav li a { color: #FFFFFF !important; }2.side-nav li a:hover { color: blue !important; }

How To Fix Missing Font Awesome Icons Or Custom Fonts

There are a few scenarios when Font Awesome icons or Custom Fonts might not show up. Read below to see the most common causes of this issue.
Fonts Hosted On Different DomainAll browsers require fonts to be hosted on the same domain (and a sub-domain is considered a separate domain name). If your Font Awesome Icons or custom fonts are not showing up in a certain browser (mainly Firefox or IE), then you have two solutions for the issue.
1. Host the font on the same domain as the domain where the website is accessed.
2. Create or edit the .htaccess file in the root folder on the same domain where the fonts are hosted, and add the following code into it:
Copy to Clipboard# Apache config

Header set Access-Control-Allow-Origin "*"
1# Apache config23 Header set Access-Control-Allow-Origin "*"4Detailed Steps:To create or edit your .htaccess file, you need to log in to your server via FTP or through your cPanel File Manager, and find the root folder of your WordPress installation (you can see the 『wp-admin』, 『wp-content』 etc folders there). If there is already a .htaccess file there, you can right click and edit it directly on the server if you are using File Manager. If you are using FTP, you will need to download it, edit it and then upload it. (In Filezilla, there is a right click 『edit』 and this effectively does the same thing.)
If you don』t have a .htaccess file (on File Manager, make sure you have 『Show Hidden Files (dotfiles)』 selected in the Settings Menu), then you will need to create one, add the code above, and upload it. You can do this in any text editor. For a more step by step tutorial, read this!,Font Awesome Subsets Not SelectedAnother scenario when the Font Awesome icons do not show, is when no Font Awesome font subset is selected in the Theme Features section of the Theme Options (Avada > Theme Options > Advanced > Theme Features > Font Awesome). Ensure at least one subset is selected.,After Site MigrationIn some cases, when users migrate sites, the Font Awesome files can still show a path to the old site, and this causes the font to now show. Resetting the Fusion Caches easily fixes this (Avada > Theme Options > Performance > Reset Fusion Caches).

How to Convert Child Themes + Custom Post Types for Avada 5.0

If you would like to convert your Custom Post Types within your Child Theme, then please follow the steps below.
How To Convert Only Custom Post Types in Child ThemesStep 1 – Add this code snippet to your child theme』s functions.php file:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'my_post_type',
);
return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' ); 1function add_custom_post_types( $post_types ) {2 $my_post_types = array(3 'my_post_type',4 );5 return $my_post_types;6}7add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 2 – Replace
Copy to Clipboardmy_post_typexxxxxxxxxx1 1my_post_type inside the array with your own Custom Post Type name. For example:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'courses',
);
return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );xxxxxxxxxx7 1function add_custom_post_types( $post_types ) {2 $my_post_types = array(3 'courses',4 );5 return $my_post_types;6}7add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 3 – Re-run the conversion script manually. To learn how, click here. It』s important to make sure your Child Theme is active before running the conversion.
How To Convert Custom Post Types and Default Post Types in Child ThemesStep 1 – Add this code snippet to your child theme』s functions.php file:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'my_post_type',
);

$my_post_types = array_merge( $post_types, $my_post_types );

return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );x 1function add_custom_post_types( $post_types ) {2 $my_post_types = array(3 'my_post_type',4 );56 $my_post_types = array_merge( $post_types, $my_post_types );78 return $my_post_types;9}10add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 2 – Replace
Copy to Clipboardmy_post_typexxxxxxxxxx1 1my_post_type inside the array with your own Custom Post Type name. For example:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'courses',
);

$my_post_types = array_merge( $post_types, $my_post_types );

return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );xxxxxxxxxx10 1function add_custom_post_types( $post_types ) {2 $my_post_types = array(3 'courses',4 );56 $my_post_types = array_merge( $post_types, $my_post_types );78 return $my_post_types;9}10add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 3 – Re-run the conversion script manually. To learn how, click here. It』s important to make sure your Child Theme is active before running the conversion.

Avada Live Editing

Design Anything Visually, Fast!With the release of Avada 6, came Fusion Builder Live, our front end page builder, to complement our back end builder interface, Fusion Builder. It was an incredible labor of love for the entire ThemeFusion team, and was a huge step forward in intuitive and easy website design.
IMPORTANT NOTE: In Avada 7.0, we renamed Fusion Builder to Avada Builder, and Fusion Builder Live to Avada Live.This long-requested feature sits alongside our existing Avada Builder, so the old familiar Avada is still there, and you get complete freedom with how you want to use it. You can use the Front or Back End interface of Avada Builder, and even use the Wireframe from within Avada Live. As with any major new feature, it will, of course, take some time to familiarize yourself with the new streamlined Element Controls and the workflow of the Avada Live, but it is remarkably intuitive, and once you get the hang of it, we don』t think you』ll ever look back.
We have developed a range of documentation and videos to help you get started with Avada Live, and these will be added to over the coming weeks and months. Please see the Avada Builder Category for the latest relevant docs and the YouTube Channel for the latest videos.
Overview
The Avada Live Editor
The Avada Live Workspace
The Avada Live Toolbar,The Avada Live EditorThis amazing front-end builder takes Avada to the next level, and allows for a seamless and efficient workflow without even leaving the page you are building. Let』s have a look at how to access it, and its key features.
Accessing Avada LiveDepending on where you are at in WordPress, you can access Avada Live in a number of ways. Let』s look at each one.
Viewing A Page on the Front EndWhen you are viewing a page, and are logged in, you will find an option called Edit Live in the WordPress Admin Toolbar. Clicking this will open the page into Avada Live.
Editing A Page In Avada Builder (Back-End)If you are editing a page in the back-end Avada Builder, and want to switch to Avada Live, you will see a large button called Avada Live at the top of the document, just under the Slug, as well as the Edit Live link in the Toolbar. Ensure the page is saved before switching Builders.
Editing A Page In A WordPress EditorIf you are editing a page in either the Visual or Text mode in the WordPress editor, you will have the option of two buttons: Avada Builder and Avada Live at the top of the document, just under the Permalink, as well as an Edit Live link in the WordPress Toolbar. Ensure the page is saved before switching to Avada Builder.
Editing A Page In GutenbergIf you are editing a page in the Gutenberg editor, you will have a link to the Front-End Builder in the WordPress Toolbar, entitled Edit Live. There is also a button below this at the top of the page, called Edit With Avada Builder (back end interface).
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,The Avada Live WorkspaceOnce you are in Avada Live, you will see your page displayed on the front end, with a Toolbar at the top. As you mouse over the various parts of the page, the various Element control icons will appear, giving you access to edit your content.
For full details on the Avada Live Workspace, follow the link below. Also, please view the full range of docs and videos for the Avada Builder to learn how to use Avada Live.
View the Avada Live Workspace doc here!,The Avada Live ToolbarOnce you are in the Avada Live Editor, you will find the Toolbar along the top, which gives you all the options you need to build and manage your pages. This is a sticky toolbar, so as you scroll down, it stays at the top, always leaving it right at your fingertips.
Let』s have a look at each of the icons on the Toolbar, from left to right.
Left Hand Side
Avada Builder Icon: This shows the Builder version if you mouse over it.

Toggle Sidebar: This opens and closes the Sidebar, where you can access the Theme Options, Page Options, and the Element Settings.

Library: This accesses the Avada Builder Library.

History: This shows the latest 25 history states, allowing you to step backward throughout your actions.

Preferences: Here you can access the Avada Builder Live Editor Preferences.

Add New: This icon allows you to add a new Post, Page, Portfolio, FAQ, Layout or Element.

Clear Layout: This clears the layout from the page.
Right Hand Side
Support: Offers links to our Getting Started documentation, our Support portal, and the keyboard shortcuts available.

Responsive: Here you can both preview the page in Large, Medium and Small Screen views, and access the Responsive Editing Mode.

Toggle Wireframe: Click this icon to toggle the back-end wireframe in the Front-End Builder.

Preview: Preview mode closes all panels and removes front-end icons to give you a quick, clean page preview.

Publish / Draft: These two buttons allow you to quickly set the publish state of the page, to Draft or Published.

SAVE: The Save Button allows you to save all the work done in the Front-End Builder, including edits to Elements, and theme and page options settings.
Exit: The Exit Button allows you to exit the builder, to the page front-end, the page back-end, or the Avada dashboard.

Adding The Logo & Favicons

You can upload an image file of any size as your website logo in Avada in 3 different areas; the default logo, the sticky header logo and the mobile logo. This gives you the flexibility to adjust your logo depending on where it』s displayed. Avada is also retina ready, so there are additional options to upload a retina 2x logo for high resolution devices.
When building a Header Layout Section through Avada Layouts, you can also add your logo via the Image Element, either manually, or using Dynamic Content. Please see the How To Use The Image Element To Add A Logo Into A Header Layout Video for more information on that method. Please read below for more information on logos and the different areas you can display them in, favicons, as well as the styling options available.
IMPORTANT NOTE: Avada allows logos to be retina ready, however they are not required to be used. If you do not upload a retina logo, then the default normal logo will be used on all screens.Available Logo AreasDefault Logo Fields – Upload a default logo that will be displayed in all areas (Default/Sticky/Mobile) unless a unique logo is uploaded to the sticky header and/or the mobile header logo option.Sticky Header Logo Fields – Upload a unique logo that will only appear on your sticky header. This is optional.Mobile Header Logo Fields – Upload a unique logo that will only appear on mobile devices. This is optional.How To Upload A Default LogoStep 1 – Navigate to Avada > Options > Logo > Default Logo.
Step 2 – Locate the 『Default Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a default retina logo using the 『Retina Default Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE: The retina default logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px.How To Upload A Sticky Header LogoIMPORTANT NOTE: Uploading a sticky header logo is optional. If no unique logo for the sticky header is uploaded, the default logo will be displayed instead.Step 1 – Navigate to Avada > Options > Logo > Sticky Header Logo.
Step 2 – Locate the 『Sticky Header Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a sticky header retina logo using the 『Retina Sticky Header Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE: The retina sticky header logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200px.How To Upload A Mobile LogoIMPORTANT NOTE: Uploading a mobile logo is optional. If no unique logo for mobile devices is uploaded, then the default logo will be displayed instead.Step 1 – Navigate to Avada > Options > Logo > Mobile Logo.
Step 2 – Locate the 『Mobile Logo』 option and click the 『Upload』 button to upload your logo image file. View screenshot here.
Step 3 – This step is optional. You can upload a retina mobile logo using the 『Retina Mobile Logo』 option.
Step 4 – Click 『Save Changes』.
IMPORTANT NOTE
The retina mobile logo dimensions must be exactly twice that of your standard logo. For example, if your standard logo is 100px x 100px, the retina version of your logo must be 200px x 200pxLogo SettingsAvada offers various settings to help with the styling and alignment of your logo. These options are located in the Avada > Options > Logo > Logo section and will only affect the default logo that displays in the header on desktop mode.
Logo Alignment – Controls the logo alignment. 「Center」 only works on Header 5 and Side Headers.Logo Margins – Controls the top/right/bottom/left margins for the logo. Enter values including any valid CSS unit, for example: 31px, 31px, 0px, 0pxLogo Background Color – You can optionally add a logo background color for header versions v1, v2, v3, v6, v7 and side headers. Note: The logo background is only visible in desktop view and does not apply to the mobile header view.Favicon OptionsThe Favicon Options are located in the Avada > Options > Logo > Favicons section. A favicon is an icon typically displayed in the address bar of a browser accessing the site or next to the site name in a list of saved bookmarks. Avada offers several fields to upload different types of favicons. Each one has its own unique size listed in the description.
To add favicons, simply click the 『Upload』 button next to the appropriate field, then select the favicon file you would like to use. The Retina icon version options will first appear when you have uploaded the default icons.
IMPORTANT NOTE: Favicons changed here will only display on the front end of the site. Back end favicons can only be changed in the Customizer.Favicon – The main favicon for your website. Image must be 16px x 16px or 32px x 32px.Apple iPhone Icon – For Apple iPhones. Image must be 57px x 57px.Apple iPhone Retina Icon – For Apple iPhones Retina. Image must be 114px x 114px.Apple iPad Icon – For Apple iPads here. Image must be 72px x 72px.Apple iPad Retina Icon – For Apple iPads Retina. Image must be 144px x 144px.

Recommended Website Hosting Services

Avada is a WordPress theme, and thereby it is required that you have WordPress installed and running on a website hosting account. We recommend you use a host trusted by WordPress that has quality products and services. Many users ask us who we recommend, and we have two companies to share with you. Please note: We receive a small commission if you choose one of the companies below. Our recommendation is based on the quality of their products and is not motivated by compensation.

Avada Patcher

Keeping your site up to date is an integral part of WordPress site maintenance, and the Patcher tool is a very useful part of that strategy. The Avada Patcher is an innovative maintenance tool that allows you to apply patches to Avada in between full Avada updates. This allows you to keep your Avada site fully up to date at all times.
At times our developers release quick fixes for newly discovered security issues or other small bugs that can』t wait for the next full release. These are individual patches that can be added as soon as they are released. Read below for more details of how to use this great maintenance tool, and watch the video for a visual overview.
Please Note: In the essence of good installation management and maintenance, it is good practice to ensure all current patches are applied as, and when, they are released.Three Ways To Apply Available PatchesIndividually Via The Patcher PanelWhen patches are available, you will see notifications in several places, including under the Avada and Patcher links on the WordPress sidebar, and a small asterisk on the Maintenance link. You can get to the Patcher from Avada > Patcher on the WordPress Sidebar or Maintenance > Patcher from the Avada Dashboard.
To apply the patches one at a time, just ckick the Apply button to the right of the individual patches. Start with the top one and apply themn sequentiually.
Bulk Apply Via The Patcher PanelIf there are multiple patches, you can simply click on Apply All Patches at the top of the Patches panel. All necessary changes will be automatically applied to the necessary files for you.
Once the patch is applied, you will see a notification that confirms the patch was applied.
Applying Patches Manually Via FTPSometimes server setups are very particular about file/folder permissions and do not allow files to be automatically written to them. In these cases, applying an automatic patch will not work. If your server doesn』t allow the patches to be applied automatically through the Avada Patcher, you can download the patch files and manually apply the fix with FTP access. The reasons why this might happen are listed below, please contact your host and give them these details and ask them to change it for you:

Theme & plugins should be owned by the web server user (usually www-data)

Files & folders should have the right permissions. You can find more details here, in the WordPress Support Docs.
WordPress should be able to write to the filesystem.If your server doesn』t allow the patches to be applied automatically through the Avada Patcher, you can download the patch files and manually apply the fix with FTP access. The latest patches for Avada and its required plugins will be listed in the order of first to last released. You can find Avada patch files available for download here. On that page, you』ll see all available patches for a specific theme version.
If you are not on the latest version of Avada version, simply update your theme. The patches will be in the latest version. For information on updating Avada, see our guide here.
Patches that are manually applied need to be completed in the date order they were released since they build on one another. Always start at the top patch for the version you are using and apply it first, then work your way down.Avada Status Page Explained:
A – Version: Each section will have a version number. All patches for that theme or plugin version will be listed below the version heading.B – Patch Number & Date: The patch number will increase for each patch released. When installing your patches, be sure to install from oldest to newest. That would be lowest patch number to highest patch number. You can also reference the date, which is just below the patch number.C – Description: The Description will explain what issue the patch fixes.D – This is a download link which contains the patched files in a .zip file. The next section will explain what you do to apply the fix.E – This references the second patch in the list. You can see by the patch number (and date if the patch was released on a different day) that it』s more recent then the previous patch. When applying patches, this patch would be applied after the above patch.After You』ve Downloaded the Patch File....here』s what to look for
Patch File Name – The patch file will be a .zip file with the patch』s number as its name which looks like this.Extract – Now that you』ve found your patch file, extract the .zip file.Locating the Patched Files – The extracted folder will be the same path you』ll need to follow to find the files on your site for applying the updated files. It will start from the wp-contents folder and end with your actual fixed files which looks like this.Upload Fixes – Now access your site through FTP and navigate to the same location your patched files were found in the patch download. Transfer your new patched files (and only the files themselves) to the directory and choose to 「overwrite」 the existing files.You can find Avada patch files available for download here.
IMPORTANT NOTE: If the Avada Patcher did not work and you』re unable to apply patches manually, please send in a support ticket with a note in regards to this and we can take care of it with FTP access.

Header Background Parallax Options

There is a single, and simple, option for setting parallax scrolling on the header background image. This causes the header background image to be fixed, and so it doesn』t move with the header when you scroll.
This is found under Avada > Options > Header > Header Background Image, and the parallax option will show when an image is selected as the header background. Set Parallax Background Image to On to use a parallax scrolling effect on the background image. There is also an option for 100% Background Image, to have the header background image display at 100% in width and height according to the window size, and another option to control any repeating of the background image.
This setting only works for the top header position. For top headers, the image displays on top of the header background color and will only display if the Header Background Color is fully opaque (i.e. it is a hexadecimal value, as opposed to an rgba value with transparency – eg. rgba(255,255,255,0.75)).
IMPORTANT NOTE: This option will not work when the Sticky Header option is enabled.