The Powerful Header Builder on Deep Theme

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

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

Webnus Header Builder

Webnus Header Builder

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.

Drag and Drop Editor

  1. 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.
  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 having settings individually and can be shown or hide.
  3. 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.

 

Elements

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.

Header Builder Elements

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

Header Area Settings

You can style the header by clicking the settings-wheel. There are 3 tabs in it:

Header Area Settings

General: Set the container and content position.

Styling: Very complete settings for typography, background, box, color, hover, etc.

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:

lifestyle review

  • header-builder
  • Overall Score

No Comment.