Avada 文档

Privacy Element

New with Avada 5.5.2 is the Fusion Builder Privacy Element. You can easily add this element to your privacy policy page, or wherever it fits best for your site. It will display checkboxes for all services you chose, and will show, to each of your users, which of the services they have consented to, and which they have not. They can also easily update their consents within the element. Please continue below to read more about this important privacy element.
IMPORTANT NOTE: The Privacy Element is disabled in Fusion Theme Options by default and needs to be enabled in the Theme Options > Privacy > Privacy Consent option for it to be accessible in the Fusion Builder. Embedded Content On This SiteThis is a working example, that lets you control the privacy settings for third-party embeds (in our case YouTube, Facebook, Twitter) on this site. More information and details can be found in our Privacy Policy.
Consent ChoiceWe provide you with the choice to accept this or not, as we prompt consent boxes for all embedded content, and no data is transferred before you have consented to it.
The checkboxes below show you all embeds you have consented to so far. You can opt-out any time by un-checking them and clicking the update button.
Google Maps,View Element Demo Page!View our full range of Privacy Tools!,OverviewHow To Use The ElementElement OptionsGlobal OptionsLinks & Resources,How To Use The Privacy ElementStep 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 Privacy notice into.
Step 3 – Click on the + Element button at the bottom of the column. Select Privacy.
Step 4 – Add your Privacy text to the dialogue and choose whether you want the form checkboxes to be stacked, or if they should be floated. Click Save to add the element to your page. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
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.
General Tab
Privacy Text – Allows you to add the text to display.

Form Field Layout – Allows you to set the form fields to be stacked/full width or floated.

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 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 actual Privacy Element, but there are options in the Theme Options, found at Avada > Theme Options > Privacy. These affect all aspects of the Privacy Tools added to Avada, but not the Element directly.,Useful Links & ResourcesGDPR and Avada Privacy ToolsAvada Privacy BarPrivacy Tools Options

Pricing Table Element

The Pricing Table Element affords you a graphic way of showcasing your services, prices and overall offerings. With the Pricing Table Element, two different design styles can be selected, along with various column widths. You can make a column standout for added visibility, change the type of currency and the currency position, change the length of payment time, such as monthly or weekly, and even and add buttons to the footer section. These many options allow you to create beautiful, customized pricing tables throughout your site with ease. Read on to find out more about this professional Element.,Standard$1999monthly5 Projects5 GB StorageUnlimited Users10 GB BandwithSign Up Now!Premium$2999monthly10 Projects15 GB StorageUnlimited Users20 GB BandwithSign Up Now!Professional$3999monthly15 Projects30 GB StorageUnlimited Users50 GB BandwithSign Up Now!Maximum$4999monthly30 Projects100 GB StorageUnlimited Users150 GB BandwithSign Up Now!Extreme$5999monthlyUnlimited ProjectsUnlimited StorageUnlimited UsersUnlimited BandwithSign Up Now!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Pricing Table ElementThe Pricing Table Element allows you to easily show pricing tables on your website.
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 portfolio items into.
Step 3 – Click on the + Element button at the bottom of the column. Select Portfolio.
Step 4 – The Pricing Table Element has two preset styles, and this is the first option to choose. But that』s just the start. There are many extra styling options to allow you to control background, background hover, border, heading and divider colors, as well as the pricing and body text colors. Be sure to visit the Pricing Table Element Demo page to get a good idea of what』s possible with this awesome element.
Step 5 – After the styling options, come the table options. The Table tab gives you a visual idea of how your table is laid out, and you can add columns and rows and edit the content right here. One important option on this tab is the Standout option. This adds lift up and drop shadow styling to the selected column to make it stand out more. You can even add Call to Action buttons at the bottom. Clicking on Add Button will call the button Element, where you can style a button before being taken back to complete the Pricing Table Element. Try it out!
Step 6 – Once you have completed styling your Pricing Table Element, click Save. You will be returned to the edit page. You can preview the page to view your content. To get the layout you want might take some further customization, but as always you can always come back into the element for further editing.
Read below for a detailed description of all element options.
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.
Note: The Default setting will use the global settings assigned for this element in your Global Options > Avada Builder Elements > Pricing Table section. 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.
Table Options
Type – Select the type of pricing table. Choose from Style 1, or Style 2.

Background Color – Set pricing table background color. Leave for the default value selected in the Theme Options (Avada > Theme Options > Fusion Builder Elements > Pricing Table Element).

Background Hover Color – Set pricing table background hover color.

Border Color – Set pricing table border color.

Divider Color – Set pricing table divider color.

Heading Color – Set pricing table headings color.

Heading Color – Set pricing table headings color. There are two of these options. One is for the Style 1 Pricing Table, and the other is for Style 2, but if you have Avada』s Option Network Dependency option enabled, you will only see one option.

Pricing Text Color – Set pricing table price text color.

Body Text Color – Set pricing table body text color.

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 ScreenTable
Add / Remove Rows & Columns – Illustrated as A. You can add columns or feature rows to your pricing table here.

