Avada 文档

Option Network Dependencies

Dependent options are options that are shown or hidden according to your current setup. For example, if your site currently has the 『Responsive Design』 setting turned off, then all options related to the Responsive Design setting, such as Responsive Breakpoints, will be hidden from the Theme Options Panel.
This is because these options are now unnecessary to your current setup and will not affect it in any way. This will minimize confusion and errors resulting from incorrect option settings. Continue reading below to learn about dependent options in the Avada Theme Options, Avada Page Options and the Avada Builder Element Options.
Avada』s Option Network DependenciesDependent Options in Avada Theme OptionsDependent Options in Avada Page OptionsDependent Options in Avada Builder Element OptionsAvada』s Option Network DependenciesWhile Avada』s Option Network Dependencies are useful, you may want to see all the option the Avada theme has to offer so you can quickly visualize what』s possible with the theme. If you』d like to turn the dependency feature off, you can do so by following the steps below.
Step 1 – Navigate to Avada > Theme Options > Advanced > Theme Features tab.
Step 2 – On this tab, you』ll find the 『Avada』s Option Network Dependencies』 option. Toggle this option to Off to disable dependent options in all three locations; Avada Theme Options, Avada Page Options, and Avada Builder Options.
Step 3 – Once finished, click 『Save Changes』 and refresh the page.
Dependent Options in Avada Theme OptionsBelow is an example of dependent options in action in the Avada Theme Options panel. When you turn Responsive Heading Typography On, you』ll be able to view all it』s dependent options. When you turn it Off, they will become hidden because they』re no longer necessary.
Responsive Heading Typography DisabledResponsive Heading Typography EnabledDependent Options in Avada Page OptionsBelow is an example of dependent options in action in the Avada Page Options panel. When you select a slider from the 『Slider Type』 option in the Sliders tab, you』ll be able to view all that particular slider』s dependent options.
No Slider Type SelectedAvada Slider Type SelectedDependent Options in Avada Builder Element OptionsBelow is an example of dependent options in action in Avada Builder Elements. When you select an animation type from the 『Animation Type』 option under the Animations tab, you』ll be able to view all the animation』s dependent options.
No Animation Type SelectedBounce Animation Type Selected

Avada Global Options

Avada comes with a unique Advanced Options System, and at the heart of that is the Avada Global Options. This options panel allows you to configure virtually every section of your website. The options are organized into logical tabbed sections, and each option has a description of what it will do.
We encourage you to take some time and navigate through each section to familiarize yourself with the options. There are literally hundreds of options here, which give you an incredible amount of choice for customizing your site. Read on for videos, screenshots, and descriptions of each of the Option tabs.
How To Access the Avada Global OptionsFrom The WordPress DashboardGo to Avada > Options from your WordPress Dashboard, or Options > Global Options, from the Avada Dashboard, to access the Avada Global Options panel.
From Avada LiveIf you are working in the Avada Live then there is no need to return to the back-end to access the Avada Options. Simply click the Toggle Sidebar Icon in the Avada Live Toolbar, and the entire Avada Options panel is accessible to you while you build. The Avada Page Options are also available on this sidebar, in their own tab. To save any options you change, just click the large Save Icon in the top right of the Toolbar.
For more info on the front end builder, please see the Avada documentation, starting with Introducing Avada Live, and the Avada Builder documents and videos.
Video OverviewSee the videos below for an introduction to the Avada Global Options in both the back end and front end interface.
Avada Options OverviewIMPORTANT NOTES: Avada Global Options use the Avada Option Network Dependencies, and when this is enabled, it will only show the available options based on your current configurations. All screenshots here are showing ALL options available, so depending on your selections, they may be different. Also, 3rd Party Plugin Options labeled in GREEN are only available when you have the corresponding plugin activated. This eliminates irrelevant options to your current setup if not in use.
Layout Options

Responsive

Colors

Header

Logo

Page Title Bar

Breadcrumbs

Sliding Bar

Footer

Sidebars

Background

Typography

Blog

Portfolio

Social Media

Slideshows

Elastic Slider

Lightbox

Forms

Contact Template

Search Page

Privacy

Extras

Advanced

Performance

bbPress

WooCommerce
Events Calendar
Custom CSS

Avada Builder Elements

Import / Export
Layout OptionsManage the site layout, site width, padding, and sidebar layouts. View here
Responsive OptionsEnable responsive design on your site, set responsive breakpoints, enable mobile device zoom and responsive heading typography, set typography sensitivity, and set minimum size factor. View here
Color OptionsChoose a predefined theme skin, a predefined color scheme, or set a custom primary color. View here
Header OptionsThese are now legacy settings. Please see the documentation on Avada Layouts to see how to create your own custom header.
Manage the header and sticky header. Choose the position, size, layout, appearance, padding, styling, slider position, and header content.

Header Content – Header position, header layout, slider position, and header content options. View here
Header Background Image – Header background image, 100% and parallax background image, and background repeat options. View here
Header Styling – Header padding, shadow, width, background color, border color, tagline font size and font color options. View here

Sticky Header – Visibility options for desktop, tables, and mobiles, and other styling options. View here
Menu OptionsMenu Options – Manage various aspects of your main menu, flyout menu, secondary top menu, mobile menu, mega menu, and main menu icons.

Main Menu – Main menu height, styling, padding, layout, dropdown styling, search icon, and typography options. View here

Flyout Menu – Styling, font size, and menu direction options. View here

Secondary Top Menu – Styling, layout, and typography options. View here

Mobile Menu – Menu design, styling, and typography options. View here

Mega Menu – Layout options. View here

