How To Create A Login Popup Form

Create a login form popup with a slider background.

You’ll learn how to:

1. Click a button to open a Login form popup
2. Use slides as a background for the popup
3. Redirect the user to her dashboard when closing the popup

Design The Popup And Its Content

1. Go to Templates > Popups > Add New and give your new Popup a name. (An alternative method is to press CMD+E or CTRL+E to open Finder, search for Popup, choose Add New Popup, and give it a name.)
2. Choose a pre-designed Popup template or close the Library overlay and design your Popup from scratch. For this example, we’ll design our own.

Popup > Layout Tab

1. Custom Width: Set to 300px
2. Height: Select Custom
3. Custom Height: Set to 600px
4. Overlay: Set to Hide

Popup > Advanced Tab

Prevent Closing On Overlay: Set to Yes

Content

Section 1:

Layout Tab

1. Minimum Height: Set to 600 px
2. Now add a Heading and Login Widget to the section. Adjust the heading content and style as needed.
3. In the Login Widget > Content > Additional Options > Redirect After Login: Set to On and enter the URL of the page to redirect the user to

Section 2:

Layout Tab

Minimum Height: Set to 600 px

Slides Widget > Layout Tab

1. Height: Set to 600px
2. Images > For each image of the slide, repeat the following four option changes:
3. Image: Choose an image
4. Size: Choose Cover
5. Ken Burns Effect: Set to Yes
6. Zoom Direction: Set to In

Now let’s place the two sections one on top of the other.

1. Section 2 > Margin > Top: -600 px (negative 600)
2. Section 1 > Z-Index: 1

Publish The Popup

Click the Publish button. There are no Conditions, Triggers, or Advanced Rules for this popup, so click the Save and Close button.

Control The Popup

1. Edit the page that contains the Login button.
2. Edit the Login button. If you haven’t already created a button, you can do so now. Edit its text and typography as needed.

Button Widget > Content

1. Button > Link: Click the Dynamic icon and under Actions, choose Popup
2. Click Popup again and select Toggle Popup.
3. Now in the Popup field, start typing to search for the Login widget you just created.
4. Click the Update button.

Popup > Advanced Tab

1. Prevent Closing On Overlay: Set to Yes

All done. Visit the page with the Login button on it as a normal visitor (not logged in). Click the Login button. If you fill out the form and successfully login, you’ll be redirected to the page you’ve designated as your dashboard. If you choose to close the popup instead of logging in, click the Login button again to toggle/close the popup.