Tag: Thrive Leads

How to Create a Viral Waitlist Landing Page in WordPress

Are you wondering how to create a waitlist landing page for your WooCommerce store or WordPress website?

You can easily generate excitement for a product or service that hasn’t been launched yet by making a waitlist landing page. This prompts visitors to sign up for the waitlist using their email addresses and share the promotion with others.

In this article, we will show you how to easily create a viral waitlist landing page in WordPress.

Why Create a Viral Waitlist Landing Page in WordPress?

Making a waitlist landing page on your WordPress website will allow your visitors to enter their email addresses and join your waiting list.

For example, if you have a WooCommerce store that sells clothes and is about to launch a new collection for summer, then you can create a waitlist for interested users to sign up.

This way, interested users will get an email notification as soon as your new summer clothing collection goes live.

A viral waitlist page can also help you build your email list and social media following, making it an effective lead-generation tool for WordPress.

Moreover, it can also create a sense of urgency and excitement among potential customers, making them more likely to sign up for your waitlist.

That being said, let’s see how to easily create a viral waitlist landing page in WordPress.

How to Create a Viral Waitlist Landing Page in WordPress

You can easily create a waitlist landing page in WordPress using SeedProd. It is the best WordPress landing page plugin with a drag-and-drop builder to create themes and landing pages.

First, you need to install and activate the SeedProd plugin. For detailed instructions, you may want to see our step-by-step guide on how to install a WordPress plugin.

Note: You can also use the free version of SeedProd to create a waitlist landing page. However, some of the advanced blocks used in this tutorial will only be available with the paid plan.

Upon activation, you need to head over to the SeedProd Â» Settings page to enter your license key. You can find this information in your account on the SeedProd website.

Once you have done that, it’s time for you to start creating a waitlist landing page.

Step 1: Create a Waitlist Landing Page

To create a waitlist landing page, head over to the SeedProd Â» Landing Pages screen from the WordPress admin sidebar.

Once you are there, just click on the ‘Add New Landing Page’ button.

This will take you to the ‘Choose a New Page Template’ screen, where you can select a pre-made SeedProd template for your landing page.

Upon doing that, a prompt will open up on your screen, asking you to enter a page name and URL. Go ahead and enter the details and then click the ‘Save and Start Editing the Page’ button to continue.

This will launch the template in SeedProd’s drag-and-drop builder. From here, you can now start customizing your waitlist landing page as you want.

Step 2: Customize Your Waitlist Landing Page

Once the drag-and-drop builder has been launched, you will notice that all the available blocks are in the left column, with a landing page preview on the right side of the screen.

From here, you can drag any block you want onto your waitlist landing page, including an image, video, button, heading, or text block.

For example, if you want to add a headline for the new product that you are launching in your online store, then you can just drag and drop the Headline block onto the landing page.

Once you’ve done that, simply click on the block again to open its settings in the left column. From here, you can insert dynamic text and change the font size, alignment, color, and more.

Next, scroll down to the ‘Advanced’ section in the left column. From here, you can add a giveaway, optin form, contact form, social profiles, countdown timer, and more.

Since you are creating a waitlist, you should add a contact form to your landing page. That way, your visitors can sign up for notifications when new products are available, and they can also be added to your general email list.

To do this, just drag and drop the Contact Form block from the left column onto the page.

Next, click on the block to open its settings in the sidebar on the left. From here, you can select a contact form that you created with WPForms from the dropdown menu.

For more detailed instructions, you may want to see our tutorial on how to create a contact form in WordPress.

After that, you can also add the Social Sharing block to the waitlist landing page so that users will be able to share it with their friends and followers, making your waitlist viral.

Upon adding the block, click on it to configure its settings in the left column. You can now add a social media button from the dropdown menu and configure its size and alignment.

Once you’ve done that, it’s time for you to add the Countdown block from the left column to create a sense of urgency among your customers.

Next, click on the block to open its settings in the sidebar. From here, you can choose an end date, timezone, size, template, and more.

You can also choose an action to take once the countdown on your waitlist expires.

For example, if you choose the ‘Show Message’ option from the ‘Action To Take On Expires’ dropdown menu, then a message will be displayed to your customers upon waitlist expiration.

