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

Image Carousel Element

The Image Carousel Element is perfect for showcasing a set of images, your portfolio pieces, client logos and much more. The customization options it offers give you incredible flexibility to choose how it looks, works, and interacts with the user. Read below to discover more about this useful visual element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Image Carousel ElementThe Image Carousel Element allows you to add beautiful image carousels to you website, with a minimum of fuss.
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 image carousel into.
Step 3 – Click on the + Element button at the bottom of the column. Select Image Carousel.
Step 4 – The options on the right hand side are Parent Options, and affect the entire carousel. This is a relatively simple element with some basic styling options, but make sure to view the Image Carousel Element Demo page, to appreciate the different layouts and options on offer. The first two options relate to the images displayed on the carousel. Firstly, you need to select or upload the images you want to use, and then choose their size. The Bulk Image Upload option allows you to add all the carousel images in one go, instead of one at a time from the child options. Simply choose the images you want to add by clicking on Select Images and choosing images already in your Media Library by using the Cmd / Ctrl key, or by uploading and selecting new ones (these will be auto selected). Once you have finished your selections, click Insert into Page. With the fixed size option, a fixed width and height are used, and so, if images chosen have a different aspect ratio, or orientation, they will be cropped, so that all thumbnails have the same size. With the Auto option, the width and height will adjust to each image. For best results using the image carousel, it is recommended that you use images of the same size and orientation, to avoid cropping and unusual layouts.
Step 5 – The remaining parent options are styling options, like the Hover type, whether the carousel should autoplay, the maximum number of columns on the screen, as well as some spacing, scrolling and border options. There is also an option for the individual carousel images to open in a Lightbox.
Step 6 – 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. In this Element, this is a very simple section, where you can edit each image for the carousel, or add new ones. Each image can link to a url if you wish, and there are options for the image links to open ina new window, and you can add alt text to each image.
Step 7 – If you wish to add additional images to the Image Carousel, you can then duplicate existing, or add new images by clicking on the Clone Item icon, or the + Image button respectively.
Step 8 – Once you have completed adding your images, click Save. You will be returned to the edit page. You can preview the page to view your carousel, and you can always edit the element again to make changes.
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 Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Carousel Elements 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).

Image Alt Text – The alt attribute provides alternative information if an image cannot be viewed.
View The Options ScreenGeneral TabBulk Image Upload – Allows you to bulk upload or select images from the media library, which will populate into individual items. When using the Image Carousel Element in Layouts, dynamic content options will also be available. See the Dynamic Content In Layouts section below.
Picture Size – Choose the Picture size. Select from Fixed, or Auto. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.

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

Autoplay – Select whether to autoplay the carousel. Choose from Yes, or No.

Maximum Columns – Select the number of max columns to display. From 1 – 6.

Column Spacing – Insert the amount of spacing between items without 「px」. ex: 13. From 0 – 300.

Scroll Items – Insert the number of items to scroll. Leave empty to scroll the number of visible items

Show Navigation – Choose to show navigation buttons on the carousel.

Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.

Border – Choose to enable a border around the images.

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

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.
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 > Carousel. These global element options control all elements that use a carousel.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

Carousel Navigation Box Color – Controls the color of the navigation box for carousel sliders.

Carousel Hover Navigation Box Color – Controls the color of the hover navigation box for carousel sliders.

Carousel Speed – Controls the speed of all carousel elements. ex: 1000 = 1 second.
View The Options Screen,Dynamic Content In LayoutsWhen using the Image Carousel Element in Avada Layouts, you will also find a dynamic content option under the Bulk Upload option. Here you can add Featured Images, ACF Galleries, or Woo Galleries.

Modal Text / HTML Link Element

The Modal Text / HTML Link Element is another simple element, that allows you to add a text or html link to trigger a modal dialog, in conjunction with the Modal Element. The two work hand in hand. With this simple element, you can add some text to trigger a modal, or you can add html or shortcodes (like an image) to trigger a modal that way as well.
As of Avada 6.2, you can now also add a Modal Text/HTML Link using the Inline Editor in Fusion Builder Live. See below to read more about this handy element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsLinks & Resources,How to use the Modal Text / HTML Link Element
Let』s add some simple text to trigger a Modal, using the Modal Text / HTML Link Element.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Add a Modal Text / HTML Link Element via the Fusion Builder.
Step 3 – The first thing to add is the Name of the Modal (which you will also add to the Modal element you add beneath this element). This tells the Element which Modal to trigger.
Step 4 – The next step is to add our triggering text / HTML to the text or HTML code field. For example, we could write Open this popup window for more details. Alternatively, to use an image to trigger the modal, insert the image code. Example below.
Step 5 – Click Save.
Step 6 – The next step is to create the Modal Element you wish to trigger. To read more about the Modal Element, view this documentation.

