An eye-catching banner is one of the first elements that visitors notice when they arrive at your website. It establishes your brand’s identity, conveys your message, and boosts conversions, making it an essential tool for showcasing your products, services, or important announcements.
Over the years, we have utilized various types of banners on CanadaCreate to promote our newsletter, highlight Black Friday specials, share free courses, showcase our professional services, and more.
Through these marketing efforts, we have observed that banners consistently capture attention, encourage clicks on call-to-action buttons, and generate leads for our business.
In this article, we will guide you on how to easily create a banner for your WordPress website. This way, you can take advantage of these benefits to enhance your business.
What Is a Website Banner?
A website banner is a graphic display that spans the top, bottom, or side of a WordPress site. It typically features a brand name and logo, along with other design elements, to promote a specific product, service, or event.
For instance, if an e-commerce store has recently announced a sale, it can display a banner at the top of its pages to inform new visitors about the discount offers and encourage them to make a purchase.
An effectively designed banner can create a lasting impression and encourage visitors to explore more of your website. Additionally, banners can be utilized to promote affiliate products, strengthen brand identity, grow your email list by inviting visitors to subscribe to your newsletter, and increase traffic to other sections of your site.
Banners can also be used to highlight your social media profiles and motivate visitors to follow or like your pages.
What Is the Optimal Size for Website Banners?
The best website banner size varies based on the layout and specific marketing objectives of your WordPress blog.
For instance, if you wish to showcase a long and narrow banner at the top of the page, the Large Leaderboard size of 970 x 90 is an excellent choice.
Here are some of the most popular and commonly used banner sizes:
- Medium Banner: 300 x 250
- Leaderboard: 728 x 90
- Wide Skyscraper: 160 x 600
- Half-Page: 300 x 600
- Large Leaderboard: 970 x 90
- Billboard: 970 x 250
- Large Rectangle: 326 x 280
- Vertical Banner: 120 x 240
- Full Banner: 468 x 60
- Half Banner: 234 x 60
To showcase an event banner in the sidebar, consider using the Wide Skyscraper or Half-Page banner sizes. You can also opt for the Medium banner size for a square-shaped display on your page.
If you’re interested in displaying ad banners, check out our beginner’s guide on the top-performing Google AdSense banner sizes and formats for WordPress.
Now, let’s explore how to easily create a banner on your WordPress website. This tutorial will guide you through three methods for creating a banner, and you can use the links below to jump to your preferred method:
- Method 1: Create a Website Banner Using OptinMonster (Recommended)
- Method 2: Create a Website Banner Using Canva (Free)
- Method 3: Create a Website Banner Using Thrive Leads
- Bonus: Implement Smart App Banners in WordPress
Method 1: Create a Website Banner Using OptinMonster (Recommended)
OptinMonster is the leading WordPress banner creation plugin that enables you to easily design floating bar and popup banners for your website.
It is the top tool for conversion optimization and lead generation, helping you transform website visitors into subscribers and customers.
Additionally, many of OptinMonster’s banner templates include opt-in fields that enable you to gather names, email addresses, and phone numbers from your website visitors.
Throughout the years, we have utilized this tool multiple times to create banners and successfully generate leads at CanadaCreate. For further information, check out our comprehensive OptinMonster review.
Step 1: Install OptinMonster on Your Website
To begin, you need to create an OptinMonster account. Simply visit the OptinMonster website and click on the ‘Get OptinMonster Now’ button.
Next, install and activate the free OptinMonster plugin on your WordPress site. For detailed guidance, refer to our beginner’s guide on installing a WordPress plugin.
Once activated, the OptinMonster setup wizard will launch in your WordPress admin panel.
From this point, click the ‘Connect Your Existing Account’ button to link your WordPress site with your OptinMonster account.
This action will open a new window on your screen.
From here, click the ‘Connect to WordPress’ button to proceed.
Step 2: Create and Customize Your Banner
Now that your WordPress account is linked to OptinMonster, navigate to theOptinMonster » CampaignsThis is the page located in the WordPress admin sidebar.
Click on the ‘Create Your First Campaign’ button to begin designing your website banner.
You will be taken to the ‘Templates’ page, where you can select a campaign type to start.
For instance, if you want your banner to appear as a bar at the top of the screen, choose the ‘Floating bar’ campaign. Alternatively, select the ‘Popup’ campaign type to display your banner as a popup.
Next, you will need to choose a template for the selected campaign type.
In this tutorial, we will select a template for the ‘Floating bar’ campaign type.
You will then be prompted to name your campaign. Enter your desired name and click the ‘Start Building’ button to proceed.
This will open the OptinMonster drag-and-drop interface, allowing you to customize your banner. You can drag and drop elements from the left sidebar onto your banner.
For example, to add social media icons to your banner and boost your followers, drag and drop the Social Media block from the left sidebar.
After adding the block, click on it to access its settings in the left column.
You can customize the button label, input your social media link, and select your preferred social media platform from the dropdown menu.
Additionally, you can incorporate various blocks to showcase videos, images, text, or calls to action (CTAs) in your website banner design.
After that, you need to choose the position of the banner.
By default, the OptinMonster floating bar appears at the bottom of your website screen as you begin to scroll.
You can easily modify this setting by clicking on the ‘Settings’ icon located at the bottom of the left sidebar.
This will reveal the settings in the left column, where you should expand the ‘Floating Bar Settings’ tab. From there, simply toggle the ‘Load Floating Bar at the top of the page?’ switch to position the banner at the top.
Step 3: Set Up Triggers for Your Banner
Once your banner design is complete, navigate to the ‘Display Rules’ tab at the top. Here, you can establish rules for when your banner will be displayed.
Keep in mind that you only need to access this tab if you wish to set a specific display trigger for your banner. If not, you can proceed to the next step.
For instance, if you want your banner to appear when a user is about to leave your site, select the ‘Exit Intent’ option.
To proceed, select the ‘On all devices’ option from the dropdown menu in the center. If you prefer to apply this display rule exclusively for mobile devices, you can choose that option as well.
Next, choose your desired Exit Intent Sensitivity level and click the ‘Next Step’ button.
You will be directed to a new screen. Ensure that the ‘Optin’ option is selected in the ‘Show the campaign view’ dropdown menu.
After that, simply click the ‘Next Step’ button.
Your banner’s display rule will now appear on the screen.
If you need to make any changes, click the ‘Edit’ button to modify it.
Step 4: Publish Your Banner
Now, navigate to the ‘Publish’ tab at the top and click the ‘Save’ button located in the top right corner of the screen.
Then, click the ‘Publish’ button to make the banner visible on your website.
Visit your website to see the banner displayed at the top of your screen.
This is how it appeared on our demo site.
Method 2: Create a Website Banner Using Canva (Free)
If you’re looking to create a website banner at no cost, this method is perfect for you.
Canva is a widely-used online platform for designing various graphics, including banners, logos, posters, and book covers. It offers a free version that allows you to create stunning website banner designs.
Step 1: Sign Up for a Canva Account
To get started, go to the Canva website and click the ‘Sign Up’ button to create your account.
If you already have an account with Canva, simply log in to access your designs.
After creating your account, you’ll be directed to your Canva homepage.
Next, navigate to the ‘Templates’ tab on the left side and use the search bar at the top to find banner templates.
This will show you all the available banner templates in Canva, though some may be locked and require payment to access.
Step 2: Customize Your Website Banner
After selecting a template, Canva’s design interface will open, allowing you to start customizing your banner.
You can modify the existing text by clicking on the text boxes and entering your own content.
Additionally, you can enhance your design with various graphical elements like stickers, images, and videos by selecting the ‘Elements’ tab on the left.
After adding an element, you can adjust its animation, position, and transparency using the menu at the top.
To upload media files from your computer, switch to the ‘Uploads’ tab located in the left column.
To incorporate text into your banner, navigate to the ‘Textbox’ tab in the left column.
Here, you can choose from default text styles or various font combinations to enhance your banner’s content.
You can also include a call to action with a link by highlighting the text with your mouse, which will reveal a link icon at the top.
Click on the link icon and paste the desired link into the provided field.
Afterward, click the ‘Done’ button to save your changes.
Step 3: Obtain an Embed Code for Your Banner
Once you are satisfied with your banner’s design, click the ‘Share’ button located in the top right corner of the screen.
This will open a prompt menu where you need to select the ‘More’ option at the bottom.
You will then be directed to the ‘All Options’ menu, where you should select the ‘Embed’ option.
After selecting that, a new prompt will appear on the screen. Simply click the ‘Embed’ button.
Canva will generate an HTML embed code for you.
Once the code appears on your screen, click the ‘Copy’ button located under the ‘HTML embed code’ section.
Step 4: Insert the HTML Embed Code into WordPress
You can now showcase your banner on your WordPress page, post, or sidebar as you prefer. In this tutorial, we will demonstrate how to display our banner on a WordPress page.
First, navigate to the page or post where you want to place the banner.
Once there, click the ‘Add Block’ (+) button in the top left corner to locate and add the Custom HTML block to your page.
After that, simply paste the embed code you copied into the block.
Finally, click the ‘Update’ or ‘Publish’ button to apply your changes.
Now, visit your website to see your WordPress banner in action.
Method 3: Create a Website Banner with Thrive Leads
You can also design a website banner using Thrive Leads, a popular WordPress popup plugin utilized by over 114,000 websites.
With Thrive Leads, you can create high-quality banners that will help you capture leads on your WordPress site and expand your email list.
We have extensively tested this tool in real-world scenarios and found it to be very beginner-friendly, featuring an intuitive interface and appealing templates. For more information, check out our Thrive Themes Suite review.
Step 1: Install Thrive Leads on Your WordPress Site
Begin by visiting the Thrive Themes website to create your account. After signing up, navigate to your member dashboard.
Next, click on the link to ‘Download and install the Thrive Product Manager plugin’.
Then, go to your WordPress site to install and activate the Thrive Product Manager plugin. For comprehensive guidance, refer to our step-by-step tutorial on installing a WordPress plugin.
Once activated, navigate to theProduct Managersection in the WordPress admin dashboard and select the ‘Log into my account’ button.
After entering your login details, you will access your Thrive Product Manager dashboard.
Here, you can choose the products you wish to install and utilize on your website. Simply select the ‘Thrive Leads’ plugin and click the ‘Install selected products’ button.
Step 2: Create a Website Banner
After installing the plugin, go to theThrive dashboard » ThriveLeadssection from the WordPress admin sidebar.
Once there, click the ‘Add New’ button next to the ‘Lead Groups’ option.
A popup will appear on your screen allowing you to enter a name for the new lead group you are creating.
Choose a name for the lead group that clearly identifies its purpose.
For example, if you’re creating a banner to grow your email list, you might name your lead group ‘Email List Campaign.’
Once created, the lead group will be visible on your screen. Click the ‘Add New Type Of Opt-In Form’ button to access it.
This action will bring up a new prompt where you can select the type of banner you wish to create.
You can choose from various banner types, including slide-in, ribbon, widget, in-content, lightbox, or scroll mat banners based on your preference.
These banners will function as forms to collect information from your users, such as email addresses and phone numbers.
In this tutorial, we will focus on creating a ribbon banner for our website.
After selecting a banner design type, the prompt will automatically close.
To access your lead group dashboard, click the ‘Add’ button located in the top right corner of your Lead Groups tab.
This will direct you to your Lead Groups dashboard, where you can view all forms and lead reports for the group once your campaign is live.
For instance, if your goal is to create a banner for collecting email addresses, all the user information gathered through the banner will be shown here.
To begin creating your banner, simply click the ‘Create Form’ button.
This action will prompt you to enter a name for your form; after that, click the ‘Create Form’ button to proceed.
Once your form is successfully created, it will appear in your Lead Groups dashboard.
Next, click the ‘Edit Design’ button located in the right corner to start designing your banner.
Step 3: Personalize Your Website Banner
The Thrive visual editor will now open in a new tab on your screen.
Here, you can begin by selecting a template for your banner from the ‘Thrive Leads Library’ prompt.
You can choose to use one of the pre-made templates as is or customize it further using the visual editor. After making your selection, click the ‘Choose Template’ button to continue.
After selecting a template for a ribbon banner, you can easily modify its elements by clicking on each one. This will reveal the element’s settings in the sidebar on the left.
To change the button color in your template, click on it to access its settings in the sidebar.
To add a new element to your banner, click the ‘+’ icon located in the top right corner of the screen.
This action will open the ‘Add Elements’ sidebar on the right, allowing you to drag and drop your chosen elements onto the banner.
For example, to include social media buttons on your banner, simply drag and drop the Social Follow element from the right sidebar.
When you’re happy with your design, click the ‘Save Work’ button located at the bottom left corner to save your changes.
After saving, return to your Lead Groups dashboard.
Step 4: Set Up Banner Settings
Once back in your dashboard, adjust the position of your banner by selecting the ‘Position’ option in the form row.
This will bring up the ‘Position Settings’ prompt, where you can select your desired banner position from the dropdown menu.
Then, click the ‘Save’ button to confirm your changes.
Next, to set the display frequency of the banner, select the ‘Display Frequency’ option in the form row.
This will open the ‘Display Settings’ menu, allowing you to adjust the slider to set how many times the banner should appear on the screen.
Setting the number to 0 will ensure the banner is displayed continuously. After making your selection, click the ‘Save’ button to apply your changes.
To create a specific trigger for when your banner appears, click the ‘Trigger’ option in the form row.
This will open the ‘Trigger Settings’ menu, where you can select a trigger for your banner from the dropdown list, such as after a set duration or when a user scrolls to the bottom of the page.
Once you have finished, click the ‘Save’ button to confirm your settings.
Step 5: Publish Your Banner
After configuring your banner settings, exit the Lead Groups dashboard and return to the Thrive Leads dashboard by clicking the link at the top.
Once there, expand the Lead Groups tab and switch the ‘Display On Desktop’ option to ‘On’. If you want the banner to also appear on mobile devices, toggle the ‘Display On Mobile’ option to ‘On’.
Next, click the gear icon in the top right corner of the Lead Groups tab to access the display settings.
Select the specific website pages where you want the banner to appear. For example, if you want the banner to be displayed at the top of all pages and posts, simply check the corresponding boxes.
To save your changes, click the ‘Save and Close’ button.
Now, visit your website to see the banner showcased at the top of the page.
Here’s how it appeared on our demo website.
Bonus: Implement Smart App Banners in WordPress
If your website has a mobile app, displaying smart app banners is highly recommended. These banners promote your app and encourage iPhone or iPad users to download it.
When visitors click on this banner, they will be directed to the app store to download your app. If the app is already installed on their device, the smart app banner will prompt them to open the app instead.
You can easily integrate a smart app banner in WordPress using WPCode. We believe it is the top code snippets plugin available for WordPress, allowing you to seamlessly add your app’s ID to your website.
For further details, check out our tutorial on how to easily add a smart app banner in WordPress.
We trust this article has equipped you with the skills to effortlessly create a website banner for WordPress. Additionally, check out our beginner’s guide on customizing colors for your WordPress site and explore our recommendations for the best web design software available.
If you enjoyed this article, consider subscribing to our YouTube Channel for insightful WordPress video tutorials. You can also connect with us on Twitter and Facebook.
