Views Counter Element

26/10/2021

The Views Counter Element allows you to add a counter to a page (or in a layout section) that displays how many times the page has been viewed. Read below for an overview of the specific features of the Element, and watch the video below for a visual overview.

Number Of Views For This Document

Total Views: 1,632Daily Views: 1

How To Use The Views Counter Element

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 Views Counter from the Elements List.

Step 4. Simply configure the Element as you wish. There are options to display Daily Views and Total Views, as well as some layout options and label positioning options. There are also some design options for styling the Element.

Step 5. Click Save when you are finished customizing the Element.

Read below for a detailed description of all element options.

868,497 Businesses Trust Avada

Get Avada

868,497 Businesses Trust Avada

Get Avada

868,497 Businesses Trust Avada

Get Avada

Element Options

Location: 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 Tab

Views Types – Choose what views types are enabled. You can reorder them, or drag them to the Disabled section so they do not display. Choose from Total Views, and Daily Views.
Layout – Choose if views items should be stacked and full width, or if they should be floated.
Separator – Controls the type of separator between views items. Only with Floated option.
Labels – Choose where to display the labels, or turn them off.
Total Views Label – Set the total views label to display before/after the views.
Daily Views Label – Set the daily views label to display before/after the views.
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 Screen

Design Tab

Font Size – Enter value including any valid CSS unit.
Text Color – Set the text color.
Background Color – Set the background color.
Alignment – Select the views alignment.
Padding – In pixels or percentage, ex: 10px or 10%.
Margin – Enter values including any valid CSS unit, ex: 4%.
Border Radius – Enter values including any valid CSS unit, ex: 10px.
Box Shadow – Set to “Yes” to enable box shadows.
Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. Only shows if Box Shadow is set to Yes.
Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels. Only shows if Box Shadow is set to Yes.
Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. Only shows if Box Shadow is set to Yes.
Box Shadow Color – Controls the color of the box shadow. Only shows if Box Shadow is set to Yes.
Box Shadow Style – Set the style of the box shadow to either be an outer or inner shadow. Only shows if Box Shadow is set to Yes.

View The Options Screen

Extras 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.