How to Make a Website Banner (3 Easy Ways)

Are you on the lookout for a simple strategy to make a banner to your WordPress web site?

A banner can spotlight the merchandise, companies, or information updates supplied by your web site. It could possibly enhance person engagement, enhance your click-through charge, and encourage guests to take motion.

On this article, we are going to present you the best way to simply make a banner to your WordPress web site.

What Is a Web site Banner?

A banner is a graphical show that stretches excessive, backside, or facet of a WordPress website. It typically features a model identify and brand, together with different visible components, to advertise a particular product, service, or occasion.

For instance, if an online store has simply introduced a sale, then it might present a banner on the high of its pages to inform new guests concerning the promotion and encourage them to make a purchase order.

A well-designed banner could make a powerful impression and invite guests to discover the remainder of your website. Plus, banners may also be used to promote affiliate products, enhance model consciousness, build an email list by encouraging guests to enroll in your publication, and drive visitors to different pages in your website.

You may also use banners to advertise your social media accounts and encourage guests to comply with or like your pages.

What Is the Finest Web site Banner Measurement?

The best web site banner measurement is dependent upon the format and particular advertising objectives of your WordPress blog.

For instance, if you wish to show an oblong and skinny banner on the high of the display screen, then you need to use the Giant Leaderboard measurement, which is 970 x 90.

Among the different in style and most-used banner sizes embrace:

• Medium Banner: 300 x 250
• Leaderboard: 728 x 90
• Extensive Skyscraper: 160 x 600
• Half-Web page: 300 x 600
• Giant Leaderboard: 970 x 90
• Billboard: 970 x 250
• Giant Rectangle: 326 x 280
• Vertical Banner: 120 x 240
• Full Banner: 468 x 60
• Half Banner: 234 x 60

If you wish to present a banner for an occasion within the sidebar, then you need to use the Extensive Skyscraper or Half-Web page banner sizes. Equally, you may also use the Medium banner measurement to show a square-shaped banner in your web page.

If you’re trying to show advert banners, then you could wish to see our newbie’s information on the highest-performing Google AdSense banner sizes and formats for WordPress.

Having stated that, let’s see how one can simply make a banner in your WordPress web site. For this tutorial, we are going to cowl three strategies to make a banner, and you need to use the hyperlinks beneath to leap to the tactic of your alternative:

Technique 1: Make a Web site Banner Utilizing OptinMonster (Advisable)

OptinMonster is the best WordPress banner plugin available on the market that means that you can simply create floating bar and popup banners to your web site.

It’s the greatest conversion optimization and lead generation tool that helps you flip web site guests into subscribers and clients.

Plus, a lot of OptinMonster’s banner templates have optin fields that permit you to acquire the names, e mail addresses, and telephone numbers of your web site guests.

Step 1: Set up OptinMonster on Your Web site

First, you have to to enroll in an OptinMonster account. To do that, merely go to the OptinMonster web site and click on on the ‘Get OptinMonster Now’ button to arrange an account.

After that, it’s a must to set up and activate the free OptinMonster plugin in your WordPress web site. For detailed directions, you could wish to see our newbie’s information on how to install a WordPress plugin.

Upon activation, the OptinMonster setup wizard will open in your WordPress admin panel.

From right here, you need to click on the ‘Join Your Present Account’ button to attach your WordPress website to your OptinMonster account.

This can open up a brand new window in your pc display screen.

From right here, it’s a must to click on the ‘Connect with WordPress’ button to maneuver forward.

Step 2: Create and Customise Your Banner

Now that you’ve got linked your WordPress account with OptinMonster, head over to the OptinMonster » Campaigns web page from the WordPress admin sidebar.

From right here, you might want to click on on the ‘Create Your First Marketing campaign’ button to start out creating your web site banner design.

This can direct you to the ‘Templates’ web page, the place you can begin by selecting a marketing campaign kind.

For instance, if you wish to present your banner as a bar on the high of the display screen, then you possibly can choose the ‘Floating bar’ marketing campaign. Equally, you possibly can choose the ‘Popup’ marketing campaign kind to show your banner as a popup.

