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

Avada Privacy Bar

A new feature for Avada 5.6 is a configurable privacy bar, adding to the Avada privacy tools to help you facilitate GDPR compliance.
This new feature is highly configurable, giving you everything that you need to keep your website visitors informed of any cookies, third part embeds and/or custom implementations that may affect their data privacy.
It will handle 3rd party embeds, tracking codes, and any custom cookie contents that you may require. The settings are found in Avada > Theme Options > Privacy tab. Enabling Privacy Bar option will give access to additional options that will help in customizing the privacy bar. Continue reading below to know more about the full options available in the Privacy tab.
OverviewPrivacy Bar Basic ExamplePrivacy Bar Configured ExampleConfiguring The Privacy BarPrivacy Bar Theme OptionsPrivacy Bar Basic ExampleBelow is what your website visitors will see by default when you enable the privacy bar. Basic wording added with the default location placement at the foot of the website.
Privacy Bar Configured ExampleThere are a range of Theme Options that will make it possible for you to personalize and style up your privacy bar, giving you the ability to inform your website visitors regarding data privacy and handling. There are styling options, layout options and content options. Below is an example of what a final result could look like:
Configuring The Privacy BarFor added flexibility, the privacy bar content areas will accept Avada Elements like buttons, font awesome icons, images etc. that will help you set up a professional and elegant notification for your website visitors. Adding Elements to text areas is now as easy as a right click on the Element and paste into the text area.
There are a range of styling and layout options. Leave it as a simple notification bar by setting Privacy Bar Settings to 『Off『, enabling this option will when clicked slide and out, displaying additional notification information for your visitors.
Privacy Bar Theme OptionsIMPORTANT NOTE: The options in this section will help to easier comply with data privacy regulations, like the European GDPR. When then 「Privacy Consent」 option is used, Avada will create a cookie with the name 「privacy_embeds」 on user clients browsing your site to manage and store user consent to load the different third party embeds and tracking scripts. You may want to add information about this cookie to your privacy page.

Desktop And Mobile Menu Typography

Manage your Main Menu Typography with ease with the updated options in Avada Theme Options. In Avada 5.3 and up, Main Menu Font Size and Main Menu Font Color options are now combined in the Menus Typography section. View the old setup here from lower versions. Continue reading below to learn more about the typography options for the Main Menu.,OverviewDesktop Main Menu TypographyMobile Main Menu Typography,Desktop Main Menu Typography OptionsFound under Avada > Theme Options > Menu > Main Menu > Main Menu Typography, you will find the following settings to customize the main menu for Desktop / Laptop / Tablet (anytime a mobile menu is not activated).
Font Family – Illustrated as A. Allows you to select a font family to be used. You can choose any font you prefer for the Main Menu, but the Sub Menu Font Family, however, will be the same as the Body Font Family.
Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.
Font Subsets – Illustrated as D. Allows you to select which subset to use.
Font Size – Illustrated as E. Allows you to set the size of the text on display.
Letter Spacing – Illustrated as F. Allows you to set the spacing between letters.
Font Color – Illustrated as G. Allows you to set the color of the text.
Font Hover Color – Illustrated as H. Allows you to set the hover color of the text.
Text Align – Illustrated as I. Allows you to set the alignment of text. Note: This option will only appear if you have selected Top Header 4 or 5, or side headers. Check these for more information about Top Header and Side Header positions.
Dropdown Font Color – Illustrated as J. Allows you to set the color of the drop-down text.
Dropdown Font Size – Illustrated as K. Allows you to set the size of the drop-down text.
Side Navigation Font Size – Illustrated as L. Allows you to set the size of the text when you are using the side navigation page template.
Note: Options I,J, and K are not visible for Header Layout 6. Click here for more information about Top Header position.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Mobile Main Menu Typography OptionsFound under Avada > Theme Options > Menu > Mobile Menu > Mobile Menu Typography, you will find the following settings to customize the main menu for phones and anytime a mobile menu is activated (tablets in portrait mode etc).
Font Family – Illustrated as A. Allows you to select a font family to be used.
Backup Font Family – Illustrated as B. Allows you to select a backup font family to use in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as C. Allows you to select a font weight and style to use.
Font Subsets – Illustrated as D. Allows you to select which subset to use.
Font Size – Illustrated as E. Allows you to set the size of the text on display.
Line Height – Illustrated as F. Allows you to set the spacing between lines.
Letter Spacing – Illustrated as G. Allows you to set the spacing between letters.
Font Color – Illustrated as H. Allows you to set the color of the text.
Typography Preview – Illustrated as I. This area gives you a preview of the typography based upon your selections.
Mobile Menu Hover Color – Illustrated as J. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.
Mobile Menu Text Align – Illustrated as K. Controls the mobile menu text alignment.

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?