Column Settings – Illustrated as B. Each column has a title, with options to delete or clone the column.

Standout – Illustrated as C. Select if the column should be a Standout column. This lifts the column up and adds a drop shadow to make the column stand out from the others. You can have multiple Standout columns.

Head Title – Illustrated as D. This is the title that will show on the top of the column.

Currency Symbol – Illustrated as E. Enter your currency symbol, and whether it should be before or after the amount.

Price – Illustrated as F. Enter the price for that column.

Period – Illustrated as G.Enter the period for the price. Can also be left empty.

Delete Row – Illustrated as H. If you hover over a row, you can delete the row using the bin icon at the left.

Feature Row – Illustrated as I. Enter a feature of the product here.

Add Button – Illustrated as J. Click this to open the Button dialog. You can make your selections and choose Insert to add the button shortcode into the text field below.

Text Field – Illustrated as K.Allows you to add any text to the bottom row. Will also accept HTML markup and shortcodes, like a small image.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Global Options > Avada Builder Elements > Pricing Table

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.
Pricing Box Style 1 Heading Color – Controls the color of style 1 pricing table headings.
Pricing Box Style 2 Heading Color – Controls the color of style 2 pricing table headings.

Pricing Box Color – Controls the color portions of pricing boxes.

Pricing Box Background Color – Controls the color of the main background and title background.

Pricing Box Background Hover Color – Controls the hover color of the main background and title background.

Pricing Box Border Color – Controls the color of the outer border, pricing row and footer row backgrounds.

Pricing Box Divider Color – Controls the color of the dividers in-between pricing rows.
View The Options Screen

Post Slider Element

Avada』s Post Slider Element can be set to automatically pull your blog posts, titles and excerpts into a sleek and modern slideshow. It includes configuration options such as layout, categories, etc. The example below is displaying the latest posts from our blog.
The 2021 Avada Black Friday SaleAvada 7.5 is Live! Prebuilt Studio ContentPart 2: How to sell on your site with WooCommerceVersion 7.4.2 Security UpdatePart 1: How to Build a Website for Your Online Store With Avada,View Element Demo Page!,OverviewHow To Use The ElementGeneral/Styling OptionsGlobal OptionsUseful Links & Resources,How To Use The Post Slider ElementThe Post Slider Element allows you to add a Post Sliders to your content, in a variety of layouts.
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 post slider into.
Step 3 – Click on the + Element button at the bottom of the column. Select Post Slider.
Step 4 – The Layout option is the first option, and here you control the appearance of the post slider. There are three layouts to choose from, including Posts with Title, Posts with Title and Excerpt, and Attachment Layout, Only Images Attached to Post/Page.
Step 5 – With the first two layouts, the next thing to do is choose the categories and number of slides you want to display, and the number of words for the excerpt if you choose that layout, but with the third layout option, you add individual images to your page to show in the slider.
Step 6 – Once you have set your styling options, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
There are 3 different Post Slider layouts to choose from:
Post With Titles – Displays your post』s title over a featured image.Post With Excerpt & Titles – Displays post』s title and excerpt over a featured image.Attachments (Images Only) – Displays images uploaded to page or post.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.

Layout – Select a layout style for Post Slider. Choose from Posts with Title, Posts with Title and Excerpt, and Attachment Layout, Only Images Attached to Post/Page.

Attach Images to Post/Page Gallery – To add images to this post or page for attachments layout, navigate to 「Upload Files」 tab in media manager and upload new images.

Excerpt Number of Words – Insert the number of words you want to show in the excerpt.

Category – Select a category of posts to display.

Number of Slides – Select the number of slides to display.

Image Lightbox – Only works on attachment layout. Lightbox must be enabled in Theme Options or the image will open up by in the same tab by itself.

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 Fusion Builder Elements tab in the Theme Options.

CSS Class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

CSS ID – Add a custom id to the wrapping HTML element for further css customization. Learn more here.
View The Options ScreenGlobal OptionsThere are no Global Options for this Element.,Useful Links & ResourcesOther Slider TypesBlog Post Options

Post Cards Element

