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.

  • Was this article Helpful ?
  • Yes   No