Image placeholder

(2022) How to Design & Create Wordpress Banners

If you run a WordPress website you should always be thinking of ways to better engage your audience. One way to do this is through on-site messaging and notifications.

Announcement banners work particularly well for announcing holiday sales and discounts. They can also be a great way to feature new blog articles, launch products, and highlight new features. If this sounds like something you need, then follow along as we show you how to design and display your announcement banner on your WordPress website.

What Are Announcement Banners?

You've likely run into a few announcement banners in the past, but you may not have known what you were looking at. Announcement banners are graphical headers that offer visitors some relevant piece of information when they open a webpage. They're typically located above the upper navigation bar.

In case you still have no idea what I'm talking about, here's an example:

Example announcement banner.
Example announcement banner.

In summary, announcement banners are eye-catching headers used to target visitors with key marketing materials with the goal of influencing their behavior in some way.

Why Are Announcement Banners Important?

The obvious answer to this question is that they're incredibly versatile marketing tools. They can be repurposed and reworked for a limitless number of goals and campaigns by changing their text, appearance, and behavior.

The less obvious answer is that announcement banners capitalize on a well-documented pattern of webpage consumption. Allow us to explain.

Diagram of f-shaped reading pattern.

When people open up a webpage, their eyes tend to follow an F-shaped pattern. They begin at the top-left of the page and scan horizontally until they reach the top-right. From there the pattern becomes a bit more unpredictable, but we're not interested in these subsequent moves. The first move is the important one.

Why? Well, for one thing, it's an incredibly reliable behavior. People are trained to scan web pages in this pattern, and they rarely deviate. You can predict with relative certainty that someone clicking onto a webpage will absorb anything that occupies this prime piece of visual real estate. As a result, any marketing materials you feature there (i.e., announcement banners) become incredibly powerful.

How To Create An Announcement Banner For A WordPress Website

With that background out of the way, it’s time to get into the details of actually setting up an announcement banner using Newclick.

Create your announcement banner using newclick.io
Create your announcement banner using newclick.io

Prepare Your Announcement Banner

Start by creating an account with Newclick. Newclick helps you create and schedule promotional announcements on your WordPress website. You can schedule a start and end date for your discount or holiday promotions. Use countdown timers, links, and emoji. Choose your background and text color and make your banner look amazing.

Installing Your Announcement Banner

After you set up your account with newclick.io, create your first banner. Once you've done that, the last step is to install the newclick.io announcement banner onto your WordPress site. An Easy way to do that is by using a plugin.

  • Log in to your WordPress site.
  • Go to Plugins > Add new.
  • Search for "Header and Footer Scripts".
  • Click "Install Now" and activate the plugin.

Use the Header and Footer Scripts Plugin To Install Custom JavaScript files to WordPress
Use the Header and Footer Scripts Plugin To Install Custom JavaScript files to WordPress.

Now you're ready to copy/paste the newclick.io code snippet into your Header section. After you've saved your banner in newclick.io, click on the install code snippet button. Copy and paste the code snippet to the "Header" section of the "Header and Footer Scripts" Plugin.

Install Newclick Javascript Widget
Copy and paste your code snippet to your WordPress Site.
Image placeholder
Copy and paste your code snippet to your WordPress Site.

And that's it! Make sure your banner is in the "Active" state and it will be displayed on your website.



How To Use Announcement Banners (9 Use Cases)

Now that you know how to create an announcement banner and add it to your website, let's take a look at the huge variety of ways you can take advantage of this marketing tool. Below, you’ll find 9 of the most common use cases for announcement banners. While this list is not exhaustive, it should give you a sense of the wide variety of applications.

1. Site-Wide Announcements

Announcement banners are great for getting messages out to visitors. They're almost impossible to miss, and that makes them ideal for disseminating important or relevant information

COVID-19 has provided a ton of examples of this use case in action. Rather than simply updating operating hours on the support page where visitors may struggle to find them, many companies have opted for announcement banners.

Image placeholder
Example site-wide announcement