The Post Cards Element was a new addition to Avada Builder in Avada 7.3. This Element works in conjunction with individual Post Cards, which are created and designed through the Avada Builder Library. Basically, a Post Card is a custom layout template for various post types including Blog posts, Portfolio posts, FAQs, Events and WooCommerce Products. Using the Post Cards Element, the individual Post Cards can then be displayed in Grids, Carousels, or Sliders in your pages and Layouts.
Check out the How To Use Post Cards In Avada for a broad overview on the topic, read on to find out specific details and options for this useful Element, and watch the video for a visual overview.,View Element Demo Page!OverviewHow To Use The Post Cards ElementElement OptionsGlobal Options,How To Use The Post Cards ElementThe Post Cards Element is used to display a custom post type grid, slider or carousel, based on the design on an individual Post Card, and post type options. So before you can use the Post Cards Element, you need to create at least one Post Card. This is done through the Avada builder Library. See the How To Use Post Cards In Avada doc for more information on this process.
Once you have created your Post Card, you can use the Post Cards Element to display the layout on a page. Simply add the Element to a page, and configure the options to display your chosen post type in your chosen layout.
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.
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 TabPost Card – Select the post card design to use. Post cards can be created in the Avada Library.Post Card List View – This post card will be used in the list view which can be triggered with the sorting element. Post cards can be created in the Avada Library.Content Source – Select if you want to pull single posts or taxonomy terms. Choose from Posts, Terms, Related, Up Sells or Cross Sells.Post Type – Select which post type you want to pull from. Choose from Posts, Products, Events, Portfolio, or FAQs.
Taxonomy – Select which taxonomy to pull terms from. Choose from Categries, Tags, Product Type, Product Categories, Product Tags, Product Shipping Classes, Event Categories, Portfolio Categories, Portfolio Skills, Portfolio Tags, or FAQ Categories.
Posts By – Select which taxonomy to pull posts from or select all to pull all. Choose from All, Categories, or Tags.Include Categories – Select a category or leave blank for all.Exclude Categories – Select a category or leave blank for all.Include Tags – Select a tag or leave blank for all.Exclude Tags– Select a tag or leave blank for all.Include Product Type – Select a product type or leave blank for all.Exclude Product Type – Select a product type or leave blank for all.Include Product Categories – Select a product category or leave blank for all.Exclude Product Categories – Select a product category or leave blank for all.Include Product Tags – Select a product tag or leave blank for all.Exclude Product Tags – Select a product tag or leave blank for all.Include Product Shipping Classes – Select a product shipping class or leave blank for all.Exclude Product Shipping Classes – Select a product shipping class or leave blank for all.Include Event Categories – Select an event category or leave blank for all.Exclude Event Categories – Select an event category or leave blank for all.Include Portfolio Categories – Select a portfolio category or leave blank for all.Exclude Portfolio Categories – Select a portfolio category or leave blank for all.Include Portfolio Skills – Select a portfolio skill or leave blank for all.Exclude Portfolio Skills – Select a portfolio skill or leave blank for all.Include Portfolio Tags – Select a portfolio tag or leave blank for all.Exclude Portfolio Tags – Select a portfolio tag or leave blank for all.Include FAQ Categories – Select an FAQ category or leave blank for all.Exclude FAQ Categories – Select an FAQ category or leave blank for all.
Include Out Of Stock Products – Choose to include or exclude products which are out of stock. Choose Include, or Exclude.
Show Hidden Products – Choose to show hidden products which are exclude from search or catalog.Number of Posts – Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the Global Options. For all others, Settings > Reading.Posts Offset – The number of posts to skip. ex: 1.Order By – Defines how posts should be ordered. Note: (Price|Popularity|Rating) option only work for product related query. Choose from Date, Post Title, Post Slug, Author, ID, Number of Comments, Last Modified, Random, Price, Populariry (sales), Avarage Rating, or Event Date. Order By – Defines how terms should be ordered. Choose from Name, Slug, Term Group, Term ID, Description, or Parent.Order – Defines the sorting order of posts. Choose from Descending, or Ascending.
Show Only Upcoming Events – Whether or not the events displayed will be only from the current date.

Show Only Featured Events – Whether or not to display only events that are featured.
Pagination Type – Choose the type of pagination.Choose the type of pagination. Choose from No Pagination, Pagination, Infinite Scrolling or Load More Button.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 for the Separator.CSS ID – Allows you to add an ID for the Separator.View The Options ScreenDesign TabLayout – Select how you want post cards to display. Choose from Grid, Carousel, or Slider.Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.Number of Columns – Set the number of columns per row.Column Spacing – Insert the amount of horizontal spacing between items without 『px』. ex: 40.Row Spacing – Insert the amount of vertical spacing between items without 『px』. ex: 40.Autoplay – Choose to autoplay the items.Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.Show Navigation – Choose to show navigation buttons on the carousel / slider.Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.Animation – Select the animation style. Choose from Fade, or Slide.Margin – In pixels or percentage, ex: 10px or 10%.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.

Post Card Image Element

The Post Card Image Element is a special Layout Element, that you will only see when editing a Post Card Library Element through the Avada Builder Library. It is one of the available Elements, with which to design and build Post Cards.
Read on to find out more about this useful Element.,View Element Demo Page!OverviewHow To Use The Post Card Image ElementElement OptionsGlobal Options,How To Use The Post Card Image ElementThe Post Card Image Element is designed for use in Post Cards. The Element will pull the featured image(s) from the custom post type it displays on, including blog posts, portfolio posts, FAQs, and WooCommerce products etc.
There are three Layout options; Static, Crossfade (for multiple Feautured Images) and Rollover. There are also a range of options for various post types, such as price and rating options for WooCommerce products, as well as link options.
To use the Post Card Image Element, just add the Element into your Post Card Library Element, and set your options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.
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
Layout – Select image layout. Choose fromStatic, Crossfade, or Rollover.

Show Title – Choose to show or hide the title.

Show Categories – Choose to show or hide the categories.

