# How to Add Counter to Your Page ?
**Through this document , you will uncover the 'Counter' feature properties in site editor page through these key elements:
[1. Adding a Counter](https://kb.salerise.com/link/24#bkmrk-adding-a-slideshow)
[2. Feature Settings Window](https://kb.salerise.com/link/24#bkmrk-feature-settings)
[3. Style Settings Window](https://kb.salerise.com/link/24#bkmrk-style-settings)**
### **Adding a Counter**
- Drag the counter icon from the available features
[](https://kb.salerise.com/uploads/images/gallery/2023-11/HsSimage.png)
- Drop the counter icon into the desired location on your website page
[](https://kb.salerise.com/uploads/images/gallery/2023-11/P2Mimage.png)
### **Feature Settings**
Upon dropping the counter, a settings window will appear, offering three main features:
- **Settings**
- **Settings :** Customize the start number, end number, step, and speed for your counter.
- **Start Number:** Input the desired start number value.
- **End Number:** Input the desired end number value.
- **Step**: Input the desired values to define the counting range and interval.
\- **Speed :** Adjust the speed setting to control how fast the counter increments.
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- **Design**
- Select your title font type from a long list of options
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
- **Animations**
- Add animation to your title from a long list of animation options.
- Enhance your animated title by incorporating timing in seconds.
### **Style Settings**
**Design Features**
- Access the "Design" feature to customize your counter appearance. Within this feature, you can determine the following properties:
- **Margin**: Set the spacing around your counter to control its placement on the page.
- **Border**: Define a border for your counter to add a distinct visual element.
- **Color**: Choose the color that best complements your website's theme or design.
- **Style**: Apply different styles to your counter, enhancing its visual appeal.
- **Gradient**: Add gradient effects to your counter for a more dynamic and modern look.
**Background Features**
- Navigate to the "Background" feature to enhance the backdrop of your counter.
- **Upload Images**: Insert images as a background for your counter, providing visual interest.
- **Sample Images**: Explore pre-loaded image samples for quick and easy background selection.
- **Background Styling**: Customize the counter background further with options like:
\- Background Repeat: Control how the background image repeats.
\- Background Fill: Adjust how the background fills the space around the counter.
\- Background Position: Define the positioning of the background image for optimal display.
**Style Customization**
- Within the "Style" section, further refine your counter presentation by adding classes from a dropdown list with a plethora of options.
- Determine how your counter is visible on devices (Mobile , Tablet , Desktop , Large desktop.