Copy to Clipboard 1767,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.

Name of Modal – Unique identifier of the modal to open on click.

Text or HTML code – Insert text or HTML code here (e.g: HTML for image). This content will be used to trigger the modal popup. This will also work with Shortcodes.

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 OptionsThe Modal Text / HTML Link Element does not have any global options.,Useful Links & ResourcesAnchor ScrollingModal ElementMenu Anchor ElementOne Page Text Link Element
One Page Menu with Multi-Page Links

Hidden Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Hidden Field Element is an advanced Element. You can use a hidden field to include unmodified data when a form is submitted. The content is hidden from the user completely, but can store a value that is sent along with the form. You could use JavaScript to identify the browser or page id, or many other things.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Hidden Field ElementThe Hidden Field Element allows you to include unmodified (and hidden) data when a form is submitted.
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 Hidden Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your hidden field element. Add a field name, and a field value. for example, a JavaScript snippet.
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.

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

Field Value – Enter the value to be set for this hidden 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 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

Post Card Archives Element

In Avada 7.3, we created the Post Cards feature, and the Post Cards Element. In the Layout Elements, you will find the Post Card Archives Element. This special Element is useful for when you want to change the way archives display, by using a Post Card design.,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 Post Card Archives ElementThe Post Card Archives Element allows you to place archive content using a Post Card layout anywhere in a Content Layout Section, in a Layout displaying Archive content.
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 Post Card Archives Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Post Card Archives Element can be placed anywhere in your Layout Section, and will dynamically pull Archives Content into the page, based on the Post Card layout chosen, and the Conditions set in the Layout. For example, you might choose a Product Grid Post Card, and set the condition for the Layout only to display on Post Category Archives.
See below for an example of the Post Card Archives Element in a Product Category Content layout on the Avada Retail prebuilt website. Here, it』s set to display the Category Products in a Grid when viewing the Product Category Archives.
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 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 TabPost Card – Selected a post card design to use. Post cards can be created in the Avada Library.Post Card List View – This post card will be used in the list view which can be triggered with the sorting element (WooCommerce). Post cards can be created in the Avada Library.Posts Per Page – Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the global options. For all others Settings > Reading.Pagination Type – Choose the type of pagination. Choose from Pagination, Infinite Scroll, or Load More Button.Nothing Found Message – Replacement text when no results are found.
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 TabLayout – Select how you want post cards to display.Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.Number of Columns – Set the number of columns per row.Column Spacing – Insert the amount of horizontal spacing between items without 『px』. ex: 40.Row Spacing – Insert the amount of vertical spacing between items without 『px』. ex: 40.Separator – Choose the horizontal separator line style. This will only be used on single column grids or list view.Separator Color – Controls the separator color.Separator Width – In pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.Separator Alignment – Select the separator alignment; only works when a width is specified. Choose from Center, Left, or Right.Separator Border Size – In pixels.Autoplay – Choose to autoplay the items.Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.Show Navigation – Choose to show navigation buttons on the carousel.Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.
Animation – Choose animation style. Select Fade, or Slide.
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 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 OptionsLayout Elements do not have any Global Options.

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.

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.

Checklist Element

The Checklist Element allows you to easily add beautifully styled checklists anywhere on your site. Choose any of the Font Awesome or Custom Icons, choose the size of icon and text, use circle backgrounds, control all colors, use our mobile visibility system and more! Read below for an overview of the Checklist Element, and watch the video for a visual overview.,Vivamus elementum neque

Vivamus elementum neque

Vivamus elementum neque
Phasellus congue massa diamPhasellus congue massa diamPhasellus congue massa diam
Maecenas tincidunt luctus

Maecenas tincidunt luctus

Maecenas tincidunt luctus,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Checklist ElementThe Checklist Element allows you to add stylish checklists anywhere in your content. Follow these simple steps below.
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 Checklist from the Elements List.
Step 4. There is both a Children tab, where you add the individual checklist items and a General Tab, where you set options that affect the whole list. You can set a global icon, a checklist icon color, whether the icon will be in a circle or not, the color of that circle, the size of the item (this affects the text and the icon) and options for divider lines, and their color.
Step 5. With the child items, you can do this one at a time, or you can bulk add your checklist items. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. Note that you can override the global icon here, and below that is where you add the text for the individual checklist item.
Step 6. You can then duplicate existing, or create new checklist items by clicking on the Clone Item icon, or the + List Item button respectively.
Step 7. Once you have completed adding your checklist items, click Save to save your page.
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 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 > Checklist. 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 List item – Allows you to add an item.

