Avada 文件

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

Counter Circles Element

Avada includes multiple animated counter elements, including the Counter Circles Element. These are great for displaying varying types of data to your viewers. The Counter Circles have several options that allow you to easily customize them to fit your needs.
Whether it』s sales percentages, skill levels, promotional levels or other data sets, the Counter Circle Element is a great way to visually attract the viewer』s attention and display content. Read below to discover more about this useful little element, and watch the video for a visual overview.
96%of usersAvada,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Counter Circles ElementThe Counter Circles Element allows you to add animated counter circles 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 Counter Circles from the Elements List.
Step 4. The options on the right hand side are Parent Options, and affect the whole series of counter circles, while the individual counter circles are configured on the left hand side. With this element, there is only one main Parent Option, and that is to control when the counter circles starts to animate. The default is when the top of the element hits the bottom of the viewport, but you can choose from two other options as well. Make sure to view the Element Demo page, to fully appreciate the options on offer. One thing to note, is that if you want your counter circles to fill the width of the column they are in, make sure the number of columns equals the number of counter circles. If you have fewer, they won』t fill the column, and if you have more, they will display on a second row.
Step 5. Once you have set your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual Counter Circles. These options allow you to style and populate the individual counter circles.
Step 6. Once you have added content to one counter circle, you can then set up other counter circles, either by duplicating existing ones, or creating new ones, by clicking on the Clone Item icon, or the + Counter Circle button respectively.
Step 7. Once you have completed adding your counter circles, save your 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 the Options > Avada Builder Elements > Counter Circles 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.
Parent Options
Offset of Animation – Controls when the animation should start. Choose between 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 Class – Add a custom class to the wrapping HTML element for further css customization.

CSS ID – Add a custom id to the wrapping HTML element for further css customization.
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 Counter Circle Button –  Allows you to add a new Counter Circle.
View The Options ScreenChild Options
Filled Area Percentage – From 1% to 100%.

Filled Color – Controls the color of the filled in area.

Unfilled Color – Controls the color of the unfilled in area.

Size of the Counter – Insert size of the counter in px. ex: 220.

Show Scales – Choose to show a scale around circles. Choose Yes, or No.

Countdown – Choose to let the circle filling move counter clockwise.Choose Yes, or No.

Animation Speed – Insert animation speed in milliseconds.

Counter Circle Text – Insert text for counter circle box. It』s a good idea to keep it short.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Counter Circles.

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

 Counter Circle Filled Color – Controls the color of the filled circle.

Counter Circle Unfilled Color – Controls the color of the unfilled circle.
View The Options Screen

Counter Boxes Element

Avada includes multiple animated counter elements, including the Counter Boxes Element. These are great for displaying varying types of data and content to your viewers. The counter boxes include several options for easy customization, and they are a great way to display content and attract the viewers eyes as they animate into the screen viewport. Read below to discover more about this useful little element.
0Wonderful Users & Counting0Support Tickets Resolved0Cups of Hot Coffee,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Counter Boxes ElementThe Counter Boxes Element allows you to add animated counters 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 Counter Boxes from the Elements List.
Step 4 – The options on the right hand side are Parent Options, which are largely styling options, and affect the whole series of counter boxes, while the individual counter boxes are configured on the left hand side. Make sure to view the Element Demo page, to fully appreciate the options on offer. If you want your counter boxes to fill the width of the column they are in, make sure the number of columns equals the number of counter boxes. If you have fewer, they won』t fill the column, and if you have more, they will display on a second row.
Step 5. Once you have set all your Parent Options, you add Child Items on the left. Click the pencil icon to edit the existing item. The Child Item Options Panel appears. This is where you add the content for the individual Counter Boxes. The initial option is the Counter Value, plus there are options for Delimiters, Units, Unit Position, Icon, Counter Direction and the Counter Box Text.
Step 6. Once you have added content to one counter box, you can then set up other counter boxes, either by duplicating existing ones, or creating new ones, by clicking on the Clone Item icon, or the + Counter Box button respectively.
Step 7. Once you have completed adding your counter boxes, Save your changes.
Read below for a detailed description of all element options.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 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 > Counter Boxes 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.
Parent Options
Number of Columns – Set the number of columns per row. Choose from 1 – 6 columns.

Counter Box Title Font Color – Controls the color of the counter 「value」 and icon.

Counter Box Title Font Size – Controls the size of the counter 『value』 and icon. Enter the font size without 『px』 ex: 50.

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

Counter Box Icon Size – Controls the size of the icon. Enter the font size without 『px』. Default is 50.

Counter Box Icon Top – Controls the position of the icon. Choose from Default, No, or Yes.

Counter Box Body Font Color – Controls the color of the counter body text.

Counter Box Body Font Size – Controls the size of the counter body text. Enter the font size without 『px』 ex: 13.

Counter Box Border Color – Controls the color of the border. Default value is otherwise selected.

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

CSS ID – Add a custom id to the wrapping HTML element for further css customization.
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 Counter Box Button –  Allows you to add a new Counter Box.
View The Options ScreenChild Options
Counter Value – The number to which the counter will animate. Decimal numbers are supported by using the 「.」 (period) delimiter.

Delimiter Digit – Insert a delimiter digit for better readability. ex: ,

Counter Box Unit – Insert a unit for the counter. ex %.

Unit Position – Choose the positioning of the unit. Choose from After Counter, or Before Counter.

Icon – Click an icon to select, click again to deselect.