However, you can also choose the ‘Redirect’ option and add a URL that users will be redirected to if they visit the waitlist page after its expiration. This could be the WooCommerce product page with the items from your new collection.

Step 3: Add WooCommerce Blocks to Your Waitlist Landing Page

If you have a WooCommerce store, then you can also add the WooCommerce blocks offered by SeedProd. Keep in mind that the WooCommerce plugin will need to be activated for these blocks to work.

To add these blocks, just scroll down to the ‘WooCommerce’ section in the left column of the drag-and-drop builder.

From here, you can add the featured products, add to cart, or best-selling products block to your waitlist page to showcase other products from your store.

This way, users visiting your waitlist landing page will also be able to see other products that are currently available and may end up making a purchase.

You will also be able to limit the number of products that are shown and control the block’s alignment, typography, pagination, button color, and more.

Step 4: Connect Your Waitlist With Your Email Marketing Provider

You can also connect your waitlist landing page with an email marketing provider to build your email list and capture leads.

To do this, switch to the ‘Connect’ tab at the top of the landing page builder. Then, simply choose your email marketing provider from the ‘Email Marketing’ section.

By default, SeedProd offers seamless integration with popular email marketing services like Drip, Brevo (Formerly Sendinblue), Constant Contact, AWeber, and more.

Once you have chosen your provider, you will need to provide an API key or account details, depending on the service you chose. You can get this information from the account dashboard of your email marketing service provider.

After that, just click the ‘Connect’ button to move forward.

Upon connecting your SeedProd with an email marketing provider, you will also have to choose the email list that you want to use with your waitlist landing page.

Next, click on the ‘Save Integration Details’ button. You have now successfully connected your landing page with the marketing service.

Step 5: Save and Publish Your Waitlist Landing Page

Now, you need to switch back to the ‘Design’ tab from the top of the SeedProd page builder.

Once you’ve done that, click the ‘Save’ button at the top to store your settings.

Next, open the ‘Save’ dropdown menu and click the ‘Publish’ button to make your waitlist landing page live.

Now, you can visit the landing page on your WordPress site to see how it looks.

Bonus Tips to Build Excitement and FOMO in Your Online Store

Other than designing a great landing page, you can use a few other methods to easily build excitement and FOMO among your customers. This can encourage them to sign up for your waitlist.

For example, you might create a personalized popup using OptinMonster that shows that a product that hasn’t been launched yet is in limited supply.

Since scarcity is a key element of FOMO, shoppers will now be more likely to sign up for your waitlist.

Other than that, you can also create website banners using Thrive Leads to show users that other visitors are already interested in your product and signing up for it.

For more detailed instructions, you may want to see our tutorial on how to use FOMO on your WordPress site to increase conversions.

Additionally, you can also build excitement and hype around the product or service that you are launching by hosting a giveaway. A viral giveaway can help you can reach a wider audience, increase your conversions, and urge more visitors to sign up for your waitlist.

For example, you can use RafflePress, which is the best WordPress giveaway plugin, to give away a few items from your new clothing collection in exchange for a referral or follow on social media.

If you are interested, then you can see our tutorial on how to run a giveaway/contest in WordPress with RafflePress.

Another tip is to run a live blogging session with your customers to further hype up the product/service that will soon be launched. This way, you will be able to interact with your audience and convince them to sign up on your waitlist landing page.

We hope this article helped you learn how to easily create a viral waitlist landing page in WordPress. You may also want to see our tutorial on how to create coming soon pages in WordPress and our comparison of the best WordPress drag and drop page builders.

If you liked this article, then please subscribe to ourÂ YouTube ChannelÂ for WordPress video tutorials. You can also find us onÂ TwitterÂ and Facebook.

The post How to Create a Viral Waitlist Landing Page in WordPress first appeared on WPBeginner.

28.08.2023
How to Create an Alert Bar in WordPress (3 Easy Ways)
Do you want to add an alert bar to your WordPress site?

An alert bar or notification bar is a great way to let visitors know about important updates, special offers, new product launches, and more.

In this article, we will show you how to create an alert bar in WordPress with 3 easy solutions.

Why Create an Alert Bar in WordPress?

