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.
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.
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.
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.
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.
Select a color or enter a hex color code for the different colors components of your Header.
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.
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.