At present, many WordPress users create and showcase a welcome mat for their websites, which acts as a friendly greeting for online visitors before they enter into the site. Typically, the welcome mat is similar to a full-screen popup, with which your readers cannot see the web contents behind it but can be greeted by a special message or a major call to action.
In most cases, the welcome mat should have the following elements.
- There are some lines of textual contents that are prominent and precise.
- There are some visual elements to achieve the eye-catching and visually appealing appearance.
- It takes up the whole screen without any white space.
- The welcome mat should be able to accomplish something, such as displaying the call to actions, releasing some website activities and introducing what your website is mainly about.
This time, we’d like to give you a detailed guide about this special website component, telling you when and how to create WordPress welcome mat.
When to Create WordPress Welcome Mat
Actually, we have found many popular websites that showcase the welcome mat for their visitors, which come with different purposes. Here, we have listed some general ones and you can consider creating and showing the welcome mat on your site if you are looking to achieve the same goal.
- You can display a CTA of email signup so as to build up your email list. This is beneficial for your website marketing.
- If you offer the freebie contents, services, products, discounts and coupon codes on your site, you can showcase them to encourage people to sign up.
- You can directly display a prominent “Get It” button or the “Buy It” button to entice people to make a purchase.
- If you hope people can learn what your site is all about before they enter into your website contents, you can make a summarized explanation in the welcome mat.
- Even, you can simply welcome people for accessing your site.
How to Create WordPress Welcome Mat
Actually, the concept of the welcome mat is coming from the SumoMe plugin. In this case, to create it, you can leverage this great WordPress plugin that powers more than 480,000 websites at present. To use it, you firstly need to install this tool on your WordPress site and click the SumoMe button. Here, you can hit the blue badge from the upper right of the screen to register an exclusive account.
After the account signup and login, you also need to choose your website from the drop-down menu for activation. And then, you can hit the Activate Now button.
This action can bring you a popup window that displays three options for you – Notification, Sumo Store and Settings. Here, you can directly click the Sumo Store button to install and to activate the welcome mat app offered by this plugin. Surely, you can make some configurations by clicking the Settings button. But personally, we think the default settings are proper.
In fact, this plugin has a lot of applications available for you to install, but this time, you only need to have the Welcome Mat Free option installed by navigating to the email category.
After clicking the target icon, now, you need to hit the Free button on the next screen. Note that you can get a short message to inform you of the successful installation.
Design the Welcome Mat
Now, all the preparations are done properly, and the next step is to design the welcome mat. For this, you should exit the app installation page and check the home module page. Here, you can find the Welcome Mat button. Click it.
Now, you can see a new page that looks like the following. Here, you firstly need to click the Design button from the left-hand column.
In the design page, you can choose the template for your welcome mat among the options of Gloss, Default and Atomic, choose the background color, enter the heading and detailed texts with the proper color and font, create the CTA button and the Opt Out button if you want, along with your customized contents and colors, select a Close button to minimize the welcome mat and click the Save button.
Here, we need to mention that you can customize the welcome mat for both of your mobile versioned site and the desktop versioned site.
Decide the Custom Fields
This is an optional step. If you choose to use the premium version of this plugin and want to add more fields in the email signup form that will be showcased on your welcome mat, you can check this step.
Here, you only need to click the Fields button under the Design button, and then, directly add your wanted fields such as the user name, phone number, gender, geographical location, website URLs and many more. This way, you can not only get the email of you subscribers but also some detailed information about them.
Determine the Behavior of the Welcome Mat
Actually, the welcome mat may annoy some of your readers, so this part is used to make it less irritating. Here, you can hit the Behavior button and choose the display frequency of the welcome mat. For instance, you can choose to always showcase it, do not show the mat to the same reader until your determined time has passed and do not display it for your successful subscribers.
Even, from this part, you can also disallow the ability for your readers to scroll down the welcome mat and redirect people to a particular webpage right after the subscription. Note that before clicking the Save button, you can firstly check the way your welcome mat will behave for your readers.
Set Up the Display Rules
Next, you should control when and where your welcome mat can be displayed by clicking the Display Rules button. Here, you can decide some “Show” rules and some “Don’t Show” rules based on your needs. For instance, you can make the welcome mat visible for all the pages, for some specific pages or sections only, for the mobile versioned website or for the desktop versioned site only.
Connect the Welcome Mat with the Email Service
Now, you should move to the essential section of Services, from which your subscribers can be pushed into your email list if they have made the call to action on your welcome mat for the email subscription.
This plugin has various email services such as MailChimp, Constant Contact, Aweber and many more. You simply need to click the icon of your target one and enter your login credential for the service connection. Note that if the connection is made successfully, you can see a green Connection button. In addition, if you want, you are allowed to connect to more than one service.
Make the Welcome Mat Alive
Now, you have already designed and customized your welcome mat in a proper manner, so the next step is to make it alive. For this, you simply need to move to the left-hand column to toggle the first button from Paused to Alive. Here, you can be notified with the Active message.
Finally, you can check the front-end of your website to figure out whether your welcome mat has been activated properly and whether it works the way you like.