After that, additionally, you will want to pick a template for the marketing campaign you selected.

For this tutorial, we will likely be selecting a template for the ‘Floating bar’ marketing campaign kind.

Subsequent, you can be requested to present a reputation for the marketing campaign that you’re creating.

Merely kind a reputation of your alternative and click on the ‘Begin Constructing’ button to maneuver ahead.

This can launch the OptinMonster drag-and-drop interface in your display screen, the place you can begin customizing your banner. From right here, you possibly can drag and drop fields of your alternative from the sidebar on the left onto the banner.

For instance, if you wish to add social media icons to your banner to extend your followers, then you possibly can drag and drop the Social Media block from the left sidebar.

After that, simply click on on the block to open its settings within the left column.

From right here, you possibly can change the button title, add your social media URL, and even change your social media platform from the dropdown menu.

You may also add different blocks to show movies, pictures, textual content, or CTAs in your web site banner design.

After that, you might want to choose the place of your banner.

By default, the OptinMonster floating bar is displayed on the backside of your web site display screen when you begin scrolling.

Nevertheless, you possibly can simply change this setting by clicking on the ‘Settings’ icon on the backside of the sidebar on the left.

This can open up settings within the left column, the place you need to broaden the ‘Floating Bar Settings’ tab. From right here, merely toggle the ‘Load Floating Bar on the high of the web page?’ swap to show the banner on the high.

Step 3: Add Triggers for Your Banner

After getting designed your banner, swap to the ‘Show Guidelines’ tab on the high. From right here, you possibly can add guidelines to your banner show.

Keep in mind that you solely want to modify to this tab if you wish to add a particular show set off to your banner. In any other case, you possibly can skip to the following step.

For instance, if you want to point out your banner when the person is about to depart your website, then you might want to select the ‘Exit Intent’ possibility.

After getting finished that, simply choose the ‘On all units’ possibility from the dropdown menu within the center. When you want to use this show rule for cellular units solely, then you may also select that possibility.

After that, choose the Exit Intent Sensitivity based on your liking and click on the ‘Subsequent Step’ button.

This can take you to a brand new display screen. Right here, you might want to ensure that the ‘Optin’ possibility is chosen for the ‘Present the marketing campaign view’ dropdown menu.

After getting finished that, merely click on the ‘Subsequent Step’ button.

Your show rule for the banner will now be proven on the display screen.

If you wish to change one thing right here, then you possibly can click on the ‘Edit’ button to repair it.

Step 4: Publish Your Banner

Now you can swap to the ‘Publish’ tab on the high and click on the ‘Save’ button within the high proper nook of the display screen.

After that, merely click on on the ‘Publish’ button to show the banner in your web site.

Now go to your web site to see the banner on the high of your display screen.

That is what it seemed like on our demo website.

Technique 2: Make a Web site Banner Utilizing Canva (Free)

If you wish to make a web site banner at no cost, then this methodology is for you.

Canva is a well-liked web-based instrument that means that you can create every kind of graphics, together with banners, logos, posters, e book covers, and extra. It additionally provides a free model that you need to use to create a web site banner design.

Step 1: Create a Canva Account

First, you have to to go to the Canva website and click on on the ‘Signal Up’ button to create an account.

If you have already got a Canva account, then you possibly can merely log in.

Upon account creation, you can be taken to your Canva account dwelling web page.

From right here, you might want to swap to the ‘Templates’ tab from the left column after which seek for banner templates utilizing the search field on the high.

This can show all of the banner templates out there in Canva. Nevertheless, a few of these templates could also be locked as a result of they’re paid options.

Step 2: Design Your Web site Banner

As soon as you choose a template, Canva’s design interface will likely be launched on the display screen.

From right here, you possibly can customise your banner template based on your liking. You may change the present content material within the template by clicking on the blocks and including your personal textual content.

You may even add completely different graphical components like stickers, pictures, and movies by switching to the ‘Parts’ tab within the left column.

Upon including a component, you possibly can additional change its animation, place, and transparency from the menu on the high.

You may also add media information from your personal pc by switching to the ‘Uploads’ tab from the left column.