Counter Direction – Choose count up or down.

Counter Box Text – Insert text for counter box.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Counter Boxes.

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

Counter Boxes Speed – Controls the speed of the counter boxes elements. ex: 1000 = 1 second.

Counter Boxes Title Font Color – Controls the color of the counter values and icons.

Counter Boxes Title Font Size – Controls the size of the counter value and icon. Enter value including any valid CSS unit, ex: 50px.

Counter Boxes Icon Size – Controls the size of the icon. Enter value including any valid CSS unit, ex: 50px.

Counter Boxes Body Font Color – Controls the color of the counter boxes body text.

Counter Boxes Body Font Size – Controls the size of the counter boxes body text. Enter value including any valid CSS unit, ex: 13px.

Counter Boxes Border Color – Controls the color of the counter boxes border.

Counter Boxes Icon On Top – Turn on to display the icon on top of the counter value.
View The Options Screen

Countdown Element

The Countdown Element is the perfect element to actively show your visitors a countdown to a special event, sale, or anniversary etc. This Element allows you to enter an end date and it automatically calculates the time remaining to the specific date. And with Avada 7.3, you can even pull Event and Sales dates dynamically from WooCommerce and The Event Calendar. It also comes with several customization options to control all colors, backgrounds, borders, text and more.
Read on to find out more about this super useful Element, and watch the video for a visual overview.
The New Year Is Coming!2022 is here in:00000044Days0044Hrs3322Min3399SecDON'T WAIT - BUY AVADA NOW,View Element Demo Page!OverviewHow To Use The Countdown ElementHow To Use The WooCommerce / The Event Calendar Dynamic OptionsElement OptionsGlobal Options,How To Use The Countdown ElementThe Countdown Element allows you to add a customizable countdown box to your content.
Step 1. Ensure Avada Builder, or Avada Live is active. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 2. Choose Countdown from the Elements List.
Step 3. There are four tabs in the options for this element; the General Tab, the Background Tab, the Design Tab, and the Extras Tab. Starting with the General Tab, the first, and most important option, is the date and time you are counting down to. You can type the date and time directly into the field (just remember to use SQL time format – YYYY-MM-DD HH:MM:SS) or alternatively, you can use the included date and time picker at the right of the field. A related option immediately below this allows you to choose the Timezone the entered date and time relates to.
With Avada 6.2 and up, there is a layout option to show the Countdown as Stacked or Floated. You can choose to show weeks or not, and there are options for Border Radius, Headings, Subheadings, and a few for Links, if you want to link the Countdown box to another page, for example, an event page. There are also further customization options for Element Visibility, and CSS Class and CSS ID.
Step 4. The Background Tab allows you to style the background of your Countdown Box. You can have a solid color background, one with opacity, one with an image, or a combination of the last two. there are also two options for positioning your image.
Step 5. The Design Tab styles the content of your Countdown Box. There are various options for color styling the actual Countdown, the Countdown Text, Heading, Subheading, and Link.
Step 6. Once you have completed choosing your options, Save your changes.
Read below for a detailed description of all element options.,How To Use The WooCommerce / The Event Calendar Dynamic OptionsThe Countdown Element also allows you to pull your Countdown date from WooCommerce Sale start or end dates, or The Event Calendar Event start or end dates. This gives you enormous flexibility as to how you use this Element. Combined with the Display When Inactive option, you could even use this Element in a Layout for easy display of Sales and Events.
For full details on the dynamic options available in thie Element, please see the How To Use The Dynamic Options In The Countdown Element doc, linked here.
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: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Countdown section. 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
Countdown Timer End – Set the end date and time for the countdown time. Click the calendar icon to use the date picker. Use SQL time format: YYYY-MM-DD HH:MM:SS. E.g: 2016-05-10 12:30:00.

Timezone – Choose which timezone should be used for the countdown calculation. Default currently set to Timezone Of Site. Choose between Timezone of Site and Timezone of User. Use the Dynamic Content option to set the date dynamically.

Layout – Select the layout of the Countdown element. You can choose from Default, Floated, or Stacked.

Show Weeks – Select 「yes」 to show weeks for longer countdowns.

Label Position – Select the position of the date/time labels. Choose from Text Flow, Top, or Bottom.

Display Before Started / When Ended – Display the Element before it has begun, and when it has ended. Choose from Show, or Hide.

Element Border Radius – Choose the border radius of outer box. In pixels (px), ex: 1px.

Heading Text – Choose a heading text for the countdown.

Subheading Text – Choose a subheading text for the countdown.

Link URL – Add a URL for the link. E.g: https://example.com.

Margin – Control the margins around the Element. In pixels or percentage, ex: 10px or 10%.

Radius – Choose the radius of outer box. In pixels (px), ex: 1px.

Link Text – Choose a link text for the countdown.

Link Target – Choose whether to open the link in the same tab (_self) or a new tab (_blank).

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

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

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenBackground Tab
Background Color – Choose a background color for the countdown wrapping box.

Background Image – Upload an image to display in the background.

Background Position – Choose the position of the background image. Choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Bottom and Center Center.

Background Repeat – Choose how the background image repeats. Choose from No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, and Repeat Vertically.
View The Options ScreenDesign Tab
Counter Box Spacing – Controls the space between the counter boxes. Enter value including any valid CSS unit, ex: 20px.

Counter Box Background Color – Choose a background color for the counter boxes.

Counter Box Border Size – In pixels.

Counter Box Border Color – Controls the border color for the counter boxes.

Counter Box Border Radius – Controls the border radius for the counter boxes. In pixels (px), ex: 1px, or 「round」.

Counter Box Padding – Set the padding for the counter boxes. Enter values including any valid CSS unit, ex: 4%. Leave empty for default values.

Counter Font Size – Controls the font size for the countdown timer. Enter value including any valid CSS unit, ex: 20px.

Counter Text Color – Choose a text color for the countdown timer. Leave empty for default value.

Counter Label Font Size – Controls the font size for the countdown label. Enter value including any valid CSS unit, ex: 20px.

Counter Label Text Color – Choose a text color for the countdown timer labels.

Heading Font Size – Controls the font size for the countdown heading. Enter value including any valid CSS unit, ex: 20px.

Heading Text Color – Choose a text color for the countdown heading.

Subheading Font Size – Controls the font size for the countdown subheading. Enter value including any valid CSS unit, ex: 20px.

Subheading Text Color – Choose a text color for the countdown subheading.

Link Text Color – Choose a text color for the countdown link.
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: WordPress Dashboard > Avada > Options > Avada Builder Elements > Countdown.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Countdown Timezone – Controls the timezone that is used for the countdown calculation.

Countdown Layout – Select the default layout of the countdown element.

Countdown Show Weeks – Turn on to display the number of weeks in the countdown.

Countdown Label Position – Select the default position of the date/time labels.

Countdown Background Color – Controls the background color for the countdown box.

Countdown Background Image – Select an image for the countdown box background.

Countdown Background Repeat – Controls how the background image repeats. Choose from Repeat All, Repeat Horizontal, or Repeat Vertical.

Countdown Background Position – Controls how the background image is positioned.

Countdown Counter Box Spacing – Controls the spacing between the counter boxes.

Countdown Counter Box Background Color – Controls the background color for the counter boxes.

Countdown Counter Box Padding – Set the padding for the counter boxes.

Countdown Counter Border Size – Controls the border size of the counter boxes.

Countdown Counter Border Color – Controls the border color of the counter boxes.

Countdown Counter Border Radius – Controls the border radius of the counter boxes.

Countdown Counter Font Size – Controls the font size for the countdown timer.

Countdown Counter Text Color – Controls the color for the countdown timer text.

Countdown Counter Label Font Size – Controls the font size for the countdown label.

Countdown Counter Label Text Color – Controls the color for the countdown timer labels.

Countdown Heading Font Size – Controls the font size for the countdown headings.

Countdown Heading Text Color – Controls the color for the countdown headings.

Countdown Subheading Font Size – Controls the font size for the countdown subheadings.

Countdown Subheading Text Color – Controls the color for the countdown subheadings.

Countdown Link Text Color – Controls the color for the countdown link text.

Countdown Link Target – Controls how the link will open.
View The Options Screen

Convert Plus Element

Convert Plus is a powerful, yet easy to use premium popup plugin, that comes bundled with Avada. When the plugin is enabled, there is also a Convert Plus Element for you to use, to assist you in adding any of your Convert plus modules into your content.
Convert plus has three modules, Modal, Info Bar, or Slide In, and with the Convert Plus Element, you can easily add them into your content, with custom manual triggering or inline display. Read on to find out more about this useful Element.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Convert Plus ElementThe Convert Plus Element allows you to add your custom Convert plus modules 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 Convert Plus from the Elements List.
Step 4. Choose the module type you wish to add (Modal, Info Bar, or Slide In), and then choose your specific, previously created module. These modules are created in the Convert Plus section, available from your WordPress Dashboard.
Step 5. Choose your launch type – Manual Trigger, or Inline Display. If you choose Manual Trigger, you can enter the content with which to trigger the module in the text editor at the bottom of the dialog.
Step 6. Click Save to add the Element to your page.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsIMPORTANT NOTE: The Convert Plus Element will only display if you have the Convert Plus Premium plugin installed and activated.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 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.

Select Module – Select the module you wish to insert. Choose from Modal, Info Bar, or Slide In.

Select Modal – Select the modal you want to use. Modals with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Select Slide In – Select the Slide In you want to use. Slide Ins with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Select Info Bar – Select the info bar you want to use. Info Bars with status 「Pause」 are not included as they won』t display until you make them 「Live」.

Launch Type – Controls how the module will be launched. Choose from Manual Trigger, or Inline Display.

Content – Enter some content with which to trigger your Convert Plus module. This section will only be visible if you choose Manual Trigger.
View The Options ScreenGlobal OptionsThe Convert Plus Element does not have any global options.

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.

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

Container Element

