Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Bar Counters Module with the Website Page Designer

Bar Counters Module with the Website Page Designer

If you want to display dynamic bar counters that inform your visitors about your stats and keep them engaged by using lazy-loading animation, the Bar Counter module is the perfect solution.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the bar counters module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

Define what will appear in your bar counters using the Content tab.

Add New Bar

Every time you add a bar, you can edit its individual settings, including:

  • Title: the header that will show above the bar counter. You can leave it blank if you don’t want a title.
  • Percent: it will correspond to the percentage of filling of the bar.
  • Link: if you want the bar to open a link when clicked, define it here.
  • Background: select a background color, image or video for the percentage of the bar that is not filled.

The design options of the individual bar are:

  • Bar background color: adjust the background color of the filled part of the bar.
  • Text: define the orientation, color, and shadow of the text.
  • Title text: adjust the font, alignment, color, spacing, and shadow of the title.
  • Percentage text: adjust the font, alignment, color, spacing, and shadow of the percentage text.
  • Sizing: select the width of the bar.
  • Spacing: adjust the margins and padding.
  • Border: define the corners and border style, width, and color.
  • Box shadow: you can select a box shadow.
  • Filters: adjust the scheme of colors of the bar.

In the advanced options of the individual bar, it’s possible to introduce custom CSS code and to define transitions.

General Content Settings

Elements

Define whether you want or not the percentages to be displayed on the bar.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Bar Counter

Select a background color for the filled bar.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Percentage Text

Customize the font settings for the percentage text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s create a bar counter for the speaking level of four languages: English, Spanish, Italian, and Russian. We will use the following corresponding percentages: 100%, 85%, 60%, 35%.

 

Bar 1:

Title: English

Percentage: 100

Background color: #e09900

Percentage Text color: #ffffff

 

Bar 2:

Title: Spanish

Percentage: 85

Background Color: #12876f

Percentage Text Color: #ffffff

 

Bar 3:

Title: Italian

Percentage: 60

Background Color: #97edc1

Percentage Text Color: #000000

 

Bar 4:

Title: Russian

Percentage: 35

Background Color: #aa0a88

Percentage Text Color: #ffffff

 

General:

Title Text Color: #000000

Title Text Size: 18px

 

This is how it looks!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?