# Widgets



# Comments

This Guide will Help you to Add Comment Widget to your pages/blog post.

<p class="callout info">**Note**: Currently, Disqus is supported by SitePad. We will add more to Comments option soon.  
**Note**: You can add Disqus comments on your blog post as well as a page. You just need to drag the Comments widget on all the pages where you want to add the comments option.</p>

#### DRAG COMMENTS WIDGET

When inside the SitePad Editor **Drag and Drop** the Comments widget. As shown in the Image Below.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Comments_dragndrop.png)  
   
Once you have dragged and drop the **Comments Widget** you will need to Add **Disqus** short-name. ex: **shortname.disqus.com** or just the **short-name**. In-case if you do not have a **Disqus** account you can [create one here](https://disqus.com/admin/create/).

<p class="callout info"><span class=".">**Note**: You will need to configure Disqus following the steps on their create site page, before using the short-name in SitePad.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Add_disqus.png)  
   
Once you have added your Disqus short-name on your page in SitePad editor click on **Update** button to save the changes.

#### PREVIEW AFTER PUBLISH

You can check the comments on your site after Publishing your site.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Siteview-844x1024-1.png)

# Countdown

This Guide will Help you to customize **Countdown Timer** Widget Settings and Style.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

#### DRAG &amp; DROP COUNTDOWN TIMER WIDGET

When you **Drag and Drop** Countdown Timer Widget in a Page, You will see the image shown like below.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-dragdrop.png)

#### COUNTDOWN TIMER SETTINGS

1. Set Expiration Date by clicking on **Icon Calendar** as per your needs, set the time at which the countdown expires and Set Start Date by clicking on Icon Calendar also.
2. Select the **time zone** from select option either user’s Local machine or Server time.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-timer.png)

1. Write the **Date format** for displaying the Timer.
2. Style gives **Timer Style** such as Default and Circular, by default **Circular** is enabled.
3. Set the background color for **timer blocks**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-formatstyle.png)

1. Give the **color** of the Text, Track and Track Background.
2. Set the **Track block size**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-track-color.png)

1. Change the Track width, Digit size and Text size by dragging Icon horizontally.
2. Spacing gives **space** between the **Block.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-track.png)**
3. You can give Text before starting the date.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-starttext.png)

1. Expiration Text is displayed when the **countdown** reaches to **zero**.
2. Expiration Link is **activate** when the **countdown** reaches to **zero**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Countdown-expiration.png)

# Grid gallery

This Guide will help you to add **Grid Gallery**.

#### DRAG AND DROP

<div id="bkmrk-drag-and-drop%C2%A0grid-g">- **Drag and Drop** Grid Gallery from left side **Widget Panel** as shown in image below.

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

#### SELECT IMAGES

<div id="bkmrk-select-images-from%C2%A0m">- Select images from **Media Library** as shown in below image.
- You can upload images by Clicking on **Upload Files**.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-image-select.png)

### GRID GALLERY SETTINGS

<div id="bkmrk-if-you-want-to%C2%A0chang">- If you want to **Change, Delete or Add** images you can do that from **Organize Images**.
- Now select **Column count** for Images.
- Select **Image size** from options or Select **Custom** option to add custom size for Images.

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

<div id="bkmrk-now-select%C2%A0link%C2%A0for-">- Now select **Link** for your Images.
- If you want open that **Link** in **New Tab** then check **Open link in new window(tab)**.
- To show image caption below image just check **Show image caption**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Grid-gallery-settings2.png)

</div>#### GALLERY OPTION IN GRID GALLERY

This option is available in **link to** section. By selecting this option your images will pop up when you click on it. You can add following properties for Gallery image.

<div id="bkmrk-you-can-add-image-th">- You can add image thumbnail **Border Size** and **Color** as shown in image below.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail.png)

<div id="bkmrk-also-you-can-add%C2%A0spa">- Also you can add **spacing around image thumbnail**, set pop up gallery image **Border size and color** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail1.png)

</div><div id="bkmrk-you-can-set%C2%A0max-heig">- You can set **max height** and **max width** for your pop up image frame
- Check **Show Pagination** box if you want to show pagination
- Provide the **visibility** for image title as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail2.png)