Main Menu Icons – Main menu icon position, and styling options. View here
Logo OptionsManage a regular, sticky header, mobile logo, retina, logo custom link URL, and a favicon.

Logo – Alignment, margins, custom link URL, default, sticky header, mobile, and retina logo options. View here

Favicon – Regular, Apple iPhone and iPad, and retina favicon options. View here
Page Title Bar OptionsManage the layout, visibility, styling, font size, alignment, a background image, and animation. These options are applied globally to pages and posts, but can be overridden by individual page or post Avada options.

Page Title Bar – Visibility, styling, background image, parallax, and animation options. View here
BreadcrumbsManage breadcrumb prefix, separator. color. categories etc. View here
Sliding Bar OptionsManage visibility, columns, font size, color, and other styling options. View here
Footer OptionsManage widgets, columns, content alignment, special effects, copyright text, background image, and styling. These options are applied globally to pages and posts, but can be overridden by individual page or post Avada options.

Footer Content – Footer Content – Widget visibility, number of footer columns, content alignment, special effects, copyright bar, and copyright text. View here

Footer Background Image – Background image for footer widget area, 100% background image, background repeat, and background position. View here

Footer Styling – 100% width, padding, typography, border, copyright, background color, footer widgets area styling, and other footer styling options. View here
Sidebar OptionsSidebar Options – Manage the mobile position of the sidebar on mobile devices and sidebar styling, sidebars for pages, portfolio, blog, search page, WooCommerce, Events Calendar, and bbPress. Here you can activate the sidebars globally which will override the Avada options.

Sidebar Styling – Sidebar Responsive Order, Sticky sidebar, padding, background color, widget heading background color and font size, and widget headings color. View here

Pages – Activate global sidebar for pages, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here

Portfolio Posts – Activate global sidebar for portfolio posts, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here

Portfolio Archive – Choose a sidebar or no sidebar for sidebars 1 and 2. View here

Blog Posts – Activate global sidebar for blog posts, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here

Blog Archive – Choose a sidebar or no sidebar for sidebars 1 and 2. View here

Search Page – Choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here

WooCommerce Products – Activate global sidebar for WooCommerce products, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here

WooCommerce Archive – Choose a sidebar or no sidebar for sidebars 1 and 2. View here
Events Calendar – Activate global sidebar for Events Calendar posts, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here
bbPress/BuddyPress – Activate global sidebar for bbPress/BuddyPress, choose a sidebar or no sidebar for sidebars 1 and 2, and the sidebar position. View here
Background OptionsBackground Options – Manage background image for page and main content, background color, background pattern, and other styling options.

Page Background – Background image for page, 100% background image, background repeat, background color, and background pattern. View here

Main Content Background – Background color, background image, 100% background image, and background repeat. View here
Typography OptionsManage font family, weight, style, size, line height, letter spacing, font color, link color, and header margins for body, headers, and post titles. Choose either standard fonts, Google fonts or add your own custom fonts.

Body Typography – Font family, weight, style, subsets, size, line height, letter spacing, font color, and link color. View here

Headers Typography – Font family, weight, style, subsets, size, line height, letter spacing, header margins, and font color options for headers H1-H6, post titles, and post title extras. View here

Custom Fonts – Upload as many custom fonts as you wish. Required font files -> .woff, .woff2, .ttf, .svg, .eot. View here
Blog OptionsManage the layout, pagination type, excerpts, featured image, date, single post, and the blog meta.

General Blog – Title bar, layout for WordPress default or archive, pagination type, excerpt, blog archive featured image/video visibility, and the date layout options. View here
* The general blog options only control the assigned blog page in settings > reading, or the blog archives, not the blog element.

Blog Single Post – 100% width page, single blog post featured image/video visibility, pagination, post title, meta data position, author, social sharing, related posts, and comments. View here

Blog Meta – Post meta visibility, meta data font size, date format, and various meta options. View here
* The on/off meta options in this section only control the assigned blog page in settings > reading, or the blog archives, not the blog element.
Portfolio OptionsManage the layout, pagination type, column spacing, excerpts, text layout, slug, featured images size, and various portfolio single post options.
General Portfolio – Items per archive page, archive page layout, featured image size, excerpt, pagination type, text layout, slug, and other general portfolio options. View here
* The options in this section only control the portfolio archives, not the portfolio element.
Portfolio Single Post – Pagination, single post featured image/video visibility, first featured image, featured image column size, 100% width page, project description title and details, comments, author, social sharing, and related posts. View here
Social Media OptionsManage your social media options for the header, footer, social sharing box, and upload as many custom social media links as you wish.

Social Media Icons – Default and custom social media links. View here
* The default and custom social link added here will only display in the header and footer, they will not display in the Avada social widget, social link element, or person element.

Header Social Icons – Social icon font size, tooltip position, color type, color, and boxed options. View here

Footer Social Icons – Icon visibility, social icon font size, tooltip position, color type, color, and boxed options. View here

Social Sharing – Sharing box tagline, text color, background color, sharing box icon size, tooltip position, color type, boxed, boxed radius, boxed padding, and sharing box links. View here
Slideshow OptionsManage the number of post slideshow images, autoplay, smooth height, speed, pagination, and navigation options. View here
Elastic Slider OptionsManage the slider dimensions, animation, autoplay, interval, speed, width, and typography styling options. View here
Lightbox OptionsManage the lightbox visibility, general lightbox behavior, skin, navigation visibility, gallery start/stop button, and other lightbox options. View here
Forms OptionsManage the Forms Styling, Google reCAPTCHA and HubSpot options.
Form Styling – Height, border and color options for Avada Forms. View here
Google reCAPTCHA – Configuration options for your Google reCAPTCHA account. View here
HubSpot – Connect your Avada Forms to your HubSpot account. View hereMailchimp – Connect your Avada Forms to your Mailchimp account. View hereContact Template OptionsManage the email address, comment area position, data privacy confirmation box, ReCaptcha, Google map options, and Google map styling.