Show Price – Choose to show or hide the price. Applies only to WooCommerce products.

Show Rating – Choose to show or hide the rating. Applies only to WooCommerce products.

Show Sale Badge – Choose to show or hide the sale badge. Applies only to WooCommerce products.

Show Out Of Stock Badge – Choose to show or hide the out of stock badge. Applies only to WooCommerce products.

Show Buttons – Choose to show or hide Add to Cart / Details buttons on the rollover. Applies only to WooCommerce products.

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 for the Separator.

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenDesign TabMargin – In pixels or percentage, ex: 10px or 10%.Border Radius – Enter values including any valid CSS unit, ex: 10px.Crossfade Background Color – Set the background of crossfade image container.View The Options ScreenExtras Tab
Animation Type – Allows you to select what type of animation to use. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Allows you to select the animation』s incoming direction. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Allows you to set the speed of the animation.

Offset of Animation – Allows you to set at what point 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 Post Card image Element.

Post Card Cart Element

The Post Card Cart Element is a special Layout Element, that you will only see when editing a Post Card Library Element. It is one of the available Elements, with which to design and build Post Cards, and specifically WooCommerce Post Cards. Read on to find out more about this useful Element.,View Element Demo Page!OverviewHow To Use The Post Card Cart ElementElement OptionsGlobal Options,How To Use The Post Card Cart ElementThe Post Card Cart Element allows you to add an Add to Cart section in your WooComerce based Post Cards. You could use a WooCommerce Post Card instead of the WooCommerce Product Grid Element for example.
To use the Element, simply add it to your WooCommefce based Post Card and configure it to your needs. There are many choices with this Element, both with functionality and design. Read on to see the full list of options available with this useful Element.
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. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.
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
Cart Layout – Select the layout for the quantity and add to cart button. Choose between Floated, or Stacked. Floated will display components side by side. Stacked will have one component per row.

Cart Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

Cart Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked Option only.

Show Quantity – Display the quantity input.

Show Add To Cart – Display the Add To Cart button.

Show Product Link – Display the Product Link.

Product Quick View – Enable product quick view for products.

Buttons Span – Controls if buttons spans the full width/remaining width of row.

Buttons Layout – Select the layout for buttons. Floated will have them side by side. Stacked will have one per row.

Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, or Flex End. For Stacked option only.

Buttons Alignment – Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly. For Floated option only.

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

CSS ID – Allows you to add an ID for the Separator.
View The Options ScreenDesign Tab
Margin – In pixels or percentage, ex: 10px or 10%.
Quantity Style – Select whether you want to custom style the quantity field. Choose from Default, or Custom. This option will only display if Show Quantity is set to Yes on the General Tab. The following dozen or so 『Quantity』 options will also only display if 『Custom』 is then chosen in this option.
Quantity Margin – In pixels or percentage, ex: 10px or 10%.
Quantity Input Dimensions – Enter values including any valid CSS unit, ex: 10px.Quantity Border Radius – Enter values including any valid CSS unit, ex: 10px.Quantity Input Font Size – Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.Quantity Input Text Color – Controls the text color of the select fields.Quantity Input Background Color – Controls the background color of the select fields.Quantity Input Border Size – Controls the border size of the select fields.Quantity Input Border Color – Controls the border color of the select fields.Quantity Button Border Size – Controls the border size of the select fields.Quantity Button Styling – Use filters to see specific type of content.Regular OptionsQuantity Button Text Color – Controls the text color of the select fields.Quantity Button Background Color – Controls the background color of the select fields.Quantity Button Border Color – Controls the border color of the select fields.Hover/Active OptionsQuantity Button Text Color – Controls the text color of the select fields.Quantity Button Background Color – Controls the background color of the select fields.Quantity Button Border Color – Controls the border color of the select fields.Add To Cart Margin – In pixels or percentage, ex: 10px or 10%.Add To Cart Link Style – Select whether you want to custom style the add to cart button. Choose from Text Link, or Button.
Add To Cart Link Font Size – Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Add To Cart Link Styling – Use filters to see specific type of content.Regular OptionsLink Text Color – Controls the text hover color of the link. Leave empty for default value.Hover/Active OptionsLinkText Color – Controls the text color of the link. Leave empty for default value.Button Size – Controls the button size. This, and the following three options will only display if 『Button』 is selected in the previous option, the Add To Cart Link Style.Button Border Size – Controls the border size. In pixels.Icon – Click an icon to select, click again to deselect.Icon Position – Choose the position of the icon on the button.Button Styling – Use filters to see specific type of content.Regular OptionsButton 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/Active OptionsButton Text Hover Color – Controls the text color of the button.
Button Gradient Top Hover Color – Controls the text color of the button.
Button Gradient Bottom Hover Color – Controls the text color of the button.Button Border Hover Color – Controls the border color of the button.
Product Link Style – Select whether you want to custom style the product link.

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

Product Link Font Size – Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Product Link Styling – Use filters to see specific type of content.Regular Options
Product Link Text Color – Controls the text color of the link. Leave empty for default value.
Hover/Active Options
Product Link Text Hover Color – Controls the text hover color of the link. 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.

