The Powerful Header Builder on Deep Theme

A beautiful and powerful header is very important in web designing. The logo, navigation bar and each element that you need, can be designed in the header with a new feature in Deep Theme: Header Builder.

How to use Header Builder

From version 2.3.2,
The header builder is dropped from the theme options page and to access header builder you must go to WordPress Dashboard> Deep> Header Builder.
As you can see in the image below, you can fully work with the frontend editor and enjoy it.

Drag and Drop Editor

Header builder is a tool which lets you create and without any limits modify limitless your website header using a visual drag & drop editor.

This also includes features like the customized background, images, colors, icons, and useful elements.

1. Panels: You can see different menus on different devices: desktop, tablet, mobile and also a sticky menu with a different design as you need. If you click on each one of them, you can see how the header will look in that the device. However, the settings will be the same for all of them.
2. Row: Each panel has some rows (top bar area, header area row 1, header area row 2, header area row 3) that they can have settings individually and can be shown or hidden.
3. Cell: Cells are left, center and right boxes in every row that show the elements in the left, middle or right position of the header.

 

Elements

Now you can click on “+” button and see all the available elements and click on each one of them you want.

Display and Settings in Header Area

Top bar and the main header which will 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 build your header with the elements.

Header Area Settings

You can set a style for the header by clicking the settings-wheel. There are 3 tabs within:

General: Set the container and content position.

Styling: Very 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/as they like.

 

Create Simple Header

In this video we will create a header like the classic demo: