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

Do you want to add a full-screen welcome mat to your website? A welcome mat is a full screen dynamic overlay that can help you get more newsletter subscribers, eBook downloads, sales to your products, etc. In this article, we’ll share how to create a welcome mat for your WordPress site along with some great welcome mat examples to learn from. Why a Welcome Mat Can Boost Your Conversions More than 70% of visitors leaving your website will never return, unless you convert them into an email subscriber or a customer. A welcome mat is a large, fullscreen interstitial that blocks the view…

Creating a Welcome Mat for Your Website

You’ll need to choose a template for your campaign. We’re going to use the ‘Entrance’ template, but you can pick a different one if you want.

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

You can change anything you like here. You’ll want to edit the text to correspond to your own offer, of course.

Simply click on any element, and you’ll see that you can edit it in the left-hand pane.

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

This ensures that your welcome mat won’t be transparent at all, so none of your site content will show through.

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

From here, you need to toggle the ‘Display a Page Slide?’ option on, so that it’s green.

This means that your welcome mat will slide down from the top of the screen instead of fading into view.

Next, you need to switch to the ‘Success’ view of your welcome mat. This is what your users will see after they perform the desired action.

Once you’re happy with your welcome mat, you can set up how it’s going to display on your site.

Getting Your Welcome Mat to Display on Your Site

You can set how you want to display your welcome mat popup by switching to the Display Rules tab in OptinMonste.

By default, OptinMonster campaigns display on all pages of your site after the visitor has been there for 5 seconds. Since this is a welcome mat, you’ll probably want it to display immediately. Just change this value to 0 seconds.

By default, the welcome mat will display on every page of your site. You can easily include or exclude specific pages by using OptinMonster’s personalization rules.

There are a lot of other personalization and targeting options like user’s location, what items they have in their eCommerce cart, what have they done previously on your site, etc.

Once you are ready to make your welcome mat live, simply click ‘Publish’ at the top of the screen. You will need to switch the toggle next to ‘Status’ so that it shows ‘Live’.

Don’t forget to click ‘Save’ to save your changes.

Now, head to your WordPress website and click on the OptinMonster menu item. You should see your welcome mat campaign, plus any other campaigns you’ve created.

If it’s not appearing, just click ‘Refresh Campaigns’ to fetch data from the OptinMonster website.

To check out your campaign, you can visit your website in a new incognito browser window. You should see your welcome mat slide in seamlessly from the top of your screen.

Examples of Great Welcome Mats

Let’s take a look at some welcome mat examples from different industries. For each, we’ll go through what they’re doing well, plus any minor changes we might suggest.

1. Singularity

This welcome mat from Singularity prompted users to sign up and watch the livestream of the Singularity University Global Summit. It was hugely successful and captured over 2,000 new email signups in under 9 days.

We particularly liked the great use of the logo, the clear fonts, and the bright “Remind Me!” button.

2. Goins, Writer

This welcome mat from Goins, Writer offers a free guide. It’s a clear, simple offer, and the minimalist design is in keeping with the rest of the website.

We felt that the “Yes” and “No Thanks” buttons are clear and easy to use, and the use of numbers in the headline makes for a compelling offer.

3. AVweb

This welcome mat has a large, clear image of a small airplane. It’s instantly eye-catching.

We liked the great image, and the clear “Sign Me Up!” call to action. One small possible tweak would be to shorten the tagline to avoid having it cover the top of the airplane.

4. Loaded Landscapes

This welcome mat from Loaded Landscapes is a little different from other examples. The background is slightly transparent.

We liked the clear offer and the enthusiasm of the red call to action button. The background of the site beneath the welcome mat could be a little distracting, so it might be worth changing it to be fully opaque, however.

5. OptimizeMyBnb

This welcome mat was used on a specific page, linked to from a book the website owner sold through third-party retailers. These retailers didn’t pass on customers’ details, though. Using a welcome mat in this way helped capture customers’ email addresses.

We felt the very clear headline, subheading, and call to action text all worked well. However, we thought that “item” on the button should probably be “items” plural. This highlights the importance of carefully proofreading your welcome mat’s text.