Licensing For Stock Images & Videos Used In Avada Prebuilt Websites

The licensing for Avada does NOT include the images or videos used in the Prebuilt Websites or the Avada Studio content blocks. With Avada Studio, we have sourced the images used from free sources, but it is still the user』s responsibility to ensure that all images are being used according to their copyright status.
Avada Studio ContentFollow the link below to see an extensive list of the media resources used in Avada Studio. From here, you can check the copyright status and conditions of the specific images in question. Please note, the sources have dates next to them as image website listings can change, and this list will not be maintained/updated by us.
Avada Studio Resource List,Prebuilt WebsitesOur prebuiilt websites use a variety of both paid and free stock images and videos, and below we have a list of resources that can help you source either free or paid stock images for your site. Always make sure you read the details of each resource to fully understand the license it comes with.
General Stock PhotosShutterstock.com – PAIDPhotodune.com – PAIDUnSplash.com – FREEPexels.com – FREEPixabay.com – FREEFreeimages.red.com – FREEDribble.com – FREEKaboompics.com – FREEFreeimages.red.com – FREEPicJumbo.com – FREEPhotos.Oliur.com – FREEStocksnap.io – FREESplitshire.com – FREEStreetwill.co – FREEStock VideosShutterstock.com – PAIDVideohive.com – PAIDCoverr.co – FREEGraphics & MockupsGraphicriver.com – PAIDPixeden.com – FREE & PAID

Menu Settings

To make the most of your menus in WordPress when using Avada, you should be familiar with the various settings and options available when initially creating your menus, at Appearance > Menus, from the WordPress dashboard. These are a mixture of WordPress core menu functions, and third-party and Avada added settings. For an introduction to the core WordPress functionality of Menus, please see the WordPress.org Appearance > Menus Screen documentation.
There are many types of menu items that can be added to a menu. Some of these are core WordPress options, such as Pages, Posts, Custom Links & Categories. Others are added with third-party plugins, such as WooCommerce or The Events Calendar. Yet others are added by Avada, such as the Avada Special Menu Items and the Avada Menu Options.
There are also multiple levels of possible menu items; the Parent Level (or the First Level menu items) and any Child Levels (or sub-level menu items below the Parent Level menu item). There can be up to 4 child levels with Avada.
In each Menu item, you will also find the Avada Menu Options button. See the linked doc for a full rundown, but basically, you can use these options to configure your menu item』s appearance in your menu.
There are also five menu positions available with Avada – Main Navigation, Top Navigation, Mobile Navigation, 404 Useful Pages, and Sticky Header Navigation. See the Setting Up A Menu doc for more details on this, and other menu related items.
To read more about Mega Menus, please see our Using The Mega Menu document. Read below for more information on Menu Settings in Avada.
IMPORTANT NOTE: This post refers to the options located in the Appearance > Menus section of the WordPress admin. There are also additional Avada menu options in the Avada Theme Options panel.Parent Level Menu SettingsNavigation Label – Illustrated as A. Allows you to add a name to your menu item. In this way, you can change the display name of a menu item.
Title Attribute – Illustrated as B. This will specifies the value for the title attribute of the menu item. This text will only be displayed when a user』s mouse hovers over the menu item.
Link Target – Illustrated as C. Allows you to set the link target to _blank.
Description – Illustrated as D. You can add a description under the Menu item. See the Spa Demo Menu for an example of this.
Avada Options – Illustrated as E. This will open additional menu item settings which are proprietary to Avada. Click the button and you』ll gain access to the additional options listed below, in the next section.
Move – Illustrated as F. Allows you to easily move the menu item to various positions in the Menu Structure.
Original – Illustrated as G. Allows you to view the original page name, which the menu item links to.
Remove – Illustrated as H. Allows you to remove the menu item from the Menu Structure.
Cancel – Illustrated as I. Allows you to cancel or remove the changes made to the menu item and collapse the panel.
Custom Link URL Setting – Illustrated as J. The Custom Link menu item has the additional option of a URL setting. This setting allows you to add a custom link as a menu item.
Under the Screen Options at the top of the screen, there are several options you can turn on or off that will display on the Menu items, such as Link Target & Description.
Avada Menu Options SettingsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. 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」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.

