Category Archives: Design Your Template

4.18.14. Contact Form Dialog Box

1 Specify Admin Email

In this field, specify the email address on which the messages will be sent. For example, if you want that all the messages should be sent on your email address, then fill in your email address in this field.

2 Set Margin

You can set custom margin of Contact form from all the sides. The margin will be same from all sides if ” Select All” option is checked. Uncheck ” Select All” to specify different margin from all sides.

3 Contact Form fields

These fields are added by default. You can add more fields.

4 Apply Validation Rule

Click the drop down arrow and select a validation rule for the field.

5 Required Field

This icon signifies that this field is mandatory. To make a field mandatory, just click the “star icon” shown beside the field.

6 Add New Field

Click this button to add a new field in your contact form.

7 Delete

Deletes the contact form field.

8 Typography Tab

From this tab, you can change the text style of the labels used in your contact form.

9 Button Tab

Avails you to select the type of the button you want to use on your contact form.

10 Message Field

It facilitates a message box in the contact form that provides a text area to the user to write the message.

11 Enable Attachments

If enabled, the Enable Attachments option avails the user with Browse button to attach the file with restricted extensions and size as specified by you in the corresponding fields. You will also be able to define the Browser typography if Enable Attachment is checked as shown below:

12 OK

Adds the contact form in the template/website with changes applied.

13 Cancel

Cancels the changes and closes the dialog box.

4.18.13. More Options Dialog Box

1 Header

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

2 External URL

It is a radio button to make a choice between External URL and Internal pages, to place the button.

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

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

3 Open In

To select the target window in which the specified URL will open.

4 Style

Avails you to select a preferred BOOTSTRAP button style. You are given six BOOTSTRAP button styles – Default, Primary, Success, Info, Warning, and Danger.

5 Size

Specifies the size of the button. Four size options are available to you: Medium, Large, Small and Extra Small.

6 Save

Save button applies the changes.

7 Cancel

To cancel the changes and closes the dialog box.

4.18.12. Video Dialog Box

1 Specify the path of video

Specify the URL of your YouTube video 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 then you can set height and width of the video container separately.

3 Set Margin

You can specify the margin of the video from all the sides. The margin will be same from all the sides if “Select All” option is checked. Uncheck this to specify different margin from all the sides.

4 OK

Press “OK” to apply the changes.

5 Cancel

Press “Cancel” to cancel the changes and close the dialog box.

4.18.11. Picture (Image) Dialog Box

1 Browse Image

To browse the images from your system.

2 Set Image Float

Specifies the image float direction.

3 Stretch

Specifies that how the image should stretch.

4 Layout

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

5 Margin

Set the margin of the image from all sides. Uncheck “Select All” to specify individual margin from all the sides.

6 OK

Press “OK” to apply the changes.

7 Cancel

Press “Cancel” to cancel the changes you made and closes the dialog box.

4.18.10. Website Typography Dialog box

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

1 Selection Radio Button

Facilitates you to make a selection for the element you want to define the typography. If you choose —
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 to 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 this list, 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. To browse more fonts online, Click “Google Fonts” button.

4 Custom Fonts

This is the list of custom fonts, you can select a font from this list. Click ” Browse” button to browse more custom fonts.

5 System Fonts

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

6 List of Font Styles

You can choose a preferred style for chosen font from this list..

7 Font Size Options

From this list, you can choose suitable size of the font.

8 Change Font Color

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

9 Alignment

Modifies the alignment of the text. According to the need of your template/website, you can set the alignment of the text.

10 Margin

Specifies the margin of the text.

11 Select Font Effect

To choose an underline or strike through style for the text.

12 Text Preview

You can preview the text style from here.

13 Save

Applies the text styles.

14 Cancel

Cancels the changes and closes the dialog box.

4.17 Format Tab in TemplateToaster

This Format Tab will open when the user Double Click the Designer text in the Footer section. It includes various options to style the Designed By element of the footer as follows :

1 Left Alignment

Avails the user to set the X coordinate of the Designed By element from Left side.

It also provides the direct positioning of the element in three available ways as shown above.
Horizontal Left
Horizontal Center
Horizontal Right

2 Top Alignment

Specifies the Y coordinate of the element by taking Top as origin.

It also provides three available positions to set the element directly as shown above.
Vertical Top
Vertical Center
Vertical Bottom

