Latest Tech and Tips

How to Create a Welcome Mat for Your WordPress Site (+ Examples)


Do you need to add a full-screen welcome mat to your web site?

A welcome mat is a full display screen dynamic overlay that may assist you to get extra e-newsletter subscribers, eBook downloads, gross sales to your merchandise, and so on.

In this text, we’ll share how to create a welcome mat for your WordPress website together with some nice welcome mat examples to study from.

How to create a welcome mat for your WordPress site (+ examples)

Why a Welcome Mat Can Boost Your Conversions

More than 70% of tourists leaving your web site won’t ever return, except you change them into an e-mail subscriber or a buyer.

A welcome mat is a giant, fullscreen interstitial that blocks the view of the remainder of your web site’s content material to seize consumer’s consideration.

That may sound like a dangerous thought, but it surely’s a smart way to get your message in entrance of tourists right away.

If guests don’t need what you’re providing, then they will merely shut the welcome mat.

Similar to exit-intent popups, welcome mats are efficient in driving excessive conversion charges.

Of course, you’ll need to give individuals a good purpose to join. If you don’t have already got a lead magnet, then you might supply a low cost code and even a freebie.

Here are two very completely different welcome mat examples which have very excessive conversion charges:

Spin a Wheel - Gamified Welcome Mat

The above is a welcome mat that we use on our WPForms weblog, and it converts very effectively.

The screenshot beneath is a welcome mat that we use to give certainly one of our lead magnets that does a actually good job in getting customers to be a part of our e-mail e-newsletter:

Cheat Sheet Lead Magnet Welcome Mat

That being mentioned, let’s take a take a look at how to simply add a welcome mat to your web site.

How to Create a Welcome Mat for Your Website

First, you want to join for an OptinMonster account. It is one of the best lead era software program on this planet and permits you to simply create optin kinds together with welcome mats.

Note: WPBeginner founder, Syed Balkhi, first constructed OptinMonster to assist develop our personal subscribers and gross sales. Now it’s a premium plugin that’s utilized by lots of of hundreds of internet sites.

Next, you’ll want to set up and activate the OptinMonster WordPress plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

The plugin connects the OptinMonster app to your web site. Once you’ve activated the plugin, click on on the OptinMonster menu in your WordPress dashboard to join your account.

Connect OptinMonster to your website

After that, you’re prepared to create your welcome mat.

Creating a Welcome Mat for Your Website

In your WordPress dashboard, click on the ‘Create New Campaign’ button to begin creating your welcome mat.

Create new OptinMonster campaign

This will take you to the OptinMonster web site.

Next, select ‘Fullscreen’ for your marketing campaign kind.

Choose fullscreen as your campaign type

You’ll want to select a template for your marketing campaign. We’re going to use the ‘Entrance’ template, however you possibly can decide a completely different one if you need.

Select the Entrance template to start creating your welcome mat

After you click on the ‘Use Template’ button, you’ll see a marketing campaign builder display screen like this:

The default Entrance template

You can change something you want right here. You’ll need to edit the textual content to correspond to your personal supply, in fact.

Simply click on on any aspect, and also you’ll see that you may edit it within the left-hand pane.

Editing the text of your welcome mat

Next, go to Optin Settings » Fullscreen Background. Click on ‘Background Color’ and set the A (Alpha) worth to 100.

Removing the transparency from your welcome mat

This ensures that your welcome mat gained’t be clear in any respect, so none of your website content material will present by means of.

The subsequent step is to let your welcome mat slide in. You can do that by clicking the ‘Home’ button on the left-hand facet then clicking ‘Fullscreen Settings’.

From right here, you want to toggle the ‘Display a Page Slide?’ choice on, in order that it’s inexperienced.

Editing the fullscreen settings

This implies that your welcome mat will slide down from the highest of the display screen as a substitute of fading into view.

Next, you want to swap to the ‘Success’ view of your welcome mat. This is what your customers will see after they carry out the specified motion.

Editing the success view of your welcome mat

Once you’re pleased together with your welcome mat, you possibly can arrange the way it’s going to show in your website.

Getting Your Welcome Mat to Display on Your Site

You can set the way you need to show your welcome mat popup by switching to the Display Rules tab in OptinMonste.