</div><div id="bkmrk-when-you-click-on-ga">- When you click on gallery image on your webpage the pop up will appear as shown in image below.  
    ![](https://dotroll.com/wp-content/uploads/2020/08/Gallery-img-thumbnail3.png)



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

# Image

This Guide will help you to add **Image**.

#### DRAG AND DROP IMAGE

- **Drag and Drop** Image from left side **Widget panel** as shown in image below.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-drag.png)

#### INSERT MEDIA

- When you **Drag and Drop** Image it will open **Insert Media** window as shown in image below.
- Here you can select image from **Media Library** or you can **upload** Image by clicking on **Upload Files**.
- You can also give **URL** of Image by clicking on **Insert From URL** as shown in image below.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-insert-media.png)

#### IMAGE SIZE

- Once you have selected image you can see **Dialog Box** for Image.
- Here you can **Select** or **Replace** Image if you want as shown in image below.
- Select Image **size** from different options, you can also give **Custom size**, for that you need to select **Custom** option and then enter **Width** and **Height**(eg. 100×100).

![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings1.png)

#### IMAGE LINK

- Now select how you want to **link** your image by using **Custom URL , Media File or Lightbox**.
- Give **link** if you select Custom URL or Media File in **Link to** section. If Don’t want to attach image with link then leave it as blank.
- If you want to open link in **New Tab** then Check the box shown in image below.
- If you want to Show **Image Caption** then check **Show Image Caption** box.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings2.png)

#### IMAGE ALIGNMENT

- Select **Alignment** for image as shown in image below.
- If you want **overlay** over image then check the **Overlay Hover Effect** box. This effect will show up when **Hover** on image in website.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-settings3.png)

#### IMAGE OVERLAY

- If you want to add **overlay** over image then first check **Overlay Hover Effect** Box as shown in image below.
- Now select **Icon** to display over image.
- Select **Color** and **Size** for that Icon.
- And in the end select **Background color** for **Overlay** as shown in image below.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-overlay.png)

#### CUSTOM STYLE

- You can add your **Custom style** by clicking on **Edit Element Style** as shown in image below.

![](https://dotroll.com/wp-content/uploads/2020/08/Image-custom-style.png)

# Call To Action

This Guide will Help you to edit Call to Action Widget Settings and Style.

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-note%3A%C2%A0widget-gives-y"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper"><div class="ricsi info alert alert-info">  
</div></div></div><div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-info vc_custom_1600254685620"><div class="vc_message_box-icon">  
</div><div class="ricsi info alert alert-info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></div></div></div></div></div></div>#### DRAG &amp; DROP CALL TO ACTION WIDGET

When you **Drag and Drop** Call to Action Widget in a Page, You will see the image shown like below.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-dragdrop.png)

#### CALL TO ACTION TEXT

- You can change or customize your **Title, Subtitle and Text**.
- Text alignment gives you **alignment** of text.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-customtext.png)

#### CALL TO ACTION BACKGROUND

- You can change Background **shape**, Background predefined **style** or custom style.
- You can change **total width** of background also.
- You also changed **button position** in background shape and **text** of the button.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-background.png)

#### CALL TO ACTION BUTTON

- You can also give **button link**, and if you want that link open in new window, then **click** on checkbox.
- Button shape gives **shape of button** and choose **predefined** button color from dropdown list.
- Button size gives **predefined** Button size.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-button.png)

#### CALL TO ACTION BUTTON ICON

- Change Button Icon from Icon list.
- Button Icon alignment gives **alignment of Icon** such as Left and Right.
- Button animation gives **animation** from predefined dropdown list.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-btnIcon.png)

#### CALL TO ACTION ICON

- You can also change Icon **position** from dropdown list.
- **Change Icon** as per your choise from dropdown list.
- Change **predefined** Icon color and **custom** color, If you choose custom color then you can change custom color.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/CTA-Icon.png)

- Icon size gives you to change **predefined** size or **custom** size.
- If you want’s to place **half Icon** on border then click on checkbox.
- Icon animation provides to change **animation style** when page loads.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/CTA-Icon-custom.png)

#### CALL TO ACTION STYLE

Style gives 2 types of style **1)** Edit Element style and **2)** Predefined style

- **Edit Element style** gives custom style in that you can change custom background color, text color, margin, border-radius etc.
- There is no predefined style but you can give **your classes** to define your custom style.

   
![](https://dotroll.com/wp-content/uploads/2020/08/CTA-style.png)

# 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>

# Modal

This Guide will help you to add **Modal.**

#### DRAG AND DROP MODAL

- **Drag and Drop** Modal from left side **Widget Panel** as shown in image below.
- Now in **Dialog box** of Modal you can change Modal content and Customize Modal.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-drag.png)

