The Counter element in Cloud Sites is a dynamic tool used to visually display numerical data such as statistics, milestones, or performance metrics. Commonly seen on websites to highlight achievements or figures like units sold, funds raised, or customer counts, this element adds movement and emphasis to key data points.
Adding the Counter Element
To insert a counter:
- Open the Add Elements Drawer from the left sidebar.
- Locate the Counter element.
- Click, hold, and drag the counter into the desired location on the page.
Configuring the Counter
Once placed, select the counter to access its settings via the toolbar on the far left. The default style allows configuration of:
- Start Value: Useful for large numbers to avoid starting from zero.
- End Value: The final number the counter will display.
- Duration: Controls how long the animation runs. A duration of 1–2 seconds is recommended for optimal visibility, especially on mobile devices where users may scroll quickly.
Advanced Settings
Under the Advanced tab:
- Prefix: Add symbols or units (e.g., $, %, or “K” for thousands).
- Separator: Choose how digits are grouped (e.g., comma, period).
These settings enhance readability and allow customization based on the type of data being presented.
Exploring Counter Styles
Brizy offers multiple counter styles, including:
- Standard Numeric Counter
- Pie Chart Style
- Progress Ring
- Minimalist Circular Indicators
Each style has unique visual characteristics. For example, pie chart counters display values as percentages. To use this format:
- Set the value (e.g., 65%).
- Adjust the duration and prefix as needed.
- Toggle the percentage display on or off.
Styling and Layout Adjustments
To refine the appearance:
- Adjust the width using percentage or pixel values.
- Use drag handles to resize the counter manually.
- Customize colors, including background and progress indicators.
- Apply shadows and other visual effects for added depth.
The progress line thickness can be modified to suit the design—thinner lines for subtle indicators or thicker lines for bold visual impact.
Using the Pie Chart Style
For a simplified pie chart:
- Select the style without text.
- Customize the background and progress colors.
- Use the default settings or adjust the size and layout as needed.
This style is ideal for clean, modern designs that require visual representation without numerical clutter.
Responsive Design Considerations
Ensure the counter displays correctly across devices:
- Preview the design on tablet and mobile views.
- Adjust sizing and layout to maintain clarity and visual balance.
Responsive settings help maintain a consistent user experience regardless of screen size.
In our Cloud Websites documentation, you may come across the name "Brizy" or links to articles found on the Brizy website. Brizy is a technology partner that helps us provide an enhanced, user-friendly website editing experience. The Brizy partnership is explicitly designed for ministries, ensuring we offer the best solution to meet your church's website needs.
Updated