So as to add some textual content to your banner, merely swap to the ‘Textbox’ tab from the column on the left.

As soon as there, you need to use default textual content kinds or completely different font combinations so as to add some content material to your banner.

You may even add a call to action with a hyperlink by choosing the textual content utilizing your mouse. This can show a hyperlink icon on the high of the textual content.

Merely click on on that icon and replica and paste the hyperlink you wish to add.

After that, click on the ‘Carried out’ button to reserve it.

Step 3: Get an Embed Code for the Banner

As soon as you might be comfortable along with your banner customization, simply click on the ‘Share’ button within the high proper nook of the display screen.

This can open up a immediate menu the place you need to choose the ‘Extra’ possibility on the backside.

This can take you to the ‘All Choices’ menu, the place it’s a must to choose the ‘Embed’ possibility.

When you do this, a brand new immediate will open up on the display screen. From right here, merely click on the ‘Embed’ button.

Canva will now create an HTML embed code for you.

As soon as it’s displayed on the display screen, click on the ‘Copy’ button below the ‘HTML embed code’ possibility.

Step 4: Add the HTML Embed Code in WordPress

Now you can show your banner in your WordPress web page, publish, or sidebar based on your liking. For this tutorial, we will likely be displaying our banner on a WordPress web page.

First, you might want to open the web page or publish the place you wish to add the banner.

As soon as there, click on the ‘+’ button within the high left nook of the display screen to search out and add the Customized HTML block to the web page.

After getting finished that, merely paste the embed code you copied into the block.

Lastly, click on the ‘Replace’ or ‘Publish’ button to avoid wasting your adjustments.

Now go to your web site to see the WordPress banner in motion.

Technique 3: Make a Web site Banner Utilizing Thrive Leads

You may also create a web site banner utilizing Thrive Leads. It’s a well-liked WordPress popup plugin utilized by over 114,000+ web sites.

With Thrive Leads, you possibly can design banners that can provide help to seize leads in your WordPress website and grow your email list.

Step 1: Set up Thrive Leads on Your WordPress Web site

First, you have to to go to the Thrive Themes web site and join an account. After getting finished that, head over to your member dashboard.

From right here, go forward and click on the ‘Obtain and set up the Thrive Product Supervisor plugin’ hyperlink.

Subsequent, you might want to go to your WordPress web site to put in and activate the Thrive Product Supervisor plugin. For detailed directions, you could wish to see our step-by-step information on how to install a WordPress plugin.

Upon activation, head over to the Product Supervisor tab from the WordPress admin dashboard and click on the ‘Log into my account’ button.

After getting into your login credentials, it is possible for you to to see your Thrive Product Supervisor dashboard.

From right here, you possibly can choose the merchandise that you just wish to set up and use in your website. Merely select the ‘Thrive Leads’ plugin and click on the ‘Set up chosen merchandise’ button.

Step 2: Create a Web site Banner

After the plugin set up, you might want to go to the Thrive dashboard » Thrive Leads web page from the WordPress admin sidebar.

As soon as you might be there, simply click on the ‘Add New’ button subsequent to the ‘Lead Teams’ possibility.

This can show the ‘Add New Lead Group’ popup in your display screen, the place you might want to kind a reputation for the lead group you might be creating.

Be certain that to call the lead group in a means that can provide help to determine it.

As an illustration, in case you are making a banner to construct your e mail listing, then you possibly can identify your lead group ‘E mail Checklist Marketing campaign’.

After that, the lead group you created will likely be added to the display screen. From right here, it’s a must to click on the ‘Add New Sort Of Decide-In Kind’ button.

This can open a brand new immediate the place you need to select the kind of banner you want to create.

You may create a slide-in, ribbon, widget, in-content, lightbox, or scroll mat banner based on your liking.

These banners will likely be like a kind as they are going to acquire information out of your customers, together with email addresses, telephone numbers, and extra.

For this tutorial, we will likely be making a ribbon banner for our website.

Upon selecting a web site banner design kind, the immediate will routinely disappear from the display screen.

Now, to open your lead group dashboard, you need to click on the ‘Add’ button in the precise nook of your Lead Teams tab.

This can take you to your Lead Teams dashboard, the place all of the types and lead stories for the group will likely be displayed after your marketing campaign goes dwell.

For instance, if you wish to create a banner to seize e mail addresses, then all of the person info you acquire by the banner will likely be displayed right here.

For now, you simply need to click on the ‘Create Kind’ button to start out constructing your banner.

This can open up a brand new immediate the place you need to present a reputation for the shape and click on the ‘Create Kind’ button.

As soon as your kind has been created, will probably be displayed in your Lead Teams dashboard.

From right here, it’s a must to click on the ‘Edit Design’ button in the precise nook to start out constructing your banner.

Step 3: Customise Your Web site Banner

The Thrive visible editor will now be launched in a brand new tab in your display screen.

From right here, you can begin by choosing a template to your banner from the ‘Thrive Leads Library’ immediate.

You may then use one of many pre-made template as it’s or additional customise it with the visible editor. Upon making your alternative, merely click on the ‘Select Template’ button to maneuver ahead.

After including a template for a ribbon banner, you possibly can simply customise the weather in it by clicking on every one. This can open up the component’s settings within the sidebar on the left.

For instance, if you wish to change the button shade in your template, you then merely must click on on it to open its settings within the sidebar.

If you wish to add a totally new component to your banner, then you may also do this by clicking the ‘+’ icon in the precise nook of the display screen.

This can open the ‘Add Parts’ sidebar on the precise, the place you possibly can drag and drop components of your alternative onto the banner.

As an illustration, if you wish to add social media account buttons to your banner, then you’ll have to drag and drop the Social Comply with component from the precise sidebar.

As soon as you might be comfortable along with your banner, click on the ‘Save Work’ button within the backside left nook to retailer your adjustments.

After that, you might want to return to your Lead Teams dashboard.

Step 4: Configure Banner Settings

As soon as you might be again in your dashboard, you possibly can change the place of your banner by clicking on the ‘Place’ possibility within the kind row.

This can open the ‘Place Settings’ immediate, the place you possibly can select your most well-liked banner place from the dropdown menu.

After that, click on the ‘Save’ button.

Subsequent, to configure the show frequency of the banner, click on the ‘Show Frequency’ possibility within the kind row.

This can open the ‘Show Settings’ immediate, the place you need to use the slider to find out the variety of instances the banner needs to be displayed on the display screen.

When you maintain the quantity 0, then the banner will likely be displayed always. Upon making your alternative, click on the ‘Save’ button to retailer your settings.

If you wish to add a particular set off to your banner show, then you might want to click on the ‘Set off’ possibility within the kind row.

This can show the ‘Set off Settings’ immediate, the place you possibly can select a set off to your banner from the dropdown menu, equivalent to after a sure time frame or when a person reaches the underside of the web page.

As soon as you might be finished, click on the ‘Save’ button to avoid wasting your settings.

Step 5: Publish Your Banner

After you have got configured the banner settings, you might want to exit your Lead Teams dashboard and head again to the Thrive Leads dashboard by clicking on the hyperlink on the high.

As soon as you might be there, broaden your Lead Teams tab and toggle the ‘Show On Desktop’ swap to ‘On’. When you additionally wish to show your banner on cellular units, then you possibly can toggle the ‘Show On Cellular’ swap to ‘On’.

After that, click on the gear icon within the high proper nook of the Lead Teams tab to open up the show settings.

Right here, you possibly can choose the web site pages that you really want the banner to be displayed on. As an illustration, in order for you the banner to point out on the high of all of the pages and posts, then you possibly can test the field subsequent to those choices.

Lastly, click on the ‘Save and Shut’ button to avoid wasting your adjustments.

Now, you possibly can go to your web site to take a look at the banner displayed on the high of the web page.

That is what it seemed like on our demo web site.

We hope this text helped you learn to simply make a web site banner for WordPress. You may additionally wish to see our newbie’s information on how to customize colors on your WordPress website and our high picks for the best web design software.

When you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Facebook.