詩語，作者 Avada 文檔 - 第 60 頁共 79 頁

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.

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

Woo Checkout Billing Element

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

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

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

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

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

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

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

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

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

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

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

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

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

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

Woo Additional Information Element

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.
In Avada 7.2, as part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Additional Information Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Additional Information ElementThe Woo Additional Information Element will display any additional information from the product, such as Weight or Dimensions (which are added in the Shipping tab) or any Attributes added in the Attributes tab.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Show Heading – Choose to have tab heading displayed. Choose from Yes, or No.

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

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

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

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

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

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

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

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

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

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

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

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

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

Text Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

Woo Price 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 Price 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 Price ElementThe Woo Price Element allows you to add the Woo Product price wherever you want in your Product Layout. There is a range of options to show Discount badges and old prices, as well as layout options. In short, you can control virtually every facet of your product』s price, contolling how and where your price is displayed. Read more below for the full details of the Element 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 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 TabShow Sale Old Price – Make a selection to show or hide sale old price.
Sale Old Price Position – Make a selection for the sale old price position. Choose from After Regular, or Before Regular.

Layout – Make a selection for layout. Choose from Floated or Stacked. Floated will have the price and sale old price side by side. Stacked will have one per row.

Show Stock – Make a selection to show or hide stock. Choose from Yes, or No.

Show Discount Badge – Make a selection to show or hide discount badge. Choose from Yes, or No.

Discount Type – Make a selection whether badge should show percentage discount or amount.

Badge Position – Make a selection for the badge position. Choose from Before Price, or After Price.

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
Alignment – Select the content alignment.

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

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

Font Family – Controls the font family.

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

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

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

Font Family – Controls the font family.

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

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

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

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

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

Discount Badge Text Color – Select a color for the discount badge text. Leave empty for default value.

Discount Badge Typography – Controls the typography of the discount badge text. Leave empty for the global font family.

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

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

Discount Badge Background Color – Select a color for the discount badge background.

Discount Badge Border Size – Controls the border size of the Discount Badge. In pixels.

Discount Badge Border Color – Select a color for the discount badge border. Leave empty for default value.

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

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.

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

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

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 Checkout Order Review Element

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

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
Table Border Color – Controls the color of the table border, ex: #000.

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

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

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

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

Font Family – Controls the font family of the header.

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

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

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

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

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

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

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

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

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

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

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

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

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches,v