Contact Template – Email address, comment area position, data privacy confirmation box, and data privacy checkbox label settings. View here
* The options on this tab are only for the contact form that displays on the 『Contact』 page template.

Google Map – Google Maps API Key, map address, type, dimensions, top margin, zoom level, pin visibility, pin animation, popup, scrollwheel, scale, and zoom and pan control icons. View here
* The options on this tab are only for the google map that displays on the 『Contact』 page template, they do not control the google map element except for the Google Maps API Key option.

Google Map Styling – Map styling type, overlay color, info box styling, info box content, background color, text color, and custom marker icon. View here
* The options on this tab are only for the google map that displays on the 『Contact』 page template, they do not control the google map element.
Search OptionsManage the Search form, live search, and the Search page configuration options.

Search Form – Search Results Content, Search Form Design & Live Search Options. View here

Search Page – Search Results Layout, Number of Search Results Per Page, Pagination Type, Search Content Display, Excerpt Length etc. View here
Privacy OptionsManage the Google fonts mode, privacy consent, and privacy bar. View here
Extras OptionsManage miscellaneous options for your site including options for related posts/projects, featured image rollovers, pagination, forms styling and grid/masonry styling.
Miscellaneous – Side navigation behavior, image placeholders, excerpt type, excerpt link method, comments visibility on pages, feature image visibility on pages, add 「nofollow」 to social links, and open social icons in a new window. View here
Related Posts / Projects – Layout, number of related posts/projects, maximum columns, column spacing, image size, autoplay, speed, navigation, mouse scroll, and scroll items. View here

Featured Image Rollover – Image rollover visibility, direction, icon font size, link behavior, and rollover styling options. View here

Pagination – Padding, previous/next text visibility, and font size. View here
* The options on this tab apply to all pagination throughout the site, including the 3rd party plugins that Avada has design integration with.

Grid / Masonry – Grid box and element color, grid separator style and color, and masonry ratio level and 2×2 width. View here
* The options on this tab apply to grid boxes throughout the site; blog grid and timeline, portfolio boxed layout and WooCommerce boxes and under masonry section, the options apply to the Blog / Portfolio / Gallery elements in addition to Blog and Portfolio archives.
Advanced OptionsManage tracking code, Javascript and HTML added before or before , plus various theme features.

Features – Avada』s option network dependencies, WordPress jpeg quality, smooth scrolling, code block encoding, enable/disable Avada』s mega menu, various scripts, sliders, rich snippets, and much more. View here

Code Fields – Tracking code (ie. Google Analytics), Javascript code wrapped in Script tags, and HTML markup. View here
Post Types – Enable or disable various post types in Avada – Avada Slider, Avada Forms, Avada Portfolio, and Avada FAQ. View herePerformanceGeneral performance options, Dynamic CSS & JS, and the new Progressive Web App options. View here
bbPress OptionsManage the forum base font size, header background color, header font color, and border color. View here
WooCommerce OptionsManage general WooCommerce configuration options and styling.

General WooCommerce – Products per page, columns, one page checkout, order notes, my account menu link, cart icon, social icons, product grid/list view, and account area messages. View here

WooCommerce Styling – Product box design, 100% width page, equal heights, tab design, various color options, and icon font size. View here
Events Calendar OptionsManage general calendar styling and single calendar post options.

General Events Calendar – General styling options, feature image hover type, and image background size for list view. View here

Events Single Posts – Social sharing box visibility, single and dual sidebar layout, sidebar background color, padding, widget sidebar styling, font sizes, and color options. View here
Custom CSS OptionsAdd your own custom CSS which will override the theme CSS. In some cases the !important tag may be needed. View here
Avada Builder Elements OptionsThese options affect the Avada Builder Elements globally, which can be overridden by each element』s individual settings. View here
Import / Export OptionsBackup, restore, or transfer Avada Global Options data when you migrate your installation. View here

Avada Builder Option Sets

The Avada Builder is a vital part of Avada』s ecosystem. This powerful and easy to use page builder allows you to quickly and easily build all manner of page layouts, through a drag and drop wireframe interface, and now, with Avada Live, through a front-end page builder. Both versions of Avada Builder are intuitive, powerful and flexible.
Avada Builder has its own documentation section where you can learn all about it, and in addition, for Developers, there is an Avada for Developers category, where you can find out all about actions, filters, functions, add-ons and much more.
There are three areas in which you can set options for the Avada Builder. Firstly, there are the general Avada Builder Options, accessed from the Avada Dashboard at Options > Builder Options. Then, there are the Avada Builder Element Default Options controlling the individual Builder Elements. These options are found in the Avada Builder Elements tab of the Global Options. Finally, there are Avada Live Preferences, found in the toolbar of Avada Live.
View The Avada Builder Documentation,Avada Builder General OptionsAvada Builder is a stand alone plugin and contains a set of options for the Builder itself. These options are only for Avada Builder and are not related to the Avada Options System. These are general options around how the Builder loads, what Elements load, and what post types the Builder is available on. You can access these options from the Avada Dashboard, by going to Options > Builder Options. Read more about these options at the link below, or watch the video for a visual overview.
Read More About The Avada Builder General Options!,Avada Builder ElementsAvada Builder has over 70 design Elements you can use to build professional pages through an intuitive user interface. Each element has a set of options for customization, that also work in tandem with Avada』s Option Network.
The link below shows you a full listing of ALL Avada Builder Elements, each linking to their own Element document. The options contained within each Element will only affect the single instance of the Element they』re set in.
See The Full List of Avada Elements!There are also global default options for Elements, located in the Avada Global Options. Go to Avada > Options > Avada Builder Elements. These global Element Options are also accessible from the Global Options tab of the Sidebar in Avada Live. The sidebar is accessed from the Toolbar at the top of the page, when in the front-end builder.,Avada Live PreferencesAvada Live has its own set of preferences you can set, to configure the Live Builder in just the way you like it. There are also a large range of keyboard shortcuts you can use to speed up your workflow.
Read About Avada Live Preferences