+ Bulk Add – Add multiple list items at once.

Item Options

Edit Item Icon – Allows you to edit the individual child items in your list.

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.
View The Options ScreenItem Options
Select Icon – You can select an individual checklist item icon here. This will override the global setting.

List Item Content – Add your list item content here.
View The Options ScreenGeneral Tab
Select Icon – Allows you to select a global icon for all list items. This can be overridden in the individual items.

Checklist Icon Color – Here you can choose a global color for the checklist icon. Leave empty for the default value, chosen in the Global Options (Avada > Options > Fusion Builder Elements > Checklist).

Checklist Icon Circle – Global setting for all list items. Turn on if you want to display a circle background for checklists icons.

Checklist Icon Circle Color – Global setting for all list items. Controls the color of the checklist icon circle background. Leave empty for default value.

Checklist Text Color – Global setting for all list items. Controls the color of the checklist text. Leave empty for default value.

Item Font Size – Select the list item』s font size. Enter value including any valid CSS unit, ex: 14px. Leave empty for default value.

Item Padding – Controls the padding size of the list items. Leave empty for default value.

Divider Lines – Choose if a divider line shows between each list item.

Divider Line Color – Controls the color of the divider lines. Leave empty for default value.

Odd Row Background Color – Controls the background color of the odd row. Leave empty for default value.

Even Row Background Color – Controls the background color of the even row. Leave empty for default value.

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 ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Checklist

Checklist Icon Color – Controls the color of the checklist icon.

Checklist Icon Circle – Turn on if you want to display a circle background for checklist icons.

Checklist Icon Circle Color – Controls the color of the checklist icon circle background. This is a dependent option that always stays visible because other Builder Options can utilize it.

Checklist Text Color – Controls the color of the checklist text.

Item Font Size – Controls the font size of the list items.

Item Padding – Controls the padding size of the list items.

Divider Lines – Choose if a divider line shows between each list item. Select from Yes, or No.

Divider Line Color – Controls the color of the divider lines. This is a dependent option that always stays visible because other Builder Options can utilize it.

Checklist Odd Row Background Color – Controls the background color of the checklist odd row.

Checklist Even Row Background Color – Controls the background color of the checklist even row.
View The Options Screen

Date Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Date Field Element allows you to enter a formatted date using a date picker calendar option. See the Reservation Form Prebuilt Form for an example of the Date Field Element in use. See the Reservation Form Prebuilt Form for an example of the Date Field Element in use.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Date Field ElementThe Date Field Element allows you to place a formatted date using a date picker calendar option 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 Date Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your date field. Add a label and a name, decide if it is to be a required field, add optional placeholder and tooltip text, choose when to show the custom picker, and choose an icon.
Step 5. Once you have configured the Element, save your page.
Read below for a 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 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).
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
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. Note, this will only show for the custom picker. NOTE: The placeholder will only be displayed on screen sizes that have the custom picker enabled.

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

Custom Picker – Choose to enable a lightweight custom picker on mobile only, mobile and desktop or set to never to use browser native.

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

Content Boxes Element

