How to Make a Website Banner (3 Easy Ways)

How to Easily Make an Effective Website Banner (Beginner‘s Guide)

Are you looking to grab your website visitors‘ attention, highlight special offers, and encourage them to take action? An eye-catching, well-placed website banner can help you achieve all that and more.

In this beginner-friendly guide, we‘ll walk you through everything you need to know to easily create effective website banners that get results. Whether you want to boost sales, grow your email list, increase social followers, or promote your latest content, you‘ll learn how to design scroll-stopping banners like a pro.

Let‘s get started!

Why Use Banners on Your Website?
———
Website banners are one of the most powerful tools to visually engage visitors and prompt them to act. Here are some key benefits of implementing banners:

• Instant attention: Well-designed banners naturally draw the eye and can communicate key information within seconds
• Increased engagement: Banners entice visitors to click through to landing pages, product pages, blog posts, or other important site content
• More conversions: Relevant offers or lead magnets promoted via banners can grow your email list and customer base
• Brand awareness: Consistently branded banners build recognition and familiarity with your unique visual identity
• Social proof: Displaying social media follower counts or subscriber numbers can provide proof of your authority and popularity

With all these potential benefits, it‘s clear that banners deserve a place in your website strategy. Now let‘s look at some must-know banner sizes and placements.

Essential Banner Sizes & Placements to Know
———
Not all banners perform equally. The size and position of your banner can make a big impact on how many people notice and interact with it. Based on average screen sizes, ad platform standards, and years of collective marketing data, here are the most important banner sizes to know:

Top of Page (Header) Banners:

• Leaderboard: 728×90
• Large Leaderboard: 970×90
• Billboard: 970×250

Sidebar Banners:

• Wide Skyscraper: 160×600
• Half Page: 300×600
• Large Rectangle: 336×280
• Medium Rectangle: 300×250
• Square: 250×250

Within Content Banners:

• Banner: 468×60
• Leaderboard: 728×90
• Large Rectangle: 336×280
• Square: 250×250

Mobile Banners:

• Mobile Leaderboard: 320×50
• Large Mobile Banner: 320×100
• Square: 250×250

Keep in mind, these banner sizes are just guidelines. Feel free to experiment with similar dimensions that fit your unique design and website layout.

As for positioning, placing important banners "above the fold" (the portions of the page visible without scrolling) tends to get the most views. Top banners or "header bars" stretching across the full width of the page command attention. Sidebar banners remain visible as users scroll content. Banners can also be worked in between paragraphs of content for a natural visual break.

Now that you know the fundamentals, let‘s explore some easy ways to actually create your website banners.

How to Make Banners with OptinMonster (Recommended)
———
When it comes to making high-converting website banners, OptinMonster is our top recommendation. It‘s the most powerful conversion optimization toolkit on the market, allowing you to create all sorts of engaging campaigns like floating bars, fullscreen welcome mats, slide-in scrolling boxes, sidebar widgets, and more.

Why is OptinMonster ideal for banners?

• Codeless drag-and-drop builder
• 50+ pre-built templates
• Advanced targeting and triggering rules
• Seamless integration with all popular email marketing services
• Built-in conversion analytics and insights

Here‘s how to create an eye-catching banner in minutes with OptinMonster:

Step 1: Create Your Campaign

• In your OptinMonster dashboard, click the "Create Campaign" button
• Select the "Floating Bar" campaign type
• Choose a template and click "Use Template"
• Name your campaign and click "Start Building"

Step 2: Customize Your Banner

• In the visual builder, click on any text element to edit the copy
• Upload your own logo or images using the "Image" block
• Rearrange blocks and spacing using drag-and-drop
• Modify colors, fonts, and styles from the left-hand menu
• Preview changes and save

Step 3: Configure Display Rules

• Click the "Display Rules" tab at the top
• Choose which pages to display or hide the banner on
• Set triggers like time on page or % of page scrolled
• Enable or disable mobile display
• Modify the banner position

Step 4: Publish Your Banner

• Click the "Publish" tab
• Double check the "Status" toggle is set to Live
• Copy the OptinMonster embed code
• Paste the code into your WordPress site header

That‘s it! Your new banner should now appear live on your website. Be sure to test it on different devices and monitor the performance from your OptinMonster analytics dashboard.

How to Design Banners For Free with Canva
———
If you‘re on a budget, you can use a free online graphics tool like Canva to whip up professional-looking website banners in no time. With an intuitive drag-and-drop interface, millions of stock photos, and hundreds of pre-made templates, anyone can create stunning banners without graphic design experience.

Here‘s a quick tutorial on crafting a website banner with Canva:

Step 1: Create a Canva Account

• Go to Canva.com and click "Sign Up"
• Choose the Free plan option
• Sign up with Google, Facebook, or email

Step 2: Select a Banner Template

• Type "Banners" in the search bar
• Browse trending banner designs
• Click a favorite template to edit
• Or search a custom size like "300×600"

Step 3: Customize Your Banner

• Double click any text to edit the words
• Upload your own logo and photos
• Explore the "Elements" tab for graphics, shapes, icons, etc.
• Change the background and color scheme
• Resize or rearrange elements by clicking and dragging

Step 4: Download Your Banner