Option Network Correlations

In Avada 5.0 we have added a new feature called Advanced Option Network Correlation. This option allows you to intuitively see the relationship between global Avada Theme Options settings and your individual Element Options and Page Options settings. When you edit a single page or post, in the Avada Options section of the page, you will see what has been set for the corresponding option within the Theme Options. No more switching back and forth or trying to remember what you previously set in the Theme Options. Continue reading below to learn how this feature works.
IMPORTANT NOTE: This feature is only available on Avada version 5.0 or higher.Advanced Option Network CorrelationAvada has the most advanced options system of any theme on the market! With Avada you can set global options which affect your entire site using Avada Theme Options, but also the flexibility to fine tune your settings on a individual page or element basis by using Avada Page Options and Avada Builder Options.
Because the options network consist of globals vs overrides, it』s vital to know what is set globally. Our Advanced Option Network Correlation feature makes it clear what is currently set globally within Avada Theme Options.
This feature is located in all Avada Builder Options and Avada Page Options that have a corresponding option in the Avada Theme Options. Simply click the link in the description to be redirected to the corresponding global option in Avada Theme Options, or with the knowledge of what is set globally, change the Avada Option to override the Theme Option.

How To Use The Off Canvas Builder

The Off Canvas Builder, released with Avada 7.6, allows you to create a huge range of Off Canvases for your Avada website. An Off Canvas is basically a panel that is positioned outside of the viewport that appears when activated. With this tool, you can create a wide range of popups, sliding bars, and even flyout and push menus.
To get started with Off Canvas, head to Avada > Off Canvas. Here, you create your Off Canvas items, as well as configure how they work, and the conditions under which they operate. Read on to find out more about this very versatile builder.,How To Create A New Off CanvasThe Off Canvas Builder is found at Avada > Off Canvas, from the WordPress sidebar, or from the menu on the Avada Dashboard. This is where you create and manage all your Off Canvas creations.
To get started, simply give your new Off Canvas a name, and click on Create New Off Canvas. Depending on whether you have Avada Builder Auto Activation turned on or not in the Avada Builder Options (Avada Dasboard > Options > Builder Options) you will be taken directly to the Avada Builder, or alternatively, the WordPress editor. In that case, simply click on your choice of builder, either Avada Builder, or Avada Live to start building.
In either case, the first thing you see is a choice to either Add a Container and start building from scratch, or to open Avada Studio. and import a prebuilt Off Canvas.
Avada Studio is a great place to start. There is a range of prebuilt Off Canvas items here you can use, and these come fully designed and pre-configured. Simply select the one you want and it will be imported ready for you to customize. This is a great way for you to familiarize yourself with the different types of Off Canvases that can be made, and also how to configure them.
If you choose instead to build an Off Canvas from scratch, simply select your starting Container/Column combination and get building. You have the full range of Avada Design Elements to build with.,Building And Configuring An Off CanvasCreating an Off Canvas comes in two concurrent stages, building and configuring. The content comes from the Builder, and you can add anything at all into your Off Canvas using the Avada Builder. You have the full range of Design Elements at your disposal. The Off Canvas Builder can be used to create Popups, and a range of Sliding Bars and Flyout and Push Menus, but the reality is that these are simply off canvas panels, and you can add anything you want to them.
Configuration happens via the Off Canvas Options, found in the Avada Page Options panel position. In Avada Live, this is on the Sidebar, and is active while you are building, and in Avada Builder, it』s at the bottom of the page. As mentioned, the configuration and build process happen concurrently, as some of the Off Canvas Options will also affect the look of the Off Canvas. Let』s go through the full range of configuration tabs.,Settings TabThe Settings Tab is simply where you name the Off Canvas, and its slug, and this is generated automatically when you create your Off Canvas initially. Unless you want to rename your Off Canvas, you won』t need to do anything here.

Page Title

Slug
View The Options Screen,Preview TabOn this tab, you can configure Dynamic Content options for the dynamic preview.

View Dynamic Content As – Make a selection to view dynamic content as another item.

Select (Dynamic Content Type) – Choose to select specific content for dynamic preview. Leave Empty for random selection.

Preview – Click to render the dynamic preview.
View The Options Screen,General TabThis is the main configuration tab for your Off Canvas. Here, you control the type of Off Canvas (Popup or Sliding Bar) and adjust its width, height and various other alignment options. There are unique options for each Off Canvas type, which you can see below.
General Tab – Popups
Type – Select Off Canvas type. Choose from Popup or Sliding Bar.

Width – Set the width. Enter value including any valid CSS unit, ex: 800px.

Height – Select the height. Choose from Fit With Content, Full Height, or Custom Height.

Horizontal Position – Set the horizontal position, start and end depend on your website direction. Choose from Start, Center, or End.

Vertical Position – Set the vertical position, start and end depend on your website direction. Choose from Top, Center, or Bottom.

Content Layout – Defines how the content should be positioned. If block is selected it will not use flex positioning and will instead allow floated elements. Choose from Column, Row or Block.

