标签： elements

Woo Checkout Payment Element

The Woo Checkout Payment Element is one of five Woo Checkout Elements, and allows you to add an independent Payment notice to your Woo Checkout page. Please read on for all the details on this useful Element.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Payment ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Payment ElementThe Woo Checkout Payment Element is useful when building a one page checkout. It is the last thing logically in the flow of the checkout, as it is from a button in this Element users place the order.
So to use this Element, simply add it in your Checkout layout at the bottom of the design. The Element will pull the payment methods set up in WooCommerce > Settings > Payments. If you use the Checkout Tabs Element, this Element is unneccesary, as all of the other four Checkout Elements are integrated in that one.
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. Enter values including any valid CSS unit, ex: 4%.

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
Typography – Controls the typography of the payments 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.

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

Label Background Color – Controls the label background color of the payments. Leave empty for default value.

Label Background Hover Color – Controls the label background hover color of the payments label.

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

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

Payment Description Background Color – Controls the label background color of the payments description. Leave empty for default values.

Payment Description Color – Controls the description color of the payments., ex: #000.

Link Color – Controls the link color of the payments text. Leave empty for default value.

Link Hover Color – Controls the link hover color of the payments text. Leave empty for default value.

Place Order Button Style – Select whether you want to custom style the place order button.

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

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

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

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

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 gradient color of the button. Leave empty for default value.

Button Gradient Bottom Color – Controls the 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/Active Options

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

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

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

Button Border Hover Color – Controls the border hover color of the button. 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 Payment 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 Images 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 Product Images 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 Product Images ElementThe Woo Product Images Element is used to display any images attached to your WooCommerce products. This can be a single image, or multiple. There are numerous options for thumbnails, columns, sale badges and layouts. See below for a full list of Element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy this Element 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 TabProduct Images Layout – Set the layout for your product images. Choose from Default, Avada, or WooCommerce.Product Images Zoom – Turn on to enable the WooCommerce product images zoom feature. IMPORTANT NOTE: Every product image you use must be larger than the product images container for zoom to work correctly. See this post for more information.
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 TabProduct Images Max Width – Controls the max width of the single product page image gallery. For the image gallery zoom feature to work, the images you upload must be larger than the gallery size you select for this option. IMPORTANT NOTE: When this option is changed, you may need to adjust the Single Product Image size setting in WooCommerce Settings to make sure that one is larger and also regenerate thumbnails. See this post for more information.Product Images Thumbnail Position – Set the position of the product images thumbnails with respect to the gallery images. Choose from Default, Top, Right, Bottom, or Left.Product Images Thumbnails – Controls the number of columns of the product images thumbnails. In order to avoid blurry thumbnails, make sure the Product Thumbnails size setting in WooCommerce Settings is large enough. It has to be at least WooCommerce Product Gallery Size setting divided by this number of columns.Product Images Thumbnail Column Width – Controls the width of the left/right column of product images thumbnails as a percentage of the full gallery width.Display Sale Badge – Turn on to enable the WooCommerce sake badge.
Margin – In pixels or percentage, ex: 10px or 10%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the 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 Product Images Element does not have any specific Global Options.

Woo Tabs 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 Tabs 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 Tabs ElementThe Woo Tabs Element allows you to display the WooCommerce Tabs, that are usually found under the product image and short descriptions. These tabs can display the full descriptions, any additional information for variable products, and any reviews that have been left.
With this Element, you can configure the layout to be horizontal, or vertical, and customize the area with a large range of design options.
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
Display Tabs – Choose which tabs should be displayed. Choose from Description, Additional Information or Reviews.

Layout – Choose the tabs layout. Choose from Horizontal or Vertical.

Show Tab Content Headings – Choose to have tab content headings displayed.

Space Between Nav and Content – Set space between tab nav and tab content sections. Leave empty for default value.

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

Background Color – Controls the background tab color.

Inactive Background Color – Controls the inactive tab background color.

Inactive Nav Text Color – Controls the color of the inactive nav text color, ex: #000.

Active Nav Text Color – Controls the color of the active nav text color, ex: #000.

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

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

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

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

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

Font Family – Controls the font family of the content heading.

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

Content Text Color – Controls the color of the content text, ex: #000.

Content Text Typography – Controls the typography of the content text. Leave empty for the global font family.

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

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

Review Stars Color – Controls the color of review stars, 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 Tabs Element does not have any specific Global Options.

User Register 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 Register Element!,User Register,Read about the User Login Element!

Read about the User Lost Password Element!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The User Register 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 Register』 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 Register 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 Register 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 Register 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,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.

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

Form Field Layout – Choose if form fields should be stacked and full width, or if they should be floated.

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.

Registration Notice – Choose a notice text that will be displayed before the register button. Leave empty if no text should be displayed.

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 Register Element.

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 Checkout Shipping Element

The Woo Checkout Shipping Element is one of five Woo Checkout Elements, and allows you to add an independent shipping section to your Woo Checkout page layout. Please read on for all the details on this useful Element.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Shipping ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Shipping ElementThe Avada Woo Checkout Shipping Element does exactly what it says – allow you to place a Shipping input section into your WooCommerce Checkout Layout. This is an area where the user can add any notes pertaining to the shipping and delivery of the item.

Read below for a description of all Element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Margin – Enter values including any valid CSS unit, ex: 4%.
Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
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 Shipping 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 Rating 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 Rating Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Woo Rating Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Rating ElementThe Woo Rating Element is a simple Element to display WooCommerce Ratings anywhere in your Layout. This displays the avarage rating and the number of reviews, and can be customized to suit. See below for the full list of Element Options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy 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
Show Reviews Count – Make a selection to show or hide reviews count.

Placeholder Text – Make a selection to show or hide placeholder text if no review is added yet. Choose from Yes, or No.

Alignment – Make a selection for content alignment. Choose from Text Flow, Left, Center, or Right.

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 ScreenDesign Tab
Icon Size – Controls the size of the icon. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Icon Color – Choose icon color for rating. Leave empty for default value.Reviews Count Font Size – Controls the size of the reviews count text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.Reviews Count Text Color – Choose color for reviews count text. Leave empty for default value.
Reviews Count Hover Text Color – Choose color for reviews count hover text. 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 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 Rating Element does not have any specific Global Options.

Woo Up/Cross-sells Element

The Woo Upsells Element was renamed and moved in Avada 7.3, as the Woo Up/Cross-sells Element. This was done as part of our second update to our suite of WooCommerce tools. With Avada 7.2, the Upsells Element was a Layout Element, and could only be used in Content Layout Sections when building Woo Single Product templates in Avada Layouts.
In Avada 7.3, we added Cross-sells to the Element, and moved it to the Design Elements, so it can now be used anywhere in your page content. But it can, of course, also still be used in Content Layout Sections.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Up/Cross-sells ElementThe Woo Up/Cross-sells Element allows you to create columns or a carousel to promote other products on a product page or checkout page. The Element options are identical to the Related Products Element, other than the Related Products Element displays Products that share a category or tag, while the Woo Up/Cross-sells Element displays products that have been manually added into specific WooCommerce products. This is done in the Linked Products section, as can be seen in the screenshot below, and the Woo Up/Cross-sells Element will then display any Cross-sells or Upsells when that specific product is viewed.
To use the Woo Up/Cross-sells Element, you need to add it to the area you want it to display in. If the Woo Up/Cross-sells Element is added to a single product template, and the product viewed has Upsells specified, then the Upsells will appear where the Element is placed in the Layout. Cross-sells will not display here.
If the Element is also added to the Cart Layout, and there is a product in the cart that has Cross-sells specified, then the Cross Sells (and not the Upsells) will display in the Cart. So in short, Upsells display in the single product pages, and Cross-sells display in the Cart.
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 TabLayout – Controls the layout style for products. Choose from Columns, or Carousel.
Number of Products – Controls the number of products that display on a single product. Choose from 1-30.

Maximum Columns – Controls the number of columns for products layout. Choose from 1-6.

Column Spacing – Controls the amount of spacing between columns for products (in pixels). (For Carousel Layout)

Autoplay – Turn on to autoplay products carousel. Choose from Yes or No. (For Carousel Layout)

Show Navigation – Turn on to display navigation arrows on the carousel. Choose from Yes or No. (For Carousel Layout)

Mouse Scroll – Turn on to enable mouse drag control on the carousel. Choose from Yes or No. (For Carousel Layout)
Scroll Items – Controls the number of items that scroll at one time. From 0-15. Set to 0 to scroll the number of visible items. (For Carousel Layout)
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 TabEnable Heading – Turn on if you want to display default heading.
HTML Heading Size – Choose the size of the HTML heading that should be used, h1-h6.

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

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

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

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

Video Element

The Video Element offers the ability for users to post self-hosted video clips easily to their Avada websites. See below for more information, and watch the video for a visual overview.,View Element Demo Page,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Video ElementThe Video Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Edit an existing page. Ensure the 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 Alert Element into. Click on Add new Element.
Step 3. Choose Video from the Elements List.
Step 4. Add your video file in the first option, Video MP4 Upload. You can either select one already in the media library, or upload one. You can also upload a WebM file, but this is optional.
Step 5. Once you have added your video file, continue configuring the element with your preferred function and styling options.
Read below for a detailed description of all element options.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The Default setting will use the global settings assigned for this element in Avada > Options > Avada Builder Elements > Video section. Also, please not 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
Video MP4 Upload – Upload or select your video file to be loaded into the player.

Video WebM Upload – Add your WebM video file. This is optional; only MP4 is required to render your video with cross-browser compatibility.

Video Max Width – Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), ex: 200px. Leave empty to use full video width. NOTE: Percentage values will be with respect to the original video width and not the wrapping container width.

Video Controls – Controls whether the video controls should show or not.

Video Preloading – Controls how / if the browser should preload the video. Choose 「Metadata」 if only the video metadata should be preloaded on page load (in Chrome needed for the preview image to load) or 「Auto」 to preload the full video on page load.

Loop Video – Turn on to loop the media when it is played.

Autoplay Video – Turn on to autoplay the media upon page load. IMPORTANT: In some modern browsers, videos with sound won』t be autoplayed.

Mute Video – IMPORTANT: In some modern browsers, videos with sound won』t be autoplayed.

Preview Image – Upload an image to display as a video preview. IMPORTANT: In Chrome the preview image will only be displayed if 「Video Preloading」 is set to 「Metadata」.

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 Theme Options.

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

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenDesign TabOverlay Color – Controls the overlay color of the video element.
Border Radius – Set the border radius of the element. In pixels.

Box Shadow – Set to Yes to enable a box shadow for the element.

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.

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.

Box Shadow Color – Set the color of the Box Shadow.

Alignment – Select the video』s alignment. Choose from Text Flow, Left, Center, & Right.

Margin – Set the top and bottom margin of the element (spacing above and below the video). Enter values including any valid CSS unit, ex: 4%
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Video.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Maximum Width – Set the maximum width of the video using a valid CSS value.

Video Controls – Controls whether the video controls should show or not.

Video Preloading – Controls how / if the browser should preload the video. Choose 「Metadata」 if only the video metadata should be preloaded on page load or 「Auto」 to preload the full video on page load.
View The Options Screen

Woo Cart Coupons Element

The Woo Cart Coupons Element is a very simple Element that allows you to add a Coupon Code input section to your WooCommerce Cart Layout.,Woo Cart Coupons Element,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Coupons ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Coupons ElementThe Avada Woo Cart Coupons Element does exactly what it says – allows you to place a Coupons input section into your WooCommerce Cart Layout. There are several styling options to customize it to your needs. Read below for a description of all Element options.
To use this Element, simply add it to a Column on your WooCommerce Cart Page Layout. You can control margins around the Element, as well as style it to your liking.
WooCommerce Coupons themselves are now set up at Marketing > Coupons from the WordPress Dashboard. For more information on WooCommerce Coupons, please folow this link.
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 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
Margin – Enter values including any valid CSS unit, ex: 4%.

Buttons Layout – Select the layout of buttons. Choose from Floated or Stacked.
Buttons Horizontal Align – Select the horizontal alignment of buttons within its container column. Choose from Flex Start, Center, or Flex End.
Button Span – Choose to have the button span the full width.

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

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 TabForm Field Background Color – Controls the background color of the form input fields.Form Field Text Color – Controls the text color of the form input fields.Field Border Color – Controls the border color of the form input fields.Field Border Color On Focus – Controls the border color of the form input fields on focus.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 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 OptionsThere are no Global Options for the Woo Cart Coupons 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