Header Design Guide

THE END GOAL IS THIS

1st phase 

Step  1 - Right now you are on the editor screen. So let’s add a section on the editor. (As you can see below the screenshot)

After that when you click on the section. Now it looks like this. (below screenshot)

Step  2 - Then add the “2 columns” component in the section.

After clicking the “2 Columns” component then it looks like this. (below Screenshot)

Step  3 - Then add the “2 columns” setting in the first column (to put the Phone icon and the second one is for  that number)

After putting the “2 Columns” setting on, it looks like this. (below Screenshot)

Step 4 - Now add an “icon” element in the 1st column and add the “paragraph” element in the 2nd column.  

As you see the white dot in the below screenshot to adjust the rows(by dragging left and right).

After adjusting it will look like this. Then simply add an “icon” and “paragraph” element. (screenshot below )

1.     

   After clicking on the “icon” element a person's icon will appear. In order to change the “icon” just double click on that icon, these icons will appear.

       

 Choose a suitable icon from the available icons displayed.

2.     

   After double-clicking on the paragraph text. It appears like this and in order to change that text simply double click in that text and write whatever you want to write. You can change the text setting too as we have marked blue lines in the below screenshot.

       

Step   5 - Change the background of the section. By simply clicking on the outer Purple Border section, you will find a setting option(See the blue arrow in the image below) where you can change the BG color of the section.  

The yellow line indicates the Background options. As you can see below the screenshot you will find 1,2,&3 yellow boxes image BG, color BG, Gradient BG, respectively. 

Step   6 - Change the text and icon color because it’s not visible in black. Simply click on the setting option and change the color of the icon and text. 

(1st icon screenshot)

Navigate to Icon Settings >Color.

Choose the Icon color from the color templates or Use color Hex code

(2nd text screenshot)

You have to change only the things which we marked as a Yellow line.

Now your 1st section will look like this. (Below screenshot)

Step   7 - Now click on the “+” button in the Second column (See the below screenshot) and these multiple options will be available on the left-hand side.

And simply click on the “SOCIAL LINK BLOCKS” Element and it will appear in the 2nd column.

Step 8 - You have to change the alignment of the social blocks by clicking on the social block element Gear Settings (See the below screenshot)

Step  9 - Now let’s reduce the size of the icon and give a background color similar to the background color of the section. 

Reduce social block Size screenshot

Change Social Link color screenshot.

Step  10 - Let’s give padding(0 px) to the row inserted in the First column of the Two-column row.

Step  11 - Now Your first section is ready.

2nd phase

Now let's learn how to make the 2nd Phase of Header Design.

Step  1 - Add another section below the first section.

As you can see in the “+” button in the left corner. Simply click on it and drag that section which We marked red and put it below that section. 

You can also add a new section below the first section by hovering on the first section and selecting the add section button, seen when you hover on the first section.

Step  2 - Then add 3 rows in the section. Let’s click on the “+” button(As We marked it as a box from the left-hand corner side) -> select the row and drag these “3 columns” rows.  

Step  3 - So let’s start with the 1st column. Hover your cursor to the first column and you will find a “+” button simply click on it and add an image element into that column.

Now just change the alignment from center to left. (Now your 1st row is ready)

By simply clicking on the setting button as you can see below.

Step  4 - In the second row. Follow the previous steps, click on that “+” button and multiple options will appear, and simply click on the sub-headline. Add a sub-headline in it and change the text by double-clicking on the text.

Step  5- After writing the text. Make 3-4 clones at your convenience and set them. See the below screenshot to make a clone.

And after making the clones adjust the block by this white dot.

YOU CAN ADJUST THE Column Width  FROM THIS DOT BY DRAGGING IT  LEFT AND RIGHT.

Here is your 2nd row completed (2nd means- home, about us....)

Step  6 - The last one is to add a button element to change the text just by double-clicking on the text. Now go to settings and select the themes of a button and you will find that one. (See in the below image) 

1st image(Add a button)

2nd image (change the text of the button by double-clicking on it)

3rd image(change the theme of a button- see the below screenshot) When you click on “Click Me” Button  you’ll find so many themes you can pick anyone.

And if you want to make something similar like that manually 

(here you can see- https://www.loom.com/share/7e4e1461a2f84cfc9cbbce8d336720cf) 

You can change to any color.

Step  7 - put an image in that row. By double-clicking on the image you will find an option where you can upload the image to the page.

Now your image is added and your header section is completed.

NOW, DO PRACTISE TO HONE YOUR SKILL.