Content Alignment – Defines how the content containers should align. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

CSS Class – Allows you to add a class for the column.
View The Options ScreenGeneral Tab – Sliding Bar
Type – Select Off Canvas type. Choose from Popup or Sliding Bar.

Default State – Set the default state. Choose from Closed or Open.

Positon – Set the position of the sliding bar. Choose from Top, Right, Bottom or Left.

Transition – Set the transition of the sliding bar. Choose from Overlap or Push. (Only with Left or Right selected)

Width – Set the width. Enter value including any valid CSS unit, ex: 800px.

Height – Set the height. Enter value including any valid CSS unit, ex: 300px (Only with Top or Bottom selected)

Content Layout – Defines how the content should be positioned. If block is selected it will not use flex positioning and will instead allow floated elements. Choose from Column, Row or Block.

Content Alignment – Defines how the content containers should align. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

CSS Class – Allows you to add a class for the column.
View The Options Screen,Design TabThe Design Tab allows you to configure your Off Canvas, with background color or image, border options, as well as any margin, padding and box shadow.

Background Color – Controls the background color of the Off Canvas.

Background Image – Upload an image to display in the background.

Scrollbar – Hide or customize Off Canvas scrollbar. Styling and support varies depending on the browser. Choose from Default, Custom, orHidden.

Scrollbar Background – Controls the background color for the scrollbar (Only if Custom chosen above).

Scrollbar Color Handle – Controls the color for the scrollbar handle (Only if Custom chosen above).

Border Radius – Controls the border radius. Enter values including any valid CSS unit, ex: 10px.

Border Width – Enter values including any valid CSS unit, ex: 10px.

Border Color – Controls the border color. Leave empty for default value.

Margin – Enter values including any valid CSS unit, ex: 4%. Controls the margin around the Element.

Padding – Controls the padding for the button. Leave empty for default values.

Box Shadow – Set to 「Yes」 to enable box shadows.

Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels.

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. From 0 – 100.

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels, from 0- 100.

Box Shadow Color – Controls the color of the box shadow.
View The Options Screen,Overlay TabThe overlay tab controls the styling of the background page content when the Off Canvas is active. It can be disabled entirely, or configured with color, scrollbars, and even background images.

Overlay – Choose Ye, or No, to enable, or disable, an overlay on the page content. The remaining options will only be visible is Yes is selected.

Z Index – Value for overlay』s z-index CSS property, can be both positive or negative.

Close On Click – Close Off Canvas when clicked on overlay.

Page Scrollbar – Enable / Disable page scrollbar when Off Canvas is open.

Background Color – Controls the background color for overlay.

Background Image – Upload an image to display in the background.
View The Options Screen,Close ButtonTabThe Close Button tab allows you to configure the close button on your Off Canvas. You can configure how the Off Canvas is closed, and addjust the close button with icon, icon size, color and margins etc.

Overlay – Choose Ye, or No, to enable, or disable, an overlay on the page content. The remaining options will only be visible is Yes is selected.

Z Index – Value for overlay』s z-index CSS property, can be both positive or negative.

Close On Click – Close Off Canvas when clicked on overlay.

Page Scrollbar – Enable / Disable page scrollbar when Off Canvas is open.

Background Color – Controls the background color for overlay.

Background Image – Upload an image to display in the background.
View The Options Screen,Animation TabThe Animation tab allows you to configure both an Enter and Exit animation for your Off Canvas, giving you a range of effects for the way it enters and leaves the page.

Enter Animation – Set the enter Off Canvas animation.. Choose between Slide, Bounce, or Fade.

Enter Animation Speed – Set the speed of animation. Choose between 0.1 to 5.

Exit Animation – Set the exit Off Canvas animation. Choose between Slide, Bounce, or Fade.

Exit Animation Speed – Set the speed of animation. Choose between 0.1 to 5.
View The Options Screen,Conditions Tab (Activation)When an Off Canvas is created, they are not active by default. They are essentially in a draft state, so you can decide when, where and how they are activated. This is achived on the Conditions tab. Simply setting the Enable Conditions option to Yes makes the off Canvas live and global, i.e. displayed on every page. You can also click on Manage Conditions to open the Conditions dialog, where you can specify exactly what parts of your site you want your Off Canvas to be active for.

Enable Conditions – Set conditions for displaying Off Canvas. NOTE: Off Canvas won』t be displayed at all, when this is turned off.

Conditions – Load Off Canvas on these pages. Default is 『Display on Entire Site』. Click Manage Conditions to open the Conditions dialog.
View The Options Screen,Triggers TabTriggers are managed on the Triggers Tab, and here you can set a range of automatic triggers like On Page Load, Time On Page, On Scoll etc. There is also an option to set an Element Selector for manual triggering of your Off Canvas from a button or other trigger.
Outside of this tab, there are also a couple more ways to trigger an Off Canvas. The first one of these is through the use of an Avada Special Menu Item. By adding the Off Canvas Toggle Special menu Item to a menu, you can add a menu link to toggle a specified Off Canvas. See the Avada Special Menu Items doc for more information on this method.
The other way to trigger an Off Canvas is through the use of Dynamic Content. For example, you could add a Button with dynamic content as the Button URL. There are three dynamic content options to use: Toggle Off Canvas, Open Off Canvas, and Close Off Canvas. With these three methods, you have great diversity with how to trigger your off canvas creations. Go wild!

On Page Load – Display Off Canvas on page load.

Time On Page – Display Off Canvas after visitor spend a specific amount of time on the page in seconds.

Time On Page Duration (Seconds) – Set the time in seconds to display the Off Canvas ex: 5. (Only when above option is set to Yes)

