How to use the Header section

This article will show you how to use the Header section to customize the Header for your website in minutes. 

About the Header

The Header is one of the most critical parts of your website which contains the title, a navigation menu, a video or image, a search bar, a button, or more.

In the following sections below, we’ll show you how to add and customize your Header with EcomSolid.  

 


 

How to add the Header section to your page

Step 1: From the EcomSolid's Dashboard, head to the Theme Editor or Page Editor.

Step 2:  Access the Library from the top bar of the Editor Page.

 

 

Next, navigate to Sections > Header and look for your preferred Header section.

 

 

Hit “Insert” to add it to your Editor. 

Configure the Content Tab

After that, you will find the Header added at the top of your page. Click on the add-on to start configuring the settings.

Logo

Under the Logo section, you’ll see options to choose your site’s logo by text or image. Customizing the logo is the first step towards creating a custom header.

Select Image to upload the image for your logo. There are two options for you:

  • Browse from your computer: Hover the image and click on the Pencil icon. This option lets you choose an image from your computer to upload.
  • Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.

Logo Image Alt Text: Input the alt text for your image for SEO purposes.

 

 

Otherwise, choose Text and input your preferred text for the logo. 

 

 

Hit More Settings to insert a hyperlink to your logo. 

 

 

Menu

You will be able to customize your navigation bar at this point. To begin, click on “Edit Menu.”

 

 

 

From here, double-click on the menu item to edit the text label. Plus, you can hit the responding icons to remove, duplicate and add hyperlinks to the menu items.

Actions

Toggle on/off the corresponding switch to show/hide the items on the right side of the Header.

 

 

Configure the Design Tab

Navigate to the Design tab to style your header further.

General

Sticky Header/ Transparent Header: Select Enable to turn on the Sticky/ Transparent Header option.

Logo Height: Use the slider to adjust the size of your logo.

Header offset: Use the slider to adjust the distance between the Header and top. 


 

Colors

Select a color or enter a hex color code for the different colors components of your Header. 

 

Typography

Input the number for the font size of your navigation as you want.

 

 


Padding and Margin

In the Padding and Margin parameters, each of them has four empty boxes that allow you to fill in the value for four directions: top – right – bottom – left.

 

 


Animation

Select the animation for your Header from the dropdown menu. You can click on “Preview” to see how the animation works on the live page. 

 

 


That's it! If you run into any problems when editing, please get in touch with our Customer Support via email or live chat.


Was this helpful?