How Background Images Work in Avada

We regularly get support tickets asking why a background image is cropped or zoomed in. So here』s some information on how background images work to help explain those situations when a background image doesn』t look like you expect it to.
It all starts with the concept of image aspect ratios. This is the relationship between the width and height of an image. So if an image is 1200px by 800px, it has a 3:2 aspect ratio, in that if its length were 3, its height would be 2.
In this document we will look at adding background images to container and then columns.,Container Background ImagesWhen you add a background image to a container, this is what happens. Images set as backgrounds on containers span to the height or width of the container while maintaining their aspect ratio; effectively, always filling the container. But containers by themselves have no height at all, so it』s the content (or padding) that determines their height, and the Site Width setting that determines the width (or the screen it』s being viewed on with the 100% width template).
ExampleLet』s take a simple example to illustrate. In the diagram below, the image is 1200px wide and 800px high. Let』s also say that the site width has been set to 1200px in the Layout > Site Width option, and that the container height is exactly 800px, either through content, or padding. In this case the image displays fully, at its native aspect ratio.
Now if the container height was increased to 1000px, either through content or padding, then the image will now display at 1000px height, and keeping its aspect ratio, 1500px in width. So here the image will be slightly zoomed in, and slightly cropped on both sides.
And here』s a real world example. The container below is completely empty (no column or elements) and has padding set to 200px in height. The image set as a background image is 1200px x 750px, and so grows slightly to the width of the site layout (in this case 1300px) and (on desktop at least) we can only see 200px of its height, in the middle of the image, as this image has a Background Position of Center Center.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,But on a mobile device, something else happens. The site goes into responsive mode, and because the width of the device is so much smaller, but the padding of 200px remains, we get an image that is 200px high and at that screen width, we are seeing almost the whole image again. This is just how responsive web design works.,100% Width TemplateThings are also a little different when you add a background image to a page with the 100% width template. Then, it』s the user』s screen size that comes into play. With a large resolution monitor, for example a 4K monitor, which has a resolution of 3840px x 2160px, then images might have to upscale considerably. It』s always a balance between image file size and pixel size, and so a typical approach is when uploading a container background image on a 100% width template, is to ensure the image is at least 2000px in width, so the upscaling is kept to a minimum.
ExampleHere』s a final illustration, showing an example of a container on a page using the 100% width template, on a large monitor. The image displays at the width of the screen resolution (minus any scroll bars etc) and the image will be cropped in height unless the container height equals the images』 native aspect ratio. So for an image with a 3:2 aspect ratio and sized at 2000px, the container height would need to be around 1333px for no cropping to occur. So in most situations, some cropping will occur, and the image will be zoomed in. If your image is very pixellated in a situation like this, it』s because the uploaded background image isn』t large enough to upscale on a large monitor without pixellation.,Column Background ImagesColumns are a bit different than containers. They grow to the size of the background image inserted. Below is the same image inserted as a column background, into an empty 1/1 column. The column adjusts its height to show the image in full. In this case, as the image is only 1200px wide and the site width is 1300px, the image is also slightly zoomed in.
If we resize the columns, then the image displays smaller, always showing the full image. However, if our column content increase past the aspect ratio of the image, then the height of the image will always fill the column, and the image will be cropped on the width to keep the image aspect ratio intact. See two examples of that below.
ExamplesOn the left hand side, the column has simply been resized to 1/2. The image remains full size, and is just scaled down to fit the 1/2 dimension. On the right hand side, however, content has been added that pushes the height of the column past where the apsect ratio of the image would make it. And so the height of the image is maintained, while the image is zoomed in on the sides, cropping the image, but keeping the aspect ratio intact.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam quam. Cras semper auctor neque vitae. Porta non pulvinar neque laoreet suspendisse. Elementum curabitur vitae nunc sed velit. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. Bibendum arcu vitae elementum curabitur vitae nunc. Eget nunc lobortis mattis aliquam faucibus. Volutpat commodo sed egestas egestas. Ut sem nulla pharetra diam sit amet nisl. Semper eget duis at tellus at urna. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Velit egestas dui id ornare arcu odio ut. Ut consequat semper viverra nam libero justo laoreet.,Hopefully, this article goes some way towards explaining how images work as Container and Column backgrounds. There are a lot of scenarios we haven』t covered here, but the principles are the same. Web design can be complex, but with an understanding of the principles at play around the theme and how it interacts with images, then you can achieve a satisfying result every time.

