the banner image of header in wordpress article

Design a Header in WordPress: Three Simple and Professional Methods

They say that in web design, the first impression you make on your audience is crucial. When visitors land on your website, their eyes naturally go to the top of the page. Thatโ€™s where the design of your WordPress header plays its key role. If you donโ€™t pay enough attention to designing your siteโ€™s header, you might struggle to attract a large number of users. To design a header in WordPress, you may not need to write code or add anything special to your site, but knowing the right methods to get it done is essential. The WordPress content management system dynamically design a header in WordPress by combining the site themeโ€™s structure with the database. This means it fetches links for elements like the logo, navigation menu, and more from the database and incorporates them into the themeโ€™s design.

Itโ€™s hard to find a website that doesnโ€™t need a header. Visitors generally expect to see some specific elements at the top of a site (the header section). Some of the most common elements include:

  • Site Branding: This usually includes the siteโ€™s name or logo placed in the header. Additionally, colors, fonts, and other design elements that reflect your siteโ€™s identity and brand are often showcased here.
  • Site Navigation: If your website has more than one pageโ€”which is usually the caseโ€”users expect to find the siteโ€™s menu or navigation structure in the header.

In the world of WordPress, numerous themes have been designed and developed for websites of various types. Depending on the type of website and the field you operate in, you might use any of these themes for your site. However, regardless of the theme you choose and install, you will need to design the header in WordPress. Using the available elements in the theme and the WordPress ecosystem, you must successfully create the site’s header.

This is why we have written the article about how to Design a Header in WordPress to introduce you some methods for creating a site header. The focus of this article is not about how to design a header, but rather on exploring the different approaches you can take. The specifics of the design depend on the creativity of the website designer and the needs and functionality of the intended website.

Simple Ways to Design a Header in WordPress

The way you design a header in WordPress depends on the type of theme your site is using. WordPress themes are generally divided into two types: Block Themes and Classic Themes.

In block-based themes, every part of the site, including the header, is built using WordPress blocks. Blocks refer to structures and elements that are added to the site through the WordPress editor (Gutenberg). Essentially, site pages are created by arranging and aligning these blocks together. With such themes, you can design different parts of the site by modifying, rearranging, adding, or removing these blocks.

On the other hand, Classic Themes use programming languages like PHP to define the structure and layout for different parts of the site, including the header. In these themes, you donโ€™t manually add blocks to create the header. In fact, many classic themes donโ€™t offer this option.

Instead, you can make changes using the Customize section in WordPress. This allows you to adjust things like colors or decide whether to show or hide certain elements. However, compared to block themes, classic themes often give you fewer options for customizing the header exactly the way you want.

In addition to using block themes and classic themes, there are other ways to create a site header. One popular method is using page builders in WordPress. Over time, page builders have become increasingly popular in the WordPress ecosystem.

Some well-known examples include plugins like Elementor and Divi Builder. With these tools, you can design a header in WordPress in a more flexible and customized way. In the rest of this guide, weโ€™ll explain each of these methods for creating a header in more detail.

Creating a Header in Block Themes

As mentioned earlier, WordPress uses the Gutenberg editor to edit pages and create the necessary elements. Each of these elements is called a block. Titles, paragraphs, images, lists, and more are all considered blocks in this built-in WordPress editor.

On block themes, these blocks or widgets play a key role. You can add or edit these blocks in different sections of your WordPress theme, including the header. This means you can design and edit the header directly from the WordPress dashboard without needing to modify theme files. This feature is what sets block themes apart from classic themes, offering greater flexibility and ease of use.

Using the Editor section to Edit the Header

If you’re using a block theme (like the UniBlock theme) on your site, youโ€™ll find an option called “Editor” in the Appearance menu of your WordPress dashboard.

Editor part in a block theme

When you click on this option, a preview of the entire site (including the header) will appear. By clicking on the header section, you can easily edit it. Editing the header is similar to working with the Gutenberg editor on any other part of your WordPress site. After clicking on the header, youโ€™ll enter the Gutenberg editor. In the image below, you can see the header of a sample site using the Site Title and Navigation blocks within the same row in the header.

editing header with Editor part in a block theme

Using the features of this editor, you can, for example, remove the “Site Title” block and replace it with another block or blocks of your choice. For instance, you can replace it with an Image block and add your siteโ€™s logo there.