Post Card Archives Element

In Avada 7.3, we created the Post Cards feature, and the Post Cards Element. In the Layout Elements, you will find the Post Card Archives Element. This special Element is useful for when you want to change the way archives display, by using a Post Card design.,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 Post Card Archives ElementThe Post Card Archives Element allows you to place archive content using a Post Card layout anywhere in a Content Layout Section, in a Layout displaying Archive content.
When you go to add an Element in a Content Layout Section, the Element dialog opens in a new tab called Layout Elements. This is where you will find the Post Card Archives Element. These dynamic Elements can only be placed once into a Layout, with the exception of the Pagination Element, which can be placed twice. You can also use the full range of Design Elements when building your Layout.
The Post Card Archives Element can be placed anywhere in your Layout Section, and will dynamically pull Archives Content into the page, based on the Post Card layout chosen, and the Conditions set in the Layout. For example, you might choose a Product Grid Post Card, and set the condition for the Layout only to display on Post Category Archives.
See below for an example of the Post Card Archives Element in a Product Category Content layout on the Avada Retail prebuilt website. Here, it』s set to display the Category Products in a Grid when viewing the Product Category Archives.
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 TabPost Card – Selected a post card design to use. Post cards can be created in the Avada Library.Post Card List View – This post card will be used in the list view which can be triggered with the sorting element (WooCommerce). Post cards can be created in the Avada Library.Posts Per Page – Select number of posts per page. Set to -1 to display all. Set to 0 to use the post type default number of posts. For portfolio and products this comes from the global options. For all others Settings > Reading.Pagination Type – Choose the type of pagination. Choose from Pagination, Infinite Scroll, or Load More Button.Nothing Found Message – Replacement text when no results are found.
Element Visibility – Allows you to control the Element』s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign TabLayout – Select how you want post cards to display.Post Card Alignment – Select how you want post cards to align within rows. Choose from Flex Start, Center, Flex End, or Stretch.Number of Columns – Set the number of columns per row.Column Spacing – Insert the amount of horizontal spacing between items without 『px』. ex: 40.Row Spacing – Insert the amount of vertical spacing between items without 『px』. ex: 40.Separator – Choose the horizontal separator line style. This will only be used on single column grids or list view.Separator Color – Controls the separator color.Separator Width – In pixels (px or %), ex: 1px, ex: 50%. Leave blank for full width.Separator Alignment – Select the separator alignment; only works when a width is specified. Choose from Center, Left, or Right.Separator Border Size – In pixels.Autoplay – Choose to autoplay the items.Scroll Items – Insert the amount of items to scroll. Leave empty to scroll number of visible items.Show Navigation – Choose 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.Navigation Margin – Controls the space between content and navigation. Enter value including any valid CSS unit, ex: -40px.
Animation – Choose animation style. Select Fade, or Slide.
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.

Portfolio Element

The Portfolio Element allows you to display your collected portfolio posts on any page you wish. It includes 3 different layout styles: Carousel, Grid, or Masonry. All styles can specify a certain category and number of posts, along with a plethora of customization options that are simply amazing. All layouts can also use 1-6 columns. Read below for an overview of the specific features of this much-used Element.,View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Portfolio ElementThe Portfolio Element allows you to add a customized range of your Portfolio items anywhere in your content.
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 portfolio items into.
Step 3 – Click on the + Element button at the bottom of the column. Select Portfolio.
Step 4 – Start by working through the options. You can style the output of this element in three main ways. It can be a Portfolio Carousel, a Grid layout, or a Masonry layout. There are several options after this that control the look and feel of the layout, depending on what option you initially select. Be sure to visit the Portfolio Element Demo page to get a good idea of what』s possible with this amazing element.
Step 5 – After the styling options, come the content options. With this Element, you can specify which categories you would like to include, or alternatively exclude. You can control their alignment, offset the content (for example a post offset of 1 would not show the latest portfolio item but would start with the second latest), set the number of posts per page, specify the pagination, as well as many other small granular controls. To get the layout you want might take some experimentation, but pretty much all options you might wish for are included.
Step 6 – Once you have set all your styling options, there is also the Extras Tab, that has animation options, if you wish to influence how your content interacts with the page load.
Step 7 – Once you have completed styling your Portfolio Element, click Save. You will be returned to the edit page. You can preview the page to view your content, and you can always edit the element again to make changes..
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 your Options > Avada Builder Elements > Portfolio section. 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 Tab
Layout – Controls the portfolio』s layout. Choose between Carousel, Grid, or Masonry.

Picture Size – Controls how the featured image will be sized. Choose between Default, Fixed, or Auto. Choose Fixed to load a theme generated image size so your images display in the same width and size, creating a uniform layout. Choosing Auto will use the featured image』s natural height and width.

Text Layout – Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled. Choose between Default, No Text, Boxed, or Unboxed.

Grid Box Color – Controls the background color for the grid boxes. For Grid layout, this option will only work in boxed mode.