On Scroll – Display Off Canvas if the visitor has scrolled up or down to a specific position or element.

Scroll Direction – Up or Down. (Only when above option is set to Yes)

On Click – Display Off Canvas if visitor clicks on the element.

Element Selector – Insert element CSS selector like class or ID ex: .element-class, #element-ID. (Only when above option is set to Yes)

Exit Intent – Display Off Canvas when visitor intends to close or leave the page.

After Inactivity – Display Off Canvas if visitor is inactive for a specific amount of time in seconds.

Inactivity Duration (Seconds) – Set the time in seconds to display the Off Canvas ex: 30. (Only when above option is set to Yes)
View The Options Screen,Rules TabThe Rules Tab allows you to configure rules around the display of your Off Canvas. These include showing the Off Canvas first after a specified number of page views, sessions or minutes, or even when your users are coming from a certain page, or exiting to a certain page. Combined with the Conditions, and the the Triggers, this gives you a very powerful system for controlling the display of your Off Canvases.

Show After x Page views – Display Off Canvas after visitor views a specific number of pages.

Number of Page Views – Set the number of page views to display the Off Canvas ex: 3. (Only when the above option is set to Yes)

Show After x Sessions – Display Off Canvas after a specific number of sessions.

Number of Sessions – Set the number of visiting sessions to display the Off Canvas ex: 3. (Only when the above option is set to Yes)

Show Up To x Times – Display Off Canvas for a specific number times.

Number of Times – Set the Off Canvas display count ex: 3. (Only when the above option is set to Yes)

Show When Arriving From – Select or leave Blank for all.

Users – Display Off Canvas for all users, logged in users, a specific users roles or logged out users.

Device – Display Off Canvas for all devices or a specific devices. Leave Blank for all.
View The Options Screen,Custom CSS TabIf you need even more control, there is a Custom CSS tab, which you can use to apply custom css for the specific Off Canvas.

CSS Code – Enter your CSS code in the field below. Do not include any tags or HTML in the field. Custom CSS entered here will override the theme CSS. In some cases, the !important tag may be needed. Don』t URL encode image or svg paths. Contents of this field will be auto encoded.
View The Options Screen,Import / Export TabFinally, like any Page Option Set, you can Import or Export your Off Canvas options, for reuse on other Off Canvases.

Import Page Options – Import Page Options. You can import via file or copy and paste from JSON data.

Export Page Options – Export your Page Options. You can either export as a file or copy the data.
View The Options Screen,The Avada Off Canvas Builder negates the need for any popup builder plugin, as well as allowing you to add a wide range of sliding bars. The flexibility this tool affords means that it is limited only by your imagination. What Off Canvas are you going to build?

Using The Mega Menu

Avada has a built-in mega menu that can be enabled on every First Level menu item in the Appearance > Menus tab. It can have 1-6 columns, span the full site width, have custom column width settings, display widgets, have icons or images next to menu items and more. Please see below for information on how to set the mega menu up. If you need information on how to create a regular menu, please read our Setting Up The Menu article here.
To see how to build a simple Mega Menu in Avada, please see the 『 How To Use Mega Menus In Avada』 video directly below, or to see how the Mega Menu was configured for the University demo, as shown above, see the video below that, 『How To Configure Menus in Avada』.
How To Create A Mega MenuStep 1 – Navigate to the Appearance > Menus section on your WordPress sidebar and select the 『Create A New Menu』 link to create a new menu, or edit an existing one.
Step 2 – Choose the first level menu item that you wish to open a mega menu with. To enable the Fusion Mega Menu, click the Avada Menu Options button on your chosen menu item, which will launch the Avada menu settings window.
NOTE: Only first level menu items have the Fusion Mega Menu option.
Step 3 – Enable Fusion Mega Menu (image directly after these steps). For the mega menu to show, the enabled first level menu item must have sub-menu items.
Step 4. Check the 『Full Width Mega Menu』 option if you want your mega menu to span the full site width as set in Avada > Theme Options > Layout > Site Width. Further width options can be found in the Fusion Theme Options under Menu > Mega Menu. You can find more information on the Mega Menu』s various width settings here.
Step 5 – Set the 『Mega Menu Number of Columns』 option that will determine how many columns will be displayed. Auto is the default setting, and this will auto detect how many sub menu items you have, but you can also manually control this. For example, if you had 6 sub menu items, you could choose 3 Columns here, which would then create two rows with 3 columns in each.
Step 6 – Each menu item can have a Font Awesome icon, or a custom image thumbnail along with the menu text. There are two separate options where you can select your icon or upload your custom image.
Step 7 – Second Level menu items will display as a title for columns. To add a Second Level item inside the Mega Menu, select a link on the left hand side of your Menu page, and click the 『Add to Menu』 button. To make it a Second Level menu item, drag the menu item below and to the right of the First Level menu item.
Step 8 – The Third Level menu items will be the smaller menu items in each column. To add a Third Level menu item, repeat step 5 above and drag and drop the new menu item below and to the right of the Second Level menu item.
Step 9 – Second & Third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create Widget Areas and how to add Widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 dropdown field. This option is only available when the Fusion Mega Menu option is enabled for the Parent menu item.
Step 10 – After setting up your menu, scroll down to the bottom of the page to the Menu Settings section. Check the 『Main Navigation』 checkbox to assign your new menu as the main navigation. Please reference the image below for more details. Only the Main Navigation will display the Mega Menu.
Step 11 – Once finished, click the 「Save Menu」 button to save your changes made to the menu.
Mega Menu Interface Overview

Setting Up A Menu

