The Elements Tab contains the options for designing different user interface elements for the template/theme or website such as Button, Input Field, Pagination, Breadcrumb and more. Let us go through all the given options and how you can use them to change the look and appeal of your design.

1 Button

When you click on the Button option it displays a dropdown list as shown below.. All the options are explained as follows:

Presets-

With the Presets option, you can find a set of predesigned buttons to choose from. You can select any predesigned button for your template/theme or website and can change its look and feel as per your need. For this, you can select following options given by TemplateToaster:

Background-

You can also change the background for the buttons and set it as Normal and Hover states. You can apply colour, a gradient, or an image in the background of the button.

Border-

Use this to design the border of the buttons. For a more professional look and feel of the buttons, you can choose different borders also for Normal and Hover states.

Typography-

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

Texture-

You can apply a texture effect to the background of the buttons.

Padding-

Lets you specify 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 Colour, and Border Colour options.

Large Size/ Small Size/ Extra Small-

Also Modifies the Font size of all size buttons ( Large, Small and Extra Small). You can easily change their border radius and padding as well.

2 Input

Input is a type of form control that BOOTSTRAP offers. You can design this control with the following options.

Presets-

Lets you select a preset style and then also modify its look and feel.

Background-

Use this to modify the background of an Input box. You can set different backgrounds of the box for Normal and Focused states.

Border-

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

Typography-

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

Shadow-

Lets you apply a shadow effect to the input box. You can also set different shadow effects for the Normal and Hover States.

Height-

You can also specify the height of the Input box. With the “More” option you can even specify the custom value for the height.

Width-

Use this to set the width of the Input box. With the “More” option you can also specify the custom value for the width also.

3 Pagination

Use this for styling the pagination of your template/website.

Presets-

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

Background-

Use this option to change 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 colour, a gradient, or an image on the background of the pagination.

Border-

You can design the border of pagination using this option. The border can be designed differently for the Normal, Hover and Active state of pagination.

Typography-

Lets you define the preferred text style for the pagination. You can also set different text style for Normal, Hover and Active state of the pagination.

Shadow-

Use this option to apply a preferred shadow effect to the pagination. Also you can apply different shadow effects for the Normal, Hover and Active states.

Margin-

Lets you specify the margin of the pagination.

Padding-

Use this to specify the padding of the pagination.

4 Breadcrumb

Lets you design the breadcrumb navigation of your template/ website just the way you want.

Presets-

You can choose a preset style of breadcrumb navigation and then modify its look and feel as you want.

Separator-

Use this to select a separator icon for breadcrumb.

More-
The “More” option allows you to specify a custom breadcrumb icon.

Background-

Use this to change the background of a breadcrumb. You can also apply a preferred colour, a gradient, or an image to the background of breadcrumb.

Border-

For designing the border of breadcrumb as per your need.

Typography-

You can also define the text style of the breadcrumb in the Normal, Hover and Active states.

Shadow-
Use this to give a shadow effect to the breadcrumb.

Margin-

Lets you set out the margin of a breadcrumb.

Padding-

Use this to add up the padding of a breadcrumb.

5 Block Quote

Use this option to design the Block Quote element of your template/ theme or website design.

Background-

Lets you modify or change the background of a Block Quote. You can apply a preferred colour, a gradient, or an image to its background..

Border-

You can design the border of a Block Quote as per your need.

Is Default:
Use this to set or apply a default style.

Typography-

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

Shadow-
Lets you apply a shadow effect to the Block Quote.

Icons-

You can also select the preferred icons for a Block Quote. And even browse your own custom icons and set preferred colour to those icons.

Margin-

Lets you specify the margin of a Block Quote.

Padding-

Use this to specify 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

You can customize  the BOOTSTRAP Alert messages. Lets you 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/ theme or website design. You can also change the background of a badge, design its border, and change its typography as well.

Background-

In addition, you can apply different backgrounds to the badges for Normal and Active states. Also you can set a preferred colour, a custom gradient or a custom image. Moreover choose a gradient and any image from the free stock of TemplateToaster.

Border-

Lets you design the border for badges with available options.

Typography-

You can also change the text style of badges for Normal and Hover states.

9 Line

Use this to design the Lines used in your template/ theme or website. You can choose Style, Thickness, and Colour of the line as you desire.

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

10 Headings

Use this to select the typography of Headings from H1 to H6 including colour, font size, alignment etc.

11 Paragraph

Lets you define the typography for the paragraphs.

12 Lists

Use this to set 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

You can also specify the typography of any table inserted on the page.

15 Check Box

Lets you modify the appearance of the default checkbox as you need.

Is Default-
Make sure to check this option if you want to apply the default style.

Style-

You can choose from two  different Style options as- Check and Fill.

Outer Border-

Use it to design the outer border of the checkbox.

Outer Shadow-

Lets you apply a preferred shadow effect to the checkbox.

Inner Fill/ Outer Fill-

Lets you add or change the checkbox fill. You can choose different colour/ gradient/ or image for inner and outer fills.

16 Radio Button

Use this to modify the look and feel of a radio button.

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

Outer Border-

Lets you design the outer border of a checkbox.

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

Inner Fill/ Outer Fill-

Use this to  add or change the Radio Button fill. Also you can choose a different colour/ gradient/ or image for inner and outer fills.

  • Was this article Helpful ?
  • Yes   No