elements 归档 - Avada 文档

Widget Element

The Widget Element was released with Avada 6.2, and offers you the ability to add a single widget directly into your page content, and edit it live on the page. Whereas the Widget Area Element adds a pre-populated Widget Area into your content, this Element allows you to add a single widget directly into your content and populate and configure it through the Element.
This shows the Category Widget, displayed as a dropdown.
CategoriesCategories
Select Category
Avada
WordPress
Design
ThemeFusion
Plugins
Customer Spotlight
Avada Builder
Document Examples
WooCommerce
Gutenberg
Tutorial
Interview
German
Demos
Prebuilt Websites
Food
Creative,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Widget ElementStep 1. Edit an existing page. Ensure that Avada Builder is activated, by clicking the 『Use Avada Builder』 button on top of the page editor.
Step 2. Choose the Container and Column you wish to add the Widget Element into. Click on Add new Element.
Step 3. Choose Widget from the Elements List.
Step 4. The General Tab is the place to choose the type of widget you want to add. Select you widget from the drop down box. The widgets you see here will depend on what plugins you have installed and active. When you choose an element, any customizable fields for that widget will appear.
Step 5. Customize the widget as desired. You can also set Element Visibility in this tab, or add a CSS Class or CSS ID to the instance of the element for further customization with Custom CSS.
Step 6. The next step is to customize the design of the Widget. On the Design Tab, you will find a variety of styling options, from background color, radius, border and alignment options.
Step 7. Click Save when you are finished customizing your Widget. It will appear in the row of the Container you added it to. Preview the page to view, and you can always come back and edit the Widget to fine tune the look and function.
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 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
Widget – Choose the type of widget you』d like to add.

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 – 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
Display Widget Title – Choose to enable or disable the widget title. Specifically useful for WP』s default widget titles.

Padding – Controls the padding for this widget container. Enter value including any valid CSS unit, ex: 10px.

Margin – Controls the margin for this widget container. Enter value including any valid CSS unit, ex: 10px.

Background Color – Controls the background color for this widget container.

Background Radius – Controls the background radius for this widget container.

Border Size – Controls the border size for this widget container.

Border Style – Controls the border style for this widget container. Choose from None, Solid, Dotted or Dashed.

Border Color – Controls the border color for this widget container.

Divider Color – Controls the color of dividers in this widget container. Leave empty for the Theme Options default value or no dividers when using the vertical menu widget.

Content Align – Controls content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.

Mobile Content Align – Controls mobile content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Widget Element.

Woo Checkout Billing Element

The Woo Checkout Billing Element is one of five Woo Checkout Elements, and it allows you to add a independant billing input Section on you WooCommerce Checkout page. Please read on for all the details on this critical Checkout Element.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Billing ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Billing ElementThe Woo Checkout Billing Element displays a billing input form to the user, so they can add their account details to the order. It is a part of the Woo Checkout Tabs Element, but here it is available in a stand alone format. Tu use the Element, simply add it to your Checkout Page wherever you wish. See the Avada WooCommerce Builder – Checkout document for more information on Checkout pages in general.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Margin – Control the margins around the Element In pixels or percentage, ex: 10px or 10%.

Show Table Headers – Choose to have table headers displayed. Choose from Show, or Hide.

Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.

CSS Class – Allows you to add a class to the wrapping HTML.

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

Form Field Background Color – Controls the background color of the form input fields. Leave empty for default value.

Form Field Text Color – Controls the text color of the form input fields. Leave empty for default value.

Field Border Color – Controls the border color of the form input fields. Leave empty for default value.

Field Border Color On Focus – Controls the border color of the form input fields on focus. Leave empty for default value.
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 Options for the Woo Checkout Billing Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.,Useful Links & ResourcesHow To Use WooCommerce With Avada
The Avada WooCommerce Builder

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

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

Woo Sorting Element

The Woo Sorting Element replicates the sorting options of a WooCommerce Shop page, and allows you to add product sorting into your custom Shop Layout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Sorting ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Sorting ElementThis Element is designed to be used in your Woo Shop Layout. It replicates the Woo Sorting options normally available in the Avada Global Options. It has a range of display and styling options.
To use it, simply place the Element into your Layout on the designated WooCommerce Shop page. Set the options as you desire. See the indiviudual options below.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral TabSorting Options – Select sorting options that you want to be displayed in the sorting list box. Choose from Default, Name, Price, Date, Popularity, and Rating.Sorting Elements – Choose the display and ordering of sorting elements. You can enable or disable any of the sorting options, and you can also order them as you wish. Choose from Product View, Product Order By, and Product Count.Product Count Selection – Select the number of product count to display. This controls the numbers displayed in the Show XX Products dropdown boxes.Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign TabMargin – Control margins around the Element. In pixels or percentage, ex: 10px or 10%.Dropdown Background Color – Controls the background color for the dropdowns.Dropdown Hover / Active Background Color – Controls the background color for the dropdowns hover / active states.Dropdown Text Color – Controls the text color for the dropdowns.Dropdown Border Color – Controls the border color for the dropdowns.View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Sorting Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.,Useful Links & ResourcesHow To Use WooCommerce With Avada
The Avada WooCommerce Builder

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

Woo Add To Cart 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 Add To Cart 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 Add To Cart ElementThe Woo Add To Cart Element allows you to add an Add To Cart section in your Woo Product Layout Section. There is a huge variety of styling and configuration options, as can be seen in the options below, yet for a simple product, the defaults will likely be enough.
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.
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 ScreenVariations TabVariations Margin – In pixels or percentage, ex: 10px or 10%.
Cell Border Size – Controls the border size of the variation table cells.

Cell Border Color – Controls the border color of the variation table cells Leave empty for default value.

Cell Padding – Controls the padding of the variation table cells. Enter values including any valid CSS unit, ex: 10px or 10%.

Cell Background Color – Controls the background color of the variation table cells.

Variation Layout – Select the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.

Label Width – Leave empty for automatic width. Enter values including any valid CSS unit, ex: 10px. or 20%.

Text Alignment – Select the text alignment for the variation label and variation swatches.

Label Text Color – Controls the text color of the variation labels. Leave empty for default value.

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

Font Family – Controls the font family of the label text. Leave empty for the global font family.

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

Select Style – Select whether you want to custom style the select fields for variations. Choose from Default, or Custom.

Select Height – Enter values including any valid CSS unit, ex: 10px. Leave empty for default value

Select Font Size – Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

Select Text Color – Controls the text color of the select fields. Leave empty for default value.

Select Background Color – Controls the background color of the select fields. Leave empty for default value.

Select Border Size – Controls the border size of the select fields. Leave empty for default value.

Select Border Color – Controls the border color of the select fields. Leave empty for default value.

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

Swatch Style – Select if you want to custom style the Avada variation swatches. Choose from Default, or Custom.

Swatch Item Margin – In pixels or percentage, ex: 10px or 10%.

Swatch Background Color – Controls the background color of the color, image and button swatch fields. Leave empty for default value.

Swatch Active Background Color – Controls the background color of the color, image and button swatch fields when active.

Swatch Border Size – Controls the border size of the color, image and button swatch fields. Leave empty for default value.

Swatch Border Color – Controls the border color of the color, image and button swatch fields. Leave empty for default value.

Swatch Active Border Color – Controls the border color of the color, image and button swatch fields when active. Leave empty for default value.

Color Swatch Dimensions – Enter values including any valid CSS unit, ex: 10px.

Color Swatch Padding – Controls the padding of the color swatches. Enter values including any valid CSS unit, ex: 10px or 10%.

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

Image Swatch Dimensions – Enter values including any valid CSS unit, ex: 10px.

Image Swatch Padding – Controls the padding of the image swatches. Enter values including any valid CSS unit, ex: 10px or 10%.

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

Button Swatch Dimensions – Enter values including any valid CSS unit, ex: 10px. Leave empty for auto.

Button Swatch Padding – Controls the padding of the button swatches. Enter values including any valid CSS unit, ex: 10px or 10%.

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

Button Swatch Font Size – Controls the font size of the button swatches. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

Button Swatch Text Color – Controls the text color of the button swatches. Leave empty for default value.

Button Swatch Active Text Color – Controls the text color of the button swatches when active. Leave empty for default value.

Variation Clear – Controls how you want to disable the variation clear link. Choose from Absolute, Inline, or Hide.

Clear Content – Controls the content type for the clear link. Default will use WooCommerce text string. Choose from Default, Text, or Icon.

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

Clear Text – Custom text to use for the variation clear link.

Clear Margin – Controls the margin of the clear link. Enter values including any valid CSS unit, ex: 10px or 10%.

Clear Color – Controls the text color of the clear link. Leave empty for default value.

Clear Hover Color – Controls the text color of the clear link on hover. Leave empty for default value.
View The Options ScreenDetails Tab
Details Padding – Controls the padding of the variation details area. Enter values including any valid CSS unit, ex: 10px or 10%.

Details Background Color – Controls the background color of the variation details area.

Details Border Size – Controls the border size of the variation details area.

Details Border Color – Controls the border color of the variation details area.

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

Details Alignment – Select the content alignment within the details area.

Description Text Color – Controls the text color of the variation description. Leave empty for default value.

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

Font Family – Controls the font family of the variation description. Leave empty for the global font family.

Font Size – Controls the font size of the variation description. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

Description Order – Display order for description. Can be before price/stock or after. Choose from Before Price or After Price.

Show Price – Make a selection to show or hide the variation price.
Price Text Color – Select a color for the price text. Leave empty for default value.
Price Typography – Controls the typography of the price text. Leave empty for the global font family.

Font Family – Controls the font family of the price text. Leave empty for the global font family.

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

Show Sale Old Price – Make a selection to show or hide sale old price.

Sale Old Price Position – Select if the sale old price should be before or after the regular price. Choose from Before Regular or After Regular.

Sale Old Price Text Color – Select a color for the sale old price text. Leave empty for default value.

Sale Old Price Typography – Controls the typography of the sale old price text. Leave empty for the global font family.

Font Family – Controls the font family of the sale old price text. Leave empty for the global font family.

Font Size – Controls the font size of the sale old price text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

Stock Text Color – Select a color for the stock text. Leave empty for default value.

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

Font Family – Controls the font family of the stock text. Leave empty for the global font family.

Font Size – Controls the font size of the stock text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
View The Options ScreenCart TabCart Margin – In pixels or percentage, ex: 10px or 10%.
Cart Layout – Select the layout for the quantity and add to cart button. Choose from Floated or Stacked. Floated will have them side by side. Stacked will have one per row.

Cart Alignment – For Floated option. Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

Cart Alignment – For Stacked option. Select the content alignment. Choose from Flex Start, Center, or Flex End.

Quantity Style – Select whether you want to custom style the quantity field. Choose from Default, or Custom.

Quantity Input Dimensions – Enter values including any valid CSS unit, ex: 10px.

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

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

Quantity Input Text Color – Controls the text color of the select fields. Leave empty for default value.

Quantity Input Background Color – Controls the background color of the select fields.

Quantity Input Border Size – Controls the border size of the select fields.

Quantity Input Border Color – Controls the border color of the select fields. Leave empty for default value.

Quantity Button Border Size – Controls the border size of the select fields.

Quantity Button Styling – Use filters to see specific type of content.

Regular Options

Quantity Button Text Color – Controls the text color of the select fields. Leave empty for default value.

Quantity Button Background Color – Controls the background color of the select fields. Leave empty for default value.

Quantity Button Border Color – Controls the border color of the select fields. Leave empty for default value.

Add To Cart Button Style – Select whether you want to custom style the add to cart button. Choose from Default or Custom.

Button Size – Controls the button size. Choose from Small, Medium, Large, or XLarge.

Button Span – Controls if the button spans the full width/remaining width of row. Choose from Yes, or No.

Button Border Size – Controls the border size. In pixels. Leave empty for default value.

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

Icon Position – Choose the position of the icon on the button. Choose from Left, or Right.

Hover Options

Quantity Button Text Color – Controls the text color of the select fields. Leave empty for default value.

Quantity Button Background Color – Controls the background color of the select fields. Leave empty for default value.

Quantity Button Border Color – Controls the border color of the select fields. Leave empty for default value.

Add To Cart Button Style – Select whether you want to custom style the add to cart button. Choose from Default or Custom.

Button Size – Controls the button size. Choose from Small, Medium, Large, or XLarge.

Button Span – Controls if the button spans the full width/remaining width of row. Choose from Yes, or No.

Button Border Size – Controls the border size. In pixels. Leave empty for default value.

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

Icon Position – Choose the position of the icon on the button. Choose from Left, or Right.

Button Styling – Use filters to see specific type of content.

Regular Options

Button Text Color – Controls the text color of the button. Leave empty for default value.

Button Gradient Top Color – Controls the top gradient color of the button. Leave empty for default value.

Button Gradient Bottom Color – Controls the bottom gradient color of the button. Leave empty for default value.

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

Hover Options

Button Text Hover Color – Controls the text color of the button on hover. Leave empty for default value.

Button Gradient Top Hover Color – Controls the top gradient color of the button on hover. Leave empty for default value.

Button Gradient Bottom Hover Color – Controls the bottom gradient color of the button on hover. Leave empty for default value.

Button Border Hover Color – Controls the border color of the button on hover. Leave empty for default value.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Woo Checkout Order Review Element

The Woo Checkout Order Review Element is one of five Woo Checkout Elements, and allows you to add an independent order review section to your Woo Checkout page. Please read on for all the details on this useful Element.,Read More about Working With Avada & WooCommerce,OverviewHow To Use The Woo Checkout Order Review ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Order Review ElementThe Woo Checkout Order Review Element is designed to have a place on your custom Checkout page. This Element presents the items in the Cart in a table, much as the Woo Cart Table Element does, only here it is in the context of a final order review before completing the Checkout.
There are a large number of desgin options for styling the Header, Table and Footer Cells however you like. You can place the Element anywhere on you Checkout page, but in the natural flow of a Checkout page, this Element would be placed right before the Woo Checkout Payment Element.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Margin – Control the margins around the Element In pixels or percentage, ex: 10px or 10%.

Show Table Headers – Choose to have table headers displayed. Choose from Show, or Hide.

Show Product Images – Choose to have the product images displayed. Choose from Show, or Hide.

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 ScreenDesign Tab
Table Border Color – Controls the color of the table border, ex: #000.

Table Cell Padding – Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default values.

Heading Cell Background Color – Controls the heading cell background color.

Heading Cell Text Color – Controls the color of the header text, ex: #000.

Heading Cell Typography – Controls the typography of the heading. Leave empty for the global font family.

Font Family – Controls the font family of the header.

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

Table Cell Background Color – Controls the table cell background color.

Table Cell Text Color – Controls the table cell background color.

Table Cell Text Typography – Controls the typography of the table cell text. Leave empty for the global font family.

Font Family – Controls the font family of the table cell text.

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

Footer Cell Background Color – Controls the footer cell background color.

Footer Cell Text Color – Controls the color of the footer cell text, ex: #000.

Footer Cell Typography – Controls the typography of the footer text. Leave empty for the global font family.

Font Family – Controls the font family of the footer cell text.

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
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 Options for the Woo Checkout Order Review Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.,Useful Links & ResourcesHow To Use WooCommerce With Avada
The Avada WooCommerce Builder

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches,v

Woo Product Grid Element

The Woo Product Grid Element allows you to add a Product Grid into your content, as the main shop page, or just wherever you want a grid of WooCommerce Products. You have full control over which products display, and how they are presented.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Product Grid ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Product Grid ElementThe Woo Product Grid Element can be the basis for you main shop page, but you can also use it on any page where you want to display a grid of products. To add it into your main shop page, simply edit the assigned WooCommerce Shop page, design your layout, and add the Element into a Column.
The Products displayed can be pulled by Category or Tag, and you can select or exclude specific categories or tags for full flexibility. You can also specify how many products you want to display in total, and how many columns to use, how they are ordered, and what type of pagination to use. There are also a range of design options for styling.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The 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
Pull Products By – Choose to show products by category or tag.

Categories – Select a category or leave blank for all.

Exclude Categories – Select categories to exclude.

Tags – Select a tag or leave blank for all.

Exclude Tags – Select a tag to exclude.

Number of Products – Select the number of products to display.

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

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

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

Order By – Defines how products should be ordered. Choose from Default Sorting, Date, Title, Random, ID, Price, Popularity (sales), and Average Rating.

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

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

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 ScreenDesign Tab
Show Thumbnail – Display the product featured image. Choose from Yes, or No.

Show Title – Display the product title below the featured image. Choose from Yes, or No.

Show Price – Choose to show or hide the price. Choose from Yes, or No.

Show Rating – Choose to show or hide the rating. Choose from Yes, or No.

Show Buttons – Choose to show or hide Add to Cart / Details buttons. Choose from Yes, or No.

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. Choose from Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, or Shadow.

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

Margin – Set the margins around the Element. In pixels or percentage, ex: 10px or 10%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 5.

Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.
View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Product Grid Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.,Useful Links & ResourcesHow To Use WooCommerce With Avada
The Avada WooCommerce Builder

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

Woo Stock 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 Stock 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 Stock ElementThe Woo Stock Element is perhaps the simplest Woo Element of all. It』s sole purpose is to display the amount of stock a product has. This can also be configured vua the Woo Add To Cat Element, but this Element offers it as a discrete option for layout fleixibility.
An 『Out of Stock』 or 『Available on Backorder』 notice will display if the product has one of these options selected in the Stock Status field in the Product Inventory Tab.
If 『Enable Stock management at product level』 is selected in the Manafe Stock field of the product Inventory tab, then the Element will display the number of units available.
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
Stock Font Size – Controls the font size of the stock text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

Stock Text Color – Select a color for the stock text. Leave empty for default value.

Margin – 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 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.

User Lost Password Element

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Lost Password Element!,User Register,Read about the User Register Element!

Read about the User Login Element!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The User Lost Password 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 『User Lost Password』 Element and click it to bring up its options window.
Step 4 – Work you way one at a time through the options to configure the User Lost Password Element to your liking.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the User Lost Password Element output, and remember you can come back into the element to fine tune it.
IMPORTANT NOTE: As of Avada 7.4, you can now also add Google reCAPTCHA to the User Lost Password Element. To enable this, simply head to the Global Options, and Form > Google reCAPTCHA, and turn the reCAPTCHA For User Elements option to Yes.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.

Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

Heading – Choose a heading text.

Heading Color – Choose a heading color.

Caption – Choose a caption text.

Caption Color – Choose a caption color.

Show Labels – Controls if the form field labels should be shown.

Show Placeholders – Controls if the form field placeholders should be shown.

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

Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

Link Color – Choose a link color.

Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

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 User Lost Password Element.

Woo Additional Information 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 Additional Information 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 Additional Information ElementThe Woo Additional Information Element will display any additional information from the product, such as Weight or Dimensions (which are added in the Shipping tab) or any Attributes added in the Attributes tab.
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.
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
Show Heading – Choose to have tab heading displayed. Choose from Yes, or No.

HTML Heading Size – Choose HTML tag of the heading, either div or the heading tag, h1-h6.

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

Table Cell Padding – Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default values.

Heading Cell Background Color – Controls the heading cell background color.

Table Cell Background Color – Controls the table cell background color.

Table Border Color – Controls the color of the table border, ex: #000.

Heading Cell Color – Controls the color of the heading, ex: #000.

Heading Cell Font Family – Controls the font family of the heading.

Heading Cell 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.

Text Font Family – Controls the font family of the text.

Text Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
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.