elements 歸檔 - 第 3 頁共 15 頁

Woo Checkout Tabs Element

The Woo Checkout Tabs Element allows you to add an a series of checkout related tabs to your WooCommerce Checkout page. It』s an all-in-one Element which has the same components that the other four Woo Checkout Elements have seperately – the Woo Checkout Billing Element, the Woo Checkout Order Review Element, the Woo Checkout Payment Element, and the Woo Checkout Shipping Element. With this single Element however, you can replicate the standard Woo Checkout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Tabs ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Tabs ElementTo use the Woo Checkout Tabs Element couldn』t be easier. Just add the Element to your assigned WooCommerce Checkout page (replacing the shortcode that』s already there). There are a range of layout and design options to style it exactly how you like. You can add Titles, or other Elements above or below (like the Woo Notices Element) to complete your page.
On the front end, the user will be led through the tabs as they complete each one. If you』d prefer to emulate the one page WooCommerce checkout, you can use the other afforementioned Woo Checkout Elements to create the same process on one page.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Layout – Choose the tabs layout. Choose from Vertical, or Horizontal.

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

Show Tab Content Headings – Choose to have tab content headings displayed. Choose from Yes, or No.

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 – Control margins around the Element. In pixels or percentage, ex: 10px or 10%.

Background Color – Controls the background tab color.

Inactive Background Color – Controls the inactive background tab 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 content heading. 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.

Link Color – Controls the link color of the payments text.

Link Hover Color – Controls the link hover color of the payments text.

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

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

Payment Label Background Color – Controls the payment_label background color of the payments.

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

Payment Label Color – Controls the payment label color.

Payment Label Hover Color – Controls the payment label hover color.

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.

Payment Description Text Color – Controls the description text color of the payments.
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 Tabs 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 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.

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.

Views Counter Element

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

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

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

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

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

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

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

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

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

Text Color – Set the text color.

Background Color – Set the background color.

Alignment – Select the views alignment.

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

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

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

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

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

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

Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. Only shows if Box Shadow is set to Yes.

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

Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.
View The Options Screen,Extras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Woo Cart Shipping Element

The Woo Cart Shipping Element is a very simple Element that allows you to add a Shipping details input section to your WooCommerce Cart Layout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Shipping ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Shipping ElementThe Avada Woo Cart Shipping Element does exactly what it says – allow you to place a Shipping input section into your WooCommerce Cart Layout.
A shipping address can be different to a billing address, and this allows the user to input the correct Shipping address. To use this Element, simply add it to a Column in your Cart Page Layout. You can control margins around the Element, as well as style it to your liking. 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 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 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 Cart 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 Featured Products Slider Element

The Woo Featured Products Slider Element is a great way for you to showcase your WooCommerce products. It』s very similar to the Woo Carousel Element, only with this Element it』s automatically using your featured products for the content. 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!
IMPORTANT NOTE: To set a product as 『Featured』, navigate to the 『Products』 tab on your WP Admin Sidebar and click the 『Star』 icon.,View the Woo Featured Products Slider Element in Action!View Element Demo Page!,OverviewHow To Use The ElementGeneral/Styling OptionsGlobal OptionsUseful Links & Resources,How to Use the Woo Featured Products Slider ElementTo use the Woo Featured Products Slider Element, please follow the simple steps below.
Step 1 – Navigate to the Products section of your WordPress admin. Look for the Featured column, that is the one with the star icon (see screenshot below).
Step 2 – Click the star icon next to all products that you want to be featured. You need to do this one product at a time, as the page will refresh each time. Doing this makes the product a featured product.
Step 3 – Next, go to the page you want the featured products to appear.
Step 4 – Click on the Woo Featured Products Slider Element via the Fusion Builder, and select your preferred options.
Step 5 – Click Save. Your featured products will now appear in a slider on your page.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

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 Featured Products Slider Element.,Useful Links & ResourcesBuild an Online Store with AvadaMaking the Most of WooCommerce with AvadaInstall & Setup WooCommerceAvada WooCommerce 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.

Vimeo Element

Adding a Vimeo video to your website has never been easier thanks to the Fusion Builder Vimeo Element. Just add the vimeo 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 more about the Vimeo Element!,View Element Demo Page!,OverviewHow To Use The ElementGeneral/Styling OptionsGlobal Options,How To Use The Vimeo Element
Adding a Vimeo video to your content couldn』t be easier with the Fusion Builder Vimeo 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 Vimeo.
Step 4 – Now you have the options window open. The first and most important step is to place the Vimeo video ID into the Video ID field. This is the the end section of the url; for example the Video ID for https://vimeo.com/75230326 is 75230326.
Step 5 – In the Alignment field, you can choose the alignment of the video in the column you are placing it in.
Step 6 – The dimensions of the video are next. This is in pixels, but you just enter a number. Vimeo videos do not force an aspect ratio, however the most common one is 16:9. When entering the dimensions with this element, the only really important one is the width. The video will display at its native aspect ratio.
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, which will disable related videos at the end of the video playing. 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. 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.

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 Vimeo video ID. For example, the Video ID for https://vimeo.com/75230326 is 75230326.

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 video autoplay.

Additional API Parameter – Use additional API parameter, for example &rel=0 to disable related videos. See Vimeo』s Using Player Paramerters page for more detail.
Title Attribute – Set the title attribute for the iframe embed of your video. Leave empty to use default value of 「Vimeo 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 Vimeo Element.

Woo Cart Table Element

The Woo Cart Table Element allows you to build and display a table on your cart page that displays the items currently in the Cart. This table can be customized to include or exclude various items, such as Product, Price, Remove Icon, Quantity, Subtotal, Product Title, or Product Image.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Table ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Table ElementThe Avada Woo Cart Table Element allows you to place a customized product table into your WooCommerce Cart Layout. It displays the items currently added to the cart. There are several product details that can be enabled or disabled in the table, allowing you to customize the content, and there is an area to place a custom Empty Cart Message for when the cart is empty.
To use this Element, simply add it to a Column in your Cart Page Layout. You can control margins around the Element, turn headers on or off, and decide which table columns to show, as well as styling it to your liking. Read below for a description of all Element options.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsGeneral TabTable Columns – Choose the order of cart table columns. You can Enable or Disable any of the items in the list. These are Product, Price, Quantity, Subtotal, Remove Icon, Product Title, and Product Image.
Show Table Headers – Choose to have table headers displayed. Choose from Show, or Hide.

Empty Cart Message – Show a message when the cart is empty. Use the Editor to customize the Empty Cart message.
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%.
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 Text Color – Controls the color of the heading 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 heading.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.
Content 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.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 Table 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 Notices Element

The Woo Notices Element is a very versatile Element that displays relevant notices on WooCommerce pages. You can add it to Layouts when building single product layouts, as well as on relevant pages, such as the Cart and Checkout pages.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Notices ElementThe Woo Notices Element allows you to place and style your WooCommerce notices into your Woo Product Layout. The notices themselves are automatically generated from WooCommerce, and this Element does not offer any way to customize these.
Simply place the Woo Notices Element in the area of your Layout or page you want the notices to appear. When you add the Element in Avada Live, you will see examples of the three notice types; General, Success, and Error. These allow you see what the notices will look like, so you can style them as you wish. Using the options in the Element, you can style the Notices』 appearance and color to your personal preferences.
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.
Note: This Element can be deployed only once within each page or 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.
Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General TabAlignment – Choose to align the content left, right or center.
Show Button – Make a selection to show or hide button.

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
Padding – In pixels or percentage, ex: 10px or 10%.

Margin – In pixels or percentage, ex: 10px or 10%.
Border Size – Controls the border size of the notice.Border Style – Controls the border style of the notice.Border Radius – Enter values including any valid CSS unit, ex: 10px.Text Size – Controls the size of the notice text. Enter value including any valid CSS unit, ex: 20px.Icon Size – Controls the size of the notice icon. In pixels.
Notice Types Styling – Use filters to see specific type of content.

General Notices
Background Color – Controls the background-color for the notice message.Border Color – Controls the border-color for the notice message.Icon – Select icon for notice message.Icon Color – Controls the icon color for the notice message.Text Color – Controls the text color for the notice message.Link Color – Controls the link color for the notice message.Link Hover Color – Controls the link hover color for the notice message.
Success State Notices

Background Color – Controls the background-color for the notice message.Border Color – Controls the border-color for the notice message.Icon – Select icon for notice message.Icon Color – Controls the icon color for the notice message.Text Color – Controls the text color for the notice message.Link Color – Controls the link color for the notice message.Link Hover Color – Controls the link hover color for the notice message.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.