詩語，作者 Avada 文檔 - 第 67 頁共 79 頁

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

Next Page Element

The Next Page Element is a pagination element that allows you to add a page break after any Container element in your content. You can use this element to create a series of linked segments out of one main page. Continue reading below for more details on how to add this element. You can also drag and drop the Next Page element to a new position, between containers only.
Please note: The Next Page Element will not split content inside a Container. Content will be segmented as one whole Container at a time as seen here.View Element Demo Page!How to Add the Next Page ElementStep 1 – Create a page or edit an existing one.
Step 2 – Add the content to your page that will be your first page or segment of the series.
Step 3 – At the bottom your first segment』s Container element, hover over the right-hand corner and click +Container.
Step 4 – This will launch a window with three main tabs: Builder Containers, Library Containers and the Special Tab. Select the special tab and click to add the Next Page element.
Step 5 – At this point, you』ll see the Next Page element between your Container elements. On the frontend, you』ll see pagination links after this section of content. All the content below this element will be displayed on the following page.
Step 6 – Repeat those steps until you have completed your page and have the desired amount of segments.

How To Use the Dynamic Options In The Countdown Element

With Avada 7.3, Dynamic Content options were added to the Countdown Element. These Dynamic Content options are particularly useful for users of WooCommerce and The Events Calendar, as you can use them to link the Countdown Element to specific WooCommerce sales or Event Calendar events. Read on to find out how you can use these Dynamic Content options.,Dynamic Content OptionsWith the Countdown Timer End option of the Countdown Element, it is now possible to use Dynamic Content, instead of simply adding a date and time. To do this, simply click on the Dynamic Content Icon to the right of the Option Title, and a dropdown selector will appear. Here, you can choose one of four Dynamic Content types, a Custom Field, a Shortcode, a WooCommerce Sales Date, or an Event Calendar Event Date.
The first one is a Custom Field, which is pretty much for advanced users. If, for example, a user had a Custom Post Type and a custom field into which they added a date, they could use that here. Likewise, with the Shortcode option. If a user created their own shortcode which returned a date, then they could use that here. But using the last two options are going to be much more likely for the majority of users, so let』s focus on those.,Linking To WooCommerce SalesWhen you choose a WooCommerce Sale Date as the Dynamic Content type, a further dialog appears. As you can see in the screenshot below, this allows you to choose a Sale Start Date, or a Sale End Date to count down to, as well as having a field for a Product ID, and one for a Fallback value.
Product IDYou can enter a Product ID to display a specific product』s sale date, or if you leave it empty, it will auto-pull the product ID of the currently viewed product to check for sales dates. How this works depends on where you place the Countdown Element, and whether you use the Hide When Inactive option.
To find a Product ID is relatively easy. With WooCommerce Products, it』s right there when you mouse over the product, as can be seen in the first screenshot below. For The Event Calendar Events, as you can see in the second screenshot, the Event ID can be seen at the bottom of your browser when you mouse over the Edit button. If your browser does not display this, simply edit the Event, and the Event ID is the number in the Event URL.
It』s also important to remember that sales dates are set on individual products in WooCommerce, not for the shop as a whole. So where the Dynamic Content option is most useful would perhaps be in a Single Product Layout, where the Element would pull the sales dates of the various products as they were viewed. To clarify how the Dynamic Options can work, let』s look at a couple of different scenarios.,Countdown To Sale Start In A LayoutLet』s say we add the Countdown Element to a Single Product Layout, and use the Dynamic Content options to set it to display the Sale Start Date. Because it』s being used in a product template, we don』t want to set an ID for a specific product, so here, we leave that empty. In the screenshot below, you can see the Element added to the top of the Layout Section, with the Date set to Sale Start Date.
But also, let』s say only selected products in our shop will be going on sale. Because the Element is being used in a template, it would normally be displayed on all products, including those with no sale dates. But in the Countdown Element, there is a very useful Display When Inactive option. If we set that to Hide, then the Element will only display on products with upcoming sales! And because we didn』t add a Product ID, the Element will auto-pull the dates from the individual products viewed, so even if the sales started on different dates, this would be reflected in the actual products. In the screenshots below, we can see what a product with a sale coming up would look like, and below that, what a product with no sale coming up would look like.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Countdown To Sale End In A LayoutOK, but what about when the sale starts? Our Sale Start Date now becomes Inactive, as it has passed, and so the Element no longer displays on the product. And now we might want another Countdown, this time to the end of the Sale. With the Dynamic Option in the Countdown Element, we can set both of these up at the same time.
In the same Product Layout Section, we can now add another Countdown Element, but this time we set the Dynamic Content of the Countdown Timer End option to Sale End Date. We also set the Display When Inactive Option To Hide, and change the Title and Subtitle Text. That』s it!
So now, before the sale has started we see the initial Countdown Element on any products that have a Sale Date, just like before. But after the sale has stared, this instance of the Element does not display any more and our second Countdown Element becomes active and displays on the page, as can be seen in the second screenshot. And on products that don』t have any sale, neither instance of the Element displays. How cool is that!,Countdown To Sale On Static PageIf you want to use the Countdown Element to count down to the start or end of a sale on a Home, or other static page, then the Dynamic Content options are not as useful as when used in a dynamic item like a Layout, as it』s very easy to just enter a date manually. But if you wanted to highlight the sale of a specific product, you could easily add the Element, and add the Product ID so that the Sales date of that specific product is used.
In the screnshot below, you can see an example of a specific product being promoted on the home pgae on the online Tutor website. It』s also set to Hide on the Display When Inactive option, so it will not display once the sale is live. This could of course be a count down to the end of a sale, or there could be both as done in the Layout above.,Linking To Event Calendar EventsThe process is basically the same with linking the Dynamic options of the Countdown Element to an Event Calendar Event. Again, when selecting the Event Date Dynamic Content Type, you are met with exactly the same options.
That said, Event Calendar Events are inherently different from WooCommerce Products. The Events page itself is automatically generated, and so is not a page that can be edited directly. And unlike WooCommerce Products, Layouts are not in use for Events, so the most likely places to use the Countdown Element with Dynamic Content is on a static page, like the Home page, or on the actual Event pages.,Countdown To Event On Static PageHere is an example of a Countdown to an Event on the Home page of the Online Tutor site. The Event Start Date option was selected in the Dynamic Content options, and a specific Event ID was added to pull the start date from the event in question. See the Product ID section above to see how to find IDs for Events.,Countdown To Event On Event PageTo be able to edit your individual Events in Avada Builder, make sure that 『Event』 is selected under Post Types in the Builder Options (Avada Dashboard > Options > Builder Options > Post Types).
Then it』s the same as any page. Simply add the Countdown Element, select the Start or End Date in the Dynamic options, and set the Event ID for that specific Event. Using the Dynamic Content options here doesn』t really have any advantage over manually enterting the date, but it』s another option you have.

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.

