Email Pop Ups – Hustle Pro Tutorial

Learn how to add an email popup to your website using the new Hustle Pro plugin:

Written Instructions

Start by visiting the Hustle tab in your WordPress admin menu in your admin dashboard. You’ll see sub-menu items for the Hustle Dashboard, where we track your conversion data and offer an overview of your available optins and custom content modules; Email Opt-ins, which is your tool for building and managing Opt-ins; Custom Content, which lets you create pop-ups, slide-ins, and more; and Settings, which covers Hustle’s general settings. As you might expect.

Creating Opt-ins with Hustle

Let’s jump right in and build your first Opt-in. Start by going to Hustle > Email Opt-in, then Create New Opt-in

Opt-in Basic Setup

We’ve designed the opt-in and custom content module creation tools to work in an accordion, so you’ll see all the settings on the same page, but only the settings you’re currently working on will be visible. The first panel is basic setup.

Here you can:

1. Name your Opt-in
2. Select and connect to one of our supported email services. (currently, we support MailChimp.)
3. If you’ve selected a mail service, you’ll be asked to select which mailing list to add new subscribers to, if you have more than one. MailChimp users who use Groups to sort their newsletter subscribers can also choose to display available groups and choose one as the default. (See screenshot under this list for an example.)
4. Choose to create an opt-in in test mode, if you’re not connecting to a mail service.
5. Choose to save a list of emails collected from Opt-in submissions locally to your WordPress site which you can then download as a .csv file.
6. Cancel, save, and move to the next step.

Content & Design

This is the panel where all the magic happens. These settings will allow you to customize your Opt-ins easily and efficiently.

Content

In the first section, you’ll give your Opt-in a title, add content for both the main Opt-in and the success message, and choose an image. The toggle beneath the featured image allows you to fit or fill your image within your Opt-in.

If you need to edit your image, hover over it and click the ellipsis button (…) that appears to edit or swap out this image.

You’ll also notice the Preview icon in this panel, which is a white eye icon in a dark blue circle. Click this at any time to see a preview of how your Opt-in will look.

Structure

This section allows you to choose from our four different display styles built into Hustle. You can add fields for first and last name, and swap the image position from this section.

Type One

Type Two

Type Three

Type Four

Colors

This section lets you choose between our array of pre-selected color palettes, or to choose your own custom colors.

Shapes, Borders, Icons

This section allows even further customization, with options for separating or joining form fields, rounding corners, adding a drop shadow, and selecting icon options.

Custom CSS

This toggle will open and close the custom CSS tool, if you need even more customization options.

Hit Next Step to save and move on to the final screen. You’re almost there!

Display Method

This last panel will allow you to choose your display method. Hustle has five different ways to display your Opt-ins. The first three have specific settings on the Display Method panel.

1. You can display your Opt-in below your content on posts, pages, and custom post types.
2. You can display your Opt-in in a pop-up.
3. You can display your Opt-in in a slide in.
4. You can display your Opt-in in a widget, which is done in Appearance > Widgets.
5. You can display your Opt-in by placing using the shortcode Hustle will create for you. You’ll see it at the top of the Display Settings panel, in the segment named Information.

Click open the settings for any of the three options displayed on this tab to adjust how you’d like your Opt-in to behave.

After Content

The After Content settings allow you to choose which pages and posts your Opt-in appears on.

Beneath these settings, you can select an animation for your Opt-in. We’ve included a full array of fancy effects to make your Opt-in stand out for your users.

Pop Up

If you’d prefer to display your Opt-in in a pop-up, we’ve got you covered. Like the After Content option, you can choose the posts your pop up appears on based on categories and tags, and you can choose specific pages.

You can also select a trigger for your Pop Up.

You can trigger your pop up based on the following:

1. Time. The time trigger allows you to choose if you want the pop up to appear instantly or after a certain amount of time.
2. Scroll. The scroll trigger will activate the pop up after a user scrolls through a certain percentage of the page.
3. Click. The click trigger allows you to create an on-click trigger based on a CSS ID or class.
4. Exit Intent. This trigger will activate the pop up when the user is attempting to close the tab or window where the page is open.
5. AdBlock Use. This trigger activates the pop up if an ad blocker is detected in the browser.

The final settings for a pop up allowing you to choose an entrance and exit animation, choose an expiration period, and allow users to never see the pop up again.

Slide-In

Because we love our users so much, these two options are just scratching the surface of what you can do with Hustle. We also included a slide-in display option, so you get the functionality of another of our popular plugins, all rolled into this little gem. Let’s take a peek at what you can do.

Like the after content and pop up display options, you can adjust on which pages and posts your slide in will appear, as well as other display conditions.

Along with adjusting triggers…

…and slide-in specific settings.

When you’re finished designing your opt-in, choosing a format, and setting specific conditions, you’ll see this screen, which is an overview of all your Opt-in options.