1 Header

In this field, you can write the text that you want to display on the button. For example, “More Info”, “Submit”, ” Cancel” etc.

2 External URL

The radio button is to choose between External URL and Internal Pages. You can also choose where to place the button.

If you select External URL, then you need to specify the URL you want to link with this button.

If you go for Internal Pages, it will display the list of all the pages that you have made for the site/template design. And you can select any out of these.

3 Open In

Use this to select the target window in which the specified URL will open.

4 Style

Lets you choose a preferred BOOTSTRAP button style from the given options. You can find six BOOTSTRAP button styles to choose from – Default, Primary, Success, Info, Warning, and Danger. You can select the one that best suits you.

5 Size

Use this to specify the size of the button. You can choose between the given four options available for size as- Medium, Large, Small and Extra Small.

6 Save

You can click on the Save button to apply the changes.

7 Cancel

Click on the Cancel button to cancel the changes and close the dialog box.

1 Specify the Path of Video

Use this option to specify the URL of the YouTube video you want to add in this field.

2 Change the Layout

You can change the height and width of the video container. By default, “Maintain Aspect Ratio” option is checked. Hence, if you change the height then width will also change automatically. If you uncheck this option then you can set height and width of the video container separately as required.

3 Set Margin

Using this option you can specify the margin of the video from all the sides i.e. Left, Right, Top, & Bottom. The margin will be the same from all the sides if you choose the “Select All” option and check it. Uncheck this to specify different margins for all the sides.

4 OK

Click on “OK” to apply the changes.

5 Cancel

Click on the “Cancel”  option to cancel the changes and close the dialog box.

1 Browse Image

Use this to browse the images from your system.

2 Set Image Float

Lets you specify the image float direction.

3 Stretch

You can use this option to specify how the image should stretch.

4 Layout

Using the Layout option can specify the height and width of the image. By default, “Maintain Aspect Ratio” option is checked. Hence, if you change the height then width will also change automatically. If you uncheck this option, then you can set height and width of the image separately as needed.

5 Margin

Sets the margin of the image from all sides. Uncheck “Select All” to specify individual margin for all the sides as Top, Bottom, Left, and Right.

6 OK

Click on the “OK” option to apply the changes you have made.

7 Cancel

Click on the “Cancel” option to cancel the changes you made and close the dialog box.

This dialog box brings all the typography options at one place. You can change the text styles of individual elements very easily.

1 Selection Radio Button

Allows you to choose the element with which you want to define the typography. Here is what happens if choose the following-
Complete – You can customize the typography for any element from the list given in the extreme left of the window.
Headings- It will let you specify the typography of headings only while making the list of elements inactive.
Text- It will allow you to define the styling of text only.

2 List of Elements

From the given list, you can choose the element whose text style you want to change.

3 Google Web Fonts

From this list, you can select any Google font for your website. And if you want to browse more fonts online, Click on the  “Google Fonts” button.

4 Custom Fonts

This is the list of custom fonts, you can select any font from the given list. Click on the ” Browse” button to browse and find more custom fonts.

5 System Fonts

If you want to use a system font for your website, you can select the preferred font from the shown list.

6 List of Font Styles

You can choose the preferred style for the chosen font from this list of font styles.

7 Font Size Options

From this list, you can choose suitable font size as needed.

8 Change Font Color

You can choose a suitable color for the text with this tool.

9 Alignment

Use this option to modify the alignment of the text. According to the need of your template/theme or website, you can set the alignment of the text.

10 Margin

Specifies the margin of the text. You can mention the Top and Bottom Margins.

11 Select Font Effect

Use this option to choose an underline or strike through style for the text.

12 Text Preview

This option lets you preview the text style.

13 Save

Applies the text styles and saves it.

14 Cancel

Cancels the changes you have done and closes the dialog box.

1 Select Border Style

Use this option to choose a suitable style for the border.

2 Select Border Thickness

Changes the thickness from all sides of the border. including Top, Bottom, Left, &, Right. Uncheck “Select All”, if you want to set different values for each side of the border.

3 Change the Radius of Corners

Specifies the radius of the corners including Top Right, Top Left, Bottom Right, & Bottom Left. Uncheck “Select All”, if you want to set different values for each side of the border.

4 Select Border Color

Use this to modify the color of the border.

5 Save

Lets you apply the changes you made to the border.

6 Cancel

Use this to Cancel the changes you have made and close the dialog box.

1 Shadow

Use this option to apply a shadow effect. You can apply one of the shadow effects from the given options by TemplateToaster. Also you can even personalize the features of shadow effect by using colour, blur, angle, and distance options as needed.

2 No Effect

If you do not want to apply any shadow effect, select the No Effect option.

3 Shadow Effects

Lets you apply a suitable shadow effect from these options. You can select the one that is best suitable.

4 Glow

You can choose any suitable glow effect from these options.

5 Color

Use this option to specify the colour for the shadow effect.

6 Blur

You can also blur the shadow using this slider or numeric up down option as suitable.

7 Angle

Use this option to specify an angle between the element and the shadow. You can use the slider or numeric up down  to change the value of the angle as needed.

8 Distance

Changes the apparent distance between the element and the shadow. You can use the slider or numeric up down to change the value of the distance.

9 OK

Click on the OK button to apply the texture.

10 Cancel

Click on the Cancel button to drop the changes and close the dialog.

1 Special Effect

Use this option to apply different types of the special effects to the background. Special Effects are like textures with some different set of effects. To preview different special effects, hover your mouse cursor on different special effects, and select the best suited special effect for the background. Adding special effects to the background makes it look more attractive and appealing.

2 Transparency

You can select the desired transparency level of the texture. It is pretty simple to add transparency using this option.

3 OK

Next click on the OK button to apply the texture.

4 Cancel

Click on the Cancel button to drop the changes and close the dialog.

1 Texture Options

Use this to add texture to the background. To try different textures, hover your mouse pointer on different textures, and then select the best suited texture for the background. Use texture to smoothly edit the colour gradients in the background image. It also helps in highlighting the typography by layering texts and important texts.

2 Repeat

Repeat -X-
It will repeat the texture in the direction of the X-axis.

Repeat -Y-
And it will repeat the texture in the direction of the Y-axis.

3 Transparency

Use this to select the transparency level of the texture.

4 OK

Simply click on the OK button to apply the texture.

5 Cancel

Click on the Cancel button to drop the changes and close the dialog.

1 Stock Images
You can choose any image from the free stock options by TemplateToaster.

2 Browse Image

Use this option to browse your system and quickly apply your own image(s) in the background.

3 Delete Image

This will delete the image which you’ve browsed from your system.

4 Stretch
Provides you with different settings to handle the display of an image at the desired location. The available choices are as follows:

None-
The image will have or resume its original size, if you select “None”.

Fill-
The image will be resized to fill the destination dimensions. The aspect ratio is not preserved.

Uniform-
The image will be set to fit the destination dimensions while also preserving its native aspect ratio.

Uniform to Fill-
The image will resize to fill the destination dimensions while preserving its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

5 Horizontal Alignment
Provides the following choices to align the background image horizontally as:

Left – Aligns the background image to the left side.

Center – Aligns the background image to the center.

Right – It aligns the background image to the right side.

6 Vertical Alignment
Includes three choices to vertically align a background image as follows:

Top – Aligns the image to the top.

Center – Sets the image in the center.

Bottom – Aligns the image to the bottom.

7 Fallback Value

Use this to choose a fallback color. Fallback color specifies the color  for cases when the browser doesn’t support RGBA colors.

8 Repeat

Repeat X-
You can repeat the image in the direction of the X-axis.

Repeat Y-
Lets you repeat the image in the direction of the Y-axis.

9 Transparency

You can select the transparency level for the background image with this option

10 Save

Press the “Save” button to apply the background image.

11 Cancel

Press the “Cancel” button to drop the changes.

1 Gradient Presets

TemplateToaster offers some predesigned (or preset) gradients for you to choose from. You can select any of these from the preset gradient fills.

2 Gradient Type

The Linear gradient shades are in a straight line which is from the starting point to the end point.

Radial gradient shades are in a circular pattern which is from the starting point to the end point.

3 Color

It provides the second color apart from the background color to form a gradient.

4 Offset

Offset is used to set the location of the color stops.

5 Angle

Specifies the angle between the two colors. You can also specify a custom angle to create your own gradient style.

6 Save Gradient

Use this to save your custom gradients.