Gallery Element

The Gallery Element is a fantastic way to quickly create a responsive and stylish image gallery on your Avada site. Select various layouts like Grid or Masonry, choose column width, column spacing, lightbox options, captions and more.
The Gallery Element was updated back in Avada 5.8, with the ability to add links to individual images, and lazy loading by default, and again with Avada 7.5 with the ability to add captions. Below, we』ll walk you through the various options and settings for this very useful element, and remember to watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Gallery ElementStep 1 – In Avada Builder, click the + Element button to open the Elements list. You can visually find the Gallery Element or you can type in the search bar in the upper right-hand corner to filter for the Gallery Element.
Step 2 – Once the Element is inserted into the page, you can now add your images to the gallery. You can bulk upload images by choosing + Bulk Add on the Children tab, or by using the Bulk Image Upload option on the General tab (this one has the option of dynamic content). Adding items in bulk is ideal if you have all your images ready to go. Upload your images or if they』re already uploaded, just select them from the Media Library (with Cmd/Ctrl click, or Shift/Click for contiguous images) and when you are finished, click 『Insert Into Post』. Alternatively, you can add your images one at a time, under the Add / Edit Items options. Just click the + Add Images button and then the edit button on the item, or you can clone an image to retain its settings and then just change the image out.
Step 3 – Next, configure the settings which will style your gallery as desired. These settings are found on the General tab. There are options for layout, image size, number of columns and more. Please see below for a complete list of available settings and what they do, or checkout the Gallery Demo page for some great examples. There is also a Captions tab, if you wan to configure your Gallery to have captions.
Step 4 – When you have finished styling your element, save your changes.
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 Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Gallery section. Also, 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.
Children Tab
Add / Edit Items – This is where add or edit new items for this Element. You can reorder elements by dragging them and dropping them into place.
+ Add Image – Allows you to add Items individually to the gallery. The item then needs to be edited to add the image to it.+ Bulk Add – Allows you to bulk upload or select images from the media library, which will populate into individual items.
Item Options

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.
View The Options ScreenItem Options
Image – Upload an individual image to add it to the gallery.

Image Title – Enter title text to be displayed on image.

