标签： elements

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.

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 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 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 for value set in parent option. Set to -1 to use image』s native width. In pixels, ex: 35.

Read More Link URL – Add the link』s url ex: http://example.com.

Read More Link Text – Insert the text to display as the link.

Read More Link Target – Select if the link opens in the same browser tab (_self) or in a new tab (_blank). Choose from Default, Same Window, or New Window/Tab.

Content Box Content – Add content for content box.
View The Options ScreenContent Box Animation Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

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: WordPress Dashboard > Avada > Options > Avada Builder Elements > Content Box

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

Content Box Background Color – Controls the background color for content boxes.

Content Box Title Font Size – Controls the size of the title text. Enter value including any valid CSS unit, ex: 18px.

Content Box Title Font Color – Controls the color of the title font.

Content Box Body Font Color – Controls the color of the body font.

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

Content Box Icon Color – Controls the color of the content box icon.

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

Content Box Icon Background Radius – Controls the border radius of the icon background. Enter value including any valid CSS unit, ex: 50%. This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Icon Background Color – Controls the color of the icon background. This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Icon Background Inner Border Color – Controls the inner border color of the icon background.This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Icon Background Inner Border Size – Controls the inner border size of the icon background. In pixels. This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Icon Background Outer Border Color – Controls the outer border color of the icon background.This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Icon Background Outer Border Size – Controls the outer border size of the icon background. In pixels. This is a dependent option that always stays visible because other Builder Options can utilize it.

Content Box Hover Animation Type – Controls the hover effect of the icon. Choose between None, Fade, Slide, or Pulsate.

Content Box Hover Accent Color – Controls the accent color on hover.

Content Box Link Type – Controls the type of link that displays in the content box. Choose between Text, Button Bar, or Button.

Button Span – Choose to have the button span the full width. This is a dependent option that always stays visible because other Builder Options can utilize it.

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

Content Box Link Target – Controls how the link will open. Choose between Same Window and New Window/Tab.

Content Box Top/Bottom Margins – Controls the top/bottom margin for content boxes. Enter values including any valid CSS unit, ex: 0px, 60px.
View The Options Screen

Email Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.An email field is a single textbox that』s validated to only accept email addresses, and one of the most common form Elements. Almost all of the Prebuilt Forms use the Email Field Element.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Email Field ElementThe Email Field Element allows you to place a single textbox that』s validated to only accept email addresses 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 Email Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your email 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,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

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

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

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

Content 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 look at the Content 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 Content ElementWhen 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 Content Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice.
The Content Element pretty much does what it says on the can, and allows you to add existing content anywhere in a Content Layout Section in any Layout.
You would use this, for example, on a single post or single portfolio layout, where the content element would pull the actual post content into your layout. Basically, the element grabs the editor content of a page or post, and you can add this content to the Content Layout Section of your Layout. With Avada 7.3, you can also add the Content Element into a Post Card.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
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 TabContent Display – Controls if the blog post content is displayed as excerpt, full content or is completely disabled.Excerpt Length – Insert the number of words/characters you want to show in the excerpt.Strip HTML from Posts Content – Choose to strip HTML from the post content.
Margin – Adjust the margins around the content. In pixels or percentage, ex: 10px or 10%.

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 TabMargin – Adjust the margins around the content. In pixels or percentage, ex: 10px or 10%.Alignment – Select the text alignment. Choose from Text Flow, Left, Center, Right, or Justify.Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.Font Family – Controls the font family of the text. Leave empty if the global font family for the text should be used.Line Height – Controls the line height of the text. Enter value including any valid CSS unit, ex: 28px.Letter Spacing – Controls the letter spacing of the text. Enter value including any valid CSS unit, ex: 2px.Font Color – Controls the color of the text, ex: #000.View The Options ScreenExtras Tab
Animation Type – Controls the element』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 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.

Events Element

