Views Counter Element
The Views Counter Element shows how often the current post or page has been viewed. It can display the total number of views, the views of today, or both, with a label before or after each number. The numbers are stored with each post and grow as visitors open it.
It is useful on blog posts, news articles or downloads pages, where a visible view count gives visitors an idea of how popular a piece of content is. The counting itself is set once for the whole site in Global Options.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Views Counter Element
Add the Views Counter Element where the count should appear, usually on a post or in a Layout Builder section for single posts. Under View Types drag Total Views and Daily Views into the order you want, or drag one out to hide it.
Choose a Layout: Floated shows the counts side by side, Stacked shows one per line. Enter a Separator to print between the two counts, and use Labels to put the text before or after the number, or turn it off. Total Views Label and Daily Views Label replace the default texts “Total Views:” and “Daily Views:”.
On the Design tab set the Font Size, Text Color and Background Color, the Alignment (the choices depend on the layout), padding, margin, border radius and a box shadow. The element shows nothing when the post views counter is disabled under Tirenoa > Options > Extras > Post Views / Visits Counting.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| View Types | Displays the enabled view types. Drag to rearrange. |
| Layout | Select layout for view types. |
| Separator | Enter a separator to display between view types. |
| 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 | 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. |
Design
| Heading | Description |
|---|---|
| Font Size | Enter value including any valid CSS unit, for example 20px. |
| Text Color | Set the text color. |
| Background Color | Set the background color. |
| Alignment | Select the views alignment. |
| Padding | In pixels or percentage, for example 10px or 10%. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Border Radius | Enter values including any valid CSS unit, for example 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. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| 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. |
| Box Shadow Color | Controls the color of the box shadow. |
| Box Shadow Style | Set the style of the box shadow to either be an outer or inner shadow. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Views are counted only on single posts and pages, never in previews or the live editor.
- Under Post Views / Visits Counting in Global Options you choose which visitors are counted: all, only logged-out visitors, or everyone except administrators. Excluding yourself keeps the numbers honest.
- With a page cache, the Page Load counting method only counts visitors who get a freshly built page. Choose Ajax counting so cached visits are counted too.
- The labels are printed directly next to the number. Add a trailing or leading space in your custom label if you need one.
- The count comes from the post the element is placed on, so put it inside the post content or a single-post layout, not in a site-wide header.