Menus are initially created in Appearance > Menus from the WordPress dashboard. They can then be assigned to certain areas within your website, and will display according to your chosen Header layout.
Alternatively, with Avada 7 and up, you can now create fully Custom Headers using Layouts, and assign your menus using the Menu Element. The remainder of this document looks at how you create, assign and set up a menu using the Global Options, but for more information on Custom Headers, check out Introducing Avada Layouts, How To Build A Custom Header, How To Use The Menu Element video, and the Menu Element doc.,OverviewHow To Setup A New Menu
Assigning A Menu
How To Setup Different Menus On A Per Page BasisUseful Videos,How To Setup A New MenuStep 1 – Navigate to the Appearance > Menus section of your admin sidebar.
Step 2 – Click the Create A New Menu link and enter the desired menu name. To save the menu name, click the Create Menu button.
Step 3 – To add a menu item, select one of your created pages on the left hand side and click the Add to Menu button. You can also add all kinds of different content from the left side.
Step 4 – To add a custom menu item, click the 「Custom Links」 menu item bar, then enter a custom name and URL into the respective text fields and click 「Add to Menu.」
Step 5 – You can further customize the individual Menu Items, but clicking on the Avada Menu Options button on each item.
Step 6 – Manage your menus by using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of the menu item above it and it will lock into place. That will set the menu item as child item and will automatically appear as a dropdown menu item.
Step 7 – After setting up your menu, scroll down to the bottom of the page to assign the menu to one of the 5 locations in the Theme Locations box.
Step 8 – Once its all done, make sure you click the Save button.
Here is a screenshot that shows you the various areas and descriptions of the menu section described above.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Assigning A MenuThere are 5 areas where you can assign a menu in Avada. These are: Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages and Sticky Header Navigation. Each of these menu locations can have a custom menu assigned to them. Once a menu is created and assigned to the location, it will be used on the front end for those specified areas.
Main Navigation – This is the Main Menu that shows in the Header area.Top Navigation – This is the top Secondary Menu that can be assigned with headers 2-5.
Mobile Navigation – This is the menu that will be used when viewing on mobile devices. If no menu is chosen, then the desktop menu will appear on mobile views.

404 Useful Pages – This is the Menu that will be used in the 「Helpful Links」 area on the default 404 page, as seen here, and the Search Results Not Found page.
Sticky Header Navigation – You can use this optionally if you want to assign a different menu to the Sticky Header. The Main Menu will be used by defaultMenu Global OptionsWhen assigning Menus, Avada also offers several theme options to help customize the menu. They are located in the Avada > Options > Menu tab. From there, the Global Options will be organized under more specific areas. (e.g. Main Menu, Mobile Menu, Secondary top menu just to name a few). When styling your various menu locations, the settings will be here. For detailed screenshots of the various menu options, see the Menu Section of the Avada Global Options Page.,How To Setup Different Menus On A Per Page BasisSometimes more than one menu is needed for a complex site. There are several reasons for this. A likely case is, when you want to have a one page site with a parallax scrolling menu as a landing page, but also a full site at the same time (see Setting Up A One Page Site for further information). Since the one page site part uses menu anchors for scrolling it will need a different menu than the rest of the site, that will use normal links.
But regardless of why you need multiple menus, with Avada, it』s very easy to achieve. If there is one menu you want mostly on the site, you could assign that in the usual way, as shown above. And then for any pages you want a new menu, just create the alternate menu, go the page, and on the Page Options, select the alternate Menu in the Main Navigation Menu option, as seen below.,Useful VideosSee the How To Create and Assign Menus In Avada video below to get a basic idea of menu creation. In the following video, How To Configure Menus in Avada, we use the Avada University website as an example of how to use both Global Options and Avada Menu Options to configure the menu.

One Page Menu with Multi-Page Links

When creating a menu for a website that has anchor links as well as normal links to other pages, you may find that your menu items with anchor links may not work or behave as expected. If you』d like to know more about why this is and how to properly create a menu with a combination of absolute and relative links, please continue reading our detailed guide below.
IMPORTANT NOTE – Please note that anchor links won』t work with the Header Layout #6 that comes with Avada version 4.0.Absolute Vs. Relative LinksTo fully understand the process of of creating a menu with anchor links and normal links, we first need to understand the difference between absolute links and relative links. Please continue reading below for a brief description of each type of links and how they work.
Absolute LinksAn absolute link contains your full site URL. For example, http://www.theme-fusion.com or http://www.theme-fusion.com/about#team. As you can see from the second example, an absolute link may also contain an anchor that is located on another page. Unlike a relative link, using an absolute link as a menu item to point to an anchor on another page will always work, regardless of which page on the website you』re currently on.
Relative LinksRelative links are links which are local or relative to only a specific page. Meaning, the browser will have to be on that page for the link to navigate to the desired location. For example, if the About page contains an Avada Menu Anchor element or an element with the ID team, then a menu item that has the #team relative link as the menu item』s URL, that menu item will only work on the About page.
Creating A Multi-Page MenuThe proper way to create a menu that has both relative and absolute links would be to create two separate menus. One menu to act as your Main Menu, and one menu specifically tailored for the page that contains the anchor links. You』ll then assign your main menu normally, and the specific menu to the corresponding page using Fusion Page Options. Below is a detailed guide on creating both menus.
How To Create Your Main MenuStep 1 – Go to the Appearance > Menus tab and create a new menu.
Step 2 – Build your menu as you normally would. For the links that you』d like to point to an anchor on a specific page, insert a 『Custom Link』 and use the absolute link of the anchor. For example, if the anchor you』d like to point to is on the About page, then your URL will look like this: http://www.website.com/about#team
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective absolute links.
Step 4 – Set this menu as your Main Navigation by checking the 『Main Navigation』 checkbox under Menu Settings.
Step 5 – Save all your changes by clicking the 『Save Menu』 button.
How To Create Your Specific MenuStep 1 – Go to the Appearance > Menus tab and create a new menu. Give it a unique name. For example, About Page Menu. For a visual guide of the steps, click here.
Step 2 – Build your specific menu identical to your main menu. This time, instead of putting absolute links in the menu items that point to an anchor on another page, you』ll insert their relative link. For example, if the absolute link is http://www.website.com/about#team, then you』ll replace it with just #team as seen in in example image.
Step 3 – Keep repeating Step 2 until all your menu items that point to an anchor on another page all contain their respective relative links.
Step 4 – Save all your changes by clicking the 『Save Menu』 button.
Step 5 – Navigate to the specific page that contains the anchor links.
Step 6 – Go to Fusion Page Options > Header and select your specific menu from the dropdown on the Main Navigation Menu option.
Step 7 – Save all your changes by clicking 『Save Draft』 or 『Publish』.
Why Create A Multi-Page Menu This Way?Creating two menus is the proper way to create a multi-page menu because it』s the best way to display relative links. If you only use one menu and only use relative anchor links for your menu items, then those menu items will not work unless you』re in the specific page where those anchors are found. This is because WordPress just appends the anchor to the current URL.
On the other hand, If you only use absolute links, then all your menu items containing the anchor links will all be highlighted when you』re in the specific page where those anchors are found. This is because as far as WordPress is concerned, you』re already on that anchor because you』re on the specific page they』re located.