Avada WooCommerce Options

Avada has a range of global options you can configure for use with WooCommerce. The main WooCommerce global options are located under Avada > Options > WooCommerce, and there are some secondary WooCommerce options as under the Sidebar section.
IMPORTANT NOTE
The WooCommerce Options are only visible inside of the Avada Global Options when the plugin is activated. This eliminates irrelevant options for your current setup if not in use.OverviewWooCommerce > General Woocommerce OptionsWooCommerce > Woocommerce Styling OptionsSidebars > Woocommerce ProductsSidebars > Woocommerce ArchivesAvada General WooCommerce OptionsWooCommerce Number of Products Per Page – Allows you to set the number of products per page. (1-50/page)
WooCommerce Number of Product Columns – Allows you to set the number of columns for the main shop page. (1-6 columns)
WooCommerce Related/Up-Sell/Cross-Sell Product Number of Columns – Allows you to set the number of columns for the related products, up-sell products on single posts and cross-sells on cart page. (1-6 columns)
WooCommerce Archive Number of Product Columns – Allows you to set the number of columns for the archive pages. (1-6 columns)
Column Spacing – Controls the column spacing between products on WooCommerce product archives. In pixels.
WooCommerce Product Images Layout – Set the layout for your product images. Choose from Avada or WooCommerce.
WooCommerce Product Images Zoom – Allows you to enable or disable the WooCommerce zoom feature which was added to WooCommerce V3.0 and supported in Avada 5.1+. See this post for more information.
WooCommerce Product Images Width – Controls the width of the single product page image gallery. For the image gallery zoom feature to work, the images you upload must be larger than the gallery size you select for this option. IMPORTANT NOTE: When this option is changed, you may need to adjust the Single Product Image size setting in WooCommerce Settings to make sure that one is larger and also regenerate thumbnails. See this post for more information. Enter value including any valid CSS unit, ex: 500px.
WooCommerce Product Images Thumbnail Width – Controls the natural image width of product page image gallery thumbnails. IMPORTANT NOTE: When this option is changed, you need to make sure to regenerate thumbnails. See this post for more information. In pixels.
WooCommerce Product Images Thumbnail Position – Set the position of the product page image gallery thumbnails with respect to the main gallery images. Choose from Top, Right, Bottom, or Left.
WooCommerce Product Images Thumbnail Column Width – Controls the width of the left/right column of product images thumbnails as a percentage of the full gallery width.
WooCommerce Product Images Thumbnails Columns – Controls the number of columns of the single product page image gallery thumbnails. In order to avoid blurry thumbnails, make sure the 「WooCommerce Product Images Thumbnails Width」 option above is large enough. It has to be at least 「WooCommerce Product Images Width」 option divided by this number of columns. In pixels.
WooCommerce Product Quick View – Turn on to enable product quick view for products.
WooCommerce Product Variation Swatches – Turn on to enable color, button and image variation types.
WooCommerce Shop Page Ordering Boxes – Allows you to turn the shop page ordering boxes On or Off.
WooCommerce Shop Page Crossfade Image Effect – Allows you to turn the crossfade effect on product images on the shop page On or Off.
WooCommerce One Page Checkout – Allows you to turn the one page checkout template On or Off.
WooCommerce Order Notes on Checkout – Allows you to turn the order notes on the checkout page On or Off.
Woocommerce My Account Link in Main Menu – Allows you to turn the 「My Account」 link in the main menu On or Off. Not compatible with Ubermenu.
WooCommerce Cart Icon In Main Menu – Allows you to turn the cart icon in the main menu On or Off. Not compatible with Ubermenu.
WooCommerce Menu Cart Icon Counter – Allows you to turn the WooCommerce cart counter circle On or Off.
Woocommerce My Account Link in Secondary Menu – Allows you to turn the 「My Account」 link in the secondary menu On or Off. Not compatible with Ubermenu.
WooCommerce Cart Icon In Secondary Menu – Allows you to turn the cart icon in the secondary menu On or Off. Not compatible with Ubermenu.
WooCommerce Social Icons – Allows you to turn the social icons on single product posts On or Off.
WooCommerce Product Grid / List View – Allows you to turn the grid/list toggle on the main and archive shop pages On or Off.
WooCommerce Product Default View – Allows you to set the grid/list view on the main and archive shop pages On or Off.
WooCommerce Account Area Message 1 – Allows you to insert custom text that will appear in the 1st message box on the account page.
WooCommerce Account Area Message 2 – Allows you to insert custom text that will appear in the 2nd message box on the account page.
View The Options ScreenAvada WooCommerce Styling OptionsWooCommerce Product Box Design – Allows you to Control the design of the product boxes. Choose from Classic or Clean.
WooCommerce Product Box Content Padding – Controls the top/right/bottom/left padding of the products contents. Enter values including any valid CSS unit, ex: 20px, 15px, 15px, 15px.
100% Width Page – Allows you to set the single product post to 100% Width. On or Off.
Equal Heights – Allows you to set equal heights for shop and product archive pages. On or Off.
WooCommerce Tab Design – Allows you to control the design of the single product post tabs. Choose from these options: Horizontal Tabs or Vertical Tabs.
WooCommerce Quantity Input Size – Controls the width and height of the quantity input field. Enter values including any valid CSS unit, ex: 38px, 36px.
WooCommerce Quantity Font Size – Controls the font size of the quantity input field. Enter value including any valid CSS unit, ex: 14px.
WooCommerce Quantity Box Background Color – Allows you to control the background color of the WooCommerce quantity box.
WooCommerce Quantity Box Hover Background Color – Allows you to control the hover color of the WooCommerce quantity box.
WooCommerce Order Dropdown Background Color – Allows you to control the background color of the WooCommerce cart dropdown.
WooCommerce Order Dropdown Text Color – Allows you to control the color of the text and icons in the WooCommerce cart dropdown.
WooCommerce Order Dropdown Border Color – Allows you to control the border color in the WooCommerce cart dropdown.
WooCommerce Cart Menu Background Color – Allows you to control the bottom section background color of the WooCommerce cart dropdown.
WooCommerce Icon Font Size – Allows you to control the font size of the WooCommerce icons. Enter a value including CSS unit (px, em, rem), example: 12px.
WooCommerce Sale Badge Shape – Controls the shape of the sale badge. Choose from Rectangle, or Circle.
WooCommerce Sale Badge Background Color – Controls the background color of the WooCommerce sale badge.
WooCommerce Sale Badge Text Color – Controls the text color of the WooCommerce sale badge.
WooCommerce Sale Badge Text Size – Controls the font size of the WooCommerce sale badge text. Enter value including any valid CSS unit, ex: 15px.
WooCommerce Sale Badge Border Size – Controls the border size of the sale badge. Enter values including any valid CSS unit, ex: 0px, 0px, 0px, 0px.
WooCommerce Sale Badge Border Color – Controls the border color of the sale badge.
WooCommerce Sale Badge Text – [percentage] and [value] placeholders can be used to display product discount as percentage or as a value, ex: [percentage] Off!
View The Options Screen,Sidebars > WooCommerce ProductsGlobal WooCommerce Product Sidebar 1 – Select sidebar 1 that will display on all WooCommerce products.
Global WooCommerce Product Sidebar 2 – Select sidebar 2 that will display on all WooCommerce products. Sidebar 2 can only be used if sidebar 1 is selected.
Force Global Sidebars For WooCommerce Products – Turn on if you want to use the same sidebars on all WooCommerce products. This option overrides the WooCommerce post options.
Global WooCommerce Sidebar Position – Controls the position of sidebar 1 for all WooCommerce products and archive pages. If sidebar 2 is selected, it will display on the opposite side.
View The Options ScreenSidebars > WooCommerce ArchivesWooCommerce Archive Sidebar 1 – Select sidebar 1 that will display on the WooCommerce archive pages.
WooCommerce Archive Sidebar 2 – Select sidebar 2 that will display on the WooCommerce archive pages. Sidebar 2 can only be used if sidebar 1 is selected.
View The Options Screen