An alert bar is a great way to let your visitors know about something important on your website. That could be an ongoing sales event, an update to your opening times, or changes to your services.

You can also use an alert bar to tell visitors about a special deal, such as a buy one get one free offer. This is a great option if you run an online store.

Using an alert bar is better than just putting an announcement on your homepage. Your alert bar can appear prominently right at the top of every page across your entire site.

It’s easy to create an alert bar in WordPress. We will look at methods using the best notification bar plugins and a manual method using HTML and CSS code. Simply click the links below to jump straight to each option:
Method 1: Creating an Alert Bar Using OptinMonster

OptinMonster is the best conversion optimization and lead generation software on the market. It helps you convert more website visitors into subscribers and customers.

OptinMonster offers a drag-and-drop campaign builder. It comes with beautiful lightbox popups, welcome mats, countdown timers, and other dynamic overlays that help you increase subscribers and sales on your website.

You can also use OptinMonster to make an alert bar for your website. Their pre-built templates make it really easy to create an alert bar that looks great within minutes.

First, you need to visit the OptinMonster website and sign up for an account. You will need at least the Basic plan because it includes the Floating Bar campaign type.

Next, you need to install and activate the OptinMonster WordPress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

This plugin lets you connect your WordPress site to the OptinMonster software.

Upon activation, you will see the welcome screen and the setup wizard. Go ahead and click the ‘Connect Your Existing Account’ button.

Next, a new window will open where you will need to connect your WordPress site to OptinMonster.

Simply click the ‘Connect to WordPress’ button to move ahead.

You can now follow the on-screen prompts to connect your OptinMonster account.

Then, simply go to OptinMonster Â» Campaigns in your WordPress dashboard. Go ahead and click the ‘Create Your First Campaign’ button.

This will open the OptinMonster campaign builder.

From here, you need to select the ‘Floating Bar’ as your Campaign Type to create an alert bar.

Next, you will see a choice of campaign templates. Pick a template that you want to use.

You just need to bring your mouse over it and click the ‘Use Template’ button to select it. We are going to use the Coupon Code Promo template for our alert bar.

Next, you will be asked to give your template a name. Once you have named your campaign, just click the ‘Start Building’ button.

Now, you will see the campaign editor. This is where you can design your alert bar.

OptinMonster offers different blocks that you can simply drag and drop onto the template. For instance, you can add an image, text, button, and more to your alert bar.

You will see that your alert bar appears at the bottom of your screen by default.

To move it to the top of the screen, you need to click ‘Floating Bar Settings’ on the left-hand side. Next, just click the slider to move the floating bar to the top of the page.

To change the text on the floating bar, simply click on the area you want to change and type in any text you want.

You can also change the font, the size and color of the text, and more.

To change the countdown settings, simply select the timer.

Then go ahead and enter your desired end date and time. OptinMonster also lets you choose the countdown type. You can select the ‘Static’ type if you’d like to show a standard timer with your specified end date and time.

On the other hand, there is a ‘Dynamic’ countdown type. The timer will work based on each user’s behavior on your site. The countdown is set separately for each visitor to your website.

Once you are happy with the design of your alert bar, don’t forget to click the ‘Save’ button at the top of your screen.

Next, you need to go to the ‘Display Rules’ tab to select when and where your alert bar will display on your site. The default rule is for your alert bar to display after the visitor has been on the page for 5 seconds.

We are going to change this to 0 seconds so that the alert bar appears instantly. To do that, just change the ‘sec’ value to 0.

Besides that, you can also select where the alert bar will appear. You can use the default setting, which is the ‘current URL path is any page’. This way, your alert bar will appear on all the pages of your WordPress website.

Then, click the ‘Next Step’ button to change the Action settings. You can leave the ‘show the campaign view’ settings as Optin and select whether you’d like to play a sound effect when the alert bar appears.

After you have made your changes, go ahead and click the ‘Next Step’ button once more.

Here, you will see a summary of your display rules. You can make final edits and changes to your alert bar campaign.

Once you are happy, simply click the ‘Save’ button at the top of the screen.

After that, you can go to the Publish tab at the top and change the Publish Status to ‘Publish’. Once that’s done, you will need to click the ‘Save’ button and close the campaign builder.

