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

fusion_builder_enabled_elements

Applied to an array of enabled elements. Useful for auto enabling or disabling an element regardless of it』s state on Avada Builder > Settings page.
Copy to Clipboardfunction filter_function_name( $elements ) {
// Process $elements here

return $elements;
}
add_filter( 'fusion_builder_enabled_elements', 'filter_function_name' );
x 1function filter_function_name( $elements ) {2 // Process $elements here34 return $elements;5}6add_filter( 'fusion_builder_enabled_elements', 'filter_function_name' );7

The Avada Form Builder

Introduced in Avada 7.1, and reducing the need for extra plugins, we have developed Avada Forms, a powerful and fully integrated form solution into the Avada Website Builder.
Using the full power of the Avada Form Builder, you can create your own forms using any of our 19 new Form Elements, as well as any other Design Elements you might like. And if you don』t want to build your forms from scratch, you can start with any one of our 11 unique Prebuilt Forms, and then customize them to suit your needs.
With features like integration with HubSpot, custom confirmation messages, and four different submission types, including the ability to save entries to a database, Avada Forms will become an indispensable tool for you when building your sites. Read on for more details, and watch the video for a visual overview.,Overview
Getting Started

Creating A Form

Form Design & Builder Elements

Local Form Options
Adding Your Form To A Page With The Avada Form Element,Getting StartedYou can find Avada Forms on the Avada Dashboard. From the Forms menu, you can access both the Form Builder, and the Form Entries page. You can also find a link on the WordPress Dashboard sidebar, at Avada > Forms, which takes you to the Form Builder page, where you can add forms, and manage your existing forms.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Creating A FormWhen you first create a form, you are redirected to the WordPress editor (unless you have Avada Builder Auto Activation turned on in the Avada Builder Options), from where you can choose which builder interface, with which to build your form. As always, you can work with either Avada Builder, the back-end builder, or Avada Live.
The first consideration is whether you want to build a custom form from scratch, or start with one of the prebuilt forms. On the starter page you will see an 『Add Container』 button, and a 『Prebuilt Form』 button. For more information on the full range of Prebuilt Forms, please see the Prebuilt Avada Forms documentation. But for the purposes of this tutorial, let』s assume you are starting with a blank form.,Form Design & Builder ElementsOne of the huge advantages in using Avada Forms is that by using Avada Builder, it』s now very easy to design your Form layout using any manner of column sizes and combinations, and any combination of Avada Form and Design Elements. With this method, form design is both powerful and easy.
After adding a starting Container/Column combination from the Add Container button, you are now faced with a + button, to add your Elements. There are 19 new Form Builder Elements, specifically created for the Avada Form Builder, and of course, you can use any of the other Avada Design Elements in your form design as well.,Local Form OptionsOnce you have designed and created your Form, you can use the Local Form Options to customize its appearance, specify what happens when your form is submitted, customize confirmation messages, and set privacy options. The Form Options are found in the same place as where the Avada Page Options are usually located. The image below for example, is from the back-end Avada Builder. Check out the Avada Form Local Options doc, for a full rundown.
There are also Global Options for the default styling of your forms, Google reCAPTCHA, and HubSpot, found at Options > Forms. See the Avada Forms Global Options doc for more details on this.,Adding Your Form To A Page With the Avada Form ElementOnce you have completed your Form, it』s time to add it to a page. This is easily done with the Avada Form Element. With this simple helper Element, you can add any existing form anywhere you like into your page content. See the Avada Form Element doc for full details.,Useful Links & Resources
The Avada Form Builder

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

Avada Form Local Options

For each individual form you create in the Avada Form Builder, there is the Form Options panel, to customize its appearance, specify what happens when your form is submitted, customize confirmation messages, and to set privacy options.
In Avada Builder (the back-end editor) the Form Options are found at the bottom of the page, where the Page options usually reside. In Avada Live, as you can see in the image below, they』re in the Sidebar, again, where the Page Options usually reside. Let』s look at each of the Form Option sections in turn.,OverviewSettings
Appearance

Submission

Confirmation

Privacy

Custom CSS

Import/Export,SettingsThis page simply controls the Page Title and Slug for the Form.
View the Options Screen,AppearanceWith these options you can control the overall appearance of your Form, including colors, margins and borders.

Preview Width – Select the width to preview the form at in the live editor. Note: this is only used for previewing purposes.

Label Position – Make a selection for form input fields labels position. Choose from Above, or Below.

Tooltip Text Color – Controls the text color of the field tooltip.
Tooltip Background Color – Controls the background color of the field tooltip.
Field Margin – Controls the vertical height between form fields. In pixels (px), ex: 10px.
Field Height – Controls the height of the form fields. Use any valid CSS value. Leave empty for default value.Field Font Size – Controls the font size of the form fields text. Use any valid CSS value. Leave empty for default value.Field Background Color – Controls the background color of the form input field. Leave empty for default value.Field Text Color – Controls the text color of the form input field. Leave empty for default value.
Field Label Color – Controls the label color of the form input field. Leave empty for default value.
Field Placeholder Color – Controls the label placeholder of the form input field. Leave empty to use a faded version of the form text color.Field Border Size – Controls the border size of the form fields. Leave empty for default value.
Field Border Color – Controls the border color of the form input field. Leave empty for default value.
Form Border Color On Focus – Controls the border color of the form input field on focus. Leave empty for default value.
Field Border Radius – Controls the border radius of input field. In pixels. Leave empty for default value.
View the Options Screen,SubmissionThe Submission options control what happens when someone submits the form. Depending on the Submission Type selected – Save To Database, Send To URL, Send To Email, Save To Database and Send To Email, or Default POST HTML Form (non-AJAX) various options will be available.
Depending on your form you might choose any of these Submission Types, but the most common would be Save To Database, and Send To Email. Before we look at the options for the various Submission Types, here』s a quick rundown on the various types.

Save To Database – In general, storing form data in a database table is a convenient way to manipulate the received data and to create stats, do analysis etc. Also, through this option you can store the data directly on site. The database table can easily be exported or even connected to an automated script, which can do all sorts of data manipulation for you.
Send To URL – Depending on the script running on that URL, submission data could be caught and processed, either by a custom script, or through a dedicated URL provided by a newsletter service supplier. Also, it allows you to show a custom created success page, with Call To Actions etc.Send To Email – Here, the form data is simply sent to an email of your choice. This will be a common choice for many forms and users. When using Send To Email, or Save To Database and Send To Email, you can also use placeholders in your email submission fields to dynamically pull data from the form submission. See the Avada Forms Email Submission Placeholders doc for more information.Save To Database and Send To Email – This is a combination of submission types 1 and 3. It saves the entry to a database, and also forwards it to an email address, as specified in the submission type options.Default POST HTML Form (non-AJAX) – This is basically the same as Send to URL, with the exception that the data is sent simply to the same URL where the form is displayed. Unless you need this, Send to Email is a better choice.,Save To Database
Submission Type – Save To Database

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
View the Options Screen767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Send To URL
Submission Type – Send To URL.

Submission Method – Make a selection for form submission method. Choose from Post, or Get.
GET: Appends form-data into the URL in name / value pairs. It has a limit of a few thousand characters because of this and is not the right option if you send sensitive data. It is convenient though for creating bookmarks and also to extract the data (which is something the site owner has to do).
POST: Appends form-data inside the body of the HTTP request. There are no size limitations and the data is not part of the URL, thus it is more secure.

Form Submission URL – Enter the URL where form data should be sent to.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: Add Headers.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Send To Email
Submission Type – Send To Email

Form Submission Email – Enter email ID where form data should be sent to. If left empty, email will be sent to the WordPress admin.

Email Subject – Enter email subject. If left empty, the form title will be used.

Email From Name – Enter email from name. If left empty, WordPress will be used.

Sender Email – Enter sender email address. If left empty, [email protected] will be used.

Reply To Email – Enter the 『reply to』 email address.

Attach Uploaded Files – Add uploaded files as email attachments.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: + Add Header.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Save To Database and Send To Email
Submission Type – Save To Database and Send To Email

Form Submission Email – Enter email ID where form data should be sent to. If left empty, email will be sent to the WordPress admin.

Email Subject – Enter email subject. If left empty, the form title will be used.

Email From Name – Enter email from name. If left empty, WordPress will be used.

Sender Email – Enter sender email address. If left empty, [email protected] will be used.

Reply To Email – Enter the 『reply to』 email address.

Attach Uploaded Files – Add uploaded files as email attachments.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: Add Headers.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,Default POST HTML Form (non-AJAX)
Submission Type – Default POST HTML Form (non-AJAX)

Submission Method – Make a selection for form submission method. Choose from Post, or Get.
– GET: Appends form-data into the URL in name / value pairs. It has a limit of a few thousand characters because of this and is not the right option if you send sensitive data. It is convenient though for creating bookmarks and also to extract the data (which is something the site owner has to do).
– POST: Appends form-data inside the body of the HTTP request. There are no size limitations and the data is not part of the URL, thus it is more secure.

Enable Member Only Form – Select if you want to display this form to only logged in users with specific user roles. Choose from Yes or No.

Select User Role(s) – (displays if the option above is set to Yes.) Select user role(s) you want to display this form to. Leaving blank will display form to any logged in user. Choose from Administrator, Editor, Author, Contributor, or Subscriber.
Custom Headers – If you are using this form to integrate with a third-party API, you can use custom headers to implement authentication or pass-on any extra headers the API requires. Button: + Add Header.Custom Header Key – (displays when Add Header is clicked) Enter the key for the request』s custom header. Example: Content-TypeCustom Header Value – (displays when Add Header is clicked) Enter the value for your custom-header.View the Options Screen,ConfirmationWith these options you can control the overall appearance of your Form, including colors, margins and borders.

Form Confirmation Type – Select what should happen after the form is submitted successfully. Choose from Display Message, or Redirect To URL. When using Display message, you use the Notice Element in your Form to display your Success and Failure Messages. These can be placed anywhere in the form, for example at the bottom, or the top. If they are at the top, when the user submits the form, the page will scroll to the top of the form and display the message.

Redirect URL– Only displays if above option is set to Redirect To URL. Enter the URL which the user should be redirected to after a successful submission.
View the Display Message Options ScreenView the Redirect URL Options Screen,PrivacyWith these options you can control the privacy options for the Form.

Store IP and User-Agent – Select if you want to store the IP and User-Agent on submissions. Depending on the legislation that applies to your site, you may need to disable this option. Choose from Yes, or No.

Duration of Submissions Log (Months) – Select the duration for which form submissions will be kept in months. You can choose what happens on expiration below.

Submission Expiration Action – Choose what will happen when the time defined above comes to pass. If you have selected to log the user』s IP & UA above, selecting 「Anonymize IP and User-Agent」 will delete these from the log. If you want old entries to be deleted automatically after a certain time, then select 「Delete Submission」.
View the Options Screen,Custom CSSOn this tab, you can add Custom CSS to the Form.

CSS Code – Enter your CSS code in the field below. Do not include any tags or HTML in the field. Custom CSS entered here will override the theme CSS. In some cases, the !important tag may be needed. Don』t URL encode image or svg paths. Contents of this field will be auto encoded.
View the Options Screen,Import / ExportOn this tab you can export and import form options.

Import Page Options – Import Page Options. You can import via file or copy and paste from JSON data.

Export Page Options – Export your Page Options. You can either export as a file or copy the data.
View the Options Screen,Useful Links & Resources
The Avada Form Builder
Prebuilt Avada FormsAvada Form Global OptionsHow To Integrate HubSpot With Avada FormsAvada Form Element

fusion_builder_fields

If you are developing an add-on that requires a custom param type that the Avada Builder doesn』t have, you can use the following filter to add your custom param type to the Avada Builder.
Adding a new param type requires you to provide a param name and the param template file that will be used to generate the output for that param type in the element editor screen.
Basic usage of the filter:
Copy to Clipboardadd_filter( 'fusion_builder_fields', 'add_new_field' );

function add_new_field( $fields ) {
$plugin_dir = plugin_dir_path( __FILE__ );
$fields[] = array( 'param_type', $plugin_dir . 'templates/param_type.php' );
return $fields;
}x 1add_filter( 'fusion_builder_fields', 'add_new_field' );23function add_new_field( $fields ) {4 $plugin_dir = plugin_dir_path( __FILE__ );5 $fields[] = array( 'param_type', $plugin_dir . 'templates/param_type.php' );6 return $fields;7}Once you』ve added the param type to the Avada Builder, you will need to write the template file for it to display. Here』s a sample param file used for radio_button_set param type in the Avada Builder. You need to write the custom param file similar to this.
Copy to Clipboard

xxxxxxxxxx10 1

2 3 4 5 6 7 {{ name }}8 9

fusion_builder_auto_activate_element()

Copy to Clipboardfusion_builder_auto_activate_element(string shortcode_tag) 1fusion_builder_auto_activate_element(string shortcode_tag)Activate Avada Builder element automatically on plugin activation. Avada Builder element becomes available in Avada Builder library and is automatically enabled on Avada Builder > Settings page.
Copy to Clipboardregister_activation_hook( __FILE__, 'auto_activate_element' );

Woo Checkout Payment Element

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
Typography – Controls the typography of the payments text. Leave empty for the global font family.

Font Family – Controls the font family of the text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Regular Options

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

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

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

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

Hover/Active Options

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

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

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

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

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

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

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

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

Woo 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 Cart Coupons Element

The Woo Cart Coupons Element is a very simple Element that allows you to add a Coupon Code input section to your WooCommerce Cart Layout.,Woo Cart Coupons Element,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Coupons ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Coupons ElementThe Avada Woo Cart Coupons Element does exactly what it says – allows you to place a Coupons input section into your WooCommerce Cart Layout. There are several styling options to customize it to your needs. Read below for a description of all Element options.
To use this Element, simply add it to a Column on your WooCommerce Cart Page Layout. You can control margins around the Element, as well as style it to your liking.
WooCommerce Coupons themselves are now set up at Marketing > Coupons from the WordPress Dashboard. For more information on WooCommerce Coupons, please folow this link.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: The displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General Tab
Margin – Enter values including any valid CSS unit, ex: 4%.

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign TabForm Field Background Color – Controls the background color of the form input fields.Form Field Text Color – Controls the text color of the form input fields.Field Border Color – Controls the border color of the form input fields.Field Border Color On Focus – Controls the border color of the form input fields on focus.View The Options ScreenExtras Tab
Animation Type – Controls the Element』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

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

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

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

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

Woo Product Grid Element

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

Categories – Select a category or leave blank for all.

Exclude Categories – Select categories to exclude.

Tags – Select a tag or leave blank for all.

Exclude Tags – Select a tag to exclude.

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

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

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

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

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

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

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

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

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
Show Thumbnail – Display the product featured image. Choose from Yes, or No.

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

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

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

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

Grid Box Color – Controls the background color for the grid boxes.

Grid Border Color – Controls the color of borders for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Note: Separators will display, when buttons below the separators is displayed and Box Design mode set to Classic. Choose from Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, or Shadow.

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

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

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

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

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

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

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.