Flyout Menu

The Avada Flyout menu type is a full screen menu which overlays the main page content, activated by clicking a link/icon in the header area, as you can see in the screenshot below, or on the Avada Adventure prebuilt website.,The Flyout Menu is only available when using Header 6 in the Top Header position, or with the Mobile (Responsive) Menu. It』s automatic with Header 6, but with the Mobile Menu, you have to select Flyout in the Global Options: Avada > Options > Menu > Mobile Menu > Mobile Menu Design Style. Detailed information regarding the various Avada header layouts to choose from is available here.
IMPORTANT NOTE: Any Child Level menu items will not be displayed on the Flyout menu. Mega Menu features are also disabled on this layout.It』s also possible to create a Flyout Menu when building your header in Avada Layouts. Please see How To Create Flyout Menus in Avada Layouts for more details on that.,Flyout Menu Global OptionsFlyout Menu options are found in two places. The main one is found at Avada > Options > Menu > Flyout Menu, while relevant Mobile Menu options for the Flyout Menu are found at Avada > Options > Menu > Mobile Menu when Flyout is selected.
Let』s look at the Flyout Menu Global Options.
Flyout Menu Icon Font Size – Controls the font size for the flyout menu icons. Enter value including any valid CSS unit, ex: 20px.
Flyout Menu Icon Padding – This controls the right padding (left on RTL sites) for flyout menu icons.
Flyout Menu Icon Color – This controls the color of the flyout menu icons.
Flyout Menu Icon Hover Color – Controls the hover color of the flyout menu icons.
Flyout Menu Background Color – Here you can control both the color and the opacity of the flyout menu background.
Flyout Menu Direction – Here you can control the direction the flyout menu comes from. Choose from Fade, Left, Right, Bottom, or Top.
Flyout Menu Item Padding – This is a new option in Avada 5.8. Here you can control the padding between the flyout menu items.

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.

