Avada 文档

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.

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

Recent Posts Element

As well as the Blog Element, Avada also comes with a Recent Posts Element. This element is unique in that it offers more compact design options than the Blog element, which may work better on pages with a lot of varied content. This element enables you to display your posts on any page, select various layouts, assign custom categories to display and so much more. You can use the Recent Posts Element as many times as you』d like, and on any page or post. Before you can display blog posts, you must first create them.
Schantel2021-12-14T19:03:32+00:00Avada Beer: Deconstructing a Prebuilt WebsiteSchantel2021-12-14T19:03:32+00:00December 14th, 2021|0 Comments Say hello to Avada Craft Beer. This Avada prebuilt website is ideal for [...]Schantel2021-12-07T18:57:40+00:00Avada Electrician: Deconstructing a Prebuilt WebsiteSchantel2021-12-07T18:57:40+00:00December 7th, 2021|1 Comment Say hello to Avada Electrician. This Avada prebuilt website is ideal for beginners, [...]Schantel2021-11-30T18:02:57+00:00Avada Barber Shop: Deconstructing a Prebuilt WebsiteSchantel2021-11-30T18:02:57+00:00November 30th, 2021|1 Comment Say hello to Avada Barber Shop. This Avada prebuilt website is ideal for [...]Michael2021-12-05T20:33:40+00:00The 2021 Avada Black Friday SaleMichael2021-12-05T20:33:40+00:00November 23rd, 2021|0 CommentsPLease Note: The Black Friday & Cyber Week sale has ended. SALE, SALE SALE! It [...]Schantel2021-11-16T18:13:02+00:00Avada eSports: Deconstructing a Prebuilt WebsiteSchantel2021-11-16T18:13:02+00:00November 16th, 2021|1 CommentSay hello to Avada eSports. This Avada prebuilt website is ideal for beginners, marketers, professionals [...]Schantel2021-11-09T19:13:49+00:00Avada Extreme Sports: Deconstructing a Prebuilt WebsiteSchantel2021-11-09T19:13:49+00:00November 9th, 2021|1 Comment Say hello to Avada Extreme Sports. This Avada prebuilt website is ideal for beginners, [...],View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Recent Posts ElementThe Recent Posts Element is a very quick and easy way to add the most recent blog posts anywhere on your site.
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『Recent Posts』 element and click it to bring up its options window.
Step 4 – Configure the Recent Posts Element to your liking. The Recent Posts Element comes with 3 different layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Recent Posts Element Demo page. Once you have chosen your preferred layout, go slowly down the options list, customizing its appearance to suit your wishes.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the Recent Posts element output, and remember you can comes back into the element to fine tune it.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.
Note: 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 posts layout. Choose between Standard, Thumbnails on Side, or Date on Side.

Picture Size – Choose whether the Recent Post image should be fixed (width and height will be fixed) or auto (width and height will adjust to the image).

Hover Type – Controls the hover effect type for the featured images. Choose between None, Zoom In, Zoom Out, or Lift Up.

Columns – Controls the number of columns to display. Choose from 1-6.

Posts Per Page – Controls the number of posts to display per page. Set this option to -1 to display all posts. Choose from -1-25.

Post Status – Select the status(es) of the posts that should be included or leave blank for published only posts. You can select from Published, Drafted, Scheduled, Private, or Pending.

Post Offset – Controls the number of posts to skip. Choose from 1-25.

Pull Posts By – Allows you to choose to show posts by category or tag. Choose between Category or Tag.

Categories – Allows you to select which post categories to display. Leave blank to show all categories.

Exclude Categories – Allows you to select which categories to exclude. You can exclude multiple categories, or leave blank to exclude none.

Show Thumbnail – Allows you to show or hide the featured images. Choose between Yes or No.

Show Title – Allows you to show or hide the post title below featured images. Choose between Yes or No.

Show Meta – Allows you to show or hide all meta data. Choose between Yes or No.

Show Author Name – Allows you to show or hide the author』s name. Choose between Yes or No.

Show Categories – Allows you to show or hide the categories. Choose between Yes or No.

Show Date – Allows you to show or hide the date. Choose between Yes or No.

Show Comment Count – Allows you to show or hide the comment count. Choose between Yes or No.

Show Tags – Allows you to show or hide the tags. Choose between Yes or No.

Content Alignment – Controls the alignment of content. Choose between Text Flow, Left, Center, or Right.

Text display – Allows you to display or hide the post excerpt. Choose between Excerpt, Full Content, or None.

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

