A header is a horizontal panel usually located at the top of a web page (although vertical headers presented as a sidebar are not uncommon as well). It contains the logo and/or the name of the website and some navigation elements.
With Boxmode, you can either go with a header embedded in your chosen template or add a Header widget manually (if you start with a blank canvas). You can read about widgets and their general settings (how to add, move, resize, and delete them) in our Widgets Overview.
Adding the header
To add the header on your page, please follow these steps:
- Click on the + button in the Left Panel when in the editor;
- Choose a Header widget and pick a preferred widget template, if necessary.
- Drag the widget to the canvas and drop it wherever you need it (the drop area will be highlighted).
- When you have already dragged the widget, a window pops up with a request to add it to all pages or only to the current one.
In our Widgets Overview article, you can read about the widget’s other general settings (how to move, resize, and delete it).
Editing the widget
To start editing the Header widget, click on it to call out its controls. The widget editing menu contains three controls allowing you to customize the widget in multiple ways: Design, Layout, and Template.
Design
By clicking the Design control, you can set the Header widget’s visual parameters: border, shadow, and background color.
Border and Shadow toggle switches turn on and off additional design settings. For example, color, size, and radius are extra tweaks for a border; blur, distance, angle, and color are other settings for a heading’s shadow.
Layout
By clicking on the Layout control, you can change or adjust the general arrangement of elements inside the Header widget.
- Content alignment. Here, you can choose among three ways of how content aligns horizontally and vertically.
- Paddings. Use this control to specify space between heading elements.
- Make header sticky. Press this toggle switch to pin the widget to the top during scrolling.
Template
Here you can choose among several predefined header designs, depending on your needs and preferences.
Editing elements inside the widget
The Header widget includes multiple elements you can edit individually. For example, you can move, resize, edit, or delete the logo and Navigation Menu. To do it, click on the required element to call out its controls and choose the desired option. For more info on how to customize the widget, read our Navigation Menu widget article.
You may want visitors to quickly find contacts, policies, or links to other pages in your header. But to avoid visual clutter it’s advisable to add a footer too. You can find information about Boxmode’s Footer widget in our article.
We hope this guide helped you understand how the Header widget works. Now, it’s time for you to try it yourself.
Go to Editor