Woo Short Description 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 Avada 7.2, as part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Short Description 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 Woo Short Description ElementThe Woo Short Description Element simply displays the Short Description from a WooCommerce product in the area of the Layout you place it. There are a few simple styling options for font color, size and family, but otherwise, it couldn』t be simpler.
Step 1. Ensure there is a description added in the Short Description area in the WooCommerce product.
Step 2. Add the Woo Short Description Element into your layout where you want the Short Description to display. The Full description, if used in the product, will display with the Woo Tabs Element.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy 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
Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Margin – In pixels or percentage, ex: 10px or 10%.

Typography – Controls the typography of the description text. Leave empty for the global font family.

Font Family – Controls the font family of the text.

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.

Text Color – Controls the color of the text, ex: #000.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsThe Woo Short Description Element does not have any specific Global Options.

Woo 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.
In Avada 7.3, as part of the second part of the Avada WooCommerce Builder, the Woo Archives Element was added.,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 Woo Archives ElementThe Woo Archives Element provides the option for adding Woo Archives to a Custom Avada Layout, via a Content Layout Section. Using the Layout Conditions, this Layout could then be applied to any or all Woo Archives, such as Categories or Tags. To use the Element, simply add it to a Content Layout Section designed to display WooCommerce Archives. You can customize the number of products to show, number of columns, and spacing etc.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Number of Products – Select number of products per page. Set to -1 to display all. Set to 0 to use number of products from Avada > Options > WooCommerce > General WooCommerce.

Number of Columns – Set the number of columns per row.

Column Spacing – Insert the amount of spacing between items without 『px』. ex: 40.

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

Nothing Found Message – Replacement text when no results are found.

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

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Show Thumbnail – Display the product featured image.

Show Title – Display the product title below the featured image.

Show Price – Choose to show or hide the price.

Show Rating – Choose to show or hide the rating.

Show Buttons – Choose to show or hide Add to Cart / Details buttons.

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

Grid Border Color – Controls the color of borders for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Note: Separators will display, when buttons below the separators is displayed and Box Design mode set to Classic.

Grid Separator Color – Controls the line style color of grid separators. Note: Only work when Box Design mode set to Classic.

Margin – In pixels or percentage, ex: 10px or 10%.
View The Options ScreenGlobal OptionsThe Woo Archives Element does not have any specific Global Options.

Woo Product Carousel Element

The Woo Product Carousel Element is a great way for you to showcase your WooCommerce products. You have the option to show only one category, a combination of them, or to show all of them. You can also choose to show or hide information such as category, price and buttons. Read below to discover more about this awesome eCommerce Element!,View the Woo Product Carousel Element in Action!View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Woo Product Carousel Element
Adding a WooCommerce carousel is now made easy with the Fusion Builder Woo Product Carousel Element.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the shortcodes.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for Woo Product Carousel.
Step 4 – Now you have the options window open. Here you configure the product carousel, by selecting options. The Picture Size is the first option, and the best choice here will depend on both your design wishes and the sizes of your product images. Try both to see what the differences are. The other main options are to choose the category, or categories, you wish to display in the carousel, and the number of products you want to display.
Step 5 – There are also a range of other minor options, to do with layout and spacing etc. Go through each on of these to make your choices.
Step 6 – Once you have configured your carousel, click Save.
Step 8 – If you preview your page, you will see the result of the Woo Product Carousel Element, and you can always return to edit the element to change the way it displays.

767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Picture Size – Choose the picture size for the carousel. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.
Categories – Select a category or leave blank for all.
Number of Products – Select the number of products to display.

Product Offset – The number of products to skip. ex: 1

Order By – Defines how products should be ordered. NOTE: If Order by Price is not working, please regenerate the Product Lookup Table.

Order – Defines the sorting order of products. Choose from Descending, or Ascending.

Include Out Of Stock Products – Choose to include or exclude products which are out of stock.

Carousel Layout – Choose to show titles on rollover image, or below image.

Carousel Autoplay – Choose whether or not to autoplay the carousel.

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

Column Spacing – Insert the amount of spacing between items without 『px』. ex: 13.

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

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

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

Show Categories – Choose to show or hide the categories.

Show Price – Choose to show or hide the price.
Show Sale Badge – Choose to show or hide the sale badge.
Show Buttons – Choose to show or hide the icon buttons.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

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

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Product Carousel Element.,Useful Links & Resources
Sell Anything with Avada
Making the Most of WooCommerce with AvadaInstall & Setup WooCommerce
Avada WooCommerce Options

Views Counter Element

The Views Counter Element allows you to add a counter to a page (or in a layout section) that displays how many times the page has been viewed. Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.,Number Of Views For This DocumentTotal Views: 220Daily Views: 1,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Views Counter ElementStep 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 Views Counter from the Elements List.
Step 4. Simply configure the Element as you wish. There are options to display Daily Views and Total Views, as well as some layout options and label positioning options. There are also some design options for styling the Element.
Step 5. Click Save when you are finished customizing the Element.
Read below for a detailed description of all element options.
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 as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Views Types – Choose what views types are enabled. You can reorder them, or drag them to the Disabled section so they do not display. Choose from Total Views, and Daily Views.

