Add and customize the header widget
A header is a horizontal panel usually located at the very top of a web page (although vertical headers presented as a sidebar are not uncommon as well). It contains the logo or/and the name of the website and some navigation elements. A header is the first thing that a visitor sees when arriving to your website. It makes the first impression on your audience, makes your site recognizable, and provides users with controls to navigate your site.
With Boxmode, you can either go with a header embedded in your chosen template or add a header widget manually (in case you start with a blank canvas).
Adding a header to a page
To add the header widget to your page:
- Click the “+” icon in the left sidebar when in the editor;
- Choose “Header” and pick a preferred widget template;
- To add the widget, simply drag it to the canvas (the widget selection menu will automatically disappear) and drop it wherever you need it (the drop area will be highlighted).
Note: To cancel the process, press “Esc” on your keyboard while dragging the widget.
Moving the widget
To move the widget to a different area of the page, click on the widget to call out its controls. Click and hold the “crossed arrows” icon and drag the widget to any other location on the page. The drop area will be highlighted on the canvas.
Resizing the widget
To resize the widget, simply highlight it and drag one of its anchor points up/down or left/right until you get the desired result. You can also adjust the widget’s padding in a similar way. Hover your cursor over the area around the anchor point (it will become highlighted as a half circle) and drag it up/down or left/right, accordingly.
Editing the widget
To start editing your header widget, click on it to call out its controls. Then hit the “Edit” button to open the editing menu.
The widget editing menu contains three tabs, allowing you to customize the widget in multiple ways.
Here you can choose among several predefined header designs depending on your needs and preferences.
This tab allows you to change or adjust the general arrangement of elements inside the header widget. You can control content alignment, set widget paddings, and pin the widget so that it doesn’t disappear from the screen on scrolling.
In this tab, you can set the visual parameters of the header widget, such as a border, shadow, and background. Toggle the corresponding switches on to see additional options.
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, navigation menu, or “Subscribe” button. To do it, simply click on the required element to call out its controls and choose the desired option.
Deleting the widget
To delete a header from the canvas, click on the widget to call out its controls and hit the “Trash bin” icon.
Theory is good, but practice is better!