3 Link Typography

Defines the typography of the Designed by Link by specifying the Style, Font Size, Color, Text Decoration, and much more.

4 Text Typography

Customizes the Designed by Text by specifying the Font Family, Color, Effects, Text Decoration, and much more.

5 Link Preferences

Facilitates you to specify the Footer Link of the page that you want to open when a user click on this Designed by element .Besides this, you can also specify that the link will open in the same window or should use the New window in Footer OpenIn field.

4.16. Editor Tab in TemplateToaster

Editor Tab offers a number of editing tools to edit the content in WordPress, HTML, WooCommerce CMSes before exporting the theme/template.

1 Undo and Redo

These are the editing commands. Undo (Ctrl+z) reverses the most recent edit. This control helps the user to restore the unintentionally deleted text. Redo (Ctrl+y) can restore the changes that are undone using Undo. For example, if some text was inserted, Undo will remove it. Redo will insert it again.

2 Font

You can browse fonts from here. You can choose any type of font for your template/website as TemplateToaster supports Google Fonts, System Fonts, and Custom Fonts.

3 Font Style

TemplateToaster supports dynamic font style. Hence, you can select a preferred style for your chosen Font.

4 Font Size

Select the text and use these options to increase/ decrease the size of the selected text.

5 Font Tools

You can customize the style and color of text with font tools.

6 Paragraph Formatting Tools

These tools allow you to align the text, set the indentation, specify line-height, margin and draw a horizontal outline below the text.

7 Image

Inserts a custom image (s) in the content box. Place the cursor where you want to insert the image and then click this button. For comprehensive knowledge about adding an image, view this.

8 Video

Inserts a YouTube video(s) in the content box. Place the cursor where you want to insert the video and then click this button. For more details about adding a video, view this.

9 Button

Inserts the button. Place the cursor where you want to place the button and then click this option. You can personalize the button according to your design with Elements Tab. See this, for complete information.

10 Contact Form

Inserts a contact form in your template/website. Place the cursor where you want to place the contact form and then click this option. You can even customize the typography of labels and can select the Button Type that is to be used in the form. See this, for more details.

11 Hyperlink

Adds a link that redirects to another website or internal page of the website. Select some text, click the Hyperlink button and enter the valid URL and press OK. Here are the more details.

12 Table Options

Table options are used to add or delete the tables. And, you can add/delete rows and columns in the selected table. When you click “Table” option, following dialog box opens up, from which you can choose formatting options.

4.15 Elements Tab in TemplateToaster

The Elements Tab contains the options for designing the different user interface elements for the template/website such as Button, Input field, Pagination, Breadcrumb and more. Let us go through all the given options and their functioning.

1 Button

Displays a dropdown list as shown below when you click on it. All the options are explained as follows:

Presets-

With Presets option, you will be able to see a set of pre-designed buttons. You can choose any pre-designed button for your template/website and can change its look and feel as per your need. For this, following options are given by TemplateToaster.

Background-

Changes the background of buttons for Normal and Hover states. You can apply a color, a gradient, or an image in the background of button.

Border-

Designs the border of the buttons. For more professional look and feel of the buttons, you can choose different border for Normal and Hover states.

Typography-

Avails you to change the text style or typography of the buttons. You can apply different text styles on buttons in Normal and Hover states.

Texture-

Applies a texture effect to the background of the buttons.

Padding-

Specifies the padding of the footer from all the sides.

Primary/Success/ Info/ Warning/ Danger-

You can design five types of BOOTSTRAP buttons with TemplateToaster: Primary, Success, Info, Warning, and Danger. For designing these buttons, Template Toaster offers Background, Text Color, and Border Color options.

Large Size/ Small Size/ Extra Small-

Modifies the Font size of all size buttons ( Large, Small and Extra Small). You can also change their border radius and padding too.

2 Input

Input is a type of form control provided by BOOTSTRAP. You can design this control with following options.

Presets-

Facilitates you to select a preset style and then modifies its look and feel.

Background-

Modifies the background of an Input box. You can set different backgrounds of the box in Normal and Focused states.

Border-

Designs the border of an Input box. You can design different borders of the box for Normal and Focused states.

Typography-

Defines the preferred text style for an Input box. You can set different text styles for Normal and Focused states of the Input box.

Shadow-

Applies a shadow effect to the input box. You can set different shadow effects for the Normal and Hover States.