### CUSTOMIZE MODAL

- To give ‘**Custom styling** to Modal just select **Custom** from **Style** as shown in image below.
- Once you select the **Custom** you will able to edit **Background color** and **Box color** as shown in image below.
- Now enter **Text on Button** to see it on your **Modal Button**.
- If you want **Button** to have **Full Width** then just check the **Stretch** box shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Modal-settings1.png)

- Now select **Position** for Modal Button. There are 3 options **Left, Center, Right** just select one of them.
- Select **Icon** to display in Modal Button or if you don’t want icon then you can give it as Blank.
- If you select **Icon** then you need to give **Position** for Icon. By default it is **Left** but you can change it to **Right** also.
- Now select type of **Animation** to **Arrive** the modal screen on website and same for **Hide** also as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Modal-settings2.png)

#### CUSTOM STYLES

- You can select **Predefined style** by clicking on **Predefined Styles** as shown in image below.
- You can also give custom styles by clicking on Edit Element Style as shown in image below.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-styles.png)

#### MODEL SCREEN VIEW

- When you **Click** on Model Button it will **Display screen** like in image below.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Modal-view.png)

# Embed

This Guide will Help you to edit Embed Widget Settings and Style.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

#### DRAG &amp; DROP EMBED WIDGET

When you **Drag and Drop** Embed Widget in a Page, You will see the image like below.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Embed-dragdrop.png)

#### EMBED SETTINGS

1. **Write or paste** HTML code in textarea box and you can give style also.
2. Check the checkbox if you want’s full-width and height available in current div of a page.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Embed-settings.png)

#### EMBED STYLE

1. **Edit Element style** gives custom style in that you can change custom background color, text color, margin, border-radius etc.
2. There is **No** Predefined style.
3. You can also give **your classes** to define your custom style.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Embed-style.png)

# Pricing table

When the first **Theme** is selected it automatically gives the Predefined Style for **Pricing Table** but if you want to **Customize Menu** you can follow this guide.

<div id="bkmrk-drag-and-drop%C2%A0pricin">1. Drag and Drop **Pricing Table** from left side widget section. So this action will pop up **Dialog Box** for **Pricing Table** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-01.png)

</div><div id="bkmrk-select-colors-for%C2%A0pr">1. Select Colors for **Pricing Table** pricing rows and border and select animation effect as per your needs as shown in images below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-02.png)  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-03.png)

</div><div id="bkmrk-now-in%C2%A0settings%C2%A0sect">1. Now in **Settings** section of **Dialog Box** you have different option to Customize **Pricing Table** and edit text accordingly of particular row as shown in images below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-04.png)  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-05.png)

</div><div id="bkmrk-now-in%C2%A0styles%C2%A0sectio">1. Now in **Styles** section of Dialog Box you can edit element style as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Pricing-table-img-06.png)

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

# Tabs

When the first **Theme** is selected it automatically gives the Predefined Style for **Tabs** but if you want to **Customize Tabs** you can follow this guide.

<div id="bkmrk-drag-and-drop%C2%A0tabs%C2%A0f">1. Drag and Drop **Tabs** from left side widget section then a **Dialogue Box** will pop up by this action for **Tabs** as shown in image below .  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-01.png)

</div><div id="bkmrk-now-in%C2%A0settings%C2%A0sect">1. Now in **Settings** section of **Dialog Box** you can open **Tab** and add text of your own as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-02.png)

</div><div id="bkmrk-in%C2%A0settings%C2%A0section-">1. In **Settings** section of **Dialogue Box** you can also **select icons** and **customize** as shown in figure below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-03.png)

</div><div id="bkmrk-now-in%C2%A0style%C2%A0section">1. Now in **Style** section of **Dialog Box** you can give **Custom Style** and also use **Predefined Styles** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Tabs-image-04.png)

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

# Accordion

This Guide will Help you to edit Accordion Widget Settings and Style.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

#### DRAG &amp; DROP ACCORDION WIDGET

When you **Drag and Drop** Accordion Widget in a Page, You will see the image like below.

1. Click on Add new Accordion item button to add new Accordion Item.
2. If you want to **Remove Accordion item** then click on **delete icon** present on Accordion Item section.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-dragdrop.png)

