Easy methods to Create a Welcome Mat for Your WordPress Web site (+ Examples)

by | Mar 17, 2023 | Etcetera | 0 comments

Do you want so to upload a full-screen welcome mat in your internet web page?

A welcome mat is a full-screen, dynamic overlay that mean you can get further newsletter subscribers, eBook downloads, product sales in your products, and further.

In this article, we’ll proportion the easiest way to create a welcome mat on your WordPress internet web page, along with some great welcome mat examples to be told from.

How to create a welcome mat for your WordPress

Why a Welcome Mat Can Boost Your Conversions

More than 70% of visitors leaving your WordPress web page gained’t ever return except for you convert them into email correspondence subscribers or shoppers.

A welcome mat is a large, full-screen interstitial that blocks the view of the rest of your internet web page’s content material subject matter to snatch the individual’s attention.

That can sound like an unpleasant idea, then again it’s a great way to get your message in front of visitors straight away.

If visitors don’t want what you’re offering, then they may be able to simply close the welcome mat.

Actually, you’ll want to give other folks a superb explanation why to sign up must you’re showing a welcome mat as a substitute of an exit-intent popup, related to a discount code or most likely a freebie.

For example, you’ll have noticed in style eCommerce shops offer a definite discount using a full-screen welcome mat with gamification.

Gamified Spin a Wheel Campaign

In several cases, you’ll have noticed in style bloggers using a full-screen welcome mat to develop their electronic mail e-newsletter.

Goins writer welcome screen mat

That being said, let’s take a look at the easiest way to easily add a welcome mat in your internet web page.

Simple how to Create a Welcome Mat for Your Internet web page

Probably the most very best techniques of making a welcome mat in WordPress is using OptinMonster. It’s the perfect lead era instrument on this planet and allows you to merely create optin forms, along side welcome mats.

First, you’ll need to visit the OptinMonster internet web page and signup for an account. You’re going to wish at least the Fundamental plan to create fullscreen overlays.


Next, you’ll need to arrange and switch at the OptinMonster WordPress plugin. For added details, see our step-by-step knowledge on the best way to set up a WordPress plugin.

The plugin connects the OptinMonster app in your internet web page. In the event you’ve activated the plugin, you’ll see the setup wizard in your WordPress dashboard. Cross ahead and click on at the ‘Connect Your Present Account’ button.

Connecting an OptinMonster account to WordPress

Next, a brand spanking new window will open.

Simply click on at the ‘Connect to WordPress’ button.

Connect OptinMonster to WordPress

Now, you’re ready to create your welcome mat.

Creating a Welcome Mat for Your Internet web page

You’ll head to OptinMonster » Campaigns to create a brand spanking new advertising and marketing marketing campaign.

Cross ahead and click on at the ‘Create Your First Advertising marketing campaign’ button to start out out creating your welcome mat.

See also  10 Maximum Helpful ChatGPT Equipment So A ways
Create first OptinMonster campaign

A brand spanking new window will now pop up where you’ll select pre-built templates or select ready-to-use campaigns and lead magnets, inspired by means of a good fortune producers. OptinMonster moreover gives you the option to hire a consultant to customize your campaigns.

For this tutorial, we can use the ‘Templates’ selection.

Choose a template or playbook

This may increasingly sometimes take you to the OptinMonster advertising and marketing marketing campaign builder.

Next, select ‘Fullscreen’ on your advertising and marketing marketing campaign type.

Select fullscreen template and campaign

You’ll need to select a template on your advertising and marketing marketing campaign. We will use the ‘Entrance’ template, then again you’ll choose a definite one if you want to have.

In the event you’ve determined on a template, cross ahead and enter a name on your advertising and marketing marketing campaign and click on at the ‘Get began Construction’ button.

Click start building

Next, you’ll customize your advertising and marketing marketing campaign using the drag-and-drop builder. You’ll change the rest you favor proper right here.

There are different blocks that can be added to the selling marketing campaign, like pictures, text, buttons, and further. You’ll moreover want to edit the text to correspond in your offer.

Customize your fullscreen campaign

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

For example, we can change the headline of the full-screen welcome mat for our demo advertising and marketing marketing campaign.

Edit the text of welcome mat

The next step is to let your welcome mat slide in. You’ll do this by means of clicking the Settings gear icon on the bottom left-hand side.

From proper right here, you want to toggle the ‘Display a Internet web page Slide?’ option to allow it.

Display a page slide

This means your welcome mat will slide down from the best of the show as a substitute of fading into view.

Next, you want to switch to the ‘Excellent fortune’ view of your welcome mat. That’s what your shoppers will see when they perform the required movement. If you want to have, you’ll customize the success view or use the default template.

View the success view of welcome screen mat

In the event you’re satisfied along side your welcome mat, you’ll organize the way it’s going to turn on your internet web page.

Appearing the Welcome Mat on Your WordPress Internet web site

You’ll set the easiest way to turn your welcome mat popup by means of switching to the ‘Display Rules’ tab in OptinMonster.