One of Avada』s most fundamental and versatile Design Elements is the Container Element. This element is the structural foundation of all page layouts created within Avada Builder, and is an integral part of making sure your designs stay organized and intact, as well as being a great design tool for your layout.
With Avada 7.0, we have completely re-imagined both the Container and Column elements, basing them on CSS Flexbox. This means that extremely flexible positioning and spacing have now arrived in Avada. At the same time, we have kept our classic setup for Containers and Columns, in case you want to keep using it on pre-existing sites.
By default, Flexbox will not be enabled on existing sites and containers, but will be for new sites and new containers on existing sites. For more information on these exciting changes, please see the Introducing Flexbox for Containers and Columns documentation. And for a full rundown of Legacy settings for Containers, please see our Container and Column Element Legacy Settings document.
The Container Element is massively flexible, and it provides a great range of both functional and design options that allow you to build your site exactly how you want it. Read on below to discover all you need to know about the Container Element, and watch the video below for a visual overview of this most important of Elements.,View Element Demo Page!OverviewContainer Interaction With Templates
Responsive Option Sets
How To Add A Container Element OptionsGlobal Options,Container Interaction With TemplatesWhile the Container Element is mostly independent, some of its features do rely on other factors on your site, such as your Site Width and the Page Template used. The Container Element enables the background color, image, or border to span 100% of the site width or the browser width, depending on the Page Template it』s being used on.
Default Template – All content is contained to the Site Width of your site.
100% Width Template – Background colors, images and borders span 100% width of the browser window by default, while content, by default, is at Site Width, but you can choose to expand it out to 100% width of the browser window (minus any Container padding you set). For more information, please see the 100% Width Template documentation.,Responsive Option SetsAnother new feature for Containers and Columns in Avada 7.0 is Responsive Option Sets. You can see the Responsive Icons at the top right in the below image of the Container Element. Just note, that this feature is only available on the new Flexbox Containers, and not on Legacy Containers.
Please see the Responsive Option Sets documentation for specific details of this awesome new feature, but in short, it allows you to change what screen size you want certain option values to be valid for, and allows you to have up to three individual option sets for the included options. You will also see a screen icon on the individual options that are a part of this feature. A simple example of how this feature might be used would be to enable different container margins or column widths on mobile view, as opposed to the tablet or desktop view.,How To Add A ContainerWhen adding a new page, whether in Avada Builder, or Avada Live Builder, you are always greeted with the Starter Page, as seen below, which leads you into the process of adding a container. Simply click on the Add Container button, and you can then choose from the full range of Container layouts to add to the page. This can be an empty Container, but much more usefully, it can include any combination of Columns as well.
On an existing page with content, adding a new Container is equally simple. As seen below, in Avada Live, you just hover over any Container Controls and click on the Add Container Icon.
In the back-end interface of the Builder, as seen below, the Add Container Button is found at the bottom of every existing Container.
In both cases, this brings up the Select Container dialog, as seen below. Simply select the Container / Column combination you』d like to add and the new Container will be placed directly below the Container you inserted it from.
Once you have added your Container, and have Columns inside it, you can begin to add content via the Avada Builder Elements. But do not neglect to explore the Container itself. It can also play a huge role in your page layout. By editing the Container Options (through the pen icon on the Container toolbar) you access the Container Options, which are very powerful, and can help you achieve a wide range of layout scenarios. Read on below to see the full list of Container options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsInside the Container Element options, you will find 4 tabs – General, Design, Background, and Extras. Because of the amount of options you can set for the element, we』ve split them into these four logical tabs, so you can easily locate the option you』re looking for. Continue reading below for a full description of each tab, and the options within them.
NB. Please note that the screenshots here show ALL Flex Container options, (achieved in this case by Photoshop magic, but normally by turning the Avada』s Option Network Dependencies options off in Advanced > Theme Features) and so may look different to your initial options panel. This option is on by default and only shows various options when they relevant options are enabled. For more information on this important feature of the Avada Options Network, please see the Avada』s Option Network Dependencies document.,General Tab
Container Type – This option will only be visible on sites with Enable Legacy Support enabled (Options > Avada Design Elements > Container). Select the type of container you want. Choose from Flex or Legacy. See the Introducing Flexbox to Container and Columns doc for more information.

Interior Content Width – Select if the interior content of the Container is contained to Site Width or 100% Width. This option is only available when the page is using the 100% Width Template. Note that this option is for the Interior Content. When the 100% Width Template is in use, any background color or images of a Container will fill the full width of the viewport by default. Also note that enabling 100% Interior Content Width will remove left and right padding.

Height – Select the height of the Container. Choose from Auto, Full Height, or Minimum Height. In Avada 7.0, this replaces the 100% Height option. Larger content that is taller than the screen height will be cut off, this option works best with minimal content. Note: Mobile devices are even shorter in height so this option can be disabled on mobile in Theme Options while still being active on desktop.

Minimum Height – Allows you to set a minimum height for the container. This sets a minimum height for the container regardless of content. Once the content is longer than the value set, it will grow automatically. This option shows only when Minimum Height is selected in the Height Option. NB. This option is now part of the Responsive Option Sets, which means Minimum Height can be set indpependently for large, medium and small screens.

Enable 100% Height Scroll – Allows you to add the container into a collection of 100% height containers that share scrolling navigation. This option is available only if you have set 『100% Height』 option to 『Yes』. Note: When this option is used, the mobile visibility settings are disabled. This option is only visible when Full Height is selected.

Row Alignment – This defines how rows should be aligned vertically within the container. Important: this will only take effect if multiple rows are present. Choose from Stretch, Top, Center, Bottom, Space between, Space Around, or Space Evenly. This option is only visible when Full Height is chosen in the Height Option.

Column Alignment – Select how you want columns to align with rows. Choose from Top, Center, Bottom, or Full Height. If you have multiple columns in one row in a container, this option controls how they align with each other in that row. The default is top, but you can center them, align them to the bottom, or make them all stretch to full height.

Column Justification – Select how the columns will be justified horizontally. Choose from Start, Center, End, Between, Space Around or Space Evenly. Columns must fill less than 100% of the row for this to have effect.