The Events Calendar is by far the most popular calendar plugin around. As it is one of the free premium plugins included with Avada, we offer full design integration and support for it. We』ve also created an Events Element, so you can easily display your events anywhere you』d like on your pages or posts. Read below for more details on this very useful element, and watch the video for a visual overview.,Events Element Example,View Element Demo Page!Read our special feature on The Events Calendar!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Events ElementThe Events Element allows you to add a customized range of your Events anywhere in your content. Be sure to visit the Element Demo page to get a good idea of what』s possible with this element.
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 Events from the Elements List.
Step 4. Start by working through the options. This is a relatively simple element to configure. Start by selecting the categories you wish to show in your Event Element. You then choose the number and maximum number of columns to display. To fill the column the element is in, these two numbers should be the same. If you have chosen 4 columns but only 2 events, they will only fill half the column. Likewise, if you have chosen 4 columns, but have 6 events, they will show on a second row. Then continue through the options to style the element as you wish.
Step 5. Once you have completed styling your Events Element, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
Read below for a detailed 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 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 the Options > Avada Builder Elements > Events 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.

Categories – Select a specific category or leave blank for all.

Display Past Events – Turn this on if you want the past events to be displayed.

Order – You can display your events in either Descending or Ascending order.

Number of Events – Select the number of events to display. Up to 25 events can be displayed.

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

Column Spacing – Controls the column spacing for events items. Setting to -1 will keep the default 4% column spacing. From -1 to 300%.

Picture Size – Choose between Cover (image will scale to cover the container) or Auto (width and height will adjust to the image).

Content Padding – Controls the padding for the event contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.

Content Alignment – Controls the alignment of contents. Choose from Text Flow, Left, Right or Centre.

Text Display – Choose how to display the post excerpt. Choose from Default, No Text, Excerpt, or Full Content.

Excerpt Length- Insert the number of words/characters you want to show in the excerpt.

Strip HTML – Strip HTML from the post excerpt. Choose from Default, Yes, or No.

Pagination Type – Select the type of pagination you want. Choose from No Pagination, Pagination, Infinite Scrolling, or Load More Button.

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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

Number of Events Per Page – Controls the number of events displayed per page for events element. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading. In pixels.

Column Spacing – Controls the column spacing for events items. In pixels.

Events Content Padding – Controls the top/right/bottom/left padding of the events contents. Enter values including any valid CSS unit, ex: 20px, 20px, 20px, 20px.

Events Text Display – Choose how to display the post excerpt for events elements.

Excerpt Length – Set the length of your excerpt here. 

Strip HTML from Excerpt – When set to Yes, this strips any HTML from the Excerpt text shown.
View The Options Screen

Avada Form Element

The Avada Form Element is a simple helper Element, designed so you can add an Avada Form anywhere into your content. Read more about this handy Element below, and watch the video for a visual overview.
For an overview of how the Avada Form Builder works, please see the Avada Forms documentation.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Avada Form ElementThe Avada Form Element allows you to place an Avada form anywhere on your site.
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『Avada Form』 Element and click it to bring up its options window.
Step 4 – Using the Avada Form Element couldn』t be easier. Once you have selected which column you』d like to place the slider into, you simply select your form from the drop down list in the Element options panel. The only other options are Margins, Element Visibility, and the CSS Class and CSS ID options.
Step 5 – Once you have added your form, Save your page.
Read below for a detailed 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 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.
Form – Select the form you want to insert from the dropdown list. To create forms, go to Avada > Forms.Margin – Enter values including any valid CSS unit, ex: 4%.

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.

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 the Avada Form Element. Global Options for Forms as a whole are found at Avada > Options > Forms.,Useful Links & Resources
The Avada Form Builder
Avada Form Local Options
Avada Form Global Options
How To Integrate HubSpot With Avada Forms

Avada Slider Element

The Avada Slider Element (formerly Fusion Slider Element) is a simple Element, designed so you can add an Avada Slider, not just above or below the Header, as you can already do with the Avada Page Options, but anywhere into your content. Read more about this handy Element below, or watch the video for a visual overview.,Create Beauty

Like Martin Grohs Has Done

Learn More
Buy Avada Now

Slice of Paradise

by Nautilus in 2010

Learn More
Buy Avada Now



