Widgets

Comments

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

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.

DRAG COMMENTS WIDGET

When inside the SitePad Editor Drag and Drop the Comments widget. As shown in the Image Below.
 

 
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.

Note: You will need to configure Disqus following the steps on their create site page, before using the short-name in SitePad.


 

 
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.
 

Countdown

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

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.

DRAG & DROP COUNTDOWN TIMER WIDGET

When you Drag and Drop Countdown Timer Widget in a Page, You will see the image shown like below.
 

 

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.
     

 

  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.
     

 

  1. Give the color of the Text, Track and Track Background.
  2. Set the Track block size.
     

 

  1. Change the Track width, Digit size and Text size by dragging Icon horizontally.
  2. Spacing gives space between the Block.
     

     
  3. You can give Text before starting the date.
     

 

  1. Expiration Text is displayed when the countdown reaches to zero.
  2. Expiration Link is activate when the countdown reaches to zero.
     

Grid gallery

This Guide will help you to add Grid Gallery.

DRAG AND DROP

 

 

SELECT IMAGES

 

 

 

 

 

 

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.

 

 

 

 

Image

This Guide will help you to add Image.

DRAG AND DROP IMAGE

INSERT MEDIA


 

IMAGE SIZE

 

IMAGE ALIGNMENT

IMAGE OVERLAY

CUSTOM STYLE

Call To Action

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



Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.

DRAG & 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.
 

 

CALL TO ACTION TEXT

 

 

CALL TO ACTION BACKGROUND

 

 

CALL TO ACTION BUTTON

 

 

CALL TO ACTION BUTTON ICON

 

 

CALL TO ACTION ICON

 

 

CALL TO ACTION STYLE

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

 

Service Box

This Guide will help you to add Service Box.

DRAG AND DROP SERVICE BOX

 

 

SERVICE BOX MEDIA TYPE

 

 

 

SERVICE BOX CONTENT

 

 

BUTTON

 

CUSTOM STYLE

 

Modal

This Guide will help you to add Modal.

DRAG AND DROP MODAL

 

 

CUSTOMIZE MODAL

 

 

CUSTOM STYLES

 

 

MODEL SCREEN VIEW

 

Embed

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

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.

DRAG & DROP EMBED WIDGET

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

 

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.
     

 

 

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.
     

 

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.

  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.
     

 

  1. Select Colors for Pricing Table pricing rows and border and select animation effect as per your needs as shown in images below.
     

     

 

  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.
     

     

 

  1. Now in Styles section of Dialog Box you can edit element style as shown in image below.
     

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.

  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 .
     

 

  1. Now in Settings section of Dialog Box you can open Tab and add text of your own as shown in image below.
     

 

  1. In Settings section of Dialogue Box you can also select icons and customize as shown in figure below.
     

 

  1. Now in Style section of Dialog Box you can give Custom Style and also use Predefined Styles as shown in image below.
     

Accordion

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

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.

DRAG & 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.
     

 

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.
    Note: Only one item can be active.
     

 

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.
     

 

  1. Predefined style gives you classes of Accordion such as Light and Dark.
  2. You can also give your classes to define your style.
     

 

Splash Screen

This Guide will help you to add Splash Screen.

DRAG AND DROP SPLASH SCREEN

 

 

EDIT CONTENT

 

 

DELAY TIME AND DISPLAY

 

 

STYLE AND ANIMATION

 

 

CUSTOM STYLES

 

 

SPLASH SCREEN VIEW

 

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.

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.


 

 

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.
     

  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.
     

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.
     

  1. Predefined style gives you classes of various predefined button for Background and Text color. And Size gives you various types of Button Size.
     

Space

This Guide will help you to add Space Widget.

DRAG AND DROP SPACE WIDGET

 

 

PREDEFINED STYLES

 

Video Lightbox

This Guide will help you to add Video Lightbox.

YOUTUBE SOURCE

  • 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.

 

 

VIMEO SOURCE

  • Select Vimeo from source section as shown in image below.
  • After that enter Vimeo Video URL.
  • Select Cover Image if you need any.

 

 

HTML5 SOURCE

  • 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.

 

Note: In HTML5 Source you need to select Cover image for your video as shown in image below.


 

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.

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.


 

 

 

COMPANY DETAILS

  1. When you click Add new Marker, you can able to customize Company Details such as Title, Address and other information.
     

 

 

  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.
     

 

  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.
     

 

EMBED GOOGLE MAP

Click on checkbox to use Google Embed code from Google Map, paste that Iframe code in Embed code area.
 

 

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.
 

 

MAP TYPE AND MAP STYLE

Select predefined Map type from dropdown list, and select predefined Map style from dropdown list.
 

 

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.
     

 

  1. Paste custom code in Custom Style textarea.
     

 

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.
 

Social buttons

This Guide will help you to Customize Social Buttons.

  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.
     

 

  1. Here we removed Twitter URL so that Social Button for Twitter is also get removed.
     

 

  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.
    Note: Please not that Background Color for Social Buttons is Predefined so you will not able to change that.
     

     

  2. Now see in image below we have selected Size Large and Style is Circular so styling for Social Buttons have Changed.
     

Contact Form

This guide will help you to Customize Contact Form.

    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

 

    1. Now select Alignment for your Contact Form as per requirements. Form ID and Form Name this fields is used in E-mail template.

       

    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.

 

    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.

 

    1. To add the file upload option in contact form, Please select File form Type section dropdown as shown in figure.

 

    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.

 

    1. You can add multiple input fields into your Contact Form as shown image below.

 

    1. You can set Reply To as shown in the image below.

 

  1. You can add Custom Style for Contact Form by following below image steps.

Chart

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.

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.


 

 

 

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.
 

 

CHART COLOR

You can customize chart color according to your needs, click on checkbox to remove chart background.
 

 

CHART DATA

Enter chart data in Data Textarea box, Insert column-wise data separated with commas.
 

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.
 

 

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.
 

 

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.
 

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.

  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.
     

 

  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.
     

 

  1. Last option in below image is for styling the Sub Menu Items, if you want to do that just check it.
     

 

  1. Now select Color, Background Color, Text Size for Sub-Menu as shown in image below.
     

     
    Above Sub-Menu style will look like this.
     

 

  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.
     

     
    Above Active Page Menu Item style will look like this.
     

 

  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.
     

 

  1. And also you can add custom font size, Menu Item height, color and background color for menu item as shown in image below.
     

 

  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.
     

Audio

This Guide will help you to add Audio

AUDIO USING URL

 

 

AUDIO USING MEDIA

 

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.

Note: Widget gives you Default Style provided by theme, you can customize as per your needs using this guide.


 

 

 

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.
 

 

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.