Next, you will see the Campaign Output Settings.

The final step is to activate the campaign on your website itself. Simply change the Status from ‘Pending’ to ‘Published’.

Don’t forget to click the ‘Save Changes’ button when you are done.

Now, simply visit any page on your website, and you will see your campaign in action.

Method 2: Creating an Alert Bar Using Thrive Leads

Another way you can add alert bars to your WordPress website is by using Thrive Leads. It is part of the Thrive Themes suite and helps you generate leads through alert bars, lightboxes, slide-in popups, and more.

First, you will need to visit the Thrive Themes website and sign up for an account. Simply click the ‘Start Now’ button to get started.

Next, you will need to install and activate the Thrive Product Manager plugin on your website. For more details, please see our guide on how to install a WordPress plugin.

You can find the Thrive Product Manager plugin in your account area.

Once you have installed the plugin, simply go to the Product Manager page from your WordPress admin area.

From here, go ahead and click the ‘Log into my account’ button.

After logging in to your account, you will see different plugins and tools offered by Thrive Themes.

Simply select the Thrive Leads plugin and then click the ‘Install selected products’ button at the bottom.

When Thrive Leads is ready to use, you will see a success message.

You can then click the ‘Go to the Thrive Themes Dashboard’ button.

Next, you will need to go to Thrive Dashboard Â» Thrive Leads from the WordPress admin panel.

Next to the Lead Groups heading, simply click the ‘Add New’ button.

After that, a popup window will now open.

You can enter a name for your new lead group and click the ‘Add Lead Group’ button.

Next, you will need to create a new opt-in form.

Go ahead and click the ‘Add New Type of Opt-in Form’ button.

After that, Thrive Leads will ask you to select a form type.

You can select the ‘Ribbon’ type to add an alert bar to your website.

After adding the Ribbon opt-in form type, you will now need to add a form.

Simply click the ‘Add a form’ option under Lead Groups.

On the next screen, you can choose from any of your existing forms.

Since this is your first time making a form, go ahead and click the ‘Create Form’ button.

Now, you will see a popup window appear on your screen.

You can enter a name for your form and click the ‘Create Form’ button.

Your form will be added to the Ribbon lead group.

To edit the design of the form, just click the pencil icon.

Next, Thrive Leads will show multiple templates to choose from.

Simply select a template and click the ‘Choose Template’ button at the bottom.

This will launch the visual builder with a live preview, where you can customize your alert bar.

For instance, you can select the text in the template and change it according to your needs. Or click on the image in the alert bar and change it.

Once you are done editing, click the ‘Save Work’ button at the bottom.

You can now close the visual editor and head back to the form settings. Here, you will see options for settings the alert bar trigger, display frequency, and position.

By default, the alert bar will appear at the top when a page loads. However, you can change these settings.

For instance, if you click the Trigger option, you’ll see more options, like showing the alert bar after a certain time, when a user scrolls down a certain amount, or when a user reaches the bottom of the page.

Besides that, you can also change the display frequency. The alert bar will appear all the time by default to all the users.

However, you can edit this and display your alert bar to the same visitor after a certain number of days.

Next, you can head back to the Thrive Leads page from your WordPress dashboard.

After that, simply click the cog icon to open the Display Settings.

From here, you can choose which posts and pages the alert bar will appear on.

For instance, you can show it only on the front page or choose all posts and pages. There is also an option to exclude some pages and posts from showing your alert message.

When you are done, simply click the ‘Save & Close’ button.

The last step is to click the toggles to display your alert bar on desktop and mobile devices.

Once that’s done, your alert bar is now ready to collect user email addresses and build your email list.

You can visit your website to see it in action.

Method 3: Manually Create an Alert Bar Using Custom HTML/CSS

What if you don’t want to use OptinMonster or Thrive Leads? In this method, we will show you how to create a notification bar using HTML and CSS code.

Note: We don’t recommend this method for beginners. If you are new to WordPress or don’t feel confident adding code to your site, then we suggest using either of the methods above instead.

