Section: Counters

Everything you will need to know on how to setup your Counters sections

Jalal avatar
Written by Jalal
Updated over a week ago

The Counters section makes it possible to highlight your achievements anywhere within your theme. For example, this is a great way to highlight how many happy customers you have!

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Counters', then click on 'Counters'

3) Done, your Counters section is added.

General settings

The general settings contains the settings for the styling and layout of the 'Counters' section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

Background image (optional):

Want to use an image instead of a background color? Upload it here.

For the best result, we recommend an image with a 3:2 aspect ratio.

Image overlay opacity:

Want to show a colored overlay over the image? Set the opacity here.

This comes in handy when the image is to dark or to bright, that way you can make the text easier to read.

100% = full color

0% = no overlay

Color scheme:
Select the color scheme for the overlay + text colors. You can select the color pallets here.

Image position:

Set the position of the image, what we mean by that is how the image will behave.

For example: The image is too big for the field, do you want the image to align in the center, set it to center center.


Content position:
Set the position of the content within the image (text + button)

Heading size:
Select the size of the heading from a range of small to extra large. When you choose for "Extra large", the size of the description will also be a bit larger than normal. The heading size you choose here is only applied to desktop view, you can customize the mobile heading size globally in the general theme settings under "Typography".

Heading:
Fill in the title of the section. Don't want to show a title? Simply leave the field empty!

Text:
Fill in the subtitle for the section. Don't want to show a subtitle? Simply leave the field empty!

Show a background color for the counters:
Want to show a background color on the counters? Check this setting.
The background will be set from your color pallet.

Show the counter digits in accent color:
Do you want the digits of the counter in the 'Accent' color? The Accent color can be configured in your color palette.

Mobile Layout

Image position:
Set the position of the image for mobile, what we mean by that is how the image will behave.
For example: The image is too big for the field, do you want the image to align in the center, set it to center center.

Spacing

Bottom spacing desktop/mobile:

Set the spacing on the bottom for desktop and mobile.

That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.

How to configure the counters?

By default, there are 2 counters added, you can edit them, remove them or add more.

1. Editing the counters
To edit the counters you simply click on the block you want to edit in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the following sidebar will open.

Heading:
Fill in the amount of your counter! For example: 3850

Description:
Fill in the subtitle for the counter. For example: Satisfied clients!

2. How to remove a counter?
Don't want to use 2 counters? But you want to use 1? You can always remove the counters one by one to fit in your needs.
To remove the counter you simply click on the block you want to remove in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your logo will be deleted.

3. How to add more counters?
Do you want to use more counters? That's possible, no worries!
To add blocks you simply click on the 'Add counter' button in your sidebar on the left of your screen. You can add up to 5 counters per section!

After you clicked on 'Add Counter', a new block will be added. You can edit the block like explained in step 1.

Did this answer your question?