Layout – Choose if views items should be stacked and full width, or if they should be floated.

Separator – Controls the type of separator between views items. Only with Floated option.

Labels – Choose where to display the labels, or turn them off.

Total Views Label – Set the total views label to display before/after the views.

Daily Views Label – Set the daily views label to display before/after the views.

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

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Font Size – Enter value including any valid CSS unit.

Text Color – Set the text color.

Background Color – Set the background color.

Alignment – Select the views alignment.

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

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

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

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

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

Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. Only shows if Box Shadow is set to Yes.

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. Only shows if Box Shadow is set to Yes.

Box Shadow Color – Controls the color of the box shadow. Only shows if Box Shadow is set to Yes.

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
View The Options Screen,Extras 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 Screen,Global OptionsThere are no Global Options for the Views Counter Element.

Syntax Highlighter Element

The Syntax Highlighter Element is our solution to allow you to provide code snippets in a variety of different languages in a copyable, embeddable format directly on your website. Aside from the 4 pre-set style options, it comes with several customization options to control all colours, borders, text, line wrapping, code copying and more.. Read below for an overview of the specific features of the Element.
Copy to Clipboard

 12 3

8 9,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Syntax Highlighter ElementStep 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 『Syntax Highlighter』 element and click it to bring up its options window.
Step 4 – To view the possibilities of this element, make sure you visit the Element Demo page. The element has two tabs; General and Design. On the General tab, the first thing to do is to insert the code you wish to highlight. Directly below that, you can choose from any of the 4 preset style options for the snippet. Then select the coding language that the snippet is in (this assists with correct styling). There are also a number of options to show or hide line numbers and to add the ability for the user to copy the code to the clipboard. The Design tab offers a number of styling options to further customize the element.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the code snippet, and remember you can come back into the element to fine tune it.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Syntax Highlighter Element section.
General Tab
Code to Highlight – Enter some code to be displayed with highlighted syntax. IMPORTANT: Please make sure that the 「Code Block Encoding」 setting in Theme Options is enabled in order for the code to appear correctly on the frontend.

Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

Code Language –  Select the language the code is in. Choose from bash, css, conf, diff, html, htm, http, javascript, json, jsx, less, md, patch, php, phtml, sass, scss, sql, svg, txt, xml, yaml, and yml.

Line Numbers – Choose if you want to display or hide line numbers.

Line Wrapping – Controls whether the long line should break or add horizontal scroll.

Copy to Clipboard – Choose if you want to allow your visitors to easily copy your code with a click of the button.

Copy to Clipboard Text – Enter text to be displayed for the user to click to copy. Leave empty for the default value of Copy to Clipboard.

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 name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Font Size – Controls the font size of the syntax highlight code.

Border Size – Controls the border size of the syntax highlighter. In pixels.

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

Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

Background Color – Controls the background color for code highlight area.

Line Number Background Color – Controls the line number background color for code highlight area.

Line Number Text Color – Controls the line number text color for code highlight area.

Margin – Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Separator Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Highlighter Theme – Select which theme you want to use for code highlighting. Choose from Default, Light 1, Light 2, Dark 1, and Dark 2.

Line Numbers – Choose if you want to display or hide line numbers.

Line Numbers Background Color – Controls the line number background color for code highlight area.

Line Numbers Text Color – Controls the line number text color for code highlight area.

Line Wrapping – Controls whether the long line should break or add horizontal scroll.

Copy to Clipboard – Choose if you want to allow your visitors to easily copy your code with a click of the button.

Copy to Clipboard Text – Enter text to be displayed for a user to click to copy. Leave empty for the default value of Copy to Clipboard

Font Size – Controls the font size of the syntax highlight code.

Background Color – Controls the background color for code highlight area.

Border Size – Controls the border size of the syntax highlighter. In pixels.

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

Border Style – Controls the border style. Choose from Default, Solid, Dashed, or Dotted.

Margins – Control spacing around the syntax highlighter. In px, em or %, e.g. 10px.
View The Options Screen

Twitter Timeline Element

The Twitter Timeline Element allows you to add a Twitter feed directly in your content. Read the document to see the full range of options, and watch the video below for a visual overview.,View Element Demo Page!,OverviewHow To Use The Element Element OptionsGlobal Options,How To Use The Twitter Timeline ElementStep 1 – Select where you』d like to place your Twitter Timeline. Add the Twitter Timeline Element from the Element Dialog.
Step 2 – Configure the Element as required. Set the Username to display your Twitter Timeline, and there are range of options for sizing and what Twitter Elements to display.
Step 3 – On the Design Tab, you can adjust margins and alignment, and if you wish, you can animate the Element on the Extras tab.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed 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
Username – Twitter username.

Dimension – Box width and height in pixels.

Language – Select twitter timeline language. Choose from Automatic or select a specific language.

Theme – Select twitter timeline theme. Choose from Light or Dark.

