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
(Version 2.3.2 and higher)
The header builder is removed from Theme Options and to access it you must go to WordPress Dashboard> Deep> Header Builder.
As you can see in the image below, the frontend interface is fully functional and easy to use.
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 in the corresponding side of the header.
Now you can click on “+” 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 they are populated with elements.
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 and content position.
Styling: Complete settings for typography, background, box, color, hover, etc.
Class & ID: An option for advanced users so that they can customize the header as they see fit.
Create Simple Headers
In this video we will create a header like the classic demo: