Avada 文档

Modal Element

The Modal Element can be used to display additional content via a popup window on a page. Modal boxes are hidden by default and can only be triggered by a Menu item, a button element or a modal text / HTML link element, which can be either text or an image. Any of our other elements can be used inside it, so you can organize your content however you prefer.
This Button Opens A Modal Window!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How To Create A ModalStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Modal Element and click it to open the Options window. You can insert the Modal element anywhere on your page.
Step 3 – In the 『Name of Modal』 field, enter a unique identifier for your modal. For example, popup. Keep in mind that this same unique identifier will be used in your modal trigger which will be explained below.
IMPORTANT NOTE: Remember to keep your identifier unique. Do not use generic identifiers like video, image, footer, header etc. Generic names may be used as class names within the theme, thereby conflicting and causing the modal popup to not work.Step 4 – Once done, click the Save button to insert it into the page.
Step 5 – After setting up the Modal element, you then have to then setup a Modal Trigger (button, text link or image) with the same matching unique identifier you added to the 『Name of Modal』 field. See the section below for more instructions.
How To Create A Modal Button TriggerStep 1 – Add a Container to the page and choose a column layout.
Step 2 – Click the 『+ Element』 button on the column to open the Elements window. Locate the Button Element and click it to open the Options window.
Step 3 – Locate the 『Modal Window Anchor』 field. Enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – Once done, click the 『Save』 button. You can now view the modal on the front end of your site by clicking this button.
How To Create A Modal Text / HTML Link TriggerStep 1 – Add a Container to the page and select your desired column layout.
Step 2 – Click the 『+ Element』 button on the column to bring up the Elements window. Choose the Modal Text / HTML Link Element to open the Options window.
Step 3 – In the 『Name Of Modal』 field, enter the exact unique identifier you entered into the 『Name of Modal』 field in your Modal element. For example, popup.
Step 4 – In the 『Text or HTML Code』 field, enter the text or content that will trigger the modal when clicked. For example, 「Open this popup window for more details」. If you』d like to use an image, then enter the image tag. See below for an example.
Step 5 –  Once done, click 『Save』 to add the Modal Text Link Element into the page content.
Step 6 –  You can now view the modal on the front end of your site by clicking the text or image you inserted.
Step 7 –  Once done, click 『Insert』 to add the Modal Text Link Element into the WordPress Content Editor.
Step 8 –  Add the rest of your content as normal, then click 『Save』. You can now view the modal on the front end of your site by clicking this text or image.
Copy to Clipboard 1IMPORTANT NOTE – Aside from the Text Block element, you can add a Modal Text Link element to any element that has a WordPress Content Editor such as Titles, Toggles, Alert, Tabs etc.How to Launch a Modal From a Menu ItemYou can use a main menu item to launch your Modal as well. This is beneficial because it allows you to have a sitewide Modal with the same content on every page of your site. This could be used in a variety of ways, but one common method is to use it as a contact form Modal in conjunction with a Contact Form 7 shortcode.
Note: Since the Modal element needs to be on the same page as its trigger for it to work, you』ll need to be sure that your Modal Element shortcode is also added to a sitewide element. This most easily can be done by adding your Modal shortcode to a text widget in your footer. For information on generating raw shortcodes in Avada, please see our post here.
Step 1 – Navigate to the Appearance > Menus page in your WordPress admin. Edit the menu that you want to add your Modal menu item link to.
Step 2 – Add a 「Custom Link」 menu item to the menu and give it a name (the URL can just be 「#」).
Step 3 – Now, on your newly added menu item, click the 「Avada Options」 button to open the menu』s Avada settings.
Step 4 – Locate the 「Modal Window Anchor」 text field and add your Modal』s ID/Name which was added to the Modal element』s 「Name of Modal」 field. (If you』re using a Modal Shortcode, it will be the value added to the 「name」 attribute.)
Step 5 – Save the menu settings and check the frontend. If you』ve already created your Modal Element and added it to the page, it should now launch when your menu item is clicked.
NOTE: This will need to be added to a header menu item and won』t work from menu widgets.767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
IMPORTANT NOTE – You can have more than one modal on any given page, however each modal on the page must have a unique identifier. Modals added to different pages, in contrast can have the same identifier.
Name Of Modal – Allows you to set your Modal』s unique identifier. This is used for linking the Modal to a Modal Trigger.

Modal Heading – Allows you to set your Modal』s heading text.

Size of Modal – Allows you to set the size of your Modal.

Background Color – Allows you to set the background color of your Modal.

Border Color – Allows you to set the Modal border color.

Show Footer – Allows you to set if your Modal will show the footer with the close button or not.

Contents of Modal – Allows you to set your Modal』s content.

CSS Class – Allows you to add a class to the wrapping HTML element.

CSS ID – Allows you to add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Modal Element.,Useful Links & ResourcesAnchor ScrollingMenu Anchor ElementModal Text / HTML Link ElementOne Page Text Link ElementOne Page Menu with Multi-Page Links

Meta Element

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements. In this document, we are looking at the Meta Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element DEMO Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Meta ElementThe Meta Element is a specific single post / product layout element, designed to add customized meta information anywhere in a Content Layout Section, in any Single Post, Page, Portfolio or WooCommerce product Layout. Of course, you can also use the full range of Design Elements when building your Layout, and combine them with the Layout Section Elements.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Meta Element.
The Meta Element can be placed anywhere in you Layout Section, and displays a selection of Meta content, based on the options selected in the element, on pages based on the conditions set in the Layout. There are three tabs of options in the element, controlling functionality and design. See the options panels below for specific details on that.
But basically, you select which meta information to enable or disable, add your preferred Separator, and then choose your design options to customize how the meta information displays on the page. You can control Height, Font Size, and Text Colors. Where you place the Meta Element is up to you, but the convention is at the bottom of the Content itself.
See below, for an example of the Meta Element added to the Single Post Layout on the Avada Author Demo.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy most of the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General TabMeta Elements – Choose the order of meta elements. You can choose from Author, Published Date, Categories, Comments, Tags, Modified Date, Portfolio Skills, Product SKU, Word Count and Reading Time. Drag the ones you want to dispaly to the Enabled Column. Ones in the Disabled Column will not display.
Layout – Choose if meta items should be stacked and full width, or if they should be floated.

Separator – Controls the choice of separator between each meta item. Add any symbol you like.

Reading Time – Set the Average Words Read / Min.

Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Allows you to add a class for the Element.

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Alignment – Select the alignment of the Meta information. Choose from Start, Center, End, Between, Space Around, and Space Evenly. This is now a responsive option.

Vertical Alignment – Defines how the meta content should align vertically.

Horizontal Alignment – Defines how the meta content should align horizontally. Overrides what is set on the container.

Height – Controls the Meta section height. In pixels.

Text Font Size – Controls the font size for the meta text. Enter value including CSS unit (px, em, rem), ex: 10px Leave empty for default value.

Text Color – Controls the text color of the meta section text. Leave empty for default value.

Link Color – Controls the link color of the meta section text.

Link Hover Color – Controls the link color of the meta section text.

Background Color – Controls the background color of element wrapper.

Border Size – Controls the border size of the element wrapper. In pixels or percentage, ex: 10px or 10%.

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

Padding – In pixels or percentage, ex: 10px or 10%.

Margin – In pixels or percentage, ex: 10px or 10%.

Meta Item Background Color – Controls the background color of the meta item.

Meta Item Border Size – Controls the border size of the meta item. In pixels or percentage, ex: 10px or 10%

Meta Item Border Color – Controls the border color of the meta item.

Meta Item Padding – In pixels or percentage, ex: 10px or 10%.

Meta Item Margin – In pixels or percentage, ex: 10px or 10%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. Choose between 0.1 to 1.

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsLayout Elements do not have any Global Options.

Menu Element

The Menu Element was added to Avada in Avada 7.0, and this fully featured Element can be used both throughout your content, and in the construction of Header Layouts using Avada Layouts. Read on to find out more about this exciting new Element, or watch the video for a visual overview.,Toggle NavigationHOMEAVADAABOUT USPARTNERSSPECIAL AVADA HOSTINGWORDPRESS HOSTINGWORDPRESS CUSTOMIZATIONBLOGCONTACTSUPPORTGETTING STARTEDDOCUMENTATIONTUTORIAL VIDEOSSUBMIT A TICKETSYSTEM STATUSCOMMUNITY FORUMMY ACCOUNTSALE,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Menu ElementThe Menu Element allows you to place a menu anywhere on your site, including in a Header Layout in Avada Layouts.
Step 1. Create a new page, post, or Header Layout Section, or edit an existing one.
Step 2. Select the container and column you would like to place the menu into.
Step 3. Click on Add Menu, and select, or search for, the Menu Element.
Step 4. There are five tabs in the Menu Element. The first one, General, is where you select the Menu to display and make some basic configuration settings to do with functionality and alignment. The Main tab is where you configure your selected menu』s appearance and colors. The Submenu tab has its own configuration options for any submenus. The Mobile tab is where you configure your menu for mobile, and the Extras tab offers animation options that allow you to determine how the menu interacts with the loading of the page.
Step 5. Save the Element as per the method in the interface of the Fusion Builder you are working in.
Read How The Menu Element & Menu Work Together !767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Menu – Select the menu which you want to use. You must first create these in Appearances > Menu, from the WordPress Dashboard.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.

Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

Direction – Select if you want a horizontal or a vertical menu.

Margin – Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%.

Transition Time – The time it takes for submenus to expand and all other transitions on hover. In milliseconds.

Space Between Main Menu and Submenu – Controls the space between the main menu and dropdowns.

Menu Arrows – Choose if you want to show dropdown arrows on the main menu and submenus. Choose from Main, Main Active, and Submenus. You can select multiple options.

Arrow Size – Controls the width and height of the arrows. In px.

CSS Class – Add a class to the wrapping HTML element.

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenMain Tab
Minimum Height – The minimum height for the main menu. Use any valid CSS unit.

Sticky Minimum Height – The minimum height for main menu links. This is a dependent option that shows when the parent container is sticky. Use any valid CSS unit.

Align Items – Select how main menu navigation-items will be aligned. Defines the default behavior for how flex items are laid out along the cross axis on the current line (perpendicular to the main axis). Choose from Start, Center, End, and Stretch.

Justification – Select how main menu navigation-items will be justified. choose from Start, Center, End, Between, Space Around, or Space Evenly.

Main Menu Typography

Font Family – Controls the font family of the menu items. Leave empty to use the site default.

Font Size – The font size for main menu links. Use any valid CSS unit.

Letter Spacing – Controls the letter spacing of the main menu items. Enter value including any valid CSS unit, ex: 2px. Leave empty to use the site default.

Text Transform – Select how the text is displayed. Choose from Normal or Uppercase.

Main Menu Item Text Align – Select if main menu items should be aligned to the left, right or centered. (Centered works well with Vertical Menus). Choose from Flex Start, Center, Flex End, or Space Between.

Main Menu Item Padding – Select the padding for navigation items. Enter values including any valid CSS unit, ex: 10px or 10%.

Main Menu Item Spacing – The gap between main menu items. Use any valid CSS value, including its unit (10px, 4%, 1em etc).

Main Menu Item Border Radius – Enter values including any valid CSS unit, ex: 10px.

Main Menu Hover Transition – Select the animation type when hovering the main menu items. This animation is applied to the background-color and borders. Choose from Bottom, Center Horizontal, Center Grow, Center Vertical, Fade, Left, Right, or Top.

Main Menu Icon Position – Controls the main menu icon position. Choose from Top, Right, Bottom, or Left.

Main Menu Icon Size – Controls the size of the main menu icons.

Mega Menu Thumbnail Size – Controls the width and height of the main menu mega-menu thumbnails. Use 「auto」 for automatic resizing if you added either width or height.

Mega Menu Title Justification – Select how mega menu titles will be justified.

Main Menu Item Styling – Use filters to see specific type of content.

Regular Options

Main Menu Item Background Color – Controls the background color for navigation links.

Main Menu Item Link Color – Controls the color for main menu navigation links.

Main Menu Item Border-Size – Select the top, bottom, left & right border-widths for navigation items. Enter values including any valid CSS unit, ex: 10px.

Main Menu Item Border Color – Controls the border-color for non-hover & non-active navigation links.

Main Menu Item Icon Color – Controls the color of the icon.

Hover/Active Options

Main Menu Item Hover Background Color – Controls the background color for menu item hover and active states.

Main Menu Item Hover Color – Controls the color for active items on navigation links.

Main Menu Item Hover Border-Size – Select the top, bottom, left & right border-widths for active/hover navigation items. Enter values including any valid CSS unit, ex: 10px.

Main Menu Item Hover Border Color – Controls the border-color for hover & active navigation links.

Main Menu Item Icon Hover Color – Controls the icon』s hover color.
View The Options ScreenSubmenu Tab
Dropdown Carets – Select whether dropdown carets should show as submenu indicator.

Submenu Mode – Select whether you want a classic dropdown, or a full-screen Flyout. Choose from Dropdown, or Flyout.

Expand Method – Select how submenus will expand. Choose from Hover, or Icon Click.

Submenu Expand Direction – Changes the expand direction for submenus and vertical menus. Choose from Left, or Right.

Submenu Expand Transition – Changes the expand transition for submenus. Choose from Fade, or Slide Up.

Submenu Maximum Width – The maximum width for submenus. Use any valid CSS value.

Flyout Direction – Controls the direction the flyout sub menu starts from. Choose from Fade, Left, Right, Bottom, or Top.
Submenu Typography

Font Size – The font-size for submenu links. Use any valid CSS unit.

Font Family – Controls the font family of the menu items. Leave empty to use the site default.
Text Transform – Choose how the text is displayed. Choose from Normal, or Uppercase.
Submenu Item Padding – Select the padding for navigation items. Enter values including any valid CSS unit, ex: 10px or 10%.

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

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, ex. 5px.

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

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.

Box Shadow Color – Controls the color of the box shadow.

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow.

Submenu Separator Color – Controls the color for the sub menu items separator. Set to transparent for no separator.
Submenu Item Styling – Use filters to see specific type of content.Regular
Submenu Background Color – Controls the background-color for active on navigation links.

Submenu Text Color – Controls the text color for submenu dropdowns.

Hover/Active

Submenu Hover/Active Background Color – Controls the background-color for hover/active sub menu items.

Submenu Hover/Active Text Color – Controls the text color for submenu items hover / active states.
View The Options ScreenMobile Tab
Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode. Choose from Never, Small Screen, Medium Screen, Large Screen, or Custom.

Collapse To Mobile Breakpoint – The breakpoint at which your navigation will collapse to mobile mode, when selecting Custom in the option above. In pixels.

Mobile Menu Mode – Choose if you want the mobile navigation to be collapsed to a button, or always expanded.

Mobile Menu Expand Mode – Change the width and position of expanded mobile menus. Choose from Within Column – Normal, Within Column – Static or Full Width – Static.

Mobile Menu Trigger Padding – Select the padding for your mobile menu』s expand/collapse button. Enter values including any valid CSS unit, ex: 10px.

Mobile Menu Trigger Background Color – Controls the background-color for the mobile menu trigger.

Mobile Menu Trigger Text Color – Controls the text-color for the mobile menu trigger.

Mobile Menu Trigger Text – The text shown next to the trigger navigation icon.

Mobile Menu Trigger Expand Icon – Select icon for expanding/opening the navigation.
Mobile Menu Trigger Collapse Icon – Select icon for collapsing/closing the navigation.
Mobile Menu Trigger Font Size – Controls the size of the mobile menu trigger. In pixels.

Mobile Menu Trigger Horizontal Align – Change the horizontal alignment of the collapse/expand button within its container column.

Mobile Menu Trigger Button Full Width – Turn on to make the mobile menu trigger button span full-width.
Mobile Menu Trigger Bottom Margin – Controls the space between the mobile menu trigger and expanded mobile menu.
Mobile Menu Item Minimum Height – Controls the height of each menu item. In pixels.

Mobile Menu Sticky Maximum Height – The maximum height for mobile main menu links when the container is sticky. Use any valid CSS unit.

Mobile Menu Text Align – Select if mobile menu items should be aligned to the left, right or centered.

Mobile Navigation Indent Submenus – Turn on to enable indentation for sub-menus.

Mobile Menu Typography

Font Family – Controls the font family for mobile menu.

Font Size – Controls the font size for mobile menu.

Mobile Menu Separator Color – Controls the color for mobile menu separators.
Mobile Menu Item Styling – Use filters to see specific type of content.Regular
Mobile Menu Background Color – Controls the background color for mobile menus.

Mobile Menu Text Color – Controls the text color for mobile menus.
Active
Mobile Menu Active Item Background Color – Controls the background color for mobile menu active & focused items.

Mobile Menu Active Item Text Color – Controls the text color for mobile menu active & focused items.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsThere are no Global options for the Menu Element.

Menu Anchor Element

The Menu Anchor Element is a very simple element, that allows you to add a menu anchor (anchor id) anywhere on your page. By adding an anchor id, and then setting up an anchor link somewhere else on the page, people can click on the anchor link and be taken directly to the section with the anchor id.  See below to read more about this handy element.
This is an Anchor Link, which will take you down the page to the Anchor ID!,View Element Demo Page!Read all about Anchor Scrolling Here.,OverviewHow To Use The ElementElement OptionsLinks & Resources,How to use the Menu Anchor Element
Using the Menu Anchor Element allows you to target a specific section of the page. For example, if you』d like to target specific content, then you would place a Menu Anchor element directly above it. That way, the user scrolls directly to the content you』d like them to see rather than just the beginning of the section it』s part of.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add your content as normal then determine the content on the page you』d like to target.
Step 3 – Now we need to add the Menu Anchor element. To do this, add a 『1/1』 Column directly above the content you』re targeting by clicking the 『+ Columns』 button on the lower right side of the Container.
Step 4 – Once you』ve added the 『1/1』 column, click the 『+ Elements』 button to bring up the Elements window. Locate the 『Menu Anchor』 element and click it to bring up it』s options window.
Step 5 – In the 『Name』 field, enter a unique Anchor ID. For example, aboutme.
Step 6 – Once finished, click 『Save』. Repeat steps 3-5 for all the different content you』d like to target.
Step 7 – The last step, which is outside of the usage of this element, is to add your anchor links that will connect to the anchor id. There are various ways to do this, depending on what you are wanting to link. For more information on the various ways to do that, please see this document.

767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Menu Anchor Element OptionsName – This name will be the id you will have to use in your anchor link.
CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.,Useful Links & ResourcesAnchor ScrollingModal ElementModal Text / HTML Link ElementOne Page Text Link Element
One Page Menu with Multi-Page Links

Media Slider Element

The Media Slider Element is a simple element that allows you to display multiple images, and/or videos, into your site content. Read below to discover more about this useful visual element.,Slider With Images or VideosLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac nisl eget metus imperdiet venenatis non at nisi. Nam vitae risus neque, sed egestas sem. Suspendisse tristique, purus et ullamcorper tempor, purus enim scelerisque nisl.
Unlimited use per pageMany parameters to control content & slide,View Element Demo Page!,OverviewHow To Use The ElementParent OptionsAdding/Editing SettingsIndividual Child OptionsGlobal Options,How To Use The Media Slider ElementThe Media Slider Element allows you to add image and / or video sliders anywhere in your content.
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『Media Slider』 element and click it to bring up its options window.
Step 4 – The options on the right hand side are Parent Options, and affect the whole slider. Before you begin, it』s a good idea to view the Element Demo page, to check out the different layouts and options on offer. The Parent options start with the Bulk Image Upload option, which allows you to add many images (slides) to your media slider in one go. You can always add more later. You can then choose from a range of options including margin, alignment, autoplay, smooth height, and more. You can even can add the dimensions you want the images to display at, in either pixels or percentage.
Step 5 – Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add, and configure, the individual slides. The Slide Type option allows you to choose whether the slide shows an image or a video. If you choose video, you must add the Video Element or Video Embed Code into the field below. You can also enable Lightbox for the images in the Media Slider, but to do that, the full path of the image file must be added into the Full Image Link or External Link field. This can be a local or an external link. Finally, if you don』t enable Lightbox, there is an option for opening the image links in a new browser tab or the same one.
Step 6 – You can then duplicate existing slides to edit, or create new slides, by clicking on the Clone Item icon, or the + Slide button respectively.
Step 7 – Once you have completed adding your slides, click Save. You will be returned to the edit page. You can preview the page to view your slider, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
Parent Options
Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

Margin – Enter values including any valid CSS unit, ex: 4%.
Alignment – Select the slider』s alignment. Choose from Text Flow, Left, Center, or Right.
Autoplay – Turn on to autoplay the slideshows.

Smooth Height – Turn on to enable smooth height on slideshows when using images with different heights.

Slideshow Speed – Controls the speed of slideshows for the slider element. ex: 1000 = 1 second.

Hover Type – Select the slider hover type. Choose from none, Zoom In, Zoom Out, or Lift Up.

Image Size Dimensions – Dimensions in percentage (%) or pixels (px). With the Slider Element, it』s good practice to use the same size images and orientations for best results.

Element Visibility – Allows you to choose which devices to display the element. Choose one or more from Mobile, Tablet, or Desktop. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab in the Theme Options.

CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
Add / Edit Settings
Add / Edit Items – This is where all your child element』s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

Edit Item Icon – Allows you to edit an item.

Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

Delete Item Icon – Allows you to delete an item.

Re-order Feature – Allows you to drag and drop the item to your desired order to rearrange them. A small thumbnail of the image is shown to assist you in this.

Add New Slider Button – Allows you to add a new Slider.
View The Options ScreenChild Options
Slide Type – Select whether the slide is an Image, or a Video.

Image – Upload an image to display.

Video Element or Video Embed Code – Click the Add YouTube Video or Add Vimeo Video, then enter your unique video ID, or just copy and paste your video embed code.

Full Image Link or External Link – Add the URL of where the image will link to. If the lightbox option is enabled, you have to add the full image link to show it in the lightbox.

Lightbox – Show image in lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

Link Target – Choose whether the slide opens in the same browser tab – _self, or in a new tab – _blank.
View The Options ScreenGlobal OptionsThere are no Global Options for the Media Slider Element.

Lottie Animation Element

The Lottie Animation Element offers you a way to add Lottie Animations to your content. A Lottie is 「a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.」 You can find animations at LottieFiles, and use the Element to add them anywhere in your content.
The Element is easy to use and has a range of styling options. Read below for more information, or watch the video for a visual overview..,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Lottie Animation ElementThe Lottie Animation Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Find a Lottie Animation you want to display. Visit LottieFiles to see a large range of Lottie animations you can download.
Step 2. Download your chosen Lottie Animation as a JSON file.
Step 3. Add the Lottie Animation Element to a Column in Avada Builder.
Step 4. Select the JSON file from your computer to upload.
Step 5. If you wish to make further customization, there are lots of options, with which you can customize the loading and display of your Lottie Animation.
Read below for a detailed description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
JSON Upload – Upload a lottie JSON file. Visit LottieFiles to find animations.

Link URL – Add the URL the animation will link to, ex. https://example.com

Link Target – Choose whether the link will open in the same tab (-self) or in a new tab (_blank).

Trigger – Select the trigger for the Animation to play. Choose from None, Viewport, Hover, or Click.

Trigger Offset – Controls when the animation should play. Choose from Default,  Top of Element hits bottom of viewport, Top of Element hits middle of viewport, or Bottom of Element enters viewport.

Loop – Controls whether the animation should loop or not. Default is Yes.

Reverse – Select yes to play the animation in reverse.

Playback Speed – The speed at which the animation should play.

Element Visibility – Allows you to control the column』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Allows you to add a class for the column.

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab

Max Width – Set the maximum width the animation should take up. Enter value including any valid CSS unit, ex: 200px. Leave empty to use full width.

Align – Choose how to align the animation. Choose from Text Flow, Left, Right, and Center. This option is also part of the Responsive Option Sets.

Margin – Enter values including any valid CSS unit, ex: 4%.

View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

Filter Type (both regular & hover state options)

Hue – This filter controls the hue (color) of the contents of the column.

Saturation – This filter controls the color saturation of the contents of the column.

Brightness – This filter controls the brightness of the contents of the column.

Contrast – This filter controls the contrast of the contents of the column.

Invert – This filter inverts the colors of the contents of the column.

Sepia – This filter adds a sepia filter on the contents of the column.

Opacity – This filter controls the opacity of the contents of the column.

Blur – This filter adds a blur filter to the contents of the column.
View The Options ScreenGlobal OptionsThere are no Global Options for the Lottie Animation Element.

Lightbox Element

The Lightbox Element is one of several media elements offered by Avada – check out the Image, Gallery, Soundcloud, Youtube and Vimeo Elements as well. Lightbox is also integrated into Avada for galleries and in various other areas, but the Lightbox Element is for single image or video use on any page or post. If you want to show more images, use the Gallery Element instead. Read on for an overview of this simple but very useful visual Element.,Busy City at Night,View Element Demo Page!Read more about Videos in Lightbox!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Lightbox Element
The Lightbox Element is a very simple Element to use.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the shortcodes.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for Lightbox.
Step 4 – Now you have the options window open. The first step is to choose which what sort of media you wish to display. You can show images or videos in Lightbox.
Step 5 – The next step is to upload the full size image. This is the image that will be displayed when you open the Lightbox. Alternatively, place the url for the video in the field below. Then you choose the Thumbnail image. This is what will display on the page before you open the Lightbox. Finally, there is an Alt Text and a Description Field if you wish to use these, as well as a CSS Class and a CSS ID field.
Step 6 – Once you have finished configuring your options, click Save.
Step 7 – If you preview your page, you will see the Lightbox thumbnail, and if you click that, the Lightbox will open with the full size image or video. You can always return to the element to edit your options.

767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
These are the element options for the Lightbox Element added through the Avada Builder. You can also add a Lightbox Element to a content area (eg. a Text Block Element), via the Element Generator found in the WordPress Content Editor toolbar. Learn more about Inline Elements here.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Content Type – Select what you want to display in the lightbox. You can choose between Image, or Video.

Full Image – Choose the full-size image that will show up in the Lightbox.

Video URL – Enter the full video URL that will show up in the lightbox.

Thumbnail Image – Add a thumbnail image for the page. Clicking this image will show the Lightbox. You can choose any size image, but it makes sense for it to be smaller than the full-size image.

Alt Text – The alt attribute provides alternative information if an image cannot be viewed.

Lightbox Title – This will show up in the lightbox as a title above the image.

Lightbox Description – This will show up in the lightbox as a description below the image.

CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options ScreenGlobal OptionsThere are no Global Options for the Lightbox Element, but the styling options found in the Global Options for Lightbox (Avada > Options > Lightbox) will affect the visual appearance of the Lightbox used by the Element. Follow the link below to read more about the Lightbox Global Options.
Read all about Lightbox Global Options Here!,Useful Links & ResourcesVideos in LightboxLightbox Global Options

Layer Slider Element

If you have the bundled Premium Slider Plugin, Layer Slider, activated on your site, you will have the Layer Slider Element available through the Avada Builder. This very simple Element has only one purpose, and that is to enable you to add a Layer Slider slider anywhere in your content, and not be limited to above or below the header, as is the case when adding them through the Avada Page Options.
Read on to see the options for this simple helper Element, and watch the video below for a visual overview.,View Element Demo Page!,Layer Slider Element OptionsSelect Slider – As you can see, this Element has only one option, and that is to choose the Slider you wish to show. The Slider will interact with the column and container it is placed in, so if you place it in a 1/2 Column, it will only fill that area.
IMPORTANT NOTE: Many themes sold on ThemeForest come bundled with premium plugins from CodeCanyon. A plugin offers additional functionality and features beyond a typical WordPress installation, and you do not need additional licensing in order to use the plugin with your theme. The terms and conditions for bundled plugins is set out by Envato.As of Avada 5.4.1, Avada bundled plugins can be updated independently and outside of an Avada update. The update notification will be visible and can be accessed via the Avada > Plugins section.
Global OptionsThere are no Global Options for this Element.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Useful Links & ResourcesThere are extensive options when creating sliders with Layer Slider. Avail yourself of the plugin documentation below.

Layer Slider – Extensive Documentation can be found at the Kreaturamedia website.
Layer Slider templates FREE and PremiumAvada Bundled Plugins Info

Inline Elements

You might notice that some Elements are greyed out when you view them in the Elements window that appears when you add an Element. They are grey to show that they are Inline Elements. These elements are not meant to be used directly on their own, but rather in conjunction with text or other content. Please read below for links to our various Inline Elements, as well as information on how to insert them in both the Avada Builder and Avada Live.,Overview
How Inline Elements Work

Inline Elements

Using Inline Elements In Avada Live

Using Inline Elements In Avada Builder,How Inline Elements WorkInline Elements are not meant to be used directly, but rather in conjunction with other content. Let』s take a Dropcap as an example. Whenever you use a Dropcap, it has to go along with text or paragraph to fulfill its function. If not, it wouldn』t really make sense on the page. With that in mind, you have to insert text content first, then use the Element Generator to add a Dropcap element.
Alternatively, using Avada Live, you can now edit text inline, and as part of the Inline Editing menu that appears when you select some text, there is an Add Element Icon (a plus symbol) where you can access and add the Inline Elements, as well as being able to access the Avada Builder Element Generator when you edit the Element.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Inline ElementsThere are currently 5 Inline Elements. Please follow the links below to go directly to the individual Inline Element pages to find out more about the specific elements, or read further for a general overview of how to use Inline Elements on the page, through both the Avada Builder and Avada Live.
NOTE: Two of these Elements, Popover and One Page Text Link, are a bit special in that they are both normal Elements, and Inline Elements (which is why they are not greyed out). They can be used in page content by themselves, but they still work in conjunction with other content, no matter which way you add them. See the respective Element pages for more details.

Dropcap Element

Highlight Element

One Page Text Link Element*

Popover Element*

Tooltip Element,Using Inline Elements in Avada LiveIn Avada Live, there are two ways to use the Inline Elements. Firstly, with the Inline Editor, that appears whenever you make a text selection. And secondly, with the Avada Builder Generator, when you edit a relevant Element in the Sidebar. Let』s look at both methods.
Using The Inline EditorStep 1 – Make a text selection directly on the page. The inline editor will appear.
Step 2 – On the far right, there is a Blue Add Element Icon. This opens a list of the inline Elements. Select the one you wish to apply. It will be based on your text selection, so if you want a Dropcap, just select the first letter of the word, whereas if you want a Tooltip, you might select a word or entire sentence.
Step 3 – Set your preferred options in the Element Settings that opens in the Sidebar. The changes are applied as you make them.
Step 4 – That』s it. If you want to save the changes, click the large blue Save button on the Toolbar.
Using The Avada Builder Element GeneratorStep 1 – Add any Element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block Element.
Step 2 – Click the 『Settings』 icon on the Element to bring up the Element』s options panel in the Sidebar.
Step 3 – Select the text you want the Inline Element to apply to in the WordPress Editor (not on the page).
Step 4 – On the WordPress Editor toolbar, you』ll find the Element Generator icon which looks like the Avada logo. Click the 『Avada Builder Element Generator』 icon to bring up the Elements window.
Step 5 – On the 『Builder Elements』 tab, find the Inline element you』d like to add. Once located, click on it to bring up the options dialog.
Step 6 – Make your changes in the options dialog, and once done, click 『Insert』. You can save the changes by clicking on the blue Save button on the main Toolbar.,Using Inline Elements in the Avada BuilderIn the back-end builder, the Inline Elements are designed to be added via the Element Generator within the WordPress Content Editor. Follow this short example to see how.
Step 1 – Add any element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block element.
Step 2 – Click the 『Settings』 icon on the Text Block element to bring up the element』s options window.
Step 3 – Locate the WordPress content editor field. On the toolbar, you』ll find the Element Generator icon which looks like the Avada logo. Click the 『Avada Builder Element Generator』 icon to bring up the Elements window.
Step 4 – On the 『Builder Elements』 tab, find the Inline element you』d like to add. Once located, click on it to bring up the options window.
Step 5 – Once done, click 『Insert』. You can then add content into the Text Block Element as needed. Once you』re done, click 『Save』 to save your changes.

Image Select Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Image Select Field Element allows you to add a range of images to your form, that a user can then select from. You can add multiple images, control their size, allow users to select multiple or just a single image, have certain image pre-selected etc. There are many possible uses for this Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Image Select Field ElementThe Image Select Field Element allows you to add a range of images to your form, that a user can then select from.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Image Select Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your Image Select Field Element. There is a Child tab, where you add the images, and a Parent tab to set options. You can bulk upload images, set a label and a name, allow multiple selection of images, make the field required, add a tooltip, specify the size of the images, their padding and border size, as well as the inactive and active border color and radius, and whether your options are to be displayed stacked or floated.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
General Options
Bulk Image Upload – This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.

Field Label – Enter the label for the input field. This is how users will identify individual fields.

Field Name – Enter the field name. Should be single word without spaces. Underscores and dashes are allowed.

Multiple Select – Allow multiple options to be selected. Select from Yes, or No.

Required Field – Choose from Yes, or No. Make a selection to ensure that this field is completed before allowing the user to submit the form.

Tooltip Text – The text to display as tooltip hint for the input.

Image Width – In pixels (px), ex: 10px.

Image Height – In pixels (px), ex: 10px.

Padding – Enter values including any valid CSS unit, ex: 10px or 10%.

Border Size – Controls the border size of the image options. If left empty will inherit from the form options
Inactive Image Border Color – Set border color for inactive image. Leave empty for default value.
Active Image Border Color – Set border color for selected image. Leave empty for default value.

Border Radius – Controls the border radius of the image options. In pixels.

Field Layout – Choose from Stacked, or Floated. Choose if fields should be stacked and full width, or if they should be floated.

Tab Index – Tab index for this input field.

CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenChild OptionsImage – Upload an image to display.Label – Enter the label for the input field. This is how users will identify individual fields.Value – Enter the field value.

Initial State – Make a selection to ensure that this field is completed before allowing the user to submit the form. Choose from Checked, or Unchecked.

View The Options ScreenConditionals TabConditional Logic – Add conditional logic for the input field. Please see the Conditional Logic In Avada Forms document for more information on how to use this feature.View The Options ScreenGlobal OptionsThere are no Global Options for Form Builder Elements.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms