Avada 文档

YouTube Element

Adding a YouTube video to your website has never been easier thanks to the Avada Builder YouTube Element. Just add the YouTube video ID, and away you go. It』s even got built in responsive features, so you don』t have to worry about the size of your videos! Read below to discover how to make the most of the YouTube Element!,View Element Demo Page!,OverviewHow To Use The Element
Element Options

Global Options,How To Use The YouTube Element
Adding a YouTube video to your content couldn』t be easier with the Fusion Builder YouTube 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 video.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for YouTube.
Step 4 – Now you have the options window open. The first and most important step is to place the YouTube video ID into the Video ID field. This is the the end section of the url; for example the Video ID for https://www.youtube.com/watch?v=UDyNsnB_COA is UDyNsnB_COA.
Step 5 – In the Alignment field, you can choose the alignment of the video in the column you are placing it in.
Step 6 – Set the dimensions of the video. This is in pixels, but you just enter a number. You can enter just the width or the height, and the other value will be auto calculated, assuming a 16:9 aspect ratio. If you have a non 16:9 aspect ratio video, enter both width and height.
NB. YouTube videos are displayed in a 16:9 aspect ratio, so if the video you choose or the dimensions you enter is not in that ratio, black bars are added to the side, or top and bottom.
Step 7 – There are a couple more options you can select. One is Autoplay, which by default is set to No, as it』s generally not considered good Netiquette for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0. For a full list of YouTube parameters, please see this document. And with Avada 7.4, we introduced a Video Facade option, to help with page speed. Once you have finished with the options, simply click save and the video will be inserted into your page.
Step 8 – If you preview your page, you will see the video as you have styled it.

IMPORTANT NOTE: The YouTube parameter &rel=0 used to disable related videos, but due to a recent change in YouTube, related videos can no longer be disabled. The &rel=0 parameter will now show related videos at the end of the video, but only from the same YouTube channel the video is on.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.

Video ID – Enter the YouTube video ID. For example, the Video ID for https://www.youtube.com/watch?v=UDyNsnB_COA is UDyNsnB_COA.

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

Dimensions – In pixels but only enter a number, ex: 600.

Autoplay Video – Set to yes to make the video autoplay.

Additional API Parameter – Use additional API parameters. For a full list, see this document.

Title Attribute – Set the title attribute for the iframe embed of your video. Leave empty to use default value of 「YouTube video player #」.
Video Facade – Enable video facade in order to load video player only when video is played.
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 YouTube Element.

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.

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.

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.

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 Stock Element does not have any specific Global 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 Shortcodes Element

The Woo Shortcodes Element is an incredibly powerful, yet easy way to filter your eCommerce products, and place them anywhere in your content. Choose from the full range of WooCommerce shortcodes to filter anything from your most recent products through to order tracking and product categories. Read below to discover more about this awesome eCommerce Element!
View Products filtered by SKU/ID!View Products filtered by Recent Products!View a list of Product Categories!View products filtered to a specific category!,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Woo Shortcodes Element
Adding WooCommerce shortcodes are now even easier with the Avada Builder Woo Shortcodes 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 Shortcodes.
Step 4 – Now you have the options window open. The first step is to choose which shortcodes you want to place. Choose from the options listed in the dropdown.
Step 5 – Once you have selected your desired shortcode, the Shortcode Content field populates with the basic shortcode. All but Order Tracking, and Shop Message have parameters you can now input. For example, if you choose Product by SKU/ID, you simply enter the SKU or ID number into the shortcode.
Step 6 – Once you have configured your shortcodes, click Save.
Step 7 – If you preview your page, you will see the result of the WooCommerce shortcodes as you have styled them.

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.

Shortcode – Choose the WooCommerce Shortcode. Choose from Order Tracking, Product price/cart button, Product by SKU/ID, Products by SKU/ID, Product Categories, Products by category slug, Recent Products, Featured products, or Shop Message.

Shortcode Content – Upon making your selection, the shortcode will appear here. Some shortcodes have no parameters, while others have several.
View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Shortcodes Element.,Useful Links & ResourcesBuild an Online Store with AvadaMaking the Most of WooCommerce with AvadaInstall & Setup WooCommerceAvada WooCommerce Options
Woo Featured Products Slider Element

Woo Product Carousel Element

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 Reviews 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 Reviews 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 Reviews ElementThe Woo Reviews Element provides an independant way to add WooCommerce Reviews to your Product Layouts. This Element will display existing reviews for a product, and provide an opportunity for a user to leave a review. This functionality is also in the Woo Tabs Element, but can be disabled if desired in that Element and used as a standalone Element.
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 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 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%.

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

Content Typography – Controls the typography of the price 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 Border Size – Controls the review border size. In pixels.

Review Border Color – Controls the review border color.
Stars Color – Controls the color of review stars, ex: #000.Rating Box Background Color – Controls the rating box background color, ex: #000.Active Rating Box Background Color – Controls the rating box background color when hovering or in active state, ex: #000.Submit Review Button Style – Select whether you want to custom style the submit review button. Choose from Default, or Custom.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.

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

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

Regular Options
Button Text Color – Controls the text color of the button.Button Gradient Top Color – Controls the text color of the button.Button Gradient Bottom Color – Controls the text color of the button.Button Border Color – Controls the border color of the button.
Hover Options
Button Text Color – Controls the hover text color of the button.Button Gradient Top Color – Controls the hover text color of the button.Button Gradient Bottom Color – Controls the hover text color of the button.Button Border Color – Controls the hover border color of the button.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 Reviews Element does not have any specific Global Options.

Woo Related Products 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 Related Products 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 Related Products ElementThe Woo Related Products Element allows you to display any related products anywhere in your layout. A related product is one that is in the same category, or shares a tag. You can display the related products in Columns, or as a Carousel. A similar Element is the Woo Upsells Element, which is identical in Element options, but it displays products you select as upsells in WooCommerce products.
To use the Woo Related Products Element, simply add the Element to a Column in your layout and configure the Element options to display the related products as you desire. As you can see below in the Element Options, there are a range of Options to control both the functionality and design of the Related Products.
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 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 – Enter values including any valid CSS unit, ex: 4%.
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 Related Products Element does not have any specific Global Options.

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.