Using SVG in Avada

Scalable Vector Graphics (SVG) files can be selected and used in Avada as regular images, logos, icons, and more. SVG files are scalable, usually much smaller in file size, and can also be animated using CSS. For more information on SVG files, please follow this link.
IMPORTANT NOTE: Please keep in mind that for SVG to work properly in the Logo and other Global Option areas, you will have to set the width and height dimensions in the file itself, before you upload it. If there are no dimensions set on the SVG itself, then it will not appear.For use in content areas, if you prefer, you can use CSS to size any SVGs.
Please see below for the various aspects of SVG creation and usage.
Creating an SVG Logo with Adobe IllustratorStep 1: Open Adobe Illustrator & Create a New Project
To create an SVG file, we need to use a program that can create and manipulate vector artwork. The industry standard for this is Adobe Illustrator.
Step 2: Create Your Icon or Artwork
On your new project canvas in Adobe Illustrator, create your desired artwork or icon, then resize the artboard to fit the size of your icon/artwork or resize your icon/artwork to fit the size of your artboard, either one is fine. Ensure the artboard is slightly larger on all sides than your icon/artwork.
Step 3: Create Artwork Outlines
The next step is to create outlines of your artwork. To do this, with your icon/artwork highlighted drag a rectangle around your entire canvas, right click, and click on Create Outlines.
Step 4: Combine Your Outlines Into A Single Shape
The next step is to combine your outlines into a single shape, you can do this by navigating to the Pathfinder window in Adobe Illustrator, with all of your outlines selected (you can use the same method as Step 3, drag a rectangle around it all with your mouse), click on the 「Combine Shapes」 Shape mode in the pathfinder window. Under the Shape Modes: Heading it』s the first icon on the left.
Step 5: Save / Export As SVG
Finally, now your artwork is created, sized, outlined and combined, you can export it as a Scalable Vector Graphic (SVG). Depending on your version of Illustrator, the saving method will be different. For Adobe Illustrator CC, choose File > Export > SVG (read more at Adobe』s Support Site). In previous versions of Adobe Illustrator, navigate to File > Save As and select SVG. Note: You can save with all of the default settings.
Resizing an SVG file in the codeStep 1: Open the SVG file in a text editor
An SVG file is just code. Open the file in your chosen text editor.
Step 2: Locate and edit the dimensions
Towards the top of the code, you will see the pixel dimensions to display the svg at. Change these to your desired size, remembering to keep the aspect ratio the same as the original file.
Step 3: Save your file
Step 4: Upload your file
Now you can upload the svg directly into your media library, and use the file path from there.
Adding an SVG via the Code Block ElementStep 1: Accessing the SVG Code
Take your .SVG file and open it up in your preferred code editor. This will show you all of the code that makes up your SVG.
Step 2: Adding the SVG Code to your Avada Website
Select all of the code from your code editor, copy it and then paste it into a Code Block element on your Avada website. Save the Element.
Step 3: All done!
The SVG you created is now visible on your website wherever you』d like it to be thanks to the Avada Code Block element. No uploading of files is required for this method. It』s what』s known as an inline SVG.
Styling an SVG with CSSSVGs are just like any other element, and can be styled just like any other HTML element.
For example, this is a 50px black circle:
Copy to Clipboard

12 3 4 5If you add a class to the svg tag, you can then target the class and write CSS to do whatever you want with it:
Copy to Clipboard.my-custom-icon {
width: 150px;
height: 150px;
}
.my-custom-icon circle {
fill: #c00;
}7 1.my-custom-icon {2 width: 150px;3 height: 150px;4}5.my-custom-icon circle {6 fill: #c00;7}And just like other HTML elements, you can write your CSS inline, so instead of you can define dimension like:
Copy to Clipboard

3 12 3