Add an Avada Slider AnywhereThe Avada Slider Element allows you to place an Avada Slider anywhere in your content!
Simply add the element into a column, and choose the slider you wish to use. Simple!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & ResourcesIMPORTANT NOTE: If the 「Sliders」 menu item doesn』t show under Avada -> Dashboard, or the WordPress Dashboard -> Avada menu, please ensure that Avada Slider is enabled in → Avada → Options → Advanced → Theme Features, and then refresh the page.,How To Use The Avada Slider ElementThe Avada Slider Element allows you to place Avada sliders 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 Avada Slider from the Elements List.
Step 4. Using the Avada Slider Element couldn』t be easier. Once you have selected which column you』d like to place the slider into, you simply select your slider from the drop down list in the Element options panel. The only other options are a couple of Height options, and the visibility, CSS Class and ID field options.
Step 5. Once you have added your slider, Save your page.
Read below for a detailed description of all element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
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.

Slider Name – Select the slider you want to use. The options will appear as the slider name next to the number of slides in brackets.

Full Height – Set to Yes if you want to make slider full screen height. Otherwise it will use the dimensions in the Slider.

Full Height Offset – The slider offset, to account for the header with full height sliders. Accepts both pixels and CSS selectors. If you』re using a traditional opaque header above the slider, you can place .fusion-header-wrapper in the Full Height Offset field, or you can use the pixel height of your header.

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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 the Avada Slider Element.,Useful Links & Resources
Avada Slider

The Avada Slider (Video)

Fix Missing Avada Slider Settings After Update

Alert Element

The Alert Element offers four preset and one custom Alert Box for your website. These are useful for all sorts of situations. There is a General Alert, an Error Alert, a Success Alert, a Notice Alert, and the aforementioned Custom Alert. There is a range of settings available, some of which only apply to the Custom Alert, as the first four are preset to specific situations and uses. The Custom Alert however is fully customizable.,×Default General Message Type×Default Error Message Type×Default Success Message Type×Default Notice Message Type,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Alert ElementThe Alert Element is easy to add 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 Alert from the Elements List.
Step 4. The first option allows you to select from a number of preset Alert boxes, or you can choose Custom if you prefer to style it yourself. Note that the next two options, Accent Color, and Background Color, will not affect the Element unless you have chosen Custom in the first option.
Step 5. Once you have chosen colors, you can go through the other General Options. You have options for Border width, Icon, Content Alignment, Text Transform, Box Shadow, and Dismissable Box. By default, Alerts Boxes are dismissable (the user can close them) but there is an option here to make them permanent if you wish.
Step 6. Once you have chosen your options, add your content in the Alert Content field. This is the text that shows on the Alert box.
Step 7. If you wish to make further customization, there are options for Element Visibility, as well as fields for a CSS Class, and CSS ID. There is also an animation tab, if you wish to customize how the Alert will load on the page. Save your page.
Read below for a detailed description of all element options.
767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada767,635 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 > Alert. Also, please note that 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
Alert Type – Allows you to choose from any of the 4 preset alerts (General, Error, Success or Notice), or the Custom one.

Accent Color – This setting is only for the Custom Alert. It allows you to set the border, text and icon color for custom alert boxes.

Background Color – This setting is only for the Custom Alert. This allows you to set the background color for custom alert boxes.

Border Size – This setting is only for the Custom Alert. This allows you to set the border size for custom alert boxes. In pixels.

Select Custom Icon – This setting is only for the Custom Alert. This allows you to set the icon for custom alert boxes.

Content Alignment – This setting allows you to choose the alignment of the Alert content.

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

Text Transform – This setting allows you to transform the case of the Alert text.

Dismissable Box – This setting allows you to specify whether the Alert Box can be dismissed or not.

Box Shadow – This setting displays a shadow below the Alert Box.

Alert Content – This is where you enter the content for the Alert Box.

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

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.

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

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

General Background Color – Set the background color for general alert boxes.

General Accent Color – Set the accent color for general alert boxes.

Error Background Color – Set the background color for error alert boxes.

Error Accent Color – Set the accent color for error alert boxes.

Success Background Color – Set the background color for success alert boxes.

