Count Up Block

Different blocks, different styles. Mix and match!

0

Clients

0

Projects

0

Cups of coffee

Settings

These options will help you set up your Count Up block. Let’s take a look at them.

  1. Start Number: Input the number from which you want to start your count up from.
  2. End Number: When this number is reached the count up ends.
  3. Prefix: Any input here will appear to the left of the number in the count up.
  4. Suffix: Any input here will appear to the right of the number in the count up.
  5. Animation Duration: The time it takes for the count up to reach the end number.
  6. Separator: This is the thousands separator, can be comma, dot, or space.
  7. Text Font Size: Set the font size for the count up either via a drop down of preset values or by setting an exact pixel value in the input.
  8. Title Top Margin: Control the spacing between the numbers and the text below.
  9. Title Font Size: Set the font size for the title text either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.


Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

  1. Text Color: This option allows you to set the color of count up text.
  2. Title Color: This option allows you to set the color of the title text below the numbers.
  3. Background Color: This option controls the block’s background color.
  4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  5. Border Radius: This option allows you to round the box’s corners.
  6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  7. Padding: With this option you can control the padding on each side of the block individually or all at once.
  8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.