Foto de Pablo Heimplatz de un concierto

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.

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.

Popup shown on George Michael's website
Popup displayed on George Michael ‘s website.

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.

Creating a popup like the one shown on George Michael's website
Creating a popup like the one displayed on George Michael’s website.

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.

Close popup on button click
Close the popup when clicking the button.

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.

Popup Image Features
Popup image properties.

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.

Advanced features of Nelio Popups
Advanced features of Nelio Popups.

And that’s it, you already have created the popup with the same look and feel.

Preview of the popup created
Preview of the popup created.

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.

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.

Popup shown on the Tom Jones website
Popup displayed on Tom Jones ‘s website.

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.

Creating a popup like the one shown on the Tom Jones website
Creating a popup like the one displayed on the Tom Jones website.

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:

Waiting time to show a popup
Waiting time for displaying a popup.

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.

Preview of the popup created
Preview of the 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:

Popup shown on Kim Kardashian's website
Popup displayed on Kim Kardashian ‘s website.

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.

Creating the popup like the one shown on the Kim Kardashian website
Creating the popup like the one displayed on the Kim Kardashian website.

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.

Preview of the popup created
Preview of the popup created.

Popup Displayed on the Selena Gomez Website

Selena Gomez website also shows a popup centered on the page to subscribe.

Popup shown on the Selena Gomez website
Popup displayed on the Selena Gomez website.

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:

Form created for the Selena Gomez popup
Form created for the Selena Gomez popup.

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.

Creating a popup like the one shown on the Selena Gomez website
Creating a popup like the one displayed on the Selena Gomez website.

Don’t forget to add the close window icon and the popup behavior properties and… that’s it! You have your new popup created.

Preview of the popup created
Preview of the 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

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.