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