Column Spacing – Controls the column spacing between one column to the next. This can be overriden in the Column Spacing set on the individual Columns. Enter values including any valid CSS unit, ex: 4%.
Container HTML Tag – Choose container HTML tag, default is div. Options are Section, Header, Footer, Main, Article, Aside, or Nav.
Name Of Menu Anchor – This option lets you assign an anchor to the Container Element. The same anchor can be used to reference that particular section in your navigation menu, or one page text links. Learn more about Anchors here.

Container Visibility – This option lets you show or hide the container in small, medium, or large screens. Each of the 3 sizes has a custom width setting on the Fusion Builder Elements tab > Visibility Size Options in the Theme Options.
Container Publishing Status – We introduced this very useful feature with Avada 5.7. Now you can create containers and control their front end visibility through a set of simple publishing options. There are now 4 states a container can have – Published (default), Published Until, Published After, and Draft.
Published is the default state for all Containers. If you choose Published Until, you set a date, and optionally a time, and the Container will be published until that date, after which it will revert to a draft. If you choose Published After, the Container will remain unpublished in draft mode, until the time specified. If you choose Draft, the Container will simply remain unpublished. This gives you a lot of options to pre-develop content for a specific event or time period, while being able to see how it interacts with your other page content. Logged in users (Author user role or above) will always be able to see Containers in ALL states on the front end, so to check the front end for how visitors will see it, you will need to log out.
To give clarity in the back end, when a Container has either a Published Until, Published After, or a Draft state, an icon will be visible at the top right on the Container. See a screenshot here to see the Icons. The Published After and Published Until states show an icon for a Scheduled Container, while the Draft Icon shows an icon for a Draft Container. At any time, you can click on the icons to override the Publish status. This will immediately publish the Container and remove the icon.
Container Publishing Date – This option will be visible when you have chosen Published Until, or Published After selected. To set the date and time on a container, click the Calendar Icon in the Container Publishing Date Field. This brings up the Date Picker (see screenshot here). The current month comes up by default, and current day is selected. To change the date you can select a date, navigate using the arrows backwards and forwards through the months, or you can click on the Month Title to see a wider range of months, and then the Year Title to see a wider range of years. To set a specific time, click on the Clock icon at the bottom of the Date Picker to open the Time Picker. You can move the hours, minutes and seconds up and down, or you can click on the hour, minute or second to choose from a wider range of times. Alternatively, you can just type in the date and time, but if you do this, make sure you enter it in the correct SQL time format: YYYY-MM-DD HH:MM:SS, e.g: 2018-10-10 12:30:00. The timezone of the website (as set in Dashboard > Settings > General) is used for time calculations.
IMPORTANT NOTE: Any content that is in a drafted or scheduled Container is not loaded on the front end for logged out site visitors, and therefore, won』t be indexed by search bots and will have no impact on SERPs (Search Engine Result Pages).
CSS Class – Allows you to add a class for the 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 for the Element. The ID must be unique to each CSS ID.
View The Options Screen,Design Tab
Margin – Spacing above and below the section. Enter values including any valid CSS unit, ex: 4%. This option can be set indpendently for Large, Medium and Small screens. On Flex Containers, there will be a Responsive Set icon on this option.

Padding – Enter values including any valid CSS unit, ex: 10px or 10%. On Flex Containers, there will be a Responsive Set icon on this option.

Container Link Color – Controls the color of any links inside the container. Leave empty for default value.

Container Link Hover Color – Controls the hover color of any links inside the container. Leave empty for default value.

Container Border Size – Accepts a pixel value that sets the border』s thickness for each side of the Container.

Container Border Color – Accepts a hexcode value that sets the border』s color. You can also use our Color Picker tool to choose your desired color.

Border Style – Controls the style of the border. Choose between Solid, Dashed, or Dotted.

Box Shadow – Set to 「Yes」 to enable box shadows. Choose from Yes, or No.

Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels, from 0 to 100.

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels, from -100 to 100.

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

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

Z Index – Value for container』s z-index CSS property, can be both positive or negative. Z index allows controlling of layering.

Overflow – Value for container』s overflow CSS property. Choose from Default, Hidden, Scroll, Visible, or Auto.
View The Options Screen,BG (Background) TabThe Background Tab has been re-arranged into four sub-tabs, controlling all aspects of possible container backgrounds. With the addition of gradient backgrounds, there are a multitude of background options, and these options can also be combined; for example you can have a background image with a background color or gradient (with opacity) as an overlay.
ColorGradientImageVideoColorThe Color tab allows you to add a color as the background of a container. You can use the Color Picker in a variety of ways, from choosing a preset color, using the color picker itself, or adding a hexadecimal or RGBA code directly. With support for hex codes and transparency, there are literally millions of color choices available.

Container Background Color – This controls the background color of the container element. Leave empty for default value. You can set a custom color for your Container Element by entering a hexadecimal or RGBA value directly into the 『Container Background Color』 field, or use our Color Picker tool to choose your desired color.
GradientThe Gradient tab allows you to add a color gradient as the background of a container. You can choose from a radial or a linear gradient, and there are many options to control the angle and starting and ending point of the gradient. Like the color tab option, the gradient colors can also have any level of transparency, enabling them for use as overlay colors for background images or videos. See the full options below.
Gradient Start Color – Select start color for gradient. Leave empty for default value.Gradient End Color – Select end color for gradient. Leave empty for default value.
Gradient Start Position – Select start position for gradient.

Gradient End Position – Select end position for gradient.

Gradient Type – Controls gradient type. Choose from Linear or Radial.

Radial Direction – Select direction for radial gradient. Select from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.

Gradient Angle – Controls the gradient angle. In degrees.
Image
The Image Tab allows you to add an image to the background of a container. If you are using the 100% Width template, this image will fill the full width of the viewport. You can also blend your background images with your color or gradient option as well.

Background Image – Allows you to easily upload your desired background image by clicking the 『Upload』 button. Accepts common image file types such as .JPG, .PNG, .TIF, .GIF, and the like. This field can also take dynamic content.

Background Position – Controls how your background image is positioned. Choose between Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, or Center Bottom.

Background Repeat – Controls how your background image repeats. Choose between No Repeat, Repeat Vertically and Horizontally, Repeat Horizontally, or Repeat Vertically.

Fading Animation – Enables the background to fade and blur on scroll. This option is specifically for images only. Choose Yes to enable the option, or No to disable it.

Background Parallax – Controls how the background image scrolls. Choose between No Parallax, Fixed, Up, Down, Left, or Right.

Enable Parallax On Mobile – Allows you to enable or disable the parallax effect on mobile. Only works on Up, Down, Left or Right settings. Parallax effects would most probably cause slowdowns when your site is viewed in mobile devices. If the device width is less than 980 pixels, then it is assumed that the site is being viewed in a mobile device.

Parallax Speed – Controls the scrolling speed of the parallax effect. Accepts a numerical value from 0, which is the slowest, to 1, which is the fastest. For example, .4

Background Blend Mode – Choose how blending should work for multiple background layers. For example, if you have a background image and add a color overlay (by adding a background color or gradient with opacity) then this options controls how those two layers interact.
Video
The Video Tab allows you to add a video to the background of a container. You can choose from self hosted videos or YouTube or Vimeo and there are a variety of options for playback, looping and volume.

Video MP4 Upload -Add your MP4 video file. This format must be included to render your video with cross-browser compatibility. WebM and OGV are optional. Using videos in a 16:9 aspect ratio is recommended.
Video WebM Upload -Add your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.
Video OGV Upload -Add your OGV video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. Using videos in a 16:9 aspect ratio is recommended.
YouTube/Vimeo Video URL or ID – Enter the URL to the video or the video ID of your YouTube or Vimeo video you want to use as your background. If your URL isn』t showing a video, try inputting the video ID instead. Ads will show up in the video if it has them.
Video Aspect Ratio -The video will be resized to maintain this aspect ratio, this is to prevent the video from showing any black bars. Enter an aspect ratio here such as: 「16:9」, 「4:3」 or 「16:10」. The default is 「16:9」.
Loop Video – Allows you to loop the video. Choose Yes to enable the option, or No to disable it.
Mute Video – Allows you to mute the video』s audio. Choose Yes to enable the option, or No to disable it. Note: In some modern browsers, videos with sound won』t be auto-played, and thus won』t show as container background when not muted.

Video Preview Image – IMPORTANT: This field is a fallback for self-hosted videos in older browsers that are not able to play the video. If your site is optimized for modern browsers, this field does not need to be filled in.,Extras Tab
Rendering Logic – Add conditional render logic for the element. See Conditional Element Rendering in Avada for more details.

Position Absolute – Turn on to set container position to absolute.

Responsive Absolute Position – Choose which screen sizes you want the container to be absolute on. Options are Small Screen, Medium Screen, or Large Screen.

Sticky Position – Turn on to have the container stick to the browser on scroll.

Responsive Sticky Position – Choose which screen sizes you want the container to be sticky on. Options are Small Screen, Medium Screen, or Large Screen.

Sticky Container Background Color – Controls the background color of the container element when sticky.

Sticky Container Minimum Height – Controls the minimum height of the container when sticky.

Sticky Container Offset – Controls the top offset from the container and top of viewport when sticky. Can pass either a unit of measurement, or a CSS selector.

Sticky Container Transition Offset – Controls the scroll offset before sticky styling transition applies. In pixels.

Sticky Container Hide On Scroll – Controls the scroll distance before container is hidden while scrolling downwards. Set to 0 to keep visible as you scroll down. In pixels.

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 – Select the incoming direction for the animation. Choose from Top, Right, Bottom, or Left.

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

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

Filter Type – This feature allows you to set various filters on the two states of the Container – Regular and Hover. There are eight filters to choose from – Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity, and Blur.
You can set the same, none or different filters for the hover state. This feature is also found in Columns, and works both independently and in conjunction with filters set in columns. There is a multitude of possibilities for this new feature. For more information on this awesome new feature, check out the How To Use The Container/Column Filter Options documentation and accompanying video.

Hue – The Hue Blend Mode preserves the luminosity (brightness) and saturation (the intensity of the color) of the base pixels while adopting the hue (the color itself) of the blend pixels. Hue can be used to change hues in an image while maintaining the tones and saturation of the original. The slider travels the full 360 degrees of the color wheel.

Saturation – The Saturation Blend Mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully desaturate an image, and up to 200 to fully saturate the image.

Brightness – The Brightness (luminosity) Blend Mode preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully reduce the luminosity an image, and up to 200 to fully increase the luminosity of an image.