The Content Boxes Element is perhaps the most versatile Element of all. Avada includes 8 pre-designed content box layouts, and a plethora of options, that allow you to take your design so much further. Each layout has been carefully designed and crafted with customization options in mind. They work with our entire column framework, font awesome icons, SEO optimized titles and our advanced options network, so you can easily set them up as you desire. Read below to discover more about this incredibly versatile element.
Content Boxes
Avada includes 8 pre-designed content box layouts & a plethora of options that allow you to take the design so much further.
Buy AvadaAre Incredibly
Avada includes 8 pre-designed content box layouts & a plethora of options that allow you to take the design so much further.
Buy AvadaAmazing & Flexible
Avada includes 8 pre-designed content box layouts & a plethora of options that allow you to take the design so much further.
Buy Avada,View The Element Demo Page!,OverviewHow To Use The Element
Element Options
Global Options,How To Use The Content Boxes ElementThe Content Boxes Element allows you to add a wide variety of content boxes anywhere in your content. This is a fully featured element, with many options.
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 Content Boxes from the Elements List.
Step 4. The options on the right hand side are Parent Options, and affect the whole series of content boxes. This element has a plethora of options, starting with 8 pre-designed layouts to choose from. Make sure to view the Element Demo page, to fully appreciate the different layouts and options on offer.
Step 5. Once you have chosen your layout, you can slowly move down the Parent Options, deciding how to style the Content Boxes. Note that the second option is Number of Columns. This element can be inserted into any size column, and by choosing how many columns to display will determine how many Content Box items are displayed across the column width. If there are more items than the number of columns chosen, the remaining items will display on a new row below the first. If there are fewer item than the number of columns chosen, the full width of the column will not be used.
Step 6. 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. Note that you can override a large number of of global options here, customizing the individual content box. At the bottom of the Child Options, you will find the Content Box Content field, where you add the content for the individual content boxes.
Step 7. You can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Content Box button respectively.
Step 8. Once you have completed adding your content boxes, click Save. You will be returned to the edit page. You can preview the page to view your content boxes, 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: The Default setting will use the global settings assigned for this element in your Global Options, found at Options > Avada Builder Elements > Content Box. 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
Box Layout – Select the layout for the content box. Choose from Classic Icon With Title, Classic Icon On Top, Classic Icon On Side, Classic Icon Boxed, Clean Layout Vertical, Clean Layout Horizontal, Timeline Vertical, and Timeline Horizontal.

Number of Columns – Set the number of columns per row. Choose from 1 – 6.

Link Type – Select the type of link that should show in the content box. Choose from Default, Text, Button bar, or Button.

Button Span – Choose to have the button span the full width. Yes or No.

Link Area – Select which area the link will be assigned to. Choose from Link+Icon, or Entire Content Box.

Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank).

Content Alignment – This only works with 「Classic Icon With Title」 and 「Classic Icon On Side」 layout options. Choose from Left, or Right.

Animation Type – Select the type of animation to use on the element. Choose from None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

Direction of Animation – Select the incoming direction for the animation. Choose from Top, Right, Bottom, Left, or Static.

Speed of Animation – Type in speed of animation in seconds (0.1 – 1).

Animation Delay – Controls the delay of animation between each element in a set. In milliseconds, 1000 = 1 second.

Offset of Animation – Controls when the animation should start. Choose from Default, Top of element hits bottom of Viewport, Top of element hits middle of Viewport, or Bottom of element enters Viewport.

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

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

CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.
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.

Add New Content Box Button – Allows you to add a new Content Box.
View The Options ScreenDesign Tab
Title Size – This controls the size of the title. In pixels ex.: 18px

Heading Size – Choose the title size, from H1-H6.

Title Font Color – Controls the color of the title font. ex: #000.

Body Font Color – Controls the color of the body font. ex: #000.

Content Box Background Color – Select the background color of the content boxes. Leave empty for default value.

Icon – Global setting for all content boxes, this can be overridden individually. Click an icon to select, click again to deselect.

Flip Icon – Choose to flip the icon. Options are None, Horizontal, and Vertical.

Rotate Icon – Choose to rotate the icon. Options are 90, 180, 270 (degrees), or None.

Spinning Icon – Choose to make the icon spin. Options are Yes, or No.

Icon Color – Select the color for the icon. Leave empty for the default value.

Icon Background – Choose to show a background behind the icon. Options are Yes, No, and Default. Select Default for theme options selection.

Icon Background Radius – Choose the border radius of the icon background. In pixels (px), ex: 1px, or 「round」.

Icon Background Color – Choose the icon background color. ex: #000.

Icon Background Inner Border Size – Controls the icon background inner border. From 0 to 20.

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

Icon Background Outer Border Size – Controls the icon background outer border size. From 0 to 20.

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

Icon Size – Controls the size of the icon. In pixels. Up to 250px.

Icon Hover Animation Type – Select the animation type for icon on hover. Choose from Default, None, Fade, Slide, or Pulsate.

Hover Accent Color – Controls the accent color on hover.

Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

Icon Image Max Width – Set the icon image max width. Leave empty to use image』s native width. In pixels, ex: 35.

Margin – Controls the spacing above and below the content boxes. In px, em or %, e.g. 10px.
View The Options ScreenChild OptionsContent Box General Tab
Title – Enter the content box title.

Content Box Background Color – Choose the color for the content box background. Leave empty for the theme options default.

Icon – Choose an icon for the content box. Click a Font Awesome icon to select, click again to deselect.