### ACCORDION ITEM SETTINGS

1. **Section Title** in that you can insert your Accordion Item title.
2. **Section Content** gives you to insert your Item content.
3. Or you can click on **Open in SitePad Editor** button to insert item content.
4. Click on **Active** checkbox to active that particular item. <div class="ricsi info alert alert-info"><span class=".">**Note:** Only one item can be active.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-itemsettings.png)</span></div>

#### ACCORDION STYLE

Style gives 2 types of style **1)** Edit Element style and **2)** Predefined style

1. **Edit Element style** gives custom style in that you can change custom background color, text color, margin, border-radius etc.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-style.png)

1. **Predefined style** gives you **classes** of Accordion such as **Light and Dark**.
2. You can also give **your classes** to define your style.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Accordion-prestyle.png)

# Splash Screen

This Guide will help you to add **Splash Screen.**

#### DRAG AND DROP SPLASH SCREEN

<div id="bkmrk-drag-and-drop%C2%A0splash">- Drag and Drop **Splash Screen** from left side **Widget Panel** at your desired portion of page.
- When your website window reach that portion, At that time **Splash Screen** will get Displayed.
- Here we have **Dragged** it at the Start of Page, so it will get **Displayed** when we load Page in Website.

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

#### EDIT CONTENT

<div id="bkmrk-when-you-drag-and-dr">- When you Drag and Drop **Splash Screen** it will open **Dialog Box** for it.
- Now in Dialog Box you can edit content by clicking on **Edit Splash Screen** as shown in image below.

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

#### DELAY TIME AND DISPLAY

<div id="bkmrk-delay-time-will-dela">- Delay time will delay the *Arrival* of **Splash Screen** with that much time.
- Select when you want to display **Splash Screen** from **Display** options.
- Select style of Splash Screen. If you want to give your **custom style** then select **Custom**.

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

#### STYLE AND ANIMATION

<div id="bkmrk-you-can-add-your%C2%A0cus">- You can add your **custom style** by selecting **Custom** as shown image below.
- There is another way to give **custom styles** which is given in later steps.
- Now select type of **Animation** to **Arrive** the Splash Screen on your page. Same to **Hide** the Splash Screen.

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

#### CUSTOM STYLES

<div id="bkmrk-this-is-the-second-w">- This is the second way to give custom style to Splash Screen.
- Just click on Edit Element Style to add custom styles.

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

#### SPLASH SCREEN VIEW

<div id="bkmrk-splash-screen-will-l">- Splash Screen will look like as shown in image below in your website.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Splash-screen-view.png)

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

# Download Button

This Guide will Help you to edit Button Widget Settings and Style.

#### DRAGDROP DOWNLOAD BUTTON WIDGET

When you **Drag and Drop** Download Button Widget in a Page, You will see the image like below.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Download-dragdrop.png)

#### DOWNLOAD BUTTON SETTINGS

1. **Media File** If you want to upload Files for **downloading** then you have to upload files by clicking on 3 horizontal dots and Insert Button text in button textbox.
2. If you want to **remove** or **change** font Icon then click on Icon List and choose Icon from them.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Download-uploadmedia.png)

1. Icon alignment gives you alignment of Icon such as Left or Right.
2. If you want the Button in **full width style** then check the checkbox of **Stretch**, and **Alignment** Settings gives you Button Alignment.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-settings.png)

### DOWNLOAD BUTTON STYLE

Style gives 2 types of style **1)** Edit Element style and **2)** Predefined style

1. **Edit Element style** gives custom style in that you can change custom background color, text color, margin, border-radius etc.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbutton-style.png)

1. **Predefined style** gives you **classes** of various predefined button for Background and Text color. And Size gives you various types of **Button Size**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Downloadbtn-predefined-style.png)

# Space

This Guide will help you to add **Space Widget.**

#### DRAG AND DROP SPACE WIDGET

- Drag and Drop **Space Widget** from left side **Widget Panel** as shown in image below.
- Now in **Dialog box** of Space widget you can select **Predefined Styles** and you can also add **custom styles** by clicking on **Edit Element Style** as shown in image below.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Space-drag.png)

### PREDEFINED STYLES