• Click "Download" at the top right
• Select a file type (PNG, JPG, PDF)
• Click the Download button again

You can now upload the finished banner graphic to your WordPress Media Library and insert it into your pages like a regular image. Just be sure to add a clickable link if you want folks to take action!

Using Thrive Leads to Generate Leads with Banners
———
While Canva makes banner design effortless, it‘s limited when it comes to conversion features. If generating leads is your primary goal, a WordPress list-building plugin like Thrive Leads provides more firepower to boost signups.

With Thrive Leads, you can gate your banners with opt-in forms connected to your email marketing service or CRM. Other handy features include A/B testing, advanced targeting rules, and actionable reporting.

Follow these steps to create a website banner with Thrive Leads:

Step 1: Install & Activate Thrive Leads

• Get the Thrive Leads plugin from ThriveThemes.com
• Download the ZIP file
• Go to Plugins > Add New in your WordPress dashboard
• Click "Upload Plugin" and locate the Thrive Leads ZIP file
• Install and activate the plugin

Step 2: Create a New Lead Group

• Go to Thrive Dashboard > Thrive Leads
• Click the blue "Add New" Lead Group button
• Name your Lead Group something memorable like "Free Guide"
• Choose the "Ribbon" form type

Step 3: Customize Your Ribbon Banner

• Hover over your new Lead Group
• Click the small Pencil icon to "Edit" the form
• In the template gallery, click "Choose" on your preferred design
• Edit the copy, colors, and form fields to your liking
• Click "Save Work" when finished

Step 4: Set Banner Targeting Rules

• Return to Thrive Leads dashboard
• Next to your form name, click the Gear icon
• Choose which posts/pages to display the banner on
• Modify the display frequency and triggers if desired

Step 5: Activate Your Banner

• In your Lead Group box, toggle "Active" to the On position
• Select "Entire Site" or specific "Posts" to display the banner on
• Double check the banner appears on the front end of your site

Leveraging smart targeting rules, you can fine-tune your banner strategy to show the most relevant offers to different users. For example, first-time visitors could be shown a "Subscribe" banner, while returning visitors see a banner for a product demo.

Don‘t forget to connect each banner form to your email marketing service so you can follow up with new leads right away!

Design Tips for Effective Website Banners
———
Regardless of which tool you use to create your website banners, following established design best practices will help them perform better. Here are some quick tips to keep in mind:

1. Stick to simple, concise copy – Get to the point quickly and minimize word count. If offering a lead magnet, clarify the key benefit to the user.

2. Use contrasting, on-brand colors – Your banner should stand out from the rest of the page while staying true to your overall color palette. Use the Color Contrast Analyser to choose an accessible text color.

3. Choose legible fonts – Avoid cursive or overly embellished typefaces. Increase the font size so your banner is easy to read at a glance.

4. Incorporate eye-catching imagery – Colorful icons, illustrations, photos, or textures can make your banner more visually appealing. Canva makes finding these graphical elements a snap.

5. Include a clear CTA – Make the desired action obvious with a bold button that tells people exactly what to do (Subscribe, Shop Now, Learn More, etc.)

6. Optimize for all screen sizes – Always preview your banners on desktop and mobile to ensure they look great across devices. Opt for responsive templates when possible.

7. A/B test variations – Try out different headlines, colors, CTAs, and imagery to discover which combination gets the most clicks and conversions. OptinMonster makes this easy.

Smart App Banners: The Mobile-Friendly Option
———
Last but not least, let‘s talk about a special type of banner designed specifically for mobile traffic. If you have an iOS or Android app associated with your website, you can set up a "Smart App Banner" to promote installs right from the mobile web.

When someone visits your site from an iPhone or Android device, the banner intelligently detects whether they already have your app installed. If not, it invites them to view the app in the App Store or Google Play with a single tap.

Here‘s a code snippet you can use to trigger a Smart App Banner on iOS devices:

Simply replace "APP_ID_HERE" with your unique app ID from the App Store.

To set up a similar banner for Android apps, use this code:

window.onload = function() {
var anchor = document.createElement(‘a‘);
anchor.setAttribute(‘href‘, ‘ANDROID_APP_URL‘);
anchor.setAttribute(‘target‘, ‘_blank‘);

var div = document.createElement(‘div‘);
div.setAttribute(‘class‘, ‘android-banner‘);
div.innerText = ‘View in Google Play‘;

anchor.appendChild(div);
document.body.appendChild(anchor);
};

.android-banner {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background-color: #000;
color: #fff;
font-size: 1.2rem;
text-decoration: none;
z-index: 1000;
}

Be sure to replace "ANDROID_APP_URL" with a link to your app‘s listing on the Google Play Store.

Whether you‘re promoting app installs, growing your list, driving sales, or just jazzing up your site, website banners are the way to go. With intuitive tools like OptinMonster, Canva, and Thrive Leads, creating eye-catching, high-converting banners is easier than ever.

We hope this in-depth guide has given you the knowledge and inspiration to start implementing website banners like a pro.

For more website optimization tips, check out our guides on detecting AdBlock users, mastering Photoshop for web design, and choosing the best WordPress popup plugins.

Now go forth and create some stunning, scroll-stopping banners!