Header – Show or hide the header.

Footer – Show or hide the footer.

Borders – Show or hide the borders.

Border Color – Set the color of element borders, including the border between Tweets.

Transparent Background – Remove background color.

Scrollbar – Crop and hide the timeline scrollbar, if visible.

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 name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View the Options ScreenDesign Tab
Margin – Enter values including any valid CSS unit, ex: 4%.

Alignment – Select the alignment of the icons and the text.
View The Options Screen,Extras 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 Screen,Global OptionsThere are no Global Options for the Twitter Timeline Element.

Text Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Text Field Element is a basic text field you can use to collect information such as a name or address. You can see examples of this Element in the Sign Up and Upload Prebuilt Forms, as well as several others.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Text Field ElementThe Text Field Element allows you to place checkboxes into your forms.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into.
Step 3. Click on Add New Element and choose Text Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. Add a label, decide if it is to be a required field, add an optional tooltip etc. You can also choose the Minimum and Maximum required number of characters for the Element.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each instance of the Element independently, greatly enhancing your flexibility and creative options.
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 – Make a selection to ensure that this field is completed before allowing the user to submit the form.

Disabled Field – Choose to disable the field, which makes its content uneditable. Disabled fields won』t be submitted.

Placeholder Text – The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as a tooltip.

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.Minimum Required Characters – Controls the minimum number of characters that will be allowed for this input field. Leave at 0 to have no minimum.
Maximum Required Characters – Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum.

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

Table Element

With the Table Element, Avada gives you an easy to use interface to create tables, so you can display various kinds of content to your viewers. Choose from 2 styles, unlimited columns and a visual table interface that makes it easy and fun to create tables. Read below to discover more about this useful element.,Column 1
Column 2
Column 3

Item #1
Description
Discount:

Item #2
Description
Discount:

Item #3
Description
Discount:

All Items
Description
Your Total:

Column 1
Column 2
Column 3

Item #1
Description
Discount:

Item #2
Description
Discount:

Item #3
Description
Discount:

All Items
Description
Your Total:,View Element Demo Page!,Overview
How To Use The Element
Element OptionsGlobal Options,How To Use The Table ElementThe Table Element allows you to add customised tables 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 『Table』 element and click it to add it to the column to bring up its options window.
Step 4 – Firstly, choose from table style 1 or 2. Be sure to visit the Element Demo Page to see what』s possible with this element.
Step 5 – Then, choose how many columns and rows you want your table to have. You can choose up to 25 for each.
Step 6 – This updates the table into the editor, directly below in the Table option editor. You can customize the headings and column content directly in the visual Editor, or if preferred, you can go into the Text Editor and work directly with the html. This is not particularly difficult.
Step 6 – Once you have completed customizing your table, click Save. You will be returned to the edit page. You can preview the page to view the table, and you can always edit the element again to make changes.
Read below for a detailed description of all element options.
How To Edit An Existing TableIf you have an existing table that you want to edit, you can simply return to the Element and change the number of rows and columns using the Number of Rows and Number of Columns sliders. With these Element Controls, it』s very easy to change your number of columns and rows and then edit the content in the editor.
If you want to understand how to edit in text view however, it』s also very easy. If you look at the table code below, you can see in the Table Body section that each Table Row has its own section (between the tr and / tr HTML tags).
To create a new row, you would simply copy a Table Row section, and paste it in below itself, as seen below. Then you could manually edit each of the Table Data (td) lines. To add a new Column, you would have to add a new Table Header line for the Title of the new column, and add a new Table Data line in each Table Row. Generally though, it』s much easier just to use the visual editor and the element controls.
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.
General Tab
Type – Select the table style. Choose from the two predefined table styles Style 1 and Style 2.

Number of Columns – Select how many columns to display. Choose from 1 – 25.

Number of Rows – Select how many rows to display. Choose from 1 – 25.

Table – Once you have selected your preferred number of columns, the Table markup will be displayed here.

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 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 OptionsThere are no Global Elements for the Table Element.

Upload Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Upload Field Element allows users to easily upload files via a form. You can control allowed file extensions, whether a user can upload mulitple files, and the maximum file size. You can see an example of this Element in the Upload Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Upload Field ElementThe Upload Field Element allows you to place a field into a form where users can upload files before submission.
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.
Step 3. Click on Add New Element and choose Upload Field from the Form Elements tab.
Step 4. The main things to configure with this Element are the Max File Upload Size, whether to allow Mulitple Uploads, and the Allowed Extensions. Otherwise, configure as any other form Element.
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 – 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. If tooltip is enabled, the placeholder will be displayed as a tooltip.

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

Max File Upload Size – Maximum size limit for file upload. The default is 2 MB.
Allow Multiple Uploads – Decide if multiple files can be uploaded. Choose from Yes, or No.Allowed Extensions – Please enter the comma separated extensions that you want to allow. Leave empty to allow all. Example input: .jpg,.png. Note, WordPress file type permissions still apply.Input Field Icon – Select an icon for the input field, click again to deselect.
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