How to Create a Banner in WordPress
Banners have been around for about as long as the internet has: if you hadn’t been living under a rock, you must have seen countless examples. In this tutorial, we will be showing you a quick and easy way to create a banner in WordPress.
But before we get into the nitty-gritty of the how-to, we’d like to discuss what a banner actually is and when you should consider a banner as an addition to your WordPress website. If you are already sure you need a banner, feel free to skip right down to the instructional section. This is what we’ll be talking about:
Banners are a popular means of delivering advertisements online, but, in more abstract terms, they are images designed to inform your visitors and lead them to a section of your website (or a partner’s website, in case of banner ads) where you want them to go.
Basically, banners consist of graphics and text designed to convey enough information for a visitor to click on it and reach a sales page relatively quickly. They can be interactive and animated or static, but, either way, they are meant to draw attention to either your own brand, product, or service, or a partner’s.
In this tutorial, we will be dealing with the static banner, which can nonetheless have some animation to it. If you are looking for something flashier, perhaps the interactive banner widget is a better choice for you.
A banner is often used for ads: you could monetize your online real estate by leasing it out to other parties for ad space.
However, a banner doesn’t need to be an external ad: you could use it very effectively to advertise a sale or similar bargain for your own shop, showcase a new project or product, or simply make an important announcement. You can make the banner look however you want, and make it lead the user to where they want to go.
Oftentimes, a banner may feel foreign to a website. If you have full control of the banner’s design, you can make it look like a part of your website, rather than an element which leads the user away from the content they came to your website for, and therefore diminishes your profits.
The banner solution we will be showcasing below provides you with a broad gamut of styling options and controls, so that you can make it fit your brand or your website.
Our very own Qi Addons for Elementor is a plugin that expands Elementor’s already impressive collection of functionalities by introducing 60 brand-new, beautifully designed widgets for all kinds of websites, from personal portfolios to online stores. The banners widget is just one of them, and one of the simpler ones, but even it has a virtually unlimited range of options and settings.
All you need to do to get started with creating banners for your WordPress website is install the newest version of Elementor (Qi Addons will work with the free version of Elementor) and the newest version of Qi Addons from our website. As its name suggests, Qi Addons will not work with other page editors.
With Qi Addons for Elementor, you can create an amazing banner within minutes, as evidenced in the video below:
If you prefer a text tutorial, though, just keep on reading.
We will be using Qi Addons for Elementor to add a banner to a post, but it works just as well for a page. We started with a post and gave it a title.
To start creating a banner, find the Banners element in the left hand-side menu and drag it to where you want it on the page. As you can see, your banner comes with some placeholder graphics and text.
To customize it, start with the Content tab and its General section. For the Layout, we will select the Standard option, but you can also choose an In Box layout if you want the text to stand out more. You can (and should) select an Image from your media library or upload an image for the background by clicking on the Image field.
Once you have an image in place, you can change the Image Proportions to suit your website layout and style. There is a range of size and ratio options to choose from, from Thumbnail to Huge Square. We have gone with Original for this demonstration, keeping the original aspect ratio of the image.
If you wish, you can add a button to your banner. To do so, select Yes from the Enable Button menu, as we have. In the Link field, you need to add a link to the page you wish your visitors to go to when clicking on the banner. Finally, the Enable Link Overlay option lets you have your entire banner act as an anchor for the link you entered, instead of just the button. This is what we will do by leaving the menu on its default value of Yes.
Moving on to the Content section of the tab, we find the Title, Subtitle, and Text fields. We will not be using a subtitle for this demonstration, so we are leaving it blank. We will enter a sample Title and Text to replace the placeholder.
In the Button section, you will find the customization options for your banner’s button. For the Layout, we are sticking with the default Filled, but you can also have an Outlined or Textual button, while for the Type, we will also choose the default Standard, while you can choose between it and the With Inner Border and Boxed options.
The Enable Button Text Underline menu lets you set up an underline below the text. We will not be using it for this demonstration. The Size menu contains the size options for the button and can be set to Normal, Small, Large and Normal Full Width. We will be leaving these controls at the default values, too.
Finally, we will change the Button Text to say View More.
The final section of this tab which we will discuss is the Button Icon section. Here, you can select an Icon for your button. It is blank by default, and you can leave it that way, or you can select one from the icon library or upload an SVG by clicking on the Icon field. We have gone with an arrow icon from our media library.
As for the Icon Position, we have opted to keep the icon to the Right of the text, but you could also choose left, if it suits your design better.
Moving on to the Style tab, the first section up is the Content Style. To change our Banner Padding, we will first unlink the padding values, as we don’t want an even padding around the banner content. We will set the Right and Left padding to 20%. As for the Banner Border Radius, we will not be using it in this demonstration. It is used to give curvature to the edges of the banner, and we want ours rectangular.
The Banner Box Shadow and Hover Banner Box Shadow controls are used to set up a shadow for the banner box when inactive and on mouse hover, respectively. We will not be using them for this banner.
The Content Vertical Alignment and Content Horizontal Alignment controls let you align the banner content (the text and the button). We will set them to Middle and Center, respectively.
The Style section of the tab contains the textual content options: the Tag, Color, and Typography options for the Title, Subtitle and Text.
We will switch the Title Tag to H2 and select a plain white for the Title Color.
For the Title Typography options, we will select a different font Family (DM Serif Display) and set the Size slider to 60 pixels. We will not be using the Weight (boldness) option, but we will set the Transform menu to Uppercase (other options include Lowercase and Capitalize), and the Style to Italic. We will not be using the Decoration menu, but you can use it to add an Underline, Line Over or Line Through to your text.
To put some more space between the title and the text, we will set the Line-Height slider to 59 pixels. We will not change the Letter Spacing for this banner.
We are not using a subtitle, so we will not be needing any of the subtitle styling options.
As for the Text Tag, we will go with H5. We will also use white for the Text Color, and 400 for the Weight in the Text Typography options.
Moving on, we find the Spacing Style section. Here we can set the spacing for the top margin of Title, Text, and Button. For this banner design, we will set the Text Margin Top to 21 pixels, and the Button Margin Top to 52 pixels. We will not be using the Title Margin Top setting.
In the Button Style section, we find the Typography options again. We have covered them before, and we will not be using them to style our button. Next down is the Normal/Hover toggle. Whichever settings you use while the switch is set to Normal will affect the button while it is inactive. Switching to Hover will let you set up special behaviour for the button on mouse hover.
Staying in the Normal mode of the toggle, we will change the button’s Text Color to a dark grey (#1e1e1e). You could also change the Background Color, which we will leave at its default white, and we will not be using the Border controls. Of course, you can set a border for your button, and control its Color, Width, Radius (curvature), and Padding. We wish to adjust the Border of our button by entering 0 for all the values thereof, making the button rectangular, and the Padding. For the Padding, we will first unlink the values, and enter 14 for Top, 40 for Right, 13 for Bottom and 40 for Left.
The Hover version of the button offers you the option of setting a Background Hover Color and the Reveal Background menu. You can use these controls to change the appearance and behaviour of the button once a user hovers over it with their mouse. We are happy with our button, so we won’t be using these settings.
Moving on to the Button Icon Style, we find only three controls: Icon Size, Icon Color, and Icon Margin, as well as the Normal/Hover toggle. We will set the Icon Size to 6 pixels and the Icon Color to a dark grey (#1e1e1e) to match the button text. We won’t be changing the Icon Margin.
In the Hover section of the toggle, you will find the same controls, plus the Move Icon menu, which controls the animation of the icon. We are happy with the default Horizontal Short animation, but you can choose between different animations or no animation at all. We will also correct the icon margins a little, by unlinking the Icon Margin control and setting the Top margin to 2 pixels and the Left to 10 pixels.
The next two sections down, the Button Inner Border Style and Button Underline Style currently do not have any controls you can use. This is because of the style of our chosen button: it has no inner border or underline. If you choose a different button in a design of yours, you have the options to style all of the button’s elements.
Finally, we come to the Background Style section. It, too, has a Normal/Hover toggle and a single control, Overlay Color, in the Normal view. This is the colour of the element background if you want a plain colour or transparent overlay for your banner. We will not be using it in this design.
In the Hover view, we find the Overlay Color and two additional controls: the Background Image Hover and the Background Image Hover Zoom Origin menus. These affect the behaviour of the background image on mouse hover. We will select None from the Background Image Hover menu, meaning that the image won’t be animated – won’t zoom in or out or move – on mouse hover. This will also eliminate the Background Image Hover Zoom Origin menu.
And there you have it, a beautiful banner in minutes! And that’s only one out of virtually countless settings.
If you prefer to use the Gutenberg block editor to create your websites and pages, you’re lucky – we have a plugin that can help create banners, too. It’s called Qi Blocks for Gutenberg, a collection of more than 80 blocks for the block editor. Some of the blocks are free. Others are only available with the premium version of the plugin. The one we’ll be using – the Banners block – is among the free ones. We’ll walk you through creating one of the examples from the block’s web page to show you how to use it.
After installing the Qi Blocks for Gutenberg plugin, open a page or a post using the block editor. We created a field with two columns, adding the Banners block to the one on the left using the “+” sign and searching for the block.
When you first add the block, it will have some dummy content. To change it, head over to the right hand-side menu, where the Content options let you choose the layout of the block, the image you want to use with it, whether or not you wish to use the button, as well as the contents of the title, subtitle, and text fields.
With the standard layout and a full-size image we added, we enabled the button and the link overlay. We added our title and subtitle content for the contents and removed all the sample text.
Already, the banner’s looking much better, but we’re not over yet. The next set of options will let us style all the elements in the banner, and we’ll start by styling the content.
The options under Style > Content include padding, border radius, shadow options for the box and hover box, and content alignment. The only options we changed here from the default are the vertical alignment, which we set to middle, and the horizontal alignment, which we set to center.
The next set of options, under Style > Text, is where you can change the tag, color, and typography options for the title, subtitle, and text. For the title, we changed the title tag to H1 and set the color to #ffffff. For the subtitle, we changed the color to #ffffff, the font to Caveat, its size to 50px, and the weight to normal. Since we didn’t have any text, there was no need to change the options for it.
From here, you can quickly jump to the button options – they’re separated from the banner options, but you can access them by clicking on the button. The button has its own content and style options, and that’s where you can change how it looks and what it says.
Under the Content tab of the button options, we switched the layout to textual, enabled the button underline, changed the text, and added an icon. We set the icon size to 6px, the top icon margin to 3px, and the left icon margin to 10px.
Under the Style tab, we went into the Button Text Typography options and set the font size to 17. We’ve set the colors for the normal and hover text of the button to #ffffff. For the underline options, we set the underline offset to 6px.
Back at the banner options, the Style > Spacing options let you set the different margins. We set the top title margin to 8px and the top button margin to 20px, and with that, half of our banner display was done.
Creating the other half was easy enough – we duplicated the existing one and moved it to the column to the right. Then, we changed the image and the title, and that was it.
In Conclusion
As you can see, setting up a banner for your WordPress website is easy and quick, and, if you are using Qi Addons for Elementor, it doesn’t cost you a penny. Sure, there are other banner plugins for WordPress out there, but they don’t quite beat the Banners widget we used for this tutorial. So if there is something you’d like to draw your visitors’ attention to, now you know how you can get it done.