- You can add **Border** in middle of Space area as shown in image below, We have selected **Heavy**.
- Select type of border you want from different options.
- You can resize the **Height** and **Width** of Space by **Dragging** as shown in image.

   
![](https://dotroll.com/wp-content/uploads/2020/08/Space-predefined-styles.png)

# Video Lightbox

This Guide will help you to add **Video Lightbox.**

#### YOUTUBE SOURCE

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-drag-and-drop%C2%A0video-"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- Drag and Drop **Video Lightbox** from left side **Widget Panel**.
- Now in Dialog box of **Video Lightbox** select **Youtube** from source section as shown in image below.
- After that enter **Youtube Video URL**.
- Select **Cover Image** if you need any.

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

#### VIMEO SOURCE

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-select%C2%A0vimeo%C2%A0from-so"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- Select **Vimeo** from source section as shown in image below.
- After that enter **Vimeo Video URL**.
- Select **Cover Image** if you need any.

</div></div></div></div></div></div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-vimeo.png)

#### HTML5 SOURCE

<div class="vc_row wpb_row vc_row-fluid" id="bkmrk-select%C2%A0html5%C2%A0from-so"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner"><div class="wpb_wrapper"><div class="wpb_text_column wpb_content_element "><div class="wpb_wrapper">- Select **HTML5** from source section as shown in image below.
- After that upload Video in any one format by clicking on Three Vertical dots as shown in image below.

</div></div></div></div></div></div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-html5.png)

<p class="callout info"><span class=".">**Note**: In **HTML5 Source** you need to select **Cover image** for your video as shown in image below.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Video-lightbox-html5-cover.png)

# Google Maps

This Guide will Help you to customize **Google Map Widget** Settings and Style.

#### DRAG GOOGLE MAP WIDGET

When you **Drag and Drop** Google Map Widget in a Page. You will see the image like below.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can **customize** as per your needs using this guide.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-dragdrop.png)

#### COMPANY DETAILS

1. When you click **Add new Marker**, you can able to customize **Company Details** such as Title, Address and other information.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-details.png)

1. You can add **Link Text** to company details for other information and that text give **Link** also. If you want to change **Icon** then select **Icon type**, ‘**Default** is enabled when you drag and drop the widget.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-link-text.png)

1. When Darg and Drop the widget **Default** is enabled, If you want to give **Image** instead of **Icon** for marker, then select **image**. And select **Icon Type** for giving the styling of Icon. Choose **Icon** from the list, choose **Icon color** and give **font size** for selecting the **Icon size**.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-font-type.png)

1. Click **checkbox** for giving the **Driving Direction Text and Link**. You can **zoom-in** and **zoom-out** map with the help of **Zoom** control. Click on checkbox to give **Embed Code** for Google Map.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-zoom.png)

#### EMBED GOOGLE MAP

Click on checkbox to use **Google Embed code** from **Google Map**, paste that **Iframe code** in Embed code area.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Embed-googlemap.png)

#### MULTIPLE LOCATION

Click on **Add new Marker** to give address details and other information, For giving multiple location click on **Add new Marker**. **Scroll Zooming** check this checkbox for zooming while scrolling.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-marker.png)

#### MAP TYPE AND MAP STYLE

Select predefined **Map type** from dropdown list, and select predefined **Map style** from dropdown list.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-type.png)

#### MAP CUSTOM STYLES

1. Select **Custom** in Map style to give custom style for Map. Click on **Snazzy Maps** to give **custom style** for Google Map.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-custom-style.png)

1. Paste **custom code** in Custom Style textarea.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Map-code.png)

#### LOCATION LIST

Click on **checkbox** for displaying **Location List**. List column count gives **column count** for displaying location list in selected particular column. List maximum width gives **total width** for displaying Location list.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Map-location-list.png)

# Social buttons

This Guide will help you to Customize **Social Buttons.**

<div id="bkmrk-drag-and-drop%C2%A0social">1. Drag and Drop **Social Buttons** from left side Widget panel. Now in the **Settings** section of **Social Buttons** Dialog box enter **URL** for Social Buttons to display them or remove **URL** to remove button as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-drag.png)

</div><div id="bkmrk-here-we-removed%C2%A0twit">1. Here we removed **Twitter URL** so that **Social Button** for **Twitter** is also get removed.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-remove.png)

</div><div id="bkmrk-now-click-on%C2%A0style%C2%A0t">1. Now click on **Style** to add styling for **Social Buttons**. Click on **Edit Element Style** to add **Custom Style** and click in **Predefined Styles** to add **Predefined styles** as shown in image below. <div class="ricsi info alert alert-info"><span class=".">**Note:** Please not that **Background Color** for **Social Buttons** is **Predefined** so you will not able to change that.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-style.png)  
       
    </span></div>
