Popups are a frequently used resource to attract the attention of your visitors with information of their interest or to connect with them through, for example, subscriptions to your mailing list.
Taking advantage of the fact that last week we published a post with 75 celebrity websites created in WordPress, in this post we want to show you four complete examples of how you can create some of the popup designs used precisely on celebrity websites. To do this, we use Nelio Popups to create a wide variety of popups and Nelio Forms to add the contact forms shown in some of them.
Table of Contents
Popup Displayed on George Michael’s Website
If you were a big fan of George Michael, you can still enjoy his music and learn more about his life on his website. When you enter the site, the first thing that appears is a large popup that invites you to click on the subscription button that takes you to the page where you must fill in the data to subscribe to his newsletter.
Creating the look and feel of this popup with Nelio Popups is very simple. The Nelio popups editor to create any popup window is like the block editor: you just add Media & Text block where you can add the photo on the left side and, on the right, the logo, the text and a couple of buttons.
In the first button, the subscription button, you must add the link to the page where the subscription form is located and, in the properties of the second button, you must indicate that the window should close after clicking on it.
Make sure you have indicated that the window is positioned in the center, has no padding or margins and you have also added an icon to close the popup.
Also, in order for the image to fill the entire left side of the popup, you must make sure that you’ve specified that the image has a full width alignment and a Cover image style.
In this case, the popup is displayed immediately when you enter the page. To do this, in the properties of the popup you can specify that it opens on any page when it is displayed.
Finally, in the original web we see that once the popup is closed, it is not shown again when accessing the web again. To replicate this behavior, in the advanced properties of the popup you can limit the number of times a popup is shown to a visitor and if you want to show it again after a certain time.
And that’s it, you already have created the popup with the same look and feel.
Of course, you can tweak the font style or add some margins to make it identical to the original. And as you can see in the previous image, the button to close the popup, in this case, is inside it.
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
Popup Displayed on the Tom Jones Website
Let’s look at a second example. On Tom Jones’s website, after accepting the cookie banner, a simple popup appears at the bottom right of the website for you to subscribe to their mailing list.
In this case, instead of having a button that redirects you to a subscription page, the popup itself already includes the field in which you must enter an email address and the subscription button.
How do we create this popup window with Nelio Popups? We simply create a group with a light brown background color that includes a title, a text, and a form (we created it with Nelio Forms, but you can use any other plugin). In the group we will also have added some padding to it to make it look more like the original.
The popup will have a reduced width and will be displayed in the bottom right of the page where we will have added some margin from the edge.
About the behavior, in this case the popup is not displayed immediately when you enter the main page, but it appears after a short interval of time. For it, in the popup properties, you can specify a delay before its showing:
And just as before, we also make sure that once the popup is closed, it is not shown again when accessing the web again. And that’s it, you already have the new popup created.
As you can see in the previous image, in this case, in order for it to be more similar to the original, we would need to install the font used on the web in the theme.
Note that when you create a form with Nelio Forms, you have several submission options, as well as integration with Akismet to control spam.
Popup Displayed on Kim Kardashian’s Website
Kim Kardashian’s website sells skin care beauty products. The first time you enter, and after a few seconds, the following popup appears in the center of the screen:
As you may have guessed, creating this popup is “like a mix” of the two previous ones. We create a Media & Text block in which we add the image on the left side and, as before, we make sure that it takes up the entire space and is of type cover image in the popup. On the right side, we add the title, subtitle, a form, and some more text.
In this case, we have selected a round gray icon with a cross in the middle as the close button. And the behavior is the same as before: that is, there is a delay to its displaying and, once the window is closed, it’s not shown to the user again for some time.
Popup Displayed on the Selena Gomez Website
Selena Gomez website also shows a popup centered on the page to subscribe.
The form in this case not only asks for an email address but also to select the country and a set of checkboxes where we specify where exactly to subscribe. Nelio Forms allows you to add different types of fields, including the country selector and a group of checkboxes:
Also, in the advanced properties, you can indicate if and how you want the form information to be stored, or if you want it to be saved in Mailchimp.
Don’t forget to add the close window icon and the popup behavior properties and… that’s it! You have your new popup created.
Summary
If you want to get more visitors to subscribe to your mailing list, you can create popups to invite them to do so. With the Nelio Popups and Nelio Forms plugins, seamlessly integrated with WordPress, you’ll see how easy it is to replicate some of the popups that are displayed on celebrity websites.
The great advantage of using these plugins is that you will not use any external tool to your WordPress and you can use the block editor you already know with the styles and appearance of your theme to create popups. I encourage you to try them out and, if you have any questions or comments, do not hesitate to contact us.
Featured image by Pablo Heimplatz on Unsplash.
Leave a Reply