By default, OptinMonster campaigns show on all pages of your website after the customer has been there for 5 seconds. Since that is a welcome mat, you’ll in all probability need it to show instantly. Just change this worth to 0 seconds.

Editing your welcome mat's display rules in OptinMonster

By default, the welcome mat will show on each web page of your website. You can simply embrace or exclude particular pages through the use of OptinMonster’s personalization guidelines.

There are a lot of different personalization and focusing on choices like consumer’s location, what gadgets they’ve of their eCommerce cart, what have they completed beforehand in your website, and so on.

Once you’re prepared to make your welcome mat reside, merely click on ‘Publish’ on the prime of the display screen. You will want to swap the toggle subsequent to ‘Status’ in order that it reveals ‘Live’.

Making your welcome mat campaign live

Don’t neglect to click on ‘Save’ to save your modifications.

Now, head to your WordPress web site and click on on the OptinMonster menu merchandise. You ought to see your welcome mat marketing campaign, plus every other campaigns you’ve created.

Viewing your OptinMonster campaigns in your WordPress dashboard

If it’s not showing, simply click on ‘Refresh Campaigns’ to fetch information from the OptinMonster web site.

To try your marketing campaign, you possibly can go to your web site in a new incognito browser window. You ought to see your welcome mat slide in seamlessly from the highest of your display screen.

Examples of Great Welcome Mats

Let’s take a take a look at some welcome mat examples from completely different industries. For every, we’ll undergo what they’re doing effectively, plus any minor modifications we would recommend.

1. Singularity

This welcome mat from Singularity prompted customers to join and watch the livestream of the Singularity University Global Summit. It was massively profitable and captured over 2,000 new e-mail signups in underneath 9 days.

Singularity's welcome mat example

We significantly preferred the nice use of the emblem, the clear fonts, and the brilliant “Remind Me!” button.

2. Goins, Writer

This welcome mat from Goins, Writer presents a free information. It’s a clear, easy supply, and the minimalist design is in step with the remainder of the web site.

Goins, Writer's welcome mat example

We felt that the “Yes” and “No Thanks” buttons are clear and straightforward to use, and using numbers within the headline makes for a compelling supply.

3. AVweb

This welcome mat has a giant, clear picture of a small airplane. It’s immediately eye-catching.

AVweb's welcome mat example

We preferred the nice picture, and the clear “Sign Me Up!” name to motion. One small doable tweak could be to shorten the tagline to keep away from having it cowl the highest of the airplane.

4. Loaded Landscapes

This welcome mat from Loaded Landscapes is a little completely different from different examples. The background is barely clear.

Loaded Landscape's welcome mat example

We preferred the clear supply and the passion of the purple name to motion button. The background of the positioning beneath the welcome mat could possibly be a little distracting, so it may be value altering it to be absolutely opaque, nonetheless.

5. OptimizeMyBnb

This welcome mat was used on a particular web page, linked to from a e-book the web site proprietor offered by means of third-party retailers. These retailers didn’t go on clients’ particulars, although. Using a welcome mat on this method helped seize clients’ e-mail addresses.

Optimize Your BnB (book) - welcome mat example

We felt the very clear headline, subheading, and name to motion textual content all labored effectively. However, we thought that “item” on the button ought to in all probability be “items” plural. This highlights the significance of rigorously proofreading your welcome mat’s textual content.

There are dozens extra full screen welcome mat examples that you may see, however we didn’t add all of them on this information.

If you’re trying for extra inspiration, listed below are some issues you are able to do with a fullscreen welcome mat:

  • Present a focused supply or coupon
  • Showcase new services and products
  • Let guests know what to count on from the positioning
  • Win new subscribers by highlighting their finest content material
  • Point guests to their social media profiles
  • Collect e-mail subscribers as a part of a prelaunch section

If you’re severe about bettering your web site conversions, then welcome mat and even exit fullscreen interstitial are one of many highest changing gadgets you possibly can add to your web site.

We hope this text helped you learn the way to create a welcome mat for your web site and that you simply discovered the examples inspiring. You may need to take a take a look at our comparability of one of the best e-mail advertising providers and our checklist of the will need to have WordPress plugins.

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