How to Add a Banner in WordPress (4 Easy Steps)

add a banner

In today’s digital landscape, an engaging and visually appealing website is very important for capturing the attention of your audience. The first thing your visitor watches on your site is a banner. A banner serves as a prominent and eye-catching element that can showcase important announcements, highlight special offers, or reinforce your brand identity.

If you don’t know how to add a banner in WordPress, then this post is for you. After reading the post, you can add a banner in WordPress by yourself. 

Let’s start. 

Adding a Banner in WordPress

Step 1: Add a Cover Block

First, click on the Add Block button and search for the cover block. Below the cover block, you will find group blocks. Click on the block named ‘Cover Image with Bold Heading and Button, Left’. 

This will insert a readymade block cover for you. 

Step 2: Replace The Contents

As this is a grouped block, it is a combination of a heading, a background image, and a button. You can change every content you like. Click on the background and then Replace button to replace the background image. 

You can insert an image from your media library, or you can upload a new one. Select the image and click on the upload button. 

Step 3: Customize The Content

When the image is uploaded, you can see it’s not in its color; actually, it is filtered. 

Click on ‘Apply Duotone Filter’ and then unset. 

This will restore the background color. If you wish to see your image at full height, click on the toggle Full height. 

Now, click on the heading text and button text, then edit as you require.

If you wish to customize the style of the heading or button, click on the settings panel and edit as you require. 

You will be able to customize alignment, text color, background color, size, link, and other settings of heading and button.

Step 4: Add a link to the Button

Click on the button and select ‘Link’. Paste your link and hit enter button. 

Now, when anyone clicks your button, he will be redirected to the link that you have entered. 

When you are done customizing, hit the save button at the top right. 

Finally, your banner will look somewhat like below. 

Last Words

You can also do everything manually; in that case, you have to insert the cover block first and then set the image. When you are done, add a heading and a button. Afterward, customize your banner in the way you like. 

If you liked the post, then please share it with your friends. Don’t forget to share your thoughts in the comment box below. 

Own a WordPress Site? You’ll Need This Plugin!

Unleash the power of the WordPress Block Editor with Ultimate Blocks! Dive into a world where crafting stellar content is a breeze, where every feature and tool you’ve dreamed of is right at your fingertips.

Leave a Reply

Your email address will not be published. Required fields are marked *