Image Caption – Enter caption text to be displayed on image.

Image Link – Add the url the image should link to. If lightbox option is enabled, you can also use this to open a different image in the lightbox.

Link Target – Choose whether to open the link in the same browser tab (_self) or in a new one (_blank).
View The Options ScreenGeneral TabBulk Images Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. Dynamic content options are also available with this option.
Gallery Layout – Controls the gallery layout type. Choose between Default, Grid, or Masonry.

Picture Size – Choose between Default, Fixed, or Auto. Fixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren』t the same size. Auto will use the image』s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing between each gallery image.

Masonry Image Aspect Ratio – Sets the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). IMPORTANT: The value of 「1.0」 represents a special case, which will use the auto calculated ratios like in versions prior to Avada 5.5.

Masonry 2×2 Width – This option decides when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. IMPORTANT: There is a 「Masonry Image Layout」 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.

Hover Type – Choose between Default, None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

Image Lightbox – Choose between Yes or No. This will determine if the images are displayed in the lightbox. Lightbox must be enabled in Theme Options or the image will open up in the same tab by itself.

Lightbox Content – Choose between Default, None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library. NB. Titles and Captions must be enabled globally in Theme Options > Lightbox for them to display.

Gallery Image Border Size – Sets the border size of the gallery image.

Gallery Image Border Color – Sets the border color of the gallery image.

Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.
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 Avada Builder Elements tab in the Global 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.
View The Options ScreenCaption Tab
Caption – Choose the caption style. By default set to Off. Choices are Off, Above, Below, Navin, Dario, Resa, Schantel & Dany.

Image Title Color – Controls the color of the image title.

Image Title Size – Controls the font size of the image title. Enter value including any valid CSS unit, ex: 20px.

Image Title Heading Tag – Choose HTML tag of the image title, either div or the heading tag, h1-h6.

Image Title Typography

Font Family – Controls the font family of the image title.

Font Size – Controls the font size of the image title.

Text Transform – Choose how the title is displayed. Choose from Default, Normal, or Uppercase.

Image Caption Color – Controls the color of the image caption.

Image Caption Background Color – Controls the background color of the caption.

Image Caption Size – Controls the font size of the image caption. Enter value including any valid CSS unit, ex: 20px.

Image Caption Font Family – Controls the font family of the image caption.

Image Caption Transform – Choose how the image caption is displayed.

Caption Border Color – Controls the color of the caption border.

Image Overlay Color – Controls the color of the image overlay.

Caption Align – Choose how to align the caption.

Caption Area Margin – In pixels or percentage, ex: 10px or 10%. Only available on Above, and Below.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Gallery.

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Picture Size – Choose between Fixed, or Auto. Fixed will load a theme generated image size, which will be cropped to a predefined size. This will allow you to have a uniform layout even when your images aren』t the same size. Auto will use the image』s natural shape, and scale the image in keeping with its aspect ratio and the image will not be cropped.

Gallery Layout – Controls the gallery layout type. Choose between Grid, or Masonry.

Number of Columns – Can be set to a number 1 – 6. This setting will determine the max number of columns your layout can reach. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing between each gallery image.

Hover Type – Choose between None, Zoom In, Zoom out, or Lift Up. This will determine which animation style is applied to the image on hover.

Lightbox Content – Choose between None, Titles, Captions, or Titles and Captions. Set if titles and/or captions will display in the lightbox. All titles and captions from each image are pulled from the image itself in the WordPress Media Library.

Gallery Image Border Size – Sets the border size of the gallery image.

Gallery Image Border Color – Sets the border color of the gallery image.

Gallery Image Border Radius – Sets the border radius of the gallery image. For example, 1px or round.
View The Options Screen,Useful Links & ResourcesHow To Use Captions On Image Based ElementsCreating A Gallery With Image ElementsMasonry Layout Options

Phone Number Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Phone Number Field Element is a numeric field used to collect mobile or landline numbers. It does not accept spaces or letters. Examples of this Element can be found in the Registration Form Dark, Standard Contact Form, Sweepstakes Form, and the Reservation Form, to name a few.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Phone Number Field ElementThe Phone Number Field Element allows you to place a into your forms.
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 Phone Number Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your checkboxes. Add a label, decide if it is to be a required field, add an optional tooltip, choose whether your options are to be displayed stacked or floated etc. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month.
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 Tab
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.

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.

Placeholder Text – The placeholder text to display as hint for the input type.

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

Input Field Icon – Select an icon for the input field, click again to deselect.

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 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

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.