Grid Element Color – Controls the color of borders/date box/timeline dots and arrows for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Choose between 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.

Number of Columns – Controls the number of columns per row. With Carousel layout, this specifies the maximum amount of columns.

Column Spacing – Controls the space or padding between the columns of the portfolio items.

Masonry Image Aspect Ratio – Controls the ratio to decide when an image should become landscape (ratio being width: height) and portrait (ratio being height: width). Note: The value of 「1.0」 represents a special case, which will use the auto-calculated ratios like in versions prior to Avada 5.5.

Masonry 2×2 Width – Controls when a square 1×1 image should become 2×2. This will not apply to images that highly favor landscape or portrait layouts. Note: There is a 「Masonry Image Layout」 setting for every image in the WP media library that allows you to manually set how an image will appear (1×1, landscape, portrait or 2×2), regardless of the original ratio.

Content Position – Controls the content』s orientation in relation to the image. This option is only for Grid and Masonry layouts and with Columns set to 1. Choose between Below Image or Next to Image.

Equal Heights – Allows you to display grid boxes with equal heights per row. Choose between Yes or No.

Posts Per Page – Controls how many portfolio items to display on the page. Set to -1 to display all portfolio items. Set to 0 to use the number of posts from Settings > Reading.

Portfolio Title Display – Controls what displays with the portfolio post title. Choose between Default, Title and Categories, Only Title, Only Categories, or None.

Portfolio Text Alignment – Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio archive pages. Choose between Left, Center, or Right.

Portfolio Text Layout Padding – Controls the top, right, bottom, and left padding for the portfolio text layout when using boxed mode.

Show Filters – Allows you to show or hide the category filters. Choose between Yes, Yes without 「All」, or No.

Pull Posts By – Allows you to choose how posts are filtered. Choose between Category or Tag.

Categories – Controls which categories to display on the page. Only portfolio items organized under these categories will be shown. Leave blank to display all categories.

Exclude Categories – Controls which categories to hide from the page. Only portfolio items tagged under these categories will be hidden. Leave blank to load all categories.

Tags – Controls which tags to display on the page. Only portfolio items organized under these tags will be shown. Leave blank to display all tags.

Exclude Tags – Controls which tags to hide from the page. Only portfolio items organized under these tags will be hidden. Leave blank to load all tags.

Pagination Type – Controls the pagination type. Choose between Default, Pagination, Infinite Scrolling, Load More Button, or None.

Hide URL Parameter – You can use this setting to disable the URL parameter used in single post links when navigating from a Portfolio Element that』s filtering by Categories or Tags. You can find more info on that here.

Post Offset – Controls how many portfolio items to skip before showing posts on the page.

Order By – Controls how portfolios should be ordered. Choose between Date, Post Title, Portfolio Order, Post Slug, Author, Number of Comments, Last Modified, or Random.

Order – Controls the sorting order of portfolios. Choose between Descending or Ascending.

Text Display – Controls how to display the post excerpt. Choose between Default, No Text, Excerpt, or Full Content.

Excerpt Length – Controls the number of words/characters to display in the excerpt.

Strip HTML – Allows you to strip HTML from the excerpt for portfolio archive pages. Choose between On or Off. Choose On to strip HTML, or Off to keep it.

Carousel Layout – Controls the carousel』s layout. Choose between Title below image or Title on rollover.

Carousel Scroll Items – Accepts a numerical value that sets how many items to scroll. Leave empty to scroll the number of visible items.

Carousel Autoplay – Allows you to enable or disable the carousel』s autoplay feature. Choose between Yes or No.

Carousel Show Navigation – Allows you to show or hide the carousel』s navigation. Choose between Yes or No.

Carousel Mouse Scroll – Allows you to enable or disable the carousel』s mouse drag control. Choose between Yes or No.

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.

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 OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Portfolio
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Portfolio Featured Image Size – Controls if the featured image size is fixed (cropped) or auto (full image ratio) for portfolio elements. IMPORTANT: Fixed works best with a standard 940px site width. Auto works best with larger site widths.

Number of Columns – Set the number of columns per row. With Carousel layout, this specifies the maximum amount of columns. IMPORTANT: Masonry layout does not work with 1 column.

Column Spacing – Controls the column spacing for portfolio items. In pixels.

Number of Portfolio Items Per Page – Controls the number of posts that display per page for portfolio elements. Set to -1 to display all. Set to 0 to use the number of posts from Settings > Reading.

Portfolio Text Layout – Controls if the portfolio text content is displayed boxed or unboxed or is completely disabled for portfolio elements.

Portfolio Text Display – Choose how to display the post excerpt for portfolio elements.

Excerpt Length – Controls the number of words in the excerpts for portfolio elements.

Strip HTML from Excerpt – Turn on to strip HTML content from the excerpt for portfolio elements.

Portfolio Title Display – Controls what displays with the portfolio post title for portfolio elements.

Portfolio Text Alignment – Controls the alignment of the portfolio title, categories and excerpt text when using the Portfolio Text layouts in portfolio elements.