Success Accent Color – Set the accent color for success alert boxes.

Notice Background Color – Set the background color for notice alert boxes.

Notice Accent Color – Set the accent color for notice alert boxes.

Content Alignment – Choose how the content should be aligned. Choose between Left, Center, and Right.

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

Dismissable Box – Select if the alert box should be dismissable.

Box Shadow – Display a box shadow below the alert box.

Border Size – Controls the border size of the alert boxes. In pixels.
View The Options Screen

Blog Element

Blogging is core WordPress functionality, and with Avada, we have added many ways to get the most out of this core custom post type. For a full rundown on how to blog, in conjunction with Avada, please see the full series of Blog Post type documentation here.
One of the best ways to add blog posts to a page however, is to use the Blog Element. This is a fantastic method to use, because it allows you to place your blog posts on any page, select any of our layouts, assign custom categories to display, and so much more. Using the Blog Element gives you the flexibility to add a blog feed on any page, and indeed, anywhere on the page. Each Blog element can have a different set of categories, layouts and other unique blog settings. It』s also great to use if you want to only display a few posts on a page along with other content. Before you can display blog posts, you must, of course, first create them.
Read on to find out about all the options for this Element, or watch the video for a visual overview.

Avada Beer: Deconstructing a Prebuilt Website

Avada Electrician: Deconstructing a Prebuilt Website

Avada Barber Shop: Deconstructing a Prebuilt Website

The 2021 Avada Black Friday Sale

Avada eSports: Deconstructing a Prebuilt Website

Avada Extreme Sports: Deconstructing a Prebuilt Website

Avada Salon: Deconstructing a Prebuilt Website

Avada Spa: Deconstructing a Prebuilt Website

How to Build a Multilingual Website in Minutes Using Avada and WPML,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Blog ElementThe Blog Element is the most versatile way to add blog posts 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 Blog from the Elements List.
Step 4. Configure the Blog element to your liking. This is where the action happens. The Blog Element comes with 7 different blog layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Blog Element Demo page. There are way too many options to list for this element, but if you start with your preferred layout, and then slowly go down the options list, customizing its appearance to suit your wishes, you will soon get the blog page you are looking for! There is almost nothing that cannot be customized, and it is truly the most versatile way to add blogs to a page.
Step 5. Once you have finished configuring the options, save your page.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsIMPORTANT NOTE: When using the Blog element, the general Avada Global Options on the Blog tab will not take effect. This is because each Blog element has its own set of options built directly into the element. This allows you to set all the options per instance of the element. The single post Page Options in Avada Global Options will still apply.Location: 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 > Blog. 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.

Blog Layout – Controls the blog posts layout. Choose between Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, or Masonry.

Number of Columns – Controls the number of columns per row. Note: Masonry layout does not work with 1 column. Default currently set to 2.

Column Spacing – Controls the column spacing for blog posts.

Masonry Image Aspect Ratio – Allows you to set the ratio to decide when an image should become landscape (ratio being width : height) and portrait (ratio being height : width). Note: 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. Note: 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.

Equal Heights – Allows you to display grid boxes with equal heights per row.

Posts Per Page – Accepts a numerical value that sets how many posts to display per page. Choose from -1 – 25. Choose -1 to display all and 0 to use number of posts from Settings > Reading.

Post Status –Select the status(es) of the posts that should be included or leave blank for published only posts. You can select from Published, Drafted, Scheduled, Private, or Pending.

Post Offset – Accepts a numerical value that sets how many posts to skip. Choose from 0 – 25.

Pull Posts By – Allows you to load posts by category or tag.

Categories – Controls which post categories to display. Leave blank to show all categories.

Exclude Categories – Controls which post categories to exclude. You can exclude multiple categories, or leave blank to exclude none.

Tags – Controls which post tags to display. Leave blank to show all tags.

Exclude Tags – Controls which post tags to exclude. You can exclude multiple tags, or leave blank to exclude none.

Order By – Controls how to order the posts. Choose from Date, Post Title, Post Slug, Author, Number Of Comments, Last Modified, or Random.

