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 de curseur.

Vous apprendrez à:

  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. Rediriger l’utilisateur vers son tableau de bord lors de la fermeture de la popup

Concevoir la fenêtre contextuelle et son contenu

  1. Accédez à Modèles> Popups> Ajouter nouveau et donnez un nom à votre nouveau Popup. (Une autre méthode consiste à appuyer sur CMD + E ou CTRL + E pour ouvrir le Finder , rechercher Popup, choisir Ajouter une nouvelle fenêtre contextuelle et lui donner un nom.)
  2. Choisissez un modèle de Popup préconçu ou fermez la superposition de la bibliothèque et concevez votre Popup à partir de zéro. Pour cet exemple, nous concevrons le nôtre.

Popup> Onglet Disposition

  1. Largeur personnalisée : définie sur 300 px
  2. Hauteur : sélectionnez Personnalisé
  3. Hauteur personnalisée : définie sur 600 px
  4. Superposition : définir pour masquer

Popup> Onglet Avancé

Empêcher la fermeture sur superposition : définissez sur Oui

Contenu

Section 1:

Onglet Disposition

  1. Hauteur minimale : définie sur 600 px
  2. Ajoutez maintenant un widget d’en- tête et de connexion à la section. Ajustez le contenu et le style du titre selon vos besoins.
  3. Dans le widget de connexion> Contenu> Options supplémentaires>  Rediriger après la connexion : sélectionnez Activé et entrez l’URL de la page vers laquelle rediriger l’utilisateur.

Section 2 :

Onglet Disposition

Hauteur minimale : définie sur 600 px

Widget Diapositives> Onglet Disposition

  1. Hauteur : définie sur 600 px
  2. Images > Pour chaque image de la diapositive, répétez les quatre changements d’options suivants:
  3. Image : choisissez une image
  4. Taille : choisissez la couverture
  5. Effet Ken Burns : réglé sur Oui
  6. Direction du zoom : définir sur In

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

  1. Section 2 > Marge> Haut: -600 px (moins 600)
  2. Section 1 > Indice Z: 1

Publier la fenêtre contextuelle

Cliquez sur le  bouton Publier . Il n’y a pas de conditions, déclencheurs ou règles avancées pour cette fenêtre contextuelle, cliquez donc sur le bouton Enregistrer et fermer .

Contrôler la fenêtre contextuelle

  1. Modifiez la page contenant le bouton Connexion.
  2. Modifiez le bouton de connexion. Si vous n’avez pas encore créé de bouton , vous pouvez le faire maintenant. Modifiez son texte et sa typographie au besoin.

Widget de bouton> Contenu

  1. Bouton> Lien : cliquez sur l’icône Dynamique et sous Actions , choisissez Popup
  2. Cliquez à nouveau sur Popup et sélectionnez Basculer la fenêtre contextuelle .
  3. Maintenant, dans le champ Popup, commencez à taper pour rechercher le widget de connexion que vous venez de créer.
  4. Cliquez sur le bouton Mettre à jour .

Popup> Onglet Avancé

  1. Empêcher la fermeture sur superposition : définissez sur Oui

Terminé. Visitez la page avec le bouton Connexion en tant que visiteur normal (non connecté). Cliquez sur le bouton Connexion . 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 à nouveau sur le bouton Connexion pour activer / fermer la fenêtre contextuelle.

https://docs.elementor.com/article/507-how-to-create-a-login-form-widget