Presets

See pre-designed styles of the header. You can choose a pre-designed header style and modify its look as per needs of your template or website.

Header Position

Changes the header position. Header can be placed above or below the menu, or place menu inside the header. Even if you don’t want any header then “No Header” option is also available.

Background

Use to apply a preferred color, gradient, or image to the header background of your template or website. TemplateToaster features the following extended background options –

Color picker- You can make use of a color picker to choose a background color. Here is the full description of it.

Custom Gradient

You can create custom gradients with a preferred angle, color and offset choices. You can save the gradients as well. See this for more information about creating and saving custom gradients.

Browse Images-

You can apply an image in the background of the header. TemplateToaster has an inbuilt stock of free images. You can browse and even edit those custom images.

TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

Height

Changes the height of the header. You can even make the height of the header fit to screen.

Fit To Screen –

If you choose ” Fit To Screen” option, the header will automatically adjust its height according to the browser viewport.

More –

You can specify custom height by clicking “More”.

Width

Changes the width of the header with. Three options are available for specifying the width of the header:

Full Width-

Sets the width of the header equal to the width of the browser window.

Equal To Page Width-

Makes the width of header equal to the page width. This option is activated by default.

Custom Width-

Allows you to specify the custom width of the header as per your need.

Note: If you choose Fixed width layout for your template/website, you can set the custom width in pixels. Otherwise, if you go for the Fluid width layout, you can set the custom width in percentage.

Border

Helps to customize the border of the header. You can set Style, Thickness, Radius, and Color options according to your requirements.

More –

“More” is for more border customization options. See this to know the usage of every option given for designing the border.

Margin

Sets the margin of the header for all the sides i.e. top, bottom, left and right.

More – You can specify custom margins using “More”.

Texture

Applies a texture to the header background. You can choose the texture from the given patterns.

More

Even you can customize the transparency of texture with “More”. Here are the more details.

Effects

Applies an effect to the header background.

More – You can even customize the transparency of the effect with “More”. Here are the details.

Shadow

Applies a shadow effect to the header background.

More

You can even customize the color, angle, blur, and distance of the shadow effect with “More”. Here are the more details.

Image

In addition to the header background image, TemplateToaster facilitates you to insert foreground image(s) in the header to make template/website more professional. You can apply an image on the header foreground using this option.

More –

With “More”, you can even link the image to a custom URL. The link can be configured to open in a new window. If needed, you can change the transparency of the image and flip it around X or Y axis.

Foreground Image Formatting –

You can do formatting of the Foreground Image. For this, click the image and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the foreground image. Even you can Flip the X and Y coordinates of the image as per your need.

Text Areas

Draws the text areas on the header. You can add custom text, image, and video in your text areas. Double click on the text area to modify its dimensions, add text, add the background image, color and a lot more.  Text formatting can also be done.

Text Area Formatting –

You can do formatting of Text Area. For this, click the text area and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, height, angle and background of the text area. You can even apply effects and border to the text area.

Add Video

Adds a Video on the header to give a modern and attractive look to your website/template. TemplateToaster also provides the Edit Video, Play/Pause, Mute, Repeat options for more ease to the user.

Title

Use this option to show or hide the website title in the header. By default, this is checked.

Title Formatting –

You can do formatting of the Title text. For this, click the Title and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, angle, typography and heading style ( H1, H2, H3…H6) of the Title.

Slogan

Use this checkbox, to show or hide the website slogan on the header. By default, this is unchecked.

Slogan Formatting –

You can do formatting of Slogan. For this, click the Title and a format tab will appear as shown below. This format tab provides you the options for changing the alignment, angle, typography and heading style ( H1, H2, H3…H6) of Slogan.

Logo

Applies the logo of your brand in the header. You can choose the logo from TemplateToaster’s logo stock or you can even browse.

More –

“More” is to browse your own logo. You can also link the logo to a URL.

Logo Formatting –

You can do formatting of Logo. For this, click the Logo and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the Logo.

Social Icons

To configure a social media account in the header section of your template or website. You can choose the icons from the inbuilt icon stock or you can browse your own custom social media icons.

Social Icon Formatting –

You can easily format a Logo. For this, click the applied icon and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the icons.

  • Was this article Helpful ?
  • Yes   No