Height-

Specifies the height of the Input box. With “More”, you can even specify the custom value for the height.

Width-

Sets the width of the Input box. With “More”, you can specify the custom value for the width too.

3 Pagination

For styling the pagination of your template/website.

Presets-

Avails you to select a preset style of pagination and then modify its look and feel.

Background-

Changes the background of the pagination for its different states. Just select the state of pagination for which you want to change the background and apply a preferred color, a gradient, or an image on the background of pagination.

Border-

Designs the border of pagination. The border can be designed differently for the Normal, Hover and Active state of pagination..

Typography-

Defines the preferred text style for the pagination. You can set different text style for Normal, Hover and Active state of the pagination.

Shadow-

Applies a preferred shadow effect to the pagination. You can apply different shadow effects for the Normal, Hover and Active states.

Margin-

Specifies the margin of the pagination.

Padding-

Specifies the padding of the pagination.

4 Breadcrumb

Designs the breadcrumb navigation of your template/ website.

Presets-

Selects a preset style of breadcrumb navigation and then modifies its look and feel.

Separator-

Selects a separator icon for breadcrumb.

More-
“More” facilitates you to specify a custom breadcrumb icon.

Background-

Changes the background of a breadcrumb. You can apply a preferred color, a gradient, or an image to the background of breadcrumb.

Border-

For designing the border of breadcrumb as per your need.

Typography-

Defines the text style of breadcrumb in the Normal, Hover and Active states.

Shadow-
Gives a shadow effect to the breadcrumb.

Margin-

Specifies the margin of a breadcrumb.

Padding-

Specifies the padding of a breadcrumb.

5 Block Quote

Designs the Block Quote element of your template/website.

Background-

Modifies the background of a Block Quote. You can apply a preferred color, a gradient, or an image to its background..

Border-

Designs the border of a Block Quote as per your need.

Is Default:
To apply a default style.

Typography-

Defines the text style of a Block Quote element. You can choose a Font from preferred Font Family, choose a style for the Font, and much more.

Shadow-
Applies a shadow effect to the Block Quote.

Icons-

You can choose preferred icons for a Block Quote. You can even browse your own custom icons and set preferred color to those icons.

Margin-

Specifies the margin of a Block Quote.

Padding-

Specifies the padding for a Block Quote.

6 Label

TemplateToaster allows to customize six BOOTSTRAP Labels, which are: Default, Primary, Success, Info, Warning and Danger. You can customize their background and text style in Normal and Hover states.

7 Alert

Customizes the BOOTSTRAP Alert messages. You can change the Background, Border, and Typography of each type of an Alert message.

8 Badges

With this option, you can customize the BOOTSTRAP badges used in the template/website. You can change the background of a badge, can design its border, and can change its typography too.

Background-

You can apply different backgrounds to the badges for Normal and Active states. You can set a preferred color, a custom gradient or a custom image. You can also choose a gradient/an image from the stock of TemplateToaster.

Border-

Design the border for badges with available options.

Typography-

Changes the text style of badges for Normal and Hover states.

9 Line

Designs the Lines used in your template/website. You can choose Style, Thickness, and Color of a line as per your need.

Is Default-
Check this option to apply the default style.

10 Headings

Selects the typography of Headings from H1 to H6 including color, font size, alignment etc.

11 Paragraph

Defines the typography for the paragraphs.

12 Lists

Specifies the typography for both the ordered and unordered lists.

13 Links

Sets the typography for links on the Active, Normal and Hover states.

14 Table

Specifies the typography of any table inserted on the page.

15 Check Box

Modifies the appearance of the default checkbox.

Is Default-
Check this option to apply the default style.

Style-

You can choose from two styles- Check and Fill.

Outer Border-

Designs outer border of the checkbox.

Outer Shadow-

To apply a preferred shadow effect to the checkbox.

Inner Fill/ Outer Fill-

To add or change the checkbox fill. You can choose different color/ gradient/ or image for inner and outer fills.

16 Radio Button

Modifies the look and feel of a radio button.

Is Default:
Check this option to apply a default style.

Outer Border-

Designs the outer border of a checkbox.

Outer Shadow-
You can apply an outer shadow to the checkbox.

Inner Fill/ Outer Fill-

To add or change the Radio Button fill. You can choose a different color/ gradient/ or image for inner and outer fills.