What is a header? #

Headers appear at the top of most web pages. In general, sites have one standard header used for every page on the site – although some pages on a site may not have a header or need a custom header.

Edit an existing header’s design #

To edit an existing Header, go to any page at the front end, hover over Edit with Elementor, and select Header. This will open the Header’s location with the page builder.

You’ll see the following screen.

Let’s explain the elements in the header template.

Logo #

Click on the logo widget and reveal settings for logo. You can change the logo from here or from Customizer. To see how to change your logo read this article.

Main navigation #

To select the main menu choose from the dropdown list Menu. To manage menu items, use Menus from the dashboard. More explained in Working with menus.

You can style the main navigation with style options available.

Call to action button #

Call to action is a regular button widget. The current button is linked with a Quick Quote popup, see the Link option.

Responsive mode #

With page builder, we have the option to set up different styles for desktop, tablet, and mobile versions of the website. To enter responsive mode click on the responsive icon and choose the screen size.

If you click on the mobile icon, you’ll have a mobile preview and small mobile icons under editable options. That means you can set different values for the mobile version of the header.

When you finish editing, save changes and preview on devices to check if everything is correct.

What is a footer? #

The footer usually contains information your site’s visitors might find useful, such as your contact details, social icons, and location on a map.

Edit an existing footer design #

To edit an existing Footer, go to any page at the front end, hover over Edit with Elementor, and select Footer. This will open the Footer’s location with the page builder.

You’ll see the following screen.

Then use the same way as the Header for designing the Footer.