诗语，作者 Avada 文档 - 第 64 页共 79 页

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.

Scroll Progress Element

The Scroll Progress Element is new in Avada 7.3 and is the perfect Element to actively show your users how far they are through a page, by showing a scroll progress bar. You can see an example of it along the bottom of this page, as you scroll down.
Read on to find out more about this super useful Element, and watch the video below for a visual overview.,View Element Demo Page!OverviewHow To Use The Scroll Progress ElementUsing The Scroll Progress Element in Avada LayoutsElement OptionsGlobal Options,How To Use The Scroll Progress ElementThe Scroll Progress Bar Element can be implemented in several different ways. With the Progress Bar Position option, it can be Fixed to the Top, or the Bottom of the Viewport, or it can be set to Content Flow, which essentially means you can place it anywere in the content.
So the first thing to decide is where you want it positioned. With both Fixed To Top, and Fixed To Bottom positions, the Scroll Progress Bar extends the full width of the Viewport, and regardless of where you place the Element in your page content, on the front end, it is postitioned at the very top or the very bottom of the Viewport. If you have a Sticky Header, it remains above the Sticky Header when active.
When using the Content Flow Position, the Scroll Progress bar remains in the flow of content, wherever you have placed it, but is then also limited to the container width you set. There is a Z Index option, that allows you to ensure the bar is seen above other content, and several design options to control the colors and size of the bar, and even border options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Using The Scroll Progress Element in Avada LayoutsThe Scroll Progress Element is likely even more useful in a Layout. In this case, you simply need to add the Element to one of the Layout Sections assigned to the Layout. If you choose Fixed To Top, or Fixed To Bottom positioning, then it doesn』t even matter which Layout Section, or where in the Layout Section it is placed. It will then display at the very Top, or the Bottom of the viewport on the pages set by the condition of the Layout.
If you choose Content Flow however, the Scroll Bar will display precisely in the position you place it in the Layout Section you place it in. In this way, for example, you could place it in a Header Layout, so that it displays at the bottom of a sticky container as the page scrolls. To add the Element in this way, consider exactly where you want the Scroll Progress bar to display. Amongst the things to consider are whether you want the bar to go the full width of the viewport, whether you need it to be Sticky, the Z-Index, to potentially keep it on top of a Sticky header, and the margins etc.,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: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Scroll Progress section. Also not that the displayed option screens below show ALL the available options for the element. If you have Avada』s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
General TabProgress Bar Position – Select the position of the progress bar. Choose from Content Flow, Fixed To Top, or Fixed To Bottom. Leave empty for the default value.Z-Index – Value for the progress bar』s z-index CSS property.Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px. Leave empty for default value.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.Element Sticky Visibility – Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.
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
Background Color – Controls the background color for the Scroll Progress bar. Leave empty for default value.
Progress Color – Select a color for the progress bar. Leave empty for default value.Border Size – Set the border size. In pixels.Border Color – Controls the border color for the progress bar.Border Radius – Enter values including any valid CSS unit, ex: 10px. 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 OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Scroll Progress.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Progress Bar Position – Controls the timezone that is used for the countdown calculation.

Progress Bar Height – Insert a height for the progress bar.

Background Color – Controls the background color for the Scroll Progress bar.

Progress Color – Select a color for the progress bar.

Progress Bar Border Size – Set the border size. In pixels.

Progress Bar Border Color – Controls the border color for the progress bar.

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

Radio Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Radio Field Element is used to display a list of options for a user to select as a choice. Only one selection is possible. You can see an example of this Element in the RSVP and Survey Prebuilt Forms.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Radio Field ElementThe Radio Field Element allows you to place checkboxes 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 Radio 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 – Make a selection to ensure that this field is completed before allowing the user to submit the form.
Tooltip Text – The text to display as tooltip hint for the input.

Options – Add options for the input field. You can add your own options one at a time, or choose from Bulk / Predefined Choices, such as Countries, Days of the Week, Months of the Year, U.S. States, Years, Days of the Month.

Field Layout – Choose from Stacked, or Floated. Choose if fields should be stacked and full width, or if they should be floated.

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 How To Use 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

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.

Search Element

The Search Element offers you a way to add a search bar anywhere in your content. It』s very easy to use, and even supports live search. See below for a live example, and more details! And don』t forget to watch the video for a visual overview.,Search for:,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Search ElementThe Search Element is easy to add anywhere in your content. Follow these simple steps below.
Step 1. Ensure Avada Builder, or Avada Live is active.
Step 2. Create, or choose the Column you wish to add the Element into. Click on Add New Element.
Step 3. Choose Search from the Elements List.
Step 4. There are three tabs, containing a number of options which affect how the search element will function and display. Go through the options and make your selections. You can enable Live Search, change layout design, control what content it searches, and add a placeholder and more.
Step 5. Once you have completed selecting your options, click on Save.
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.
Please 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
Enable Live Search – Turn on to enable live search results on menu search field and other fitting search forms.