First, you will need to copy the following custom CSS code for the alert bar:
```
<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
An easy way to add CSS code to your website is by using WPCode. It is the best code snippet plugin for WordPress that helps you add custom code to your website.

Note: WPCode is one of WPBeginner’s own plugins. We created it to make it really easy to add scripts, HTML code, and more to your website pages. It comes with features like a built-in code snippets library, conditional logic, conversion pixels, and more.

First, you will need to install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you need to head to Code Snippets Â» + Add Snippet from the WordPress dashboard and select the ‘Add Your Custom Code (New Snippet)’ option.

After that, enter a title for your snippet at the top and paste the CSS code into the Code Preview area.

You will also need to change the Code Type to the ‘CSS Snippet’ option.

Next, you can scroll down to the Insertion section. This is where you can choose where the code will run.

Since we want the alert bar to appear across the entire website, you can use the default ‘Auto Insert’ method. You can also keep the ‘Run Everywhere’ setting.

Once that’s done, you can click the ‘Save Snippet’ button at the top.

You will also need to click the toggle on to activate the code.

After that, go to Code Snippets Â» Headers & Footer in your WordPress admin dashboard.

Just copy and paste the following line of HTML code into the ‘Header’ box:
```
<div class="alertbar">We are currently closed due to Covid-10.</div>
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
Here’s how that code should look in the ‘Header’ box in WPCode:

You can change the alert text to anything else you like. Don’t forget to click the ‘Save Changes’ button at the top of the page once you are done.

Now, you can visit your WordPress blog to see the alert bar. It should appear at the top of every page like this:

Tip: In a few WordPress themes, your alert bar may overlap your menu. You can alter the height of the bar to 40px or 30px to avoid this. You will also need to reduce the line height accordingly so that your text stays centered vertically in the bar.

Bonus: Add Custom Alert Messages to WordPress Pages

If you want to add custom alert messages to different parts of your website, such as product pages, checkout pages, and shop pages, then you can use SeedProd. It is the best website builder and landing page builder for WordPress.

The plugin offers a drag-and-drop builder to create a custom theme and website pages without editing code. It also offers an Alert block that you can place anywhere on your site.

This Alert block can warn customers that your stock is running low, particular items are on sale, or other time-sensitive warnings.

You can simply add the Alert block to your page and then add a title and description. The plugin also lets you add dynamic content, which allows you to insert dates and other query parameters.

There are also more customization options for the Alert block. For instance, you can change its alignment, adjust the font size, and edit the icon.

To learn more about using SeedProd, you can see this guide on how to create custom pages in WordPress.

We hope this article helped you learn how to create an alert bar in WordPress. You may also want to see our guide on the best WordPress drag and drop page builders to help you further customize your site and the best WooCommerce plugins to grow your store sales.

If you liked this article, then please subscribe to ourÂ YouTube ChannelÂ for WordPress video tutorials. You can also find us onÂ TwitterÂ and Facebook.

The post How to Create an Alert Bar in WordPress (3 Easy Ways) first appeared on WPBeginner.
11.07.2023
How to Make a Website Banner (3 Easy Ways)
Are you looking for an easy way to make a banner for your WordPress website?

A banner can highlight the products, services, or news updates offered by your website. It can increase user engagement, boost your click-through rate, and encourage visitors to take action.

In this article, we will show you how to easily make a banner for your WordPress website.

What Is a Website Banner?

A banner is a graphical display that stretches over the top, bottom, or side of a WordPress website. It often includes a brand name and logo, along with other visual elements, to promote a specific product, service, or event.

For example, if an online store has just announced a sale, then it can show a banner at the top of its pages to tell new visitors about the promotion and encourage them to make a purchase.

A well-designed banner can make a strong impression and invite visitors to explore the rest of your site. Plus, banners can also be used to promote affiliate products, increase brand awareness, build an email list by encouraging visitors to sign up for your newsletter, and drive traffic to other pages on your site.

You can also use banners to promote your social media accounts and encourage visitors to follow or like your pages.

What Is the Best Website Banner Size?

The ideal website banner size depends on the layout and specific marketing goals of your WordPress blog.

For example, if you want to display a rectangular and thin banner at the top of the screen, then you can use the Large Leaderboard size, which is 970 x 90.

Some of the other popular and most-used banner sizes include:
- 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
If you want to show a banner for an event in the sidebar, then you can use the Wide Skyscraper or Half-Page banner sizes. Similarly, you can also use the Medium banner size to display a square-shaped banner on your page.

If you are looking to display ad banners, then you may want to see our beginner’s guide on the highest-performing Google AdSense banner sizes and formats for WordPress.

Having said that, let’s see how you can easily make a banner on your WordPress website. For this tutorial, we will cover three methods to make a banner, and you can use the links below to jump to the method of your choice:
Method 1: Make a Website Banner Using OptinMonster (Recommended)

OptinMonster is the best WordPress banner plugin on the market that allows you to easily create floating bar and popup banners for your website.

It is the best conversion optimization and lead generation tool that helps you turn website visitors into subscribers and customers.

Plus, many of OptinMonster’s banner templates have optin fields that allow you to collect the names, email addresses, and phone numbers of your website visitors.

Step 1: Install OptinMonster on Your Website

First, you will need to sign up for an OptinMonster account. To do this, simply visit the OptinMonster website and click on the ‘Get OptinMonster Now’ button to set up an account.

After that, you have to install and activate the free OptinMonster plugin on your WordPress website. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

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

From here, you must click the ‘Connect Your Existing Account’ button to connect your WordPress site to your OptinMonster account.

This will open up a new window on your computer screen.

From here, you have to click the ‘Connect to WordPress’ button to move ahead.

Step 2: Create and Customize Your Banner

Now that you have connected your WordPress account with OptinMonster, head over to the OptinMonster Â» Campaigns page from the WordPress admin sidebar.

From here, you need to click on the ‘Create Your First Campaign’ button to start creating your website banner design.

This will direct you to the ‘Templates’ page, where you can start by choosing a campaign type.

For example, if you want to show your banner as a bar at the top of the screen, then you can pick the ‘Floating bar’ campaign. Similarly, you can select the ‘Popup’ campaign type to display your banner as a popup.

After that, you will also need to select a template for the campaign you chose.

For this tutorial, we will be choosing a template for the ‘Floating bar’ campaign type.

Next, you will be asked to give a name for the campaign that you are creating.

Simply type a name of your choice and click the ‘Start Building’ button to move forward.

This will launch the OptinMonster drag-and-drop interface on your screen, where you can start customizing your banner. From here, you can drag and drop fields of your choice from the sidebar on the left onto the banner.

For example, if you want to add social media icons to your banner to increase your followers, then you can drag and drop the Social Media block from the left sidebar.

After that, just click on the block to open its settings in the left column.

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

You can also add other blocks to display videos, images, text, or CTAs in your website banner design.

After that, you need to select the position of your banner.

By default, the OptinMonster floating bar is displayed at the bottom of your website screen once you start scrolling.

However, you can easily change this setting by clicking on the ‘Settings’ icon at the bottom of the sidebar on the left.

This will open up settings in the left column, where you must expand the ‘Floating Bar Settings’ tab. From here, simply toggle the ‘Load Floating Bar at the top of the page?’ switch to display the banner at the top.

Step 3: Add Triggers for Your Banner

Once you have designed your banner, switch to the ‘Display Rules’ tab at the top. From here, you can add rules for your banner display.

Remember that you only need to switch to this tab if you want to add a specific display trigger for your banner. Otherwise, you can skip to the next step.

For example, if you would like to show your banner when the user is about to leave your site, then you need to choose the ‘Exit Intent’ option.

Once you have done that, just select the ‘On all devices’ option from the dropdown menu in the middle. If you wish to use this display rule for mobile devices only, then you can also choose that option.

After that, pick the Exit Intent Sensitivity according to your liking and click the ‘Next Step’ button.

This will take you to a new screen. Here, you need to make sure that the ‘Optin’ option is selected for the ‘Show the campaign view’ dropdown menu.

Once you have done that, simply click the ‘Next Step’ button.

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

If you want to change something here, then you can click the ‘Edit’ button to fix it.

Step 4: Publish Your Banner

You can now switch to the ‘Publish’ tab at the top and click the ‘Save’ button in the top right corner of the screen.

After that, simply click on the ‘Publish’ button to display the banner on your website.

Now visit your website to see the banner at the top of your screen.

This is what it looked like on our demo site.