Order – Controls the sorting order of the posts. Choose from Descending or Ascending.

Show Thumbnail – Allows you to show or hide the post』s featured images. Choose from Yes or No.

Show Title – Allow you to show or hide the title below the featured image. Choose from Yes or No.

Link Title To Post – Controls the title as a link to the single post page. Choose from Yes to set the title as a link, or No to keep it as plain text.

Text Display – Controls if the blog post content is displayed as excerpt, full content or is completely disabled. Choose between Default, Excerpt, Full Content, or No Text.

Excerpt Length – Accepts a numerical value that sets the excerpt』s length. Choose from 0 – 500.

Strip HTML from Posts Content – Allows you to strip HTML from the excerpt. Choose Yes to strip HTML, or No to keep it.

Show Meta Info – Allows you to show or hide all meta data. Choose Yes or No.

Show Author Name – Allows you to show or hide the author. Choose Yes or No.

Show Categories – Allows you to show or hide blog post categories. Choose Yes or No.

Show Comment Count – Allows you to show or hide all comments. Choose Yes or No.

Show Date – Allows you to show or hide the date. Choose Yes or No.

Show Read More Link – Allows you to show or hide the read more link. Choose Yes or No.

Show Tags – Allows you to show or hide tags. Choose Yes or No.

Pagination Type – Allows you to set the pagination type. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.

Grid Box Color – Controls the background color for the grid boxes.

Grid Element Color – Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Note: At least one meta data field must be enabled and excerpt or full content must be shown in order that the separator will be displayed.

Grid Separator Color – Controls the line style color of grid separators.

Blog Grid Text Padding – Controls the padding for the blog text when using grid / masonry or timeline layout.

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Number of Columns – Set the number of columns per row for grid and masonry layout. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for blog posts for grid and masonry layout. In pixels.

Blog Grid Text Padding – Controls the top/right/bottom/left padding of the blog text when using grid / masonry or timeline layout. Enter values including any valid CSS unit, ex: 30px, 20px, 25px, 25px.

Content Display – Controls if the post content displays an excerpt, full content or is completely disabled for blog elements. Choose between No Text, Excerpt, or Full Content.

Excerpt Length – Controls the number of words in the excerpts for blog elements.

Blog Date Box Color – Controls the color of the date box in blog alternate and recent posts layouts.
View The Options Screen

Archives 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. The first of these is the Archive 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 Archives ElementThe Archives Element allows you to place archives content anywhere in a Content Layout Section, in any Layout.
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 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 Archives Element can be placed anywhere in you Layout Section, and will dynamically pull Archives Content into the page, based on the settings in the Element, and the Conditions set in the Layout. For example, you might choose a Masonry Layout in the Archives Element, and set the condition for the Layout only to display on Portfolio Archives.
NB. With a Layout that has conditions showing Archives content, but where a Content Layout Section has not been specified, the Archive Layout comes from the relevant Theme Options – i.e General Blog > Blog Archives Layout, and General Portfolio > Portfolio Archives Layout.
See below for an example of the Archives Element in a Category Layout, displaying in a three column Grid, on the Interior Design Demo. Follow this link for a live example.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 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 Tab
Posts Per Page –Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.

Content Display – Controls if the content displays as an excerpt or full content or is completely disabled.

Excerpt Length – Insert the number of words/characters you want to show in the excerpt.

Strip HTML from Posts Content – Choose to strip HTML from the post content.

Show Meta Info – Choose to show all meta data.

Show Author Name – Choose to show the author.

Show Categories – Choose to show the categories.

Show Comment Count – Choose to show the comments.

Show Date – Choose to show the date.

Show Read More Link – Choose to show the Read More link.

Show Tags – Choose to show the tags.

Pagination Type – Choose the type of pagination.

Nothing Found Message – Replacement text when no results are found. * Dynamic Content Option.

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
Layout – Select the layout for the element. Choose from Large, Medium, Large Alternate, Medium Alternate, Grid, Timeline, and Masonry.

Show Thumbnail – Displays featured image.
View The Options ScreenGlobal OptionsLayout Elements do not have any Global Options.