There are lots of personalization and involved in alternatives like shoppers’ location, what items they have in their eCommerce cart, what they have carried out up to now on your internet web page, pass out intent, and further.

By the use of default, OptinMonster campaigns display on all pages of your internet web page after the buyer has been there for 5 seconds.

Select display rules

Since this can be a welcome mat, you’ll maximum indisputably want it to turn in an instant. Merely change this price to 0 seconds.

See also  Core Internet Vitals: What You Wish to Know for 2024

By the use of default, the welcome mat will display on every internet web page of your internet web page. You’ll merely include or exclude explicit pages by means of using OptinMonster’s personalization regulations.

Choose display rules for welcome mat

You’ll click on at the ‘Next Step’ button whilst you’re carried out.

Next, you’ll see further alternatives for appearing your advertising and marketing marketing campaign. For example, you’ll add an affect or play a valid when the selling marketing campaign turns out on an individual’s show.

For this tutorial, we’ll use the default settings and click on at the ‘Next Step’ button.

Add effects to campaign

On the next show, you’ll see a summary of your display regulations settings.

You’ll edit the settings faster than publishing the selling marketing campaign.

Summary of display rules

Once you’re ready to make your welcome mat are living, simply cross to the ‘Submit’ tab at the best of the show.

Cross ahead and change the Submit Status from ‘Draft’ to ‘Submit.’

Publish welcome screen campaign

Don’t forget to click on on ‘Save’ to store your changes and close the selling marketing campaign builder.

Next, you’ll see WordPress Output Settings on your advertising and marketing marketing campaign. Ensure that your advertising and marketing marketing campaign is printed.

If it isn’t, then simply click on at the Status dropdown menu and select the ‘Published’ selection. Don’t forget to click on at the ‘Save Changes’ button whilst you’re carried out.

Change the status of welcome mat campaign

To check out your advertising and marketing marketing campaign, you’ll visit your internet web page in a brand spanking new incognito browser window.

You’ll have to see your welcome mat slide in seamlessly from the best of your show.

Fullscreen welcome mat preview

Examples of Great Welcome Mats

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

1. Singularity

This welcome mat from Singularity triggered shoppers to sign up and watch the livestream of the Singularity School Global Summit. It was once as soon as hugely a good fortune and captured over 2,000 new email correspondence signups in beneath 9 days.

Singularity fullscreen mat preview

We in particular like the nice use of the logo, the clear fonts, and the bright “Remind Me!” button.

2. Goins, Writer

This welcome mat from Goins, Writer supplies a unfastened knowledge. It’s a clear, simple offer, and the minimalist design is in line with the rest of the internet web page.

Goins writer welcome screen mat

We in point of fact really feel that the “Certain” and “No Thanks” buttons are clear and easy to use, and the use of numbers throughout the headline makes for a compelling offer.

3. AVweb

This welcome mat has a large, clear image of a small airplane. It’s in an instant attention-grabbing.

Welcome mat example AVweb

We like the nice image, and the clear “Sign Me Up!” title to movement. One small imaginable tweak may well be to shorten the tagline to avoid having it cover the best of the image.

See also  React Absolute best Practices to up Your Sport in 2022

4. Loaded Landscapes

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

Loaded landscape

We like the clear offer and the zeal of the red title to movement button. The background of the internet web page beneath the welcome mat most often is a bit distracting, so it may well be price changing it to be completely opaque, then again.

5. OptimizeMyBnb

This welcome mat was once as soon as used on a selected internet web page, which was once as soon as integrated as a clickable link within a e guide the internet web page owner purchased through third-party retail outlets. The ones retail outlets didn’t pass on shoppers’ details, despite the fact that. Using a welcome mat in this means helped snatch shoppers’ email correspondence addresses.

Optimize your Airbnb thank you

We in point of fact really feel the very clear headline, subheading, and call-to-action text all worked well, and that the ‘no, thanks’ button is used well to provide the individual sense of FOMO.

There are dozens further full-screen welcome mat examples that you simply’ll see, then again we didn’t add they all in this knowledge.

While you’re searching for further inspiration, proper right here are some things you’ll do with a fullscreen welcome mat:

  • Supply a focused offer or coupon
  • Blow their own horns new services and products
  • Let visitors know what to expect from the internet web page
  • Win new subscribers by means of highlighting their highest content material subject matter
  • Stage visitors to their social media profiles
  • Gather email correspondence subscribers as part of a prelaunch phase

While you’re serious about making improvements to your internet web page conversions, then welcome mat and even pass out fullscreen interstitials are one of the most absolute best converting portions you’ll add in your internet web page.

We hope this newsletter helped you learn how to create a welcome mat on your internet web page and that you just found out the examples inspiring. You may also want to try our comparison of the perfect electronic mail advertising services and products, and our report of the must-have WordPress plugins.

While you liked this newsletter, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll moreover to seek out us on Twitter and Fb.

The put up Easy methods to Create a Welcome Mat for Your WordPress Web site (+ Examples) first appeared on WPBeginner.

WordPress Maintenance

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more


Submit a Comment