As the name implies, site-wide announcement banners should be reserved for information that will be relevant to the majority of your visitors. Otherwise, you're squandering this prime real estate.

2. Shipping Information

Announcement bars are perfect mediums for displaying critical information like shipping times, delays, costs, and options. The fewer surprises customers encounter later on in their journeys, the more you'll be able to build trust and create positive experiences.

Example shipping announcement
Example shipping announcement

Usually, text-based announcement banners are enough for this use case. However, in extenuating circumstances, some companies choose to link to blogs or social media posts that explain the situation and its impact on shipping.

3. Countdowns

Example time-sensitive announcement
Example time-sensitive announcement

Feelings of urgency are an incredibly powerful tool when it comes to increasing conversions. You can use Newclick announcement banners to create a sense of urgency by including a countdown on your announcement banners. What should they count down to? There are tons of possibilities:

  • End Of Promotion: Having a countdown until the end of a promotion encourages customers to browse and checkout quickly in the hopes of taking part.
  • Beginning Of Promotion: Having a countdown until the beginning of a promotion encourages customers to come back once it's in effect.
  • New Product: Countdowns to new products help get customers excited about popular, high-ticket items.
  • Cart Expiry: Cart expiry countdowns also encourage quick checkouts, in this case, to avoid losing save items.

4. Product Upsells

Example upsell announcement
Example upsell announcement

If you want to go all out with your banner, include upsells and cross-sells into your campaign. When a consumer adds a certain item to their cart, you may display a banner suggesting they add another product to their basket. This can also assist shoppers in adding more value to their purchases and improving the shopping experience by making relevant suggestions.

5. Email Capture

Announcement banners are often used to encourage visitors to hand over their email addresses. Usually, the announcement banner advertises some reward (e.g., a free e-book or download) for people who opt-in to email marketing. This method is less invasive than pop-up email captures and more effective than on-page email captures due to the prominent location of announcement banners. In other words, it's a great middle-ground!

Email capture announcement
Email capture announcement

6. Promo Codes

Promo codes are a tried and true method for offering customers targeted discounts with the aim of encouraging certain behaviors. However, they rely on customers actually finding the code. One way to make sure they find it is by featuring the code on an announcement banner when they enter your website.

Discount code announcement
Discount code announcement

This is one of the most common uses for announcement banners—and for good reason. They're incredibly simple to implement because all they require is a simple line of text.

Not sure what to write? Let OpenAI's GPT-3 brainstorm ideas using Newclick's AI-generated copy feature.

7. Social Pages

Companies that rely on social media engagement and those who want to boost their following could benefit from linking their social media accounts in an announcement banner. This is a simple and effective way to funnel your on-site fans to other channels.

Social pages announcement
Social pages announcement

8. Shipping Thresholds

Shipping thresholds are an incredibly effective promotional technique that encourages customers to spend a certain amount in order to become eligible for some benefit (usually free shipping).

Announcement banners can be created to reflect the contents of a customer's cart to let them know how close they are to reaching the specified threshold. This active reminder is great for incentivizing additional purchases and can lead to an increased average order value (AOV).

Shipping threshold announcement
Shipping threshold announcement

9. Calls To Action (CTAs)

CTAs are most effective when they're positioned in regions of a page that get a lot of attention. That makes CTAs and announcement banners an ideal match. Many companies choose to include high-level CTAs (e.g., membership registration or demo session booking) in this location because the prominence leads to increased click-through rates and more conversions.

Call to action announcement
Call to action announcement

Key Takeaways

Announcements banners are:

  • Incredibly visible
  • Well suited to page-scanning patterns
  • Extremely versatile
  • Great for imparting key information succinctly

Banners are a great way to quickly and easily introduce products, features, and promotions with an eye-catching graphic or message. They're versatile because the design and content can be edited at any time with a few simple clicks, making them perfect for last-minute changes or special announcements. And best of all, they're hard to miss, so your message is sure to reach as many people as possible!

Want to learn more? Start here →