focus on visual content is one of the most important elements that has been adopted recently in designing websites in a professional manner, as it constitutes a fundamental attraction factor for the target audience and visitors in general, as it is responsible for creating a good first impression on them, and it also provides a distinctive browsing experience. One of the best and most attractive types of visuals is the Hero Section. Why is that? This is what you will discover between the lines of this article.
We will learn what the hero section is, then we will talk about its benefits and its role in attracting visitors, and finally how to design it from scratch.
What is Hero Section?
When entering websites, the first thing that draws attention is the large background located under the navigation bar. This background is called the Hero Section, and it serves as the main interface of the site. This section resembles the hero for the site owner, as it is what is most highlighted by the visitor.
Although it is often an image, the hero’s background may be other types of display, such as a video, animation or illustration as well. The hero background usually includes text or a call to action (call-to-action) to highlight a marketing statement encouraging visitors and urging them to take a specific action, whether that is through browsing, purchasing, or any service provided by your site.
The hero section plays a key role in website design, as it is the first meeting point between the user and the site, and from it the visitor’s first impression is formed. Where do its benefits and importance stand out?
Hero Section benefits on landing page
Hero section designs have a great impact on users, as they are the first thing the user sees when entering the site. They also control the user’s choice to discover the site and delve into it or leave it immediately. Therefore, it is a fundamental and important factor in ensuring that the user is attracted as well as getting his attention.
The importance of designing the hero background on landing pages is highlighted . These are the pages to which a visitor is transferred after clicking on a link, such as those links found on search engines or advertisements on websites and social media sites, through the following:
- Focus on the idea of the site without distracting attention: One of the best ways you can use to introduce the purpose or idea of the site is to use a prominent background. Drawing attention to the general content of your site allows you to attract the largest number of browsers and turn them into permanent visitors.
- Simplified and direct introduction to the site: The correct use of the hero section makes it more targeted to visitors by drawing their attention to the idea of the site in a simple interactive manner, where the hero’s background explains through the expressive image and direct introductory text what the site is and its purpose so that the visitor realizes that your site is what he is looking for.
- Multiple design styles and shapes: This is one of the most prominent advantages that you can get when using the hero background on your site, as it gives you the ability to choose many different types and shapes of designs according to your need, depending on the creativity of the designer and the variety of templates used to make them, which makes your site unique and prominent in its design. From all other competing sites.
- Display the content clearly: The background of the hero section on the landing page provides a simple and clear user experience for visitors and users, as the idea of the general content of your site is displayed on it in a clear and direct way, unlike other methods that may display one content at the expense of another; Which may distract the visitor’s attention and cause him to skip the page directly.
- Usability on all types of websites and electronic devices: Unlike carousels and sliders , the hero section background design is compatible with all types of websites, whether on tablets, smartphones, or even computers, and is characterized by fast opening and easy browsing. Without technical problems occurring during its display.
- Increased conversions: The backgrounds and designs adopted in the hero section are considered more interactive than other types of home page designs, and this is mainly due to the visitor’s reliance on visual browsing when he first visits your site. Using a high-quality background with short, direct text on the landing page helps to leave a good first impression and accurately understand the idea of the site.
Let us now move on to the practical steps to explain the ways to design the hero section in WordPress, through 3 different methods.
How to design a hero section in WordPress
The methods and tools that you can use to design the hero’s background on the WordPress platform vary, as an example of this:
1. Design with Genesis Block
The easiest way to design a hero background in a simple way is to use the Genesis Block plugin ; It is a set of page building components that work integrated with the main WordPress plugin editor (Gutenberg). You can install this plugin, as we explained in the guide on how to install and activate a WordPress plugin on the site .
Then, after installing and activating the add-on, you can use it in design by going to the Pages tab, then Add New .
This window will then appear. We choose the layout as shown in the image below via the Layout button .
We then choose the appropriate layout from the ready-made layout templates as follows:
When you choose the appropriate layout for your site, you can modify it through the component editing fields at the top left of the screen, to modify fonts, writing, sections, and other design components.
After making the necessary modifications, the hero background for your site is ready for use.
2. Design using the Gutenberg component editor
The Gutenberg block editor is a new page builder included in WordPress 5.0 and above updates, which can be used to build entire pages using blocks. You can design the hero’s background using the component editor without the need to install any external add-on, as follows:
First, we will choose the Block element, then the Cover component, then we will upload the image that we want to use as the background.
Then we add the text component and the paragraph component to use them to write the introductory text for the site and the title, and thus the background of the hero section is ready.
3- Design using the Astra template
One of the fastest and most widely used templates on the WordPress platform is the Astra template . It is an easy-to-use template that is compatible with all page building tools and provides flexible templates that you can modify to suit your site using the WordPress customization tool. Which enables you to change your site’s title and logo, change your site’s home page settings, and many other benefits.
To design using the Astra template, you must first install it. To do this, go to the control panel, then click on: Appearance << Templates << Add New
Then we search for the Astra theme by entering its name in the Astra Theme search box, then we install it by clicking the Install button. After that, we activate the template by pressing the Activate button , as we explained in the steps to install a WordPress template correctly .
Thus, the Astra template is ready for use on your website.
To design the hero’s background using the Astra template, we do the following:
- Select the Appearance box.
- Click on the Starter Templates page builder box .
- Choose the Elementor page builder ; Which uses a drag and drop interface in its working principle, so let’s use it.
4. The next page will then appear, which is the main page for working on the Elementor page builder
To choose the background that we want to place in the design of the hero section of the site, we click on the Style tab and then choose the type of background we want via the Background Type box , whether it is an image, a video clip, or something else.
For example, we have chosen a design based on an image as the background. Here, we will click on the Choose Image button.
The window for selecting images from the files on the computer will then appear. We click on the Select Files button to choose the image we want to use.
After selecting the image, we adjust its position using the Position button and then choosing Center-Center to ensure that it is located in the middle of the page as shown:
Then you can modify the background colors by going to the Background Overlay option , then we choose the appropriate color shades according to what we want from the Color box .
For further modifications to the image, its colors, and its positioning, we modify it as needed through the color and positioning boxes as shown.
We will now change the top title by clicking on it three times in a row, so that the text box appears on the left side. We write the text we want in the Title box .
We repeat the same steps for all the texts on the image
As for modifying the text, whether to change its color, size, or font type used, we press the Style button again, then modify through the settings shown in the image.
To change the buttons below the title and the introductory text, which are call-to-action buttons , we click on the button we want to modify, then change the text inside it through the text box that appears on the left bar. You can also choose the link that will direct you to it. Click through the link box as shown.
To modify the colors of the buttons, their sizes, and everything related to them, we click on Style and then make the necessary modifications.
The design is now ready
In the end, it can be said that this part of the site is the main attraction for visitors and users alike, as it constitutes the main focus of their introduction to the site and the first action that you encourage them to take, so try to pay attention to it and present it in the best way.