Portfolio Text Layout Padding – Controls the padding for the portfolio text layout when using boxed mode in portfolio elements. Enter values including any valid CSS unit, ex: 25px, 25px, 25px, 25px.

Pagination Type – Controls the pagination type for portfolio elements. Choose from Pagination, Infinite Scroll, or Load More Button.

Load More Posts Button Background Color – Controls the background color of the load more button for ajax post loading for portfolio elements.

Load More Posts Button Text Color – Controls the text color of the load more button for ajax post loading for portfolio elements.

Load More Posts Button Hover Background Color – Controls the hover background color of the load more button for ajax post loading for portfolio elements.

Load More Posts Hover Button Text Color – Controls the hover text color of the load more button for ajax post loading for portfolio elements.
View The Options ScreenAvada Page OptionsWhen creating or editing a Portfolio item, there is also a Portfolio tab on the Avada Page Options. See below for a quick overview, or for more detail, read the Portfolio Post Options doc.

Show Previous/Next Pagination – Choose to show or hide the post navigation.

Use 100% Width Page – Choose to set this post to 100% browser width.

Width (Content Columns for Featured Image) – Choose if the featured image is full or half width.

Disable First Featured Image – Disable the 1st featured image on single post pages.

Featured Image Dimensions – In pixels or percentage, ex: 100% or 100px. Or Use 「auto」 for automatic resizing if you added either width or height.

Video Embed Code – Insert Youtube or Vimeo embed code.

Youtube/Vimeo Video URL for Lightbox – Insert the video URL that will show in the lightbox.

Show Project Description Title – Choose to show or hide the project description title.

Show Project Details – Choose to show or hide the project details text.

Project URL – The URL the project text links to.

Project URL Text – The custom project text that will link.

Image Rollover Icons – Choose which icons display on this post. Leave empty for default value

Custom Link URL On Archives – Link URL that will be used on archives either for the rollover link icon or on the image if rollover icons are disabled. Leave blank for post URL.

Open Portfolio Links In New Window – Choose to open the single post page, project URL and copyright URL links in a new window.

Show Author – Choose to show or hide the author in the Project Details.

Show Social Share Box – Choose to show or hide the social share box.

Show Related Projects – Choose to show or hide related projects on this post.

Show Comments – Choose to show or hide comments area.
View The Options Screen,Useful Links & ResourcesDisplaying and Configuring Portfolio Posts On Your SiteCreating Portfolio PostsPortfolio Masonry Layout (Video)Portfolio Post Type Global OptionsPortfolio Single Post Page Extended

Popover Element

The Popover Element is a simple yet elegant way to display information without disrupting your page layout. The Popover Element can be used as a stand alone Element from the Avada Builder, but it is also an Inline Element, accessible from the Inline Editor. You can add popovers to text, images, and even buttons! To learn the different ways on how to add popovers, please continue reading below.,Hover Here To See The Popover Element In Action,View Element Demo Page!,OverviewHow To Add Popovers To TextHow To Add Popovers To ImagesHow To Add Popovers To Buttons
Inline Elements In Avada Live
Element OptionsGlobal OptionsUseful Links & Resources,How To Use The Popover ElementYou can add popovers to any text content or image you have. For example, a word between paragraphs or an entire sentence. You can also add popovers on buttons, however to do that, it requires a few more steps. Continue reading below to learn about how to add popovers to text, images, and buttons.
How To Add Popovers To TextHow To Add Popovers To ImagesHow To Add Popovers To ButtonsHow To Add Popovers To TextThere are two ways to add a Popover to text – to pre-existing text, or through the Popover Element itself. let』s look at both ways.
Existing TextStep 1. Select the text you want to be the trigger for the Popover in any Element that has a Text component, such as the Text Block, or Title. If you are working in Avada Live, the Inline Editor will appear, and from the + button, you can choose the Popover Element. If you are in Avada Builder, you will need to edit the Text based Element, and select the trigger text in the WordPress content editor field inside the Element.
Step 2. On the toolbar, you』ll find the 『Avada Builder Element Generator』 icon which looks like the Avada logo. Click the 『Element Generator』 icon to bring up the Elements window.
Step 3. Select the 『Popover』 element.
Step 4. In the 『Triggering Content』 field, you will see the text you have selected to trigger the popover with. For example, View More Info Here!.
Step 5. In the 『Popover Heading』 and 『Contents Inside Popover』 options, insert the heading text and the content, respectively, that you』d like to display in the popover.
Step 6. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.
Step 7. If you are working in the back-end Avada Builder, click the 『Insert』 button, and you will be back in the original text-based Element. Click Save.
Standalone ElementYou can also just add the Popover Element directly into your content.
Step 1. Select the Column you wish to place your Popover content, and select Popover from the Element list.
Step 2. In the 『Triggering Content』 field, you need to add some content. This can be plain text, or it could be another Element, chosen from the Avada Builder Element Generator. Obviously, not all Elements will work with this method. Stick to basic things like text, images, or buttons etc. It』s with this method we can add Popovers to images and buttons.
Step 3. Click Insert, to add the generated Element into the Triggering Content field.
Step 4. Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab. If you are working in the back-end Avada Builder, click Save to finish editing the Element.
How To Add Popovers To ImagesInstead of adding a Popover to an Image, we do it the other way around – we add an image to a popover.
Step 1 – Add the Popover Element to you content where you wish the image to display.
Step 2 – In the Triggering Content options, you need to add your image. Locate the WordPress content editor field in your chosen element. On the toolbar, you』ll find the 『Avada Builder Element Generator』 icon which looks like the Avada logo. Click the 『Element Generator』 icon to bring up the Elements window.
Step 3 – Select the 『Popover』 element.
Step 4 – In the 『Triggering Content』 field, click 『Add Media』 button, and select a picture from the Media Library. If there are no images in the Media Library, go to 『Upload Files』 tab, and upload an image. Upon selecting the chosen image, click 『Insert into page』 button.
Step 5 – In the 『Popover Heading』 and 『Contents Inside Popover』 options, insert the heading text and the content, respectively, that you』d like to display in the popover.
Step 6 – Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.
Step 7 – Once finished, click the 『Insert』 button.
Step 8 – You can then add content into the main element as needed. Once you』re done, click 『Save』 to save your changes.
How To Add Popovers To ButtonsStep 1 – Create a popover by following the instructions in the 『How To Add Popovers To Text』 section above. Make sure to set the 『Triggering Method』 option to Hover in order for the popover to display when hovering over the button.
Step 2 – Insert the popover element to the page, then switch to the Default Editor to copy the popover』s code snippet. Once you』ve copied it, you can discard it. It looks something like this:
Copy to Clipboard[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover] 1[fusion_popover title="" content="This is a popover." trigger="hover" placement="top" class="" id="" title_bg_color="" content_bg_color="" bordercolor="" textcolor=""]Button Text[/fusion_popover]Step 3 – Activate the Avada Page Builder again and insert a Button element. Click the 『Settings』 icon to bring up it』s options window.
Step 4 – Paste the Popover code snippet you just copied into the 『Button』s Text』 field. You can then customize the button to your liking using the different options available. Once you』re finished customizing the Button Element, click the 『Save』 button.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Inline Elements In Avada Live
Please see the Inline Elements document for more details on how Inline Elements work in Avada Live.,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 the Options > Avada Builder Elements > Popover section. Also note 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
Triggering Content – This is the content that will trigger the popover.

