Header and Footer template in Elementor
> Introduction to Elementor, Templates
- What is the Page Header?
- What is a Footer?
- Essential parts of a website
- How to create a Header or Footer template from the Elementor Pro Theme Designer
- Display conditions for global templates in the Theme Designer
- Outline of conditions
- Examples of display conditions
What is the Page Header?
The page header of a website is the top area found on each page of your website. Generally, the page header is the same throughout the website. However, there are also websites that have different headers for different sections of the website.
The masthead can also play an important role in promoting your company’s brand identity by incorporating elements such as company logo, typography, colors and general brand language.
The header also contains functional options such as site navigation, site search, a shopping cart (for sales sites), call-to-action (CTA) buttons and other features that enhance the user experience and increase conversion rates.
What is a Footer?
A footer is an area located at the bottom of a web page. Like headers, they tend to appear consistently throughout the website, on all pages and posts.
Footers often receive fairly marginal attention, which is really a potential waste as they are repeated on every page of the site. They are as important as the headings.
The footer design, depending on the settings you choose, can display useful and important information, such as a newsletter subscription form, copyright information, terms of use, privacy, cookies, a sitemap, contact information and more.
Essential parts of a website
The Header and Footer are two essential elements of a website. Users already take it for granted that every website has these two blocks and have a clear idea of the content they expect to find in each of them. This is why we should not invent or be too original when we are creating them, because there is something much more important than design or originality and that is usability. Common characteristics:
- They are displayed on all pages and posts on the website except landing pages.
- Generally they do not vary from one page to another, although there are exceptions.
- Both have a fixed position, the header is at the beginning and the footer at the end of the document.
WordPress features this and all themes that are installed by default include customizable templates for the header and footer. The vast majority of WordPress themes also include these two templates. The problem is that this type of templates are very limited in terms of customization and we have to settle for the options included by the creator of the theme.
On the other hand with the basic version of Elementor we can use a blank canvas page structure (Elementor canvas), which does not include the header and footer that the default theme has, create our own Header o Footer and copy them to all pages of the website. The problem is that this is not functional at all, because if we had to make any change we would have to do it as many times as pages we have.
With Elementor Pro we do not have that problem because it goes further and has a Theme Layout Designer o Theme Builder that allows us to create from scratch the header and footer and assign it to all pages and publications of the website. This way when we have to modify it we will only do it once.
Elementor Pro also allows us to have different headers or footers in the same website, but we will see that later.
How to create a Header or Footer template from Elementor Pro Theme Designer
We can create a Header or Footer easily from the Theme Layout Designer following these steps:
- WordPress administration panel in the Templates menu > click on Theme Builder
- You can either click on the button next to each category or click on Add new and choose Header or Footer.
- You can now choose a pre-made Header or Footer template or create one from scratch.
- Once you have made the necessary changes to the Header or Footer design, click the Publish button and choose where to publish the Header or Footer. The default value is All site.
- That’s all! You can now see your handmade header or footer live on your site.
We can use the predesigned templates offered by Elementor Pro or design from scratch with the builder. We can also use a predesigned template and then modify it to our liking.
Subscribe and receive notices of new content
Related topics
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}