Contrast – The Contrast Blend Mode increases or decreases the contrast in the image, by lightening or darkening the lightest pixels and lightening or darkening the darkest pixels. The slider is set to 100 by default, and can go down to 0 to fully reduce the contrast of an image, and up to 200 to fully increase the contrast of an image.
Invert – The Invert Blend Mode inverts all of the colors in the image, making each color its exact opposite color, for example, replacing greens and browns with magenta and blues. The slider is set to 0 by default, and can go up to 100 to fully invert the colors in the image.
Sepia – The Sepia Blend Mode effectively reduces an image to greyscale (black & white) and adds a mid brown color filter over the image, originally designed back in the mid 1800s to warm black and white images. The slider is set to 0 by default, and can go up to 100 to fully desaturate and apply a sepia tone to the image.

Opacity – The Opacity Blend Mode gradually increases transparency into the image. The slider is set to 100 by default, which is fully opaque, and can go down to 0 to make the image fully transparent.

Blur – The Blur Blend Mode adds a Gaussian blur to the image as the slider is increased. The slider is set to 0 by default, and can up to 50 to fully blur the image.
View The Options Screen,Global OptionsThese options are found at Options > Avada Builder Elements > Container, and set global options for Containers. Here you can set the default behavior for your containers, so go through these and configure the containers how you prefer. You can always override these options in the individual instances of the container.

Container Padding for Default Template – Controls the top/right/bottom/left padding of the container element when using the Default page template. Enter values including any valid CSS unit, ex: 0px, 0px, 0px, 0px.

Container Padding for 100% Width Template – Controls the top/right/bottom/left padding of the container element when using the 100% width page template. Enter values including any valid CSS unit, ex: 0px, 0px, 30px, 30px.

Container Background Color – Controls the background color of the container element.

Container Gradient Start Color – Controls the start color for gradient of the Container Element.

Container Gradient End Color – Controls the end color for gradient of the Container Element.
Container Border Sizes – Controls the border sizes of the container element. In pixels.
Container Border Color – Controls the border color of the container element.

Container 100% Height Navigation Background Color – Controls the background colors of the navigation area and name box when using 100% height containers.

Container 100% Height Navigation Element Color – Controls the color of the navigation circles and text name when using 100% height containers.

Container 100% Height Scroll Sensitivity – Controls the sensitivity of the scrolling transition on 100% height scrolling sections. In milliseconds.

Container 100% Height On Mobile – Turn on to enable the 100% height containers on mobile. Please note, this feature only works when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop, but will need disabled on mobile.

Enable Legacy Support – Enable container legacy support.
View The Options Screen

Container and Column Element Legacy Settings

With the introduction of Flex Containers and Columns in Avada 7.0, we have entered a new era when it comes to flexibility of layout and design. Please see Introducing Flexbox for Containers and Columns to get up to date with how Flexbox opens up a new world of layout possibilities.
But it』s a big change, and so we have kept the Legacy settings for Containers and Column Elements on existing sites, so you can have the choice whether you want to use them or not.
Upon update to Avada 7.0, Legacy Support will be enabled for existing sites, and all existing Containers and Columns will remain as they were. Any new Containers, however, will use the new Flex version. So for completed sites, nothing will change, and as such, you would be using the Legacy options when editing containers and columns.
For a full rundown on these elements, please see the Container Element and Column Element docs, but in this document, you can see a rundown of all the Legacy settings that differ from the new Flex settings.
For the Container Element, the differences between Flex and Legacy are found in the General tab. Please see below for the options for this tab on the Container Element.,Container ElementContainer – General Tab (Legacy)Container Type – This option will only be visible on sites with Enable Legacy Support enabled (Options > Avada Builder Elements > Container). Select the type of container you want. Choose from Flex or Legacy. See the Introducing Flexbox to Containers and Columns doc for more information.
Interior Content Width – Select if the interior content of the Container is contained to Site Width or 100% Width. This option is only available when the page is using the 100% Width Template. Note that this option is for the Interior Content. When the 100% Width Template is in use, any background color or images of a Container will fill the full width of the viewport by default. Also note that enabling 100% Interior Content Width will remove left and right padding.

Height – Select the height of the Container. Choose from Auto, Full Height, or Minimum Height. In Avada 7.0, this replaces the 100% Height option. Larger content that is taller than the screen height will be cut off, this option works best with minimal content. Note: Mobile devices are even shorter in height so this option can be disabled on mobile in Theme Options while still being active on desktop.

Enable 100% Height Scroll – Allows you to add the container into a collection of 100% height containers that share scrolling navigation. This option is available only if you have set 『100% Height』 option to 『Yes』. Note: When this option is used, the mobile visibility settings are disabled. This option is only visible when Full Height is selected.

Center Content – Allows you to center the content vertically on 100% height containers. Note. This option is only available on Legacy containers, when Full Height is selected.

Minimum Height – Allows you to set a minimum height for the container. This sets a minimum height for the container regardless of content. Once the content is longer than the value set, it will grow automatically. This option shows only when Minimum Height is selected in the Height Option.

Set Columns to Equal Height – Select to set all columns that are used inside the container to have equal height. When using a set of columns in the Container Element, the height of each column is determined by the length of the content displayed inside it. However when designing, columns with equal heights — regardless of content — looks much cleaner and organized. This is why we』ve added an option called 『Set Columns to Equal Height』 to the Container Element. When enabled, this option will make all columns inside the Container equal in height. The height for all columns will follow the tallest column in the set.
Container HTML Tag – Choose container HTML tag. The default is div. Options are Default, Section, Header, Footer, Main, Article, Aside & Nav.