Mobile Menu Settings

With Avada theme being responsive and mobile-friendly, this includes a mobile responsive menu as well. Having a Mobile Menu makes it easier for the users to navigate your website on devices with smaller screen size, especially if you have a lot of pages/menu items. Avada has specific section in Theme Options to help you customize your Mobile Menu with ease. Continue reading below to know more about customizing and setting up Mobile Menu.
Mobile Menu OptionsNavigate to Avada > Theme Options > Menu > Mobile Menu section and you will see the available options for Mobile Menu.
IMPORTANT NOTE: Mobile Menu Search Icon/Field and Mobile Header Background Color are the only options available for your Header Layout #6, the other options are only available when using Header Layouts #1-5 or 7. The rest of the options for Header #6 are on the Flyout Menu and Main Menu tab.Mobile Menu Design Style – Illustrated as A. Controls the design of the mobile menu. Choose between Classic, Modern, or Flyout. Flyout design style only allows parent level menu items. Note: When you select Flyout design, only a few options will be available. You can find other options for Flyout in the Flyout Menu section.
Mobile Menu Icons Top Margin – Illustrated as B. Controls the top margin for the icons in Modern and flyout menu design. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Item Height – Illustrated as C. Controls the height of each dropdown menu item. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Slide Outs – Illustrated as D. Turn on to allow dropdown sections to slide out when tapped.
Display Mobile Menu Search Icon/Field – Illustrated as E. Turn on to display the search icon/field in the mobile menu.
Mobile Menu Sub-Menu Indicator – Illustrated as F. Turn on to display the mobile menu sub-menu indicator: 「-「.
Mobile Header Background Color – Illustrated as G. Controls the background color of the header on mobile devices.
Mobile Archive Header Background Color – Illustrated as H. Controls the background color of the archive page header on mobile devices.
Mobile Menu Background Color – Illustrated as I. Controls the background color of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Background Hover Color – Illustrated as J. Controls the background hover color of the mobile menu dropdown.
Mobile Menu Border Color – Illustrated as K. Controls the border and divider colors of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Toggle Color – Illustrated as L. Controls the color of the mobile menu toggle icon.
Font Family – Illustrated as M. Controls the font family to be used.
Backup Font Family – Illustrated as N. Controls the backup font family to be used in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as O. Controls the font weight and style to be used.
Font Subsets – Illustrated as P. Controls the font subset to be used.
Font Size – Illustrated as Q. Controls the size of the text on display.
Line Height – Illustrated as R. Controls the spacing between lines.
Letter Spacing – Illustrated as S. Controls the spacing between letters.
Font Color – Illustrated as T. Controls the color of the text.
Mobile Menu Hover Color – Illustrated as U. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.
Mobile Menu Text Align – Illustrated as V. Controls the mobile menu text alignment. Choose between Left, Center, or Right.
How to assign a Mobile MenuStep 1 – Navigate to Appearance > Menus section.
Step 2 – Click 『Manage Locations』 tab.
Step 3 – Select a menu from the dropdown for the Mobile Navigation area. If you do not have a menu, please create one. Check this to know more about setting up a new menu.
Step 4 – Don』t forget to click 『Save Changes』 button.

Mobile Menu Search

IMPORTANT NOTE: This option is only available in Avada version 5.6 or higher. The current version of Avada is, Avada 7.6 (Released on December 15th, 2021)Newly released for Avada 5.6 is the option to enable a search icon/field for your mobile menu regardless on which header type you choose.
Enable/Disable The Mobile Menu Search Icon/FieldStep 1 – Navigate to Avada > Theme Options > Menu > Mobile Menu. Options shown on this section will vary depending on your selected header type. Click here to know more about the Mobile Menu settings.
Step 2 – Look for 『Display Mobile Menu Search Icon/Field』 option and set this to ON.
Choosing A Header TypeCurrently, there are 7 header types to choose from in the Avada Theme Options.
Step 1 – Navigate to Avada > Theme Options > Header to access the header options.
Step 2 – Expand the Header Content section and select your desired Header type.
Main Header Setup Info