Method 2: Make a Website Banner Using Canva (Free)

If you want to make a website banner for free, then this method is for you.

Canva is a popular web-based tool that allows you to create all kinds of graphics, including banners, logos, posters, book covers, and more. It also offers a free version that you can use to create a website banner design.

Step 1: Create a Canva Account

First, you will need to visit the Canva website and click on the ‘Sign Up’ button to create an account.

If you already have a Canva account, then you can simply log in.

Upon account creation, you will be taken to your Canva account home page.

From here, you need to switch to the ‘Templates’ tab from the left column and then search for banner templates using the search box at the top.

This will display all the banner templates available in Canva. However, some of these templates may be locked because they are paid features.

Step 2: Design Your Website Banner

Once you select a template, Canva’s design interface will be launched on the screen.

From here, you can customize your banner template according to your liking. You can change the existing content in the template by clicking on the blocks and adding your own text.

You can even add different graphical elements like stickers, photos, and videos by switching to the ‘Elements’ tab in the left column.

Upon adding an element, you can further change its animation, position, and transparency from the menu at the top.

You can also upload media files from your own computer by switching to the ‘Uploads’ tab from the left column.

To add some text to your banner, simply switch to the ‘Textbox’ tab from the column on the left.

Once there, you can use default text styles or different font combinations to add some content to your banner.

You can even add a call to action with a link by selecting the text using your mouse. This will display a link icon at the top of the text.

Simply click on that icon and copy and paste the link you want to add.

After that, click the ‘Done’ button to save it.

Step 3: Get an Embed Code for the Banner

Once you are happy with your banner customization, just click the ‘Share’ button in the top right corner of the screen.

This will open up a prompt menu where you must select the ‘More’ option at the bottom.

This will take you to the ‘All Options’ menu, where you have to select the ‘Embed’ option.

Once you do that, a new prompt will open up on the screen. From here, simply click the ‘Embed’ button.

Canva will now create an HTML embed code for you.

Once it’s displayed on the screen, click the ‘Copy’ button under the ‘HTML embed code’ option.

Step 4: Add the HTML Embed Code in WordPress

You can now display your banner on your WordPress page, post, or sidebar according to your liking. For this tutorial, we will be showing our banner on a WordPress page.

First, you need to open the page or post where you want to add the banner.

Once there, click the ‘+’ button in the top left corner of the screen to find and add the Custom HTML block to the page.

Once you have done that, simply paste the embed code you copied into the block.

Finally, click the ‘Update’ or ‘Publish’ button to save your changes.

Now visit your website to see the WordPress banner in action.

Method 3: Make a Website Banner Using Thrive Leads

You can also create a website banner using Thrive Leads. It’s a popular WordPress popup plugin used by over 114,000+ websites.

With Thrive Leads, you can design banners that will help you capture leads on your WordPress site and grow your email list.

Step 1: Install Thrive Leads on Your WordPress Website

First, you will need to visit the Thrive Themes website and sign up for an account. Once you have done that, head over to your member dashboard.

From here, go ahead and click the â€˜Download and install the Thrive Product Manager plugin’ link.

Next, you need to visit your WordPress website to install and activate the Thrive Product Manager plugin. For detailed instructions, you may want to see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to the Product Manager tab from the WordPress admin dashboard and click the â€˜Log into my accountâ€™ button.

After entering your login credentials, you will be able to see your Thrive Product Manager dashboard.

From here, you can select the products that you want to install and use on your site. Simply choose the ‘Thrive Leads’ plugin and click the â€˜Install selected productsâ€™ button.

Step 2: Create a Website Banner

After the plugin installation, you need to visit the Thrive dashboard Â» Thrive Leads page from the WordPress admin sidebar.

Once you are there, just click the ‘Add New’ button next to the ‘Lead Groups’ option.

This will display the ‘Add New Lead Group’ popup on your screen, where you need to type a name for the lead group you are creating.

Make sure to name the lead group in a way that will help you identify it.

For instance, if you are creating a banner to build your email list, then you can name your lead group ‘Email List Campaign’.

After that, the lead group you created will be added to the screen. From here, you have to click the ‘Add New Type Of Opt-In Form’ button.