Name Of Menu Anchor – This option lets you assign an anchor to the Container Element. The same anchor can be used to reference that particular section in your navigation menu, or one page text links. Learn more about Anchors here.

Container Visibility – This option lets you show or hide the container in small, medium, or large screens. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab > Visibility Size Options in the Theme Options.
Container Publishing Status – We introduced this very useful feature with Avada 5.7. Now you can create containers and control their front end visibility through a set of simple publishing options. There are now 4 states a container can have – Published (default), Published Until, Published After, and Draft.
Published is the default state for all Containers. If you choose Published Until, you set a date, and optionally a time, and the Container will be published until that date, after which it will revert to a draft. If you choose Published After, the Container will remain unpublished in draft mode, until the time specified. If you choose Draft, the Container will simply remain unpublished. This gives you a lot of options to develop content for a specific event or time period, while being able to see how it interacts with your other page content. Logged in users (Author user role or above) will always be able to see Containers in ALL states on the front end, so to check the front end for how visitors will see it, you will need to log out.
To give clarity in the back end, when a Container has either a Published Until, Published After, or a Draft state, an icon will be visible at the top right on the Container. See a screenshot here to see the Icons. The Published After and Published Until states show an icon for a Scheduled Container, while the Draft Icon shows an icon for a Draft Container. At any time, you can click on the icons to override the Publish status. This will immediately publish the Container and remove the icon.Container Publishing Date – This option will be visible when you have chosen Published Until, or Published After selected. To set the date and time on a container, click the Calendar Icon in the Container Publishing Date Field. This brings up the Date Picker (see screenshot here). The current month comes up by default, and current day is selected. To change the date you can select a date, navigate using the arrows backwards and forwards through the months, or you can click on the Month Title to see a wider range of months, and then the Year Title to see a wider range of years. To set a specific time, click on the Clock icon at the bottom of the Date Picker to open the Time Picker. You can move the hours, minutes and seconds up and down, or you can click on the hour, minute or second to choose from a wider range of times. Alternatively, you can just type in the date and time, but if you do this, make sure you enter it in the correct SQL time format: YYYY-MM-DD HH:MM:SS, e.g: 2018-10-10 12:30:00. The timezone of the website (as set in Dashboard > Settings > General) is used for time calculations.IMPORTANT NOTE: Any content that is in a drafted or scheduled Container is not loaded on the front end for logged out site visitors, and therefore, won』t be indexed by search bots and will have no impact on SERPs (Search Engine Result Pages).
CSS Class – Allows you to add a class for the 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 for the Element. The ID must be unique to each CSS ID.
View The Options Screen,Column ElementFor the Column Element, the differences between Flex and Legacy are found in both the General and the Design tabs. Please see below for the options for these tabs on the Column Element.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Column – General Tab (Legacy)
Content Spacing – Controls the column spacing between one column to the next. Enter value including any valid CSS unit, ex: 4%.

Center Content – Allows you to center content vertically. This option only works if the 『Equal Heights』 option is enabled in the Container it』s in. Choose between Yes or No.

Link URL – Allows you to add the URL the column will link to when clicked. Note: This will disable links on elements inside the column.

Link Target – Allows you to choose to open the link in same browser tab, in new browser tab or in a Lightbox. Choose between _self, _blank or Lightbox. _self = open in same browser tab, _blank = open in new browser tab.

Ignore Equal Heights – Allows you to ignore equal heights on this column if equal heights is enabled on the surrounding container. Choose between Yes or No.

Column 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 ScreenColumn – Design Tab (Legacy)
Margin – Enter values including any valid CSS unit, ex: 4%. Leave empty for default value.

Padding – Enter padding values for the Column. Enter values including any valid CSS unit, ex: 4%.

Hover Type – Controls the hover effect type. Choose between None, Zoom In, Zoom Out, or Lift Up. IMPORTANT: For the effect to be noticeable, you』ll need a background color/image, and/or a border enabled. This will disable links and hover effects on elements inside the column.

Column Border Size – Accepts a pixel value that sets the size of the column』s border.

Column Border Color – Allows you to set the color of the column』s border.

Border Style – Allows you to set the style of the column』s border. Choose between Solid, Dashed, or Dotted.

Border Radius – Enter values including any valid CSS unit, ex: 10px. IMPORTANT: In order to make border radius work in browsers, the overflow CSS rule of the column needs to be set to hidden. Thus, depending on the setup, some contents might get clipped.

Box Shadow –  Set to 「Yes」 to enable box shadows.

Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels.

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

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels, from 0- 100.

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

Box Shadow Style – Set the style of the box shadow to either be an Outer or Inner shadow.
View The Options Screen

Contact Form 7 Element

The Contact Form 7 Element is a simple helper Element, designed so you can add a Contact Form 7 Form anywhere into your content. Read more about this handy Element below.
View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Contact Form 7 ElementThe Contact Form 7 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 『Contact Form 7』 element and click it to bring up its options window. The Contact Form 7 plugin must be installed and activated for the Element to show in the Elements list.
Step 4 – Using the Element couldn』t be easier. Simply select your Contact Form 7 form from the drop down list in the Element options panel. That』s it. The form will display on the screen.
There are basically no element options with this element, but read below for a full overview.
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.

Select Form – Select the Contact Form 7 form you want to display.
View The Options ScreenGlobal OptionsThere are no Global Options for the Contact Form 7 Element.