Search Results Content – Controls the type of content that displays in search results.

Limit Search to Post Titles – Turn on to limit the search to post titles only.

Placeholder – Controls the placeholder text in the search bar.

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

Element Sticky Visibility – (Only visible if parent Container is set to Sticky). Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time.

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

CSS ID – Allows you to add an ID for the column.
View The Options ScreenDesign Tab
Search Form Design – Controls the design of the search form. Choose from Classic or Clean.

Height – Controls the height of form input field. Enter value including CSS unit (px, em, rem), ex: 50px. Leave empty for default value.

Field Background Color – Controls the background color of search field. Leave empty for default value.

Field Font Size – Controls the size of the search field text. Enter value including any valid CSS unit, ex: 16px. Leave empty for default value.

Field Text Color – Controls the color of the search text in field. Leave empty for default value.

Field Border Size – Controls the border size of the search field. In pixels.

Field Border Color – Controls the border color of the search field. Leave empty for default value.

Field Border Color On Focus – Controls the border color of the search input field when it is focused. Leave empty for default value.

Field Border Radius – Controls the border radius of the search input field. Also works, if border size is set to 0. In pixels.

Margin – Controls the margin around the element. Enter values including any valid CSS unit, ex: 4%.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.

Direction of Animation – Controls the direction of animation on the 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 OptionsNote: The Default setting will use the global settings assigned for this element in the Global Options. This Element does not have any Global Options in the Avada Builder Element section, but instead uses the Search Form section of the Global Options to control global options for the Element as well.

Range Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Range Field Element defines a slider control between minimum and maximum numeric values. You can see an example of this Element in the Reservation Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Range Field ElementThe Range Field Element allows you to place checkboxes 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 Range Field from the Form Elements tab.
Step 4. ddd
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 – Make a selection to ensure that this field is completed before allowing the user to submit the form.

Orientation – Range input field orientation. Choose from Left, or Right.

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

Range Min Value – Minimum allowed value for range input type.
Range Max Value – Maximum allowed value for range input type.
Range Step Value – Incremental Value for range input type.

Default Value – Set default value for range input type.

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

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

Section Separator Element

The Section Separator Element is a great way to add stylish sections to your website. Our section separators have been designed to give you the ultimate in page compartmentalization flexibility, and to aid you in making your website legible, logical, and beautiful…all at the same time.
With Avada 7.2, we have added even more section separators, bringing the total to 20 different separator styles, each with their own options. If you』d like to learn how to add them to your site, as well as understand the different styles and options available, please continue reading below, and watch the video for a visual overview.,Separator Section Example
This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose it』s background color.,View Element Demo Page!,Overview
Section Separator Style
How To Use The ElementElement OptionsGlobal Options,Section Separator StylesAs of Avada 7.2, Avada』s Section Separator Element now has 20 styles, with an increased range of options. These styles provide a wide range of creative design capabilities for your website. Remember to view the Element Demo Page for visual examples of each style of separator section.

Triangle – This style displays a small triangle on the center of the page. You can position the triangle to display either on top or the bottom or both. You can also set an icon, icon color, border, and border color, and background color.

Slant – This style displays the Section Separator as a slant on the page. You can position the section separator to slant left or right, and to display on the top or bottom. You can also choose it』s background color.

Big Triangle – This style displays the section separator as a big triangle shape. You can position the triangle to point to the left, center or right. You can also choose to display it on the top or bottom and choose its background color.

Rounded Split – This style displays the section separator as a rounded split. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Curved – This style displays the section separator as a slanted curve. You can position the section separator to slant to the left or right, and display it on the top or bottom. You can also choose its background color.

Big Half Circle – This style displays the section separator as a half circle. You can only position this style to display either on top or on the bottom. You can also choose a background color for this style.

Clouds – This style displays the section separator as a cloud-shaped border. This style doesn』t have any position options, and will only display in the center and on top. You can, however, set its background color.

Horizon – This style displays the section separator as a converging point on the horizon, with multiple levels of opacity. You can position this style to display either on top or on the bottom. You can also choose a background color for this style.

Waves – This style displays the section separator as a wave. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Waves Opacity – This style displays the section separator as a wave with multiple levels of opacity. You can position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Waves Brush – This style displays the section separator as a wave. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Hills – This style displays the section separator as rolling hills. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Hills Opacity – This style displays the section separator as rolling hills with multiple levels of opacity. You can only display this style in the middle, but you can set it to display on the top or bottom, and you can choose its background color.

