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