How to create a login form popup

Create a login form popup with a sliding background.

You will learn to:

1. Click a button to open a login form popup
2. Use slides as background for popup window
3. Redirigir al Username a su panel al cerrar la ventana emergente

Diseñe la ventana emergente y su contents

1. Go Templates> Popups> Add new and give your new popup a name. (An alternative method is to press CMD + E or CTRL + E to open Discoverer, search for Popup, choose Add new popupand give it a name.)
2. Choose a predesigned popup template or close the library overlay and design your popup from scratch. For this example, we will design our own.

Popup Window> Design Tab

1. Custom width: Set to 300px
2. Height: Select Custom
3. Custom height: Set to 600px
4. Cover: Set to Hide

Popup> Advanced tab

Avoid overlapping closure: Set to Yes

Content

Section 1:

Design tab

1. Minimun height: Set to 600 px
2. Ahora agregue un widget de encabezado e inicio de sesión a la sección. Ajuste el contenido y el estilo del título según be necesario.
3. In the login widget> Content> Additional options> Redirect after login: Configúrelo en Activado e ingrese la Url de la página para redirigir al usuario a

Section 2:

Design tab

Minimun height: Set to 600 px

Slide widget> Design tab

1. Height: Set to 600px
2. Images > For each image on 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 on

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

1. Section 2 > Margin> Top: -600 px (600 negatives)
2. Section 1 > Z-index: 1

Publish the popup

Click on the To post button. There are no advanced conditions, triggers, or rules for this popup, so click the Save and close button.

Control the pop-up window

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

Widget button> Content

1. Botón> Link: Click the Dynamic icon And below Behavior, choose Arise
2. Click Arise again and select Toggle popup.
3. Now in the Pop-up field, start typing to find the login widget you just created.
4. Click on the To update button.

Popup> Advanced tab

1. Avoid overlapping closure: Set to Yes

All ready. Visit the page with the button Login as normal visitor (no login). Click on the Log in button. If you complete the form and log in successfully, you will be redirected to the page that you have designated as your dashboard. If you choose to close the popup instead of logging in, click the Log in again to toggle / close the popup window.