Comment créer une fenêtre contextuelle de formulaire de connexion

Créez une fenêtre contextuelle de formulaire de connexion avec un arrière-plan glissant.

Vous allez apprendre à:

1. Cliquez sur un bouton pour ouvrir une fenêtre contextuelle de formulaire de connexion
2. Utiliser les diapositives comme arrière-plan de la fenêtre contextuelle
3. Redirigir al Nom d'utilisateur a su panel al cerrar la ventana emergente

Diseñe la ventana emergente y su Contenu

1. Aller Modèles> Popups> Ajouter un nouveau et donnez un nom à votre nouvelle fenêtre contextuelle. (Une autre méthode consiste à appuyer sur CMD + E ou CTRL + E pour ouvrir Découvreur, recherchez Popup, choisissez Ajouter une nouvelle fenêtre contextuelleet donnez-lui un nom.)
2. Choisissez un modèle de popup prédéfini ou fermez la superposition de la bibliothèque et concevez votre popup à partir de zéro. Pour cet exemple, nous concevrons le nôtre.

Fenêtre contextuelle> Onglet Conception

1. Largeur personnalisée: Défini sur 300 px
2. Hauteur: Sélectionnez Personnalisé
3. Hauteur personnalisée: Défini sur 600 px
4. Couverture: Définir pour masquer

Popup> onglet Avancé

Évitez de chevaucher la fermeture: Réglé sur Oui

Le contenu

Section 1:

Onglet Conception

1. Hauteur minimale: Défini sur 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 être necesario.
3. Dans le widget de connexion> Contenu> Options supplémentaires> Rediriger après la connexion: Configúrelo en Activado e ingrese la URL de la página para redirigir al usuario a

Section 2:

Onglet Conception

Hauteur minimale: Défini sur 600 px

Widget de diapositive> onglet Conception

1. Hauteur: Défini sur 600 px
2. Images > Pour chaque image de la diapositive, répétez les quatre changements d'options suivants:
3. Photo: Choisissez une image
4. Taille: Choisissez une couverture
5. Effet Ken Burns: Réglé sur Oui
6. Direction du zoom: Activer

Maintenant, plaçons les deux sections l'une sur l'autre.

1. Section 2 > Marge> Haut: -600 px (600 négatifs)
2. Section 1 > Indice Z: 1

Publier le popup

Clique sur le publier bouton. Il n'y a pas de conditions avancées, de déclencheurs ou de règles pour cette fenêtre contextuelle, alors cliquez sur le bouton Sauver et fermer bouton.

Contrôler la fenêtre contextuelle

1. Modifiez la page qui contient le bouton de connexion.
2. Modifiez le bouton de connexion. Si vous n'avez pas encore créé de bouton, vous pouvez le faire maintenant. Modifiez votre texte et votre typographie selon vos besoins.

Bouton Widget> Contenu

1. Botón> Relier: Cliquez sur l'icône Dynamique Et plus bas Comportement, choisir Surgir
2. Cliquer Surgir à nouveau et sélectionnez Basculer la fenêtre contextuelle.
3. Maintenant, dans le champ Popup, commencez à taper pour trouver le widget de connexion que vous venez de créer.
4. Clique sur le Mettre à jour bouton.

Popup> onglet Avancé

1. Évitez de chevaucher la fermeture: Réglé sur Oui

Tout prêt. Visitez la page avec le bouton Connexion en tant que visiteur normal (pas de connexion). Clique sur le Commencer la session bouton. Si vous remplissez le formulaire et que vous vous connectez avec succès, vous serez redirigé vers la page que vous avez désignée comme votre tableau de bord. Si vous choisissez de fermer la fenêtre contextuelle au lieu de vous connecter, cliquez sur le bouton Commencer la session à nouveau pour basculer / fermer la fenêtre contextuelle.