A beautiful and powerful header is very important in web design. The logo, navigation and each element that you need, can be design in header with a new feature in Deep Theme: Header Builder.
How to use Header Builder
To get the Header Builder please go to WordPress Dashboard > Deep > Theme Options > Header Builder.
You have two way for edit header: Back-End or Front-End Header Builder. If you want to see your changes live, you must go to Front-End Header Builder (number 4 in image below).
Drag and Drop Editor
Header builder is a tool which lets you create and modify limitless your website header using a visual drag & drop editor.
This also includes features like customized background, images, colors, icons, and useful elements.
- Panels: You can see the different menus on the different devices: desktop, tablet, mobile and also sticky menu with a different design as you needs. If you click on each one of them, you can see how the header will look on that device. However, the settings will be the same for all of them.
- Row: Each panel has some rows (top bar area, header area row 1, header area row 2, header area row 3) that they can having settings individually and can be shown or hide.
- Cell: Cells are left, center and right boxes in every rows that shows the elements in the left, middle or right position of the header.
Now you can click on “+” button and see all available elements and click on each one you want. The element place on the cell and can drag and drop on every cell of every row.
Display and Settings in Header Area
Top bar and the main header which will be appear if any elements are put in it.
Each row has a button (eye icon) to display or hide. After you activate a row with that button, 3 cells will be available that makes up your header with the elements.
Header Area Settings
You can style the header by clicking the settings-wheel. There are 3 tabs in it:
General: Set the container and content position.
Styling: Very complete settings for typography, background, box, color, hover, etc.
Class & ID: An option for advanced user that they can customize header in their rules.
Create Simple Header
In this video we will create a header like classic demo: