Deep’s Powerful Header Builder
A beautiful and powerful header is very important in web design. The logo, navigation bar, and every element that you may need can be designed in the header with Deep’s new feature which is conveniently named: Header Builder.
How to use Header Builder
Drag and Drop Editor
Header builder is a tool that lets you create and modify your website’s header using a visual drag & drop editor.
It also includes features like customized background, image, colors, icons, and useful elements.
- Panels: You can see different menus on different devices (desktop, tablet, mobile) plus having a sticky menu on the top and designing it however you like. You can see how the header will look on each device by clicking on them. However, the settings will be the same for all of them.
- Row: Each panel has a number of rows (top bar area, header area row 1, header area row 2, header area row 3) that can be set up individually. You can show or hide every row that you like.
- Cell: Cells are boxes to the left, right, and center of every row that show the elements on the corresponding side of the header.
Now you can click on the “+” button and see all the available elements and select each one you want.
Display and Settings in Header Area
The top bar and the main header will only appear if any elements have been added to them.
Each row has a button (the eye icon) for displaying or hiding. After you activate a row with that button, three cells will be available that you can use to add elements to your header.
Header Area Settings
You can set a style for the header by clicking the gear icon. It has three tabs:
General: Set the container width, padding, and content position.
Styling: Customizing elements style such as typography, background, box, color, hover, etc.
Class & ID: An option for advanced users so that they can customize the header as they see fit.