adding image block

In other words, you decide which elements and layouts should be included in your siteโ€™s header. You donโ€™t need to edit the code or theme files for this. Instead, you can make these changes using the Gutenberg editor directly within the WordPress dashboard.

Creating a Header in Classic Themes

Since the introduction of the “Customizer” section in WordPress version 3.4 in 2012, there have been many changes. However, one thing has always remained the same: what you can access in the Customize section depends on the theme youโ€™re using. In fact, itโ€™s the theme developer who decides what you can and cannot edit.

Working with classic themes is different from block themes. You donโ€™t have the freedom to add or remove elements and decide on the design yourself. Instead, the design is already built into the structure and files of the classic theme. You can only customize and modify the design using the options provided by the theme.

Using the Customizer in WordPress

To customize your theme, go to the Appearance menu in your WordPress dashboard, then click on Customize.

Customize part in wordpress dashboard

As mentioned earlier, the content of this section will vary depending on the theme you are using. One of the sections that are commonly found in most themes and is related to header design is Site Identity.

Site Identity part in the wordpress

In this section, you can usually define your siteโ€™s logo. You can also set the site title and tagline here.

select logo for the site

After clicking the “Select logo” option, as shown in the image above, you can choose your desired logo from the Media section in WordPress. This means you first need to upload your logo and then link it to this section. You can also delete or change the logo from this section later.

change or remove the logo of a wordpress site

The logo is just one part of the elements you may need when creating your siteโ€™s header. Using other options in this section, you can determine which items will appear in your siteโ€™s navigation menu. Some themes even offer several pre-designed header layouts, and by selecting one, your header will automatically adjust to that design.

Next, weโ€™ll explore the third method to design a header in WordPress: using page builders.

Designing a Header in WordPress with Page Builders

Page builders are very useful in WordPress. Nowadays, most websites use one of the popular page builders to design their pages. In addition to the built-in Gutenberg editor, other well-known page builders like Elementor and Divi Builder are available to help you build different pages and sections of your site.

However, keep in mind that not all page builders are compatible with every type of theme. Specifically, if you are using Divi Builder, it is highly recommended to use the Divi theme as well, as it offers the best compatibility with this page builder.

These page builders have a feature that allows you to design the header, footer, or other sections of your website, and usually, the custom header you create will override the default theme header. This means the themeโ€™s original header will no longer be displayed, and the header you design using the page builder will be shown instead. This gives you the freedom to implement your preferred elements and design.

To design a header in WordPress using a page builder like Divi Builder, after installing it on your site, go to the “Divi” section in your WordPress dashboard menu and enter the “Theme Builder” section.

theme-builder part in divi

In this section, you can create different templates for various parts of your site. If you want a “global header” for all pages on your site, you should edit the Global Header under the Default Website Template section.

global header in divi builder

Alternatively, you can create a new template for each page or section of your site and edit the header for that specific page. For example, by creating a template for your store and selecting the Edit Header option, youโ€™ll be transferred to the Divi Builder page builder.

edit header in shop page

In this page builder and in this part, just like when creating pages for your site, youโ€™ll have access to all the elements of Divi Builder to design your header. You can add any element you need to the header structure. For example, we used the Menu and Search elements for our hypothetical site. You can see the “wireframe” structure of the header design in the image below.

header structure in divi builder page builder

Depending on the menu you defined in your WordPress dashboard under Appearance and then Menus, your logo and other elements used in your header design will vary. The design created for this articleโ€™s example is shown in the image below.

designing a header in WordPress with page builders

Such features are usually available in most page builders. In Elementor, you can go to the “Templates” section and then “Theme Builder” to start building your siteโ€™s header. However, this feature is part of the “Pro” version of Elementor and is not available in the free version.

design a header in elementor

Conclusion

In this article, we discussed the topic of designing a header in WordPress and outlined three different methods. These methods largely depend on the type of theme (classic or block) you are using for your site. Additionally, whether or not you use page builders in WordPress can also influence your choice of method for creating the site header. If youโ€™re new to WordPress, we recommend reading the book “WordPress for Beginners” to increase your knowledge of this content management system. A Persian version of this article is in the “learnblog” website.

Leave a Reply