This will open a new prompt where you must choose the type of banner you would like to create.

You can create a slide-in, ribbon, widget, in-content, lightbox, or scroll mat banner according to your liking.

These banners will be like a form as they will collect data from your users, including email addresses, phone numbers, and more.

For this tutorial, we will be creating a ribbon banner for our site.

Upon choosing a website banner design type, the prompt will automatically disappear from the screen.

Now, to open your lead group dashboard, you must click the ‘Add’ button in the right corner of your Lead Groups tab.

This will take you to your Lead Groups dashboard, where all the forms and lead reports for the group will be displayed after your campaign goes live.

For example, if you want to create a banner to capture email addresses, then all the user information you collect through the banner will be displayed here.

For now, you just have to click the ‘Create Form’ button to start building your banner.

This will open up a new prompt where you must provide a name for the form and click the ‘Create Form’ button.

Once your form has been created, it will be displayed in your Lead Groups dashboard.

From here, you have to click the ‘Edit Design’ button in the right corner to start building your banner.

Step 3: Customize Your Website Banner

The Thrive visual editor will now be launched in a new tab on your screen.

From here, you can start by selecting a template for your banner from the ‘Thrive Leads Library’ prompt.

You can then use one of the pre-made template as it is or further customize it with the visual editor. Upon making your choice, simply click the ‘Choose Template’ button to move forward.

After adding a template for a ribbon banner, you can easily customize the elements in it by clicking on each one. This will open up the element’s settings in the sidebar on the left.

For example, if you want to change the button color in your template, then you simply need to click on it to open its settings in the sidebar.

If you want to add a completely new element to your banner, then you can also do that by clicking the ‘+’ icon in the right corner of the screen.

This will open the ‘Add Elements’ sidebar on the right, where you can drag and drop elements of your choice onto the banner.

For instance, if you want to add social media account buttons to your banner, then you will have to drag and drop the Social Follow element from the right sidebar.

Once you are happy with your banner, click the ‘Save Work’ button in the bottom left corner to store your changes.

After that, you need to return to your Lead Groups dashboard.

Step 4: Configure Banner Settings

Once you are back in your dashboard, you can change the position of your banner by clicking on the ‘Position’ option in the form row.

This will open the ‘Position Settings’ prompt, where you can choose your preferred banner position from the dropdown menu.

After that, click the ‘Save’ button.

Next, to configure the display frequency of the banner, click the ‘Display Frequency’ option in the form row.

This will open the ‘Display Settings’ prompt, where you can use the slider to determine the number of times the banner should be displayed on the screen.

If you keep the number 0, then the banner will be displayed at all times. Upon making your choice, click the ‘Save’ button to store your settings.

If you want to add a specific trigger for your banner display, then you need to click the ‘Trigger’ option in the form row.

This will display the ‘Trigger Settings’ prompt, where you can choose a trigger for your banner from the dropdown menu, such as after a certain period of time or when a user reaches the bottom of the page.

Once you are done, click the ‘Save’ button to save your settings.

Step 5: Publish Your Banner

After you have configured the banner settings, you need to exit your Lead Groups dashboard and head back to the Thrive Leads dashboard by clicking on the link at the top.

Once you are there, expand your Lead Groups tab and toggle the ‘Display On Desktop’ switch to ‘On’. If you also want to display your banner on mobile devices, then you can toggle the ‘Display On Mobile’ switch to ‘On’.

After that, click the gear icon in the top right corner of the Lead Groups tab to open up the display settings.

Here, you can select the website pages that you want the banner to be displayed on. For instance, if you want the banner to show at the top of all the pages and posts, then you can check the box next to these options.

Finally, click the ‘Save and Close’ button to save your changes.

Now, you can visit your website to check out the banner displayed at the top of the page.

This is what it looked like on our demo website.

We hope this article helped you learn how to easily make a website banner for WordPress. You may also want to see our beginner’s guide on how to customize colors on your WordPress website and our top picks for the best web design software.

If you liked this article, then please subscribe to ourÂ YouTube ChannelÂ for WordPress video tutorials. You can also find us onÂ TwitterÂ and Facebook.

The post How to Make a Website Banner (3 Easy Ways) first appeared on WPBeginner.
07.07.2023