Popover Heading – Insert the heading text of the popover.

Contents Inside Popover –Text to be displayed inside the popover.

Popover Trigger Method –Select mouse action to trigger popover. Choose from Hover, or Click.

Popover Position – Select the display position of the popover. Choose from Default, Top, Bottom, Left, or Right.

CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Popover Heading Background Color – Controls the background color of the popover heading.

Popover Content Background Color – Controls the background color of the popover content area. Leave empty for the default value.

Popover Border Color – Controls the border color of the of the popover box.

Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Popover
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Popover Heading Background Color – Controls the background color of the popover heading.

Popover Content Background Color – Controls the background color of the popover content area.

Popover Border Color – Controls the border color of the of the popover box.

Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.

Popover Position – Selects the position of the popover in reference to the triggering element. Choose from Top, Right, Bottom, or Left.
View The Options Screen,Useful Links & ResourcesRead more about Inline Elements HereRead about how to use the Element Generator Here!

Phone Number Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Phone Number Field Element is a numeric field used to collect mobile or landline numbers. It does not accept spaces or letters. Examples of this Element can be found in the Registration Form Dark, Standard Contact Form, Sweepstakes Form, and the Reservation Form, to name a few.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Phone Number Field ElementThe Phone Number Field Element allows you to place a into your forms.
Step 1. Create a new, or edit and existing Form in the Avada Form Builder.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Phone Number Field from the Form Elements tab.
Step 4. Go through the options to populate and configure your checkboxes. Add a label, decide if it is to be a required field, add an optional tooltip, choose whether your options are to be displayed stacked or floated etc. You can add your own options, either individually or in bulk, or you can choose from a range of pre-populated choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, and Days of the Month.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
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 access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).
You can deploy as many individual Elements in your forms 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 instance of the Element independently, greatly enhancing your flexibility and creative options.
General Tab
Field Label – Enter the label for the input field. This is how users will identify individual fields.

Field Name – Enter the field name. Should be single word without spaces. Underscores and dashes are allowed.

Required Field – Choose from Yes, or No. Make a selection to ensure that this field is completed before allowing the user to submit the form.

Placeholder Text – The placeholder text to display as hint for the input type.

Tooltip Text – The text to display as tooltip hint for the input.

Input Field Icon – Select an icon for the input field, click again to deselect.

Tab Index – Tab index for this input field.

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 ScreenConditionals TabConditional Logic – Add conditional logic for the input field. Please see the Conditional Logic In Avada Forms document for more information on how to use this feature.View The Options ScreenGlobal OptionsThere are no Global Options for Form Builder Elements.,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