TemplateToaster allows you to easily edit and customize the header design and style for your template/theme or website design. You can easily manage the presets, background, height, border, width and much more details of the header tab using the TemplateToaster software.
Presets
TemplateToaster offers you pre-designed styles of headers to choose from. You can select the pre-designed header style from the available options. Moreover, you can also customize the header styles as needed for the template/themes or website designs.
Header Position
You can edit the header position. The header can be positioned above or below the menu, or you can also place the menu inside the header. And in case you do not require any header you can select the ‘No Header’ option as well.
Background
You can easily select your preferences for colour, gradient, or image to the header of the background of the template/theme or website. TemplateToaster features many extended background options:
Color Picker
You can make use of the ‘Colour Picker’ option and pick the background colours and customize it accordingly. Here is the full detail on the colour picker.
Custom Gradient
With help of ‘Custom Gradient’ you can manage preferences like angle, colour, and offset choices. You can save the gradient as well for future use. To get more information on creating and saving gradients click here.
Browse Images
You can easily apply an image in the background of the header. TemplateToaster has in-built free stock images. You can also browse more images and edit them to customize them as you like. You can find the TemplateToaster image editor to edit and customize the browsed images as you want.
Again you can find the TemplateToaster image editor to edit and customize the browsed images as you want. For details, see this.
Height
With this option, you can change the height of the header. You can also make the height of the header fit the screen. Here are a few options you can find:
Fit To Screen –
If you select the ‘Fit to Screen’ option the header will automatically adjust to the height according to the browser viewport.
More –
You can mention the specific height by clicking on the ‘More’ option.
Width
You can easily change the width of the header. You can find three options to specify the width of the header:
Full Width-
Sets the full width of the header which is equal to the width of the browser window.
Equal To Page Width-
Makes the width of the header equal to the width of the page. This option is set by default.
Custom Width-
- This option lets you specify the custom width of the header as you need.
Note: In case you select the fixed width layout option for the template/theme or website. Then you can set the custom width in pixels. Otherwise, you can choose the Fluid Width layout option for your template/website. If you select this option and set the custom width in percentage.
Border
You can use this option to customize the border of the header. You can choose from various options as Style, Thickness, Radius, and Colour, as per your customization needs.
More –
If you click on the ‘More’ option you will find more border customization options. Each option has a functionality particularly for designing the border.
Margin
This option allows you to set the margin of the header across all the sides i.e.top, bottom, left, and right.
More
You can use the ‘More’ option to specify the custom margins.
Texture
The Texture option lets you apply the texture to the background of the header. You can select the texture pattern from the options given by TemplateToaster.
More
Select the‘ More’ option to customize the transparency of the texture. For more details on each option click here.
Effects
You can apply the effects to the header of the background using this option.
More
You can also customize using the More option and change the transparency. Click here to know more.
Shadow
This option lets you apply the shadow effect to the header of the background.
More
Using this option you can customize the colour, angle, blur, and distance of the shadow effect using the More option. Click here for more details.
Image
- In addition to the background images, TemplateToaster provides you with the option to add foreground images in the header to make the template/theme, or website design looks more stunning and professional. You can use this option to apply an image on the header foreground using this option.
More
You can use the ‘More’ option to link an image to a custom URL. The link can be configured to open a new window. Moreover, you can also see the transparency of the image and also rotate it around the X or Y axis.
Foreground Image Formatting –
- You can also do foreground formatting of the image. For this, you need to click on the image, and then a format tab will open up. This format tab lets you change the alignment, i.e. the height, width, and angle of the foreground image. You can also rotate the X and Y coordinates of the image as needed.
Text Areas
You can use this option to draw the text area on the headers. This option lets you easily add custom text, images, and even video clips in the text area. Simply double-click on the text area to modify the dimensions, add text, add the background image, modify colour, and more. In addition, you can also format text.
Text Area Formatting
- This option lets you format the text area. A format tab will open up where you can find the options to customize the alignment, height, angle, and background of the text area. In addition, you can also apply effects and borders to the text area.
Add Video
This option lets you add video on the header to give a stylish and attractive look to the template/theme or website design. In addition, TemplateToaster also gives you the option to edit the video with various options including Pause/Play, Mute, and Repeat options to make it easier for the users to access the videos.
Title
This option lets you show or hide the title in the header. By default, this option is checked but you can also untick it.
Title Formatting –
-
- This option lets you format the title of the text. To use this option simply click on Title, and the Format tab will open up. You can use the format tab to change the alignment, angle, typography, and heading tag (H1, H2, H3, up to H6) of the Title.
Slogan
This option lets you either show or hide the website slogan on the header. By default this option is unchecked but you can change it.
Slogan Formatting –
- Using this option you can format the Slogan. Simply click on the Title, and the format tab will open up. This format tab gives you options to change the alignment, angle, typography, and heading style (i.e. H1, H2, H3, up to H6) of the slogan.
Logo
You can use this option to add the logo of your business or brand in the header. You can also select the logo stock from the available options given by TemplateToaster. And you can also browse the logos.
More –
The ‘More’ option lets you browse your logo and add it to the header. You can also use this option to link the logo with the URL.
Logo Formatting –
- This option lets you format the logo. Simply click on the logo and a format tab will open up. You can use the format tab to change the alignment, height, width, and angle of the logo.
Social Icons
You can configure the social media account in the header section of the template or website. You can select the icons from the in-built social icon stock by TemplateToaster. In addition, you can also browse your custom social icons
Social Icon Formatting –
- This option lets you format the social icon of the logo. For this you need to click on the applied icon and the format tab will show as given below. The format tab provides you with options to change the alignment, height, width, and angle of the icons.