Strip HTML – Allows you to strip HTML from the post excerpt. Choose betweenYes or No.

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

Element Visibility – Allows you to select the screen sizes to show or hide the element in. You can choose one or more settings. Choose from Small Screen, Medium Screen, or Large Screen.

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

CSS ID – Allows you to add an ID to the wrapping HTML element.
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 – 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 Recent Posts Element.,Useful Links & ResourcesSetting Up The BlogBlog ElementHow To Make Recent Posts Thumbnails All The Same Size

reCAPTCHA Field Element

IMPORTANT NOTE: This is a Form Element – available only when using the Form Builder in Avada Forms.The reCAPTCHA Field Element helps protect your website forms from spam and abuse. You must first configure the Global Options found at Options > Forms > Google reCAPTCHA for this to work.,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The reCAPTCHA Field ElementThe reCAPTCHA Field Element allows you to add the reCAPTCHA spam control 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 reCAPTCHA Field from the Form Elements tab.
Step 4. Go through the options to populate and configure the Element. As mentioned above, you need to first configure reCAPTCHA at a Global Level, and in that choose V2 or V3 reCAPTCHA. This affects the options seen when using the Element.
Step 5. Once you have configured the Element, save your page.
Read below for a description of all element options.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element. You 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.
V2 OptionsreCAPTCHA Color Scheme – Choose the reCAPTCHA color scheme.
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 ScreenV3 Options
reCAPTCHA Badge Position – Choose where the reCAPTCHA badge should be displayed.

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 ScreenGlobal OptionsThe Global options that control reCAPTCHA are found at Options > Forms > Google reCAPTCHA. For full details, please see our How To Set Up Google reCAPTCHA document.,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

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.

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

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.

Avada Form Local Options

Avada Form Global Options

Avada Form Element

How To Use Conditional Logic In Avada Forms

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

Project Details Element

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

CSS ID – Allows you to add an ID for the Element.
View The Options ScreenDesign Tab
Enable Heading – Turn on if you want to display default heading.

HTML Heading Size – Choose the size of the HTML heading that should be used, h1-h6.

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

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.

Progress Bar Element

Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.,Progress Bar ElementLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML Skills 85% WordPress Development 90% User Interface Design 85%,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Progress Bar 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 progress bars.
Step 3 – Click on the + Element button at the bottom of the column. Select Progress Bar. Before configuring the options, it』s a good idea to view the Progress Bar Element Demo page to see what』s possible with this fun visual element.
Step 2 – That will open the element』s settings. This element has only one Options panel, and the options are quite straight forward. Initially, you choose the height of your progress bar, and then selecting where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color and whether you want the filled area to be striped. You can even animate the stripes!
Step 3 – Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That』s it.
Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 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 Theme Options > Fusion Builder Elements > Progress Bar Element 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
Filled Area Percentage – From 1% to 100%.

Progress Bar Text – Insert the text that will show on the progress bar.

Display Percentage Value – Select if you want the filled area percentage value to be shown. Choose from Yes, or No.

Progress Bar Unit – Insert a unit for the progress bar. ex %.

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 ScreenDesign Tab
Text Position – Select the position of the progress bar text. Choose 「Default」 for theme option selection. Choose from Default, On Bar, Above Bar, or Below bar.

Text Align – Choose the alignment of the text. If the text position is 「On Bar」, the alignment will work only if the bar is filled over 35% percent.

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

Typography

Font Family – Controls the font family of the text.

Striped Filling – Controls if the filled area is striped. Choose from No, or Yes.

Animated Stripes – Controls if the stripes are animated. Choose from No, or Yes.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 10px.

Filled Color – Controls the color of the filled in area.

Unfilled Color – Controls the color of the unfilled in area.

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

Filled Border Size – In pixels, from 0 – 20.

Filled Border Color – Controls the border color of the filled in area.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Progress Bar.
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Progress Bar Text Position – Select the position of the progress bar text. Choose from On Bar, Above Bar, or Below Bar.

Progress Bar Text Color – Controls the color of the progress bar text.

Progress Bar Height – Insert a height for the progress bar. Enter value including any valid CSS unit, ex: 37px.

Progress Bar Filled Color – Controls the color of the progress bar filled area.

Progress Bar Unfilled Color – Controls the color of the progress bar unfilled area.

Progress Bar Filled Border Size – Controls the border size of the progress bar filled area. In pixels, from 0 – 20.

Progress Bar Filled Border Color – Controls the border color of the progress bar filled area.
View The Options Screen,Useful Links & ResourcesHow To Change The Speed of Progress Bar Shortcode