Grunge – This style displays the section separator with a messy, grungy style. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Music – This style displays the section separator with multiple lines like bars of sound. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Paper – This style displays the section separator as if it』s ripped paper. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Squares – This style displays the section separator with multiple squares of varying size. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Circles – This style displays the section separator with multiple circles of varying size. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Paint – This style displays the section separator as if painted with a brush. ou can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Grass – This style displays the section separator as grass. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.

Splash – This style displays the section separator as splashin liquid. You can control the height of the separator section, choose how many times it repeats horizontally, as well as position the section separator to the left or right, and display it on the top or bottom. You can also choose its background color.
View The Full Range of Section Separator Styles In Action!767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,How To Use The Section Separator ElementThere are multiple ways to set up a separator section, so let』s look at a common example. Here, we will look at the Avada Classic Prebuilt Website Home Page.

Step 1 – The Separator Section Element is designed to transition between two separate sections of the page. To this end, there are some conditions for the container that the separator section will be in. In our example, the Separator Section Element will be at the bottom of the container. It』s important that the Container does not have any padding at the bottom and that the Column does not have any padding or margin at the bottom. As we can see from the below screenshot, the top container has a background image, as well as a normal column layout with content. At the bottom of the content, the Separator Section Element has been placed.
Step 2 – Select the desired Section Separator Style and style settings. In this example, the Waves Opacity option has been selected, with the Horizontal Position set to Left and the Vertical Position set to Top. For the transition to the next container to work smoothly, the Background Color of the Section Separator should be the same color as the background color of the following container. Here, it has been set to white.
Step 3 – Add a new container. Ensure the background color of the Container is the same as has been set in the Section Separator Element. Add your content as usual.

That』s it. As mentioned, there are a lot of ways to use these section separators, so you will have to adjust the setting to suit your situation, but the basic principle is the same.,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 Global Options > Avada Builder Elements > Section Separator 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 TabStyle – Controls the style of the section separator. Choose between Triangle, Slant, Big Triangle, Rounded Split, Curved, Big Half Circle, Clouds, Horizon, Waves, Waves Opacity, Waves Brush, Hills, Hills Opacity, Grunge, Music, Paper, Circles, Squares, Paint, Grass, or Splash.
Custom SVG File – You can now upload your custom SVG separator. SVG file should include attribute preserveAspectRatio=」none」 for best work in combination with custom height or repeat option.
Height – Controls the height of the Section Separator. Enter value including any valid CSS unit, ex: 200px. Leave empty to use default. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.
Repeat – Choose how many times the Section Separator should repeat horizontally. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.

Horizontal Position – Controls the section separator』s horizontal position. Some styles may not have these settings available. Please see the Section Separator Styles section to learn more.

Vertical Position – Controls the section separator』s vertical position. Some styles may have variation in these settings. Please see the Section Separator Styles section to learn more.

Icon – Choose an icon for your Separator Section. Click an icon to select, click again to deselect. (Only for Triangle Style)

Icon Color – Choose a color for the icon. Leave empty for the default value. (Only for Triangle Style)

Border – Choose a border width for the separator section. In pixels. Leave empty for the default value. (Only for Triangle Style)

Border Color – Choose a border color for the separator section. In pixels. Leave empty for the default value. (Only for Triangle Style)

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

Background Color – Controls the background color of the separator style. Leave empty for default value.
View The Options ScreenGlobal OptionsLocation: Avada > Options > Avada Builder Elements > Section Separator.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Section Separator Border Size – Controls the border』s thickness. Accepts a pixel value. For example, 5px.

Section Separator Background Color – Controls the separator』s background color. Accepts a hexcode. For example, #000000.

Section Separator Border Color – Controls the border』s color. Accepts a hexcode. For example, #000000.
View The Options Screen

Rating Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The Rating Field Element is used to rate something between a set minimum and maximum number of stars (or other icon). You can see an example of this Element in use in the Survey Prebuilt Form.,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Rating Field ElementThe Rating Field Element allows you to place checkboxes 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 Rating Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. The Rating Limit can be between 1 and 10, and you can choose which icon and colors you wish to use, as well as the Icon Font Size.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You 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 – Make a selection to ensure that this field is completed before allowing the user to submit the form.

Tooltip Text – The text to display as tooltip hint for the input.
Rating Limit – Set the maximum rating that can be given.Rating Icon – Choose icon for rating.

Icon Color – Choose icon color for rating. Leave empty for default value.

Hover/Active Icon Color – Choose icon color for rating. Leave empty for default value.

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

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

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

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