2. <div class="ricsi info alert alert-info">  
    </div>Now see in image below we have selected **Size Large** and **Style is Circular** so styling for **Social Buttons** have **Changed.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Social-buttons-predefined-styles.png)**

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

# Contact Form

This guide will help you to **Customize Contact Form**.

<div id="bkmrk-drag-and-drop%C2%A0contac">1. 1. **Drag and Drop** Contact Form from left side Widget Panel or simply click on it if already present in page to open **Dialog Box**. Now in Dialog Box Click on **Add New Field** to add new input field to your Form. Enter Button label and check **use reCAPTCHA** box if you want to use it as shown image below. If you don’t know how to setup **reCAPTCHA** then follow this guide. Setup [reCAPTCHA for Contact Form](https://dotroll.com/en/knowledge-base/books/website-builder/page/how-to-add-recaptcha)![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag.png)

</div><div id="bkmrk-now-select%C2%A0alignment">1. 1. Now select **Alignment** for your Contact Form as per requirements. **Form ID** and **Form Name** this fields is used in **E-mail template.**![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-drag2.png)
    2. To add new fields just click on **Add New Field**. To customize newly added field just click on that particular field as shown in image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-add-field.png)

</div><div id="bkmrk-now-add%C2%A0label%C2%A0for-in">1. 1. Now add **Label** for input field and select Type of that field. We have different input types like **Text** for names or surnames, **E-mail** for e-mail, **Text area** for messages etc. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field.png)

</div><div id="bkmrk-to-add-the-file-uplo">1. 1. To add the file upload option in contact form, Please select **File** form **Type** section dropdown as shown in figure. ![](https://dotroll.com/wp-content/uploads/2020/08/Input-type-file.png)

</div><div id="bkmrk-check%C2%A0use-label-as-p">1. 1. Check **Use Label as Placeholder** box to place your label as a **Placeholder**. If you want any field as a **required field** then check **Required** box. Enter **CSS class** and **ID** if you need them. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-customize-field2.png)

</div><div id="bkmrk-you-can-add-multiple">1. 1. You can add multiple input fields into your **Contact Form** as shown image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-multiple-fields.png)

</div><div id="bkmrk-you-can-set%C2%A0reply-to">1. 1. You can set **Reply To** as shown in the image below. ![](https://dotroll.com/wp-content/uploads/2020/08/Reply_to.png)

</div><div id="bkmrk-you-can-add%C2%A0custom-s">1. You can add **Custom Style** for **Contact Form** by following below image steps. ![](https://dotroll.com/wp-content/uploads/2020/08/Contact-form-styling.png)

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

# Chart

<div id="bkmrk-this-guide-will-help"><section class="wpb-content-wrapper">This Guide will Help you to edit **Chart Widget** Settings and Style.

#### DRAG CHART WIDGET

When you **Drag and Drop** Chart Widget in a Page. You will see the image like below.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can **customize** as per your needs using this guide.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-dragdrop.png)  
#### CHART TITLE AND TYPE

You can enter **Chart Title** and select **Chart Type** according to your needs. Various predefined chart type is available such as Column chart, Bar chart, Area chart, Histogram, Line chart etc. **Column chart** is enabled when you drag and drop the widget.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-type.png)

#### CHART COLOR

You can customize **chart color** according to your needs, click on checkbox to **remove** chart **background**.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-color.png)

#### CHART DATA

Enter chart data in **Data Textarea** box, Insert column-wise data separated with commas.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Chart-data.png)

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

# List

This Guide will Help you to edit **List Widget** Settings and Style.

#### DRAG LIST WIDGET

When you **Drag and Drop** List Widget in a Page. You will see the image like below.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-list.png)

#### PREDEFINED LIST STYLE

When you Open Dialog Box, you can be able to customize **List Style** according to your choice. There are various list style such as Icon, Circle, Disc, Square, Armenian, Georgian, None etc.

If you want to change text color then click on checkbox and change **text color**.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Predefined-list.png)

#### ICON STYLES

If you choose Icon from **List style** then you can change **Icon** from Icon List. And you can also **customize** icon text color, for that purpose you have to click on checkbox then change **Icon color** which suits for your needs.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/List-icon-setting.png)

# Primary Menu