Notice Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Notice Element is used to display messages after form submission. There is a field for both a success message, and a failure message. They come pre-populated with default messages, or you can totally customize them with your own messages. You will find this Element on almost all the prebuilt forms.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Notice ElementThe Notice Element allows you to place checkboxes into your forms.
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 Notice from the Form Elements tab.
Step 4. The Notice Element controls the notices shows when the Form Confirmation Options in the Confirmation Tab of the Form Options panel is set to Display Message. The Element comes pre-populated with default messages, but you can of course customize these messages as you wish. When using Display Message as the Confirmation Type, this is a required Element for your form.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 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.

Success Message – Enter a message to be shown when the form has been successfully submitted.

Error Message – Enter a message to be shown when a problem has been encountered while submitting the form.

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

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 ScreenGlobal OptionsThere are no specific Global Options for the Notice Element, but note that the colors for the Notice Element come from the Success and Error Global Colors in the Alert Element (Options > Avada Builder Elements > Alert).,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

Icon Element

The Icon Element, (formerly the Font Awesome Icon Element) was renamed back in Avada 6.2. This was because of the added ability to add custom icon sets to Avada, which this element can then access. For more details on that, please see How To Upload And Use Custom Icons in Avada.
But regardless of the name change, this element is still a great way to add any of the 1,609 Free Font Awesome Icons to your content, as well as any custom fonts you want to upload. And if that』s not enough for you, you can now import custom Icon sets directly from Avada Studio. And if you』re a total icon freak, there is also Font Awesome Pro Integration in Avada, giving you access to 7,800+ Font Awesome Icons through the Avada Builder.
A full set of styling options in this Element allow you to select icon size, weight, color, background, rotation, spinning and more. And every one is 100% full vector, so they look incredibly sharp and are retina-ready! Read below for an overview of the specific features of this awesome Element.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription, please check their site for detailed information & pricing.,View Element Demo Page!,OverviewHow To Use The Icon ElementElement OptionsGlobal Options,How To Use The Icon ElementThe Icon Element allows you to place icons anywhere on your site.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Icon from the Elements List.
Step 4. There are three tabs in the Icon Element. The first one, General, is where you choose your font, and make some basic settings to do with size, functionality and alignment. The Icon picker was also updated with Avada 6.2 to show any installed icon sets, both Font Awesome Icon sets and Custom Icon sets. The Design tab is where you configure your selected icon』s appearance with margin, circle, color, background and border options. The Extras tab offers animation options that allow you to determine how the icon interacts with the loading of the page.
Step 5. Once you have completed styling your Icon, click Save.
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: The Default setting will use the global settings assigned for this element at Options > Avada Builder Elements > Icon. Also, 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
Select Icon – Click an icon to select, click again to deselect. Use the Plus symbol to add a custom icon set.

Icon Size – Set the size of the icon. In pixels (px), ex: 13px.

Flip Icon – Choose to flip the icon.

Rotate Icon – Choose to rotate the icon.

Spinning Icon – Choose to let the icon spin.

Link – Add the url the icon should link to.

Link Target –_self = open in same window, _blank = open in new window.

Alignment – Select the icon』s alignment. Choose from Text Flow, Center, Left, or Right. This setting now has Responsive Options. See the Responsive Option Sets document for more info.

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
Margin – Spacing around the font awesome icon. In px, em or %, e.g. 10px. Note: Leave empty for automatic margin calculation, based on alignment and icon size.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Size – Controls the background size of the icon. In pixels.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the hover color of the icon background.

Icon Background Border Size – Controls the size of the background border.

Icon Background Border Color – Controls the color of the background border.

Icon Hover Background Border Color – Controls the hover color of the background border.

Border Radius – Enter values including any valid CSS unit, ex: 10px. Leave empty for default values.

Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Fade, Slide or Pulsate.
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 5.

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 OptionsLocation: Avada > Options > Avada Builder Elements > Icon
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Icon Font Size – Controls the size of the icon. In pixels.

Icon Color – Controls the color of the icon.

Icon Hover Color – Controls the hover color of the icon.

Icon Background – Turn on to display a background behind the icon.

Icon Background Color – Controls the color of the icon background.

Icon Hover Background Color – Controls the color of the icon background on hover.

Icon Border Size – Controls the border size of the icon.

Icon Background Border Color – Controls the border color of the icon background.

Icon Hover Background Border Color – Controls the border color of the icon background border on hover.

Border Radius – Set the border radius.

Icon Hover Animation Type – Controls the hover effect of the icon. Choose from Fade, Slide, or Pulsate.
View The Options Screen

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.