# Service Box

<div id="bkmrk-custom-style"><div class="eckb-article-toc eckb-article-toc--position-middle eckb-article-toc--bmode-between eckb-article-toc-reset " data-exclude_class="" data-max="6" data-min="2" data-offset="0" data-speed="300"><div class="eckb-article-toc__inner"><nav aria-label="Article outline" class="eckb-article-toc-outline" role="navigation"></nav></div></div></div>This Guide will help you to add **Service Box.**

#### DRAG AND DROP SERVICE BOX

<div id="bkmrk-drag-and-drop%C2%A0servic">- **Drag and Drop** Service Box from left side **widget panel** as shown in image below.
- Now in **Dialog Box** of Service Box you can **Customize** Service Box.
- Select **Content Style** of your Service Box as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-drag.png)

#### SERVICE BOX MEDIA TYPE

<div id="bkmrk-select%C2%A0media-type%C2%A0yo">- Select **Media type** you want to display in your Service Box. We have selected **Font Icon**.
- As we selected **Font Icon** we need to Provide **Icon** as shown in image below. You need to provide image if you select **Image Icon** or **Wide Image**.
- Also provide some different **properties** for your media type like **Color, Size** etc as shown in image.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings1.png)  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings2.png)

#### SERVICE BOX CONTENT

<div id="bkmrk-enter-service-box%C2%A0ti">- Enter Service Box **Title** and give **Size** for Title as shown in image below.
- Enter content of your Service Box in **Content** section.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings3.png)

### BUTTON

<div id="bkmrk-check-the%C2%A0show-butto">- Check the **Show Button** box to show **Button** in your Service Box as shown in image below.
- Next enter text to Display on Button and **Link** if you want go to other page on **Button Click.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings4.png)**
- Select **Button color** from Predefined options or you can give **Custom color** by selecting **Custom** as shown in image below.
- Select **position** for Button inside Service Box from **Alignment** section.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-settings5.png)

</div>#### CUSTOM STYLE

<div id="bkmrk-click-on%C2%A0edit-elemen">- Click on **Edit Element Style** to add **Custom styles** as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Service-box-styles.png)

<div id="bkmrk-"></div>