When the first **Theme** is selected it automatically gives the Predefined Style for **Menu** but if you want to **Customize Menu** you can follow this guide.

<div id="bkmrk-drag-and-drop%C2%A0primar">1. Drag and Drop **Primary Menu** from left side widget section or Select **Primary Menu section** in **Header** page if already present. So this action will pop up **Dialog Box** for **Primary Menu** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-drag.png)

</div><div id="bkmrk-now-in%C2%A0settings%C2%A0sect">1. Now in **Settings** section of **Dialog Box** you have different option to **Customize** menu like Text Color, Background Color, Text Size etc. Just fill that as per your needs as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style1.png)

</div><div id="bkmrk-last-option-in-below">1. Last option in below image is for styling the **Sub Menu Items**, if you want to do that just check it.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style2.png)

</div><div id="bkmrk-now-select-color%2C-ba">1. Now select Color, Background Color, Text Size for **Sub-Menu** as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style3.png)  
       
    Above Sub-Menu style will look like this.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-demo1.png)

</div><div id="bkmrk-if-you-want-to-add-c">1. If you want to add custom style for **Active page Menu Item** then just check the **Active Page Effect** box and provide Color, Background Color for Active Page Menu Item as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style4.png)  
       
    Above Active Page Menu Item style will look like this.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-demo2.png)

</div><div id="bkmrk-if-you-want-to-add-c-1">1. If you want to add custom style for **Toggle Button** then just click on the checkbox of **Responsive Menu Style** and provide Bar Color, Bar Background Color for Toggle button as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style5.png)

</div><div id="bkmrk-and-also-you-can-add">1. And also you can add custom font size, Menu Item height, color and background color for menu item as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style6.png)

</div><div id="bkmrk-you-can-also-customi">1. You can also customize **active menu item** such as color and background color, and you can also select color and background color for menu item on mouse hover as shown in image below.  
       
    ![](https://dotroll.com/wp-content/uploads/2020/08/Primary-menu-style7.png)

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

# Audio

This Guide will help you to add **Audio**

#### AUDIO USING URL

<div id="bkmrk-drag-and-drop%C2%A0audio%C2%A0">- Drag and Drop **Audio** from left side **Widget Panel**.
- Now in Dialog box of **Audio** select **Audio file URL** to give URL of audio file.
- After that enter **Audio URL** in Audio file URL section as shown in image below.
- Check the Autoplay box if you want to Autoplay your audio when page is loaded.
- Check the Repeat box if you want to Repeat your audio when it gets finished.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Audio-using-url.png)

#### AUDIO USING MEDIA

<div id="bkmrk-drag-and-drop%C2%A0audio%C2%A0-1">- Drag and Drop **Audio** from left side **Widget Panel**.
- Now in Dialog box of **Audio** select **Media Library** to Upload the audio file.
- After that click on three dots to upload your audio file as shown in image below.
- Check the Autoplay box if you want to Autoplay your audio when page is loaded.
- Check the Repeat box if you want to Repeat your audio when it gets finished.

</div>   
![](https://dotroll.com/wp-content/uploads/2020/08/Audio-using-media.png)

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

# Icon

This Guide will Help you to edit **Icon Widget** Settings and Style.

#### DRAG ICON WIDGET

When you **Drag and Drop** Icon Widget in a Page. You will see the image like below.

<p class="callout info"><span class=".">**Note:** Widget gives you **Default Style** provided by theme, you can customize as per your needs using this guide.</span></p>

  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Drag-icon.png)

#### ICON WIDGET SETTINGS

When you Open Dialog Box, you can be able to customize **Icon** from the list and **Icon Color** also.

Icon Size gives you different **predefined sizes** of Icon, simply choose size from **dropdown list** and if you want to give **custom size** then choose **custom** link from dropdown list.

**Icon Alignment** gives you Alignment of Icon in a page.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-settings.png)

#### EDIT BACKGROUND STYLES

You can edit **Background Shape** like Circle, Square, Rounded, Outline Circle, Outline Square, Outline Rounded and None.

Icon Background Size gives you **space** around the **Icon**, and background color gives you the Background Color.

Appearance **Effect** gives Animation like Top to bottom, Bottom to top, Left to right, Right to left, Appear and None also.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-background.png)

#### ICON CUSTOM LINK

Custom Link gives **Link** to Icon.  
   
![](https://dotroll.com/wp-content/uploads/2020/08/Icon-link.png)