La fonction de fenêtre pop-up d'Elementor est également utile lorsque nous construisons des pages web à l'aide de l'éditeur Elementor ; cette fonction peut vous aider à attirer l'attention de l'utilisateur, à fournir des informations importantes ou des offres spéciales, etc. Voyons comment Elementor crée une fenêtre popup et la configure.

Création d'une fenêtre contextuelle

Tout d'abord, une fenêtre contextuelle doit être créée, et vous pouvez mettre en place votre première fenêtre contextuelle en suivant les étapes ci-dessous. Suivez ce guide en utilisant l'outilBouton poussoir manuelDéclenche une fenêtre contextuelle.

1. Allez dans Dashboard > Templates > Popup > Add New
2. Nommez le modèle et cliquez sur "Créer un modèle"
3. Choisissez un modèle dans la bibliothèque ou créez votre propre design !
4. Cliquez sur "poste"Cliquez ensuite sur "Enregistrer et fermer"
5. Ouvrir une nouvelle page dans Elementor (CTRL / CMD + E, Nouvelle page)
6. Glisser le widget bouton
7. Sous "Mise en page", sélectionnez l'option"Liens" > "Dynamique" > "Actions" > "Popups"
8. cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)fenêtre contextuelle>Ouvrir une fenêtre pop-up> Sélectionnez la fenêtre contextuelle que vous avez créée
9. Allez sur la page Live, cliquez sur le bouton et voyez appara?tre la fenêtre pop-up.

Pour ce type de fenêtre contextuelle de base qui appara?t lorsque vous cliquez sur un bouton, aucune condition, aucun déclencheur ni aucune règle avancée n'est nécessaire.

Il s'agit de la configuration de base. Essayez-la pour vous familiariser avec l'utilisation des popups d'Elementor.

Configuration des fenêtres pop-up

Une fenêtre contextuelle est une fenêtre modale d'appel à l'action qui s'ouvre et couvre une page à un moment précis ou dans des conditions spécifiques. Les fenêtres pop-up sont con?ues pour attirer l'attention de l'utilisateur après qu'il a effectué une action.

Premièrement, rendez-vous à l'adresse suivanteModèles > Fenêtre contextuelle. Contr?lez la présentation, les conditions, les règles et les styles de la fenêtre pop-up, puis concevez le contenu de la fenêtre pop-up.prenez notePour modifier les paramètres de la fenêtre contextuelle, cliquez sur l'ic?ne de l'engrenage Popup Settings dans la barre d'outils située en bas du panneau.

Conception de fenêtres pop-up

mettre en place

ouverture (jargon des échecs)

1. ampleurPour définir la largeur exacte de la fenêtre contextuelle, utilisez px ou vh.
2. HauteurLa largeur et la hauteur de la fenêtre popup : Utilisez px ou vh pour définir la hauteur exacte de la fenêtre popup. Utilisez une largeur et une hauteur de 100vh pour créer une fenêtre contextuelle plein écran.
3. niveau (de réalisation, etc.): permet de sélectionner la position horizontale de la fenêtre contextuelle, à gauche, au centre ou à droite.
4. perpendiculaire: permet de sélectionner la position verticale de la fenêtre contextuelle, en haut, au centre ou en bas.
5. SuperpositionAffichage de l'arrière-plan : afficher ou masquer l'arrière-plan
6. bouton de fermetureBouton de fermeture : Choisissez d'afficher ou de masquer le bouton de fermeture
7. Combien de secondes avant l'affichage du bouton ?(si l'affichage du bouton d'arrêt est sélectionné) : sélectionner le nombre de secondes à attendre avant d'afficher le bouton d'arrêt.
8. Animation d'entréeSélectionnez l'animation d'entrée pour la fenêtre contextuelle à partir des options déroulantes, telles que Fondu et Zoom. Sélectionnez n'importe quel effet d'animation pour en avoir un aper?u.
9. Animation de sortieSélectionnez l'animation de sortie de la fenêtre contextuelle à partir des options déroulantes, telles que Fondu et Zoom. Sélectionnez n'importe quel effet d'animation pour en avoir un aper?u.
10. Durée de l'animation: définit la durée de l'animation en millisecondes

Paramètres généraux

1. légende: Saisissez un titre pour la fenêtre contextuelle. Ce titre ne sera affiché que dans le back-end et ne sera pas montré à l'utilisateur.
2. état des lieux: à l'état de projet, en attente, privé ou délivré

Paramètres de prévisualisation

Prévisualiser le contenu dynamique en tant queChoisissez une archive, une page, un message, un média ou une page 404.

Remarque : pour afficher la sélection, vous devez recharger la page après avoir sélectionné le contenu dynamique.

coiffure

fenêtre contextuelle

1. Type d'arrière-planSélection d'une couleur d'arrière-plan, d'une image ou d'un dégradé
2. Type de bordureSélectionnez le type de bordure : aucune, solide, double, en pointillés, en tirets ou à encoches.
3. Rayon de la bordureDéfinition du rayon de la bordure pour contr?ler l'arrondi des coins de chaque c?té de la fenêtre contextuelle
4. ombre du cadreOptions d'ombrage de la bo?te d'ajustement : Options d'ombrage de la bo?te d'ajustement

écraser

Type d'arrière-planSélection d'une couleur d'arrière-plan, d'une image ou d'un dégradé

bouton de fermeture

1. placementLe bouton de fermeture peut être affiché à l'intérieur ou à l'extérieur de la fenêtre pop-up.
2. position verticaleLe bouton de fermeture : Utilisez le curseur pour sélectionner la position verticale du bouton de fermeture.
3. position horizontaleLe bouton de fermeture : Utilisez le curseur pour sélectionner la position horizontale du bouton de fermeture.

Normal |Hover

1. couleur: Sélection de la couleur du bouton "Fermer" dans les états "Normal" et "Survolé".
2. couleur de fondCouleur d'arrière-plan : Choisissez la couleur d'arrière-plan du bouton "Fermer" dans les états "Normal" et "Survolé".
3. Taille?: Définir la taille du bouton de fermeture

élevé

élevé

1. Intervalle de temps pour l'affichage du bouton de fermeture (secondes): Entrez le nombre de secondes. Le bouton Fermer n'appara?tra qu'une fois ce temps écoulé.
2. Temps d'arrêt automatique (ms): Entrez le nombre de millisecondes à attendre avant de fermer automatiquement la fenêtre pop-up. Laissez ce champ vide pour désactiver la fermeture automatique.
3. Empêcher la fermeture de l'overlayLe choix de Oui empêche l'utilisateur de fermer la fenêtre contextuelle en cliquant sur la superposition.
4. Empêche d'appuyer sur la touche ESC pour fermer l'application.Le choix de "Oui" empêche l'utilisateur de fermer la fenêtre contextuelle en appuyant sur la touche ESC.
5. Désactiver le défilement des pagesPour empêcher les utilisateurs de faire défiler la page affichée derrière la fenêtre contextuelle, sélectionnez "Oui".
6. éviter les fenêtres pop-up multiplesSi l'utilisateur voit une autre fenêtre contextuelle sur la page qu'il visite, sélectionnez Oui pour masquer cette fenêtre.
7. Ouvrir par sélecteurSélectionnez les sélecteurs (ID CSS, classes ou éléments de données) qui déclencheront manuellement la fenêtre contextuelle.
8. marge: Ajustement des marges
9. RembourrageAjuster l'espacement autour de la fenêtre pop-up
10. Classe CSS: ajouter des classes personnalisées sans points (par exemple, my-class)

CSS personnalisé

CSS personnalisé: Saisissez votre propre CSS

Contr?ler les fenêtres publicitaires intempestives par des paramètres de publication

Conditions de réglage

condition préalablePermet de définir les pages du site sur lesquelles la fenêtre contextuelle sera affichée.

Définissez les conditions permettant de déterminer où la fenêtre contextuelle est utilisée (à l'exclusion des déclencheurs manuels). Par exemple, ajoutez la condition "Contient" et sélectionnez l'option"Singulier">"Accueil"pour afficher la fenêtre contextuelle uniquement sur la page d'accueil du site.

Définition des déclencheurs

bascule (électronique)est l'action de l'utilisateur qui provoquera l'apparition de la fenêtre contextuelle de votre campagne. Pour chaque option qui provoquera l'apparition de la fenêtre contextuelle, sélectionnez Oui ou Non.

1. Lorsque la page se chargeSi la valeur est "Oui", le nombre de secondes à attendre avant de déclencher la fenêtre contextuelle au chargement de la page est défini.
2. roulerSi la valeur est "Oui", sélectionnez la direction (vers le haut ou vers le bas) et la durée du défilement avant le déclenchement de la fenêtre contextuelle. Le défilement vers le bas est basé sur le défilement de la page vers le bas.pour cent; le défilement vers le haut est basé sur le défilement vers le hautnombre de pixels.
3. Sur le défilement vers l'élémentSi la valeur est Oui, entrez le nom du sélecteur (CSS ID) qui déclenchera une fenêtre contextuelle lorsque l'utilisateur fera défiler la page jusqu'à elle. L'ID CSS doit également être ajouté à l'onglet Avancé de l'élément.
4. en cliquant surSi la valeur est "Oui", entrez le nombre de clics qui déclencheront la fenêtre contextuelle.
5. post-inactivitéSi la valeur est "Oui", entrez le nombre de secondes d'inactivité de l'utilisateur qui déclenchera l'affichage de la fenêtre contextuelle.
6. Intention de sortie de la page: La valeur "Oui" permet de déclencher une fenêtre contextuelle lorsque l'activité de la souris de l'utilisateur indique qu'il souhaite quitter la page.

Règles avancées

Règles avancéesSpécifie les conditions supplémentaires qui doivent être remplies pour générer la fenêtre contextuelle.

1. Affiché après combien de pages vuesSi elle est définie sur Oui, elle définit le nombre de pages vues avant le déclenchement de la fenêtre contextuelle.
2. Affiché après combien de sessionsSi la valeur est "Oui", le nombre de sessions utilisateur avant le déclenchement de la fenêtre pop-up est défini (la session commence lorsque l'utilisateur visite le site et se termine lorsque l'utilisateur ferme son navigateur).
3. Montrer jusqu'à combien de foisNombre d'ouvertures : Nombre maximum de fois que la fenêtre contextuelle peut être affichée. Si la valeur "Count" est réglée sur "On Open", la fenêtre popup ne pourra s'ouvrir que le nombre de fois défini. Si le nombre est réglé sur "Fermé", la fenêtre contextuelle ne s'ouvrira que jusqu'à ce que l'utilisateur la ferme pour la Xe fois, après quoi elle ne s'ouvrira plus. Ce paramètre est enregistré dans la mémoire locale et y restera jusqu'à ce qu'il soit supprimé.
4. Lorsque l'on arrive d'un URL spécifiqueSi la valeur est Oui, la fenêtre contextuelle est affichée ou masquée lorsque l'utilisateur arrive d'une URL spécifique (saisissez une URL spécifique). Regex est une option permettant aux utilisateurs avancés de définir des règles avancées pour faire correspondre des modèles d'URL.
5. Affichage à l'arrivéeSi cette option a la valeur "Oui", elle indique si l'utilisateur est arrivé par un moteur de recherche, un lien externe (saisissez l'URL d'un lien spécifique) et/ou un lien interne (saisissez l'URL d'un lien spécifique).
6. Cacher aux utilisateurs connectés: Régler sur Oui pour masquer les popups pour tous les utilisateurs connectés ou pour des r?les personnalisés sélectionnés. Cette fonction peut ne pas fonctionner correctement pour les sites mis en cache !
7. Affiché sur l'appareilAffichage sur les ordinateurs de bureau, les tablettes et/ou les appareils mobiles : Régler sur "Oui" pour choisir d'afficher sur les ordinateurs de bureau, les tablettes et/ou les appareils mobiles.

Attention :Si la page n'est pas rechargée ou saisie à nouveau, la fenêtre contextuelle ne peut pas être affichée plus d'une fois.

Contr?le des fenêtres contextuelles par déclenchement manuel

Les fenêtres pop-up peuvent être déclenchées manuellement. Les liens dynamiques peuvent utiliser l'option Action popup pour activer ou désactiver les fenêtres popup, et les formulaires peuvent utiliser l'option Agir lors de la soumission pour activer ou désactiver les fenêtres popup. Tout élément peut avoir un sélecteur unique (classe, ID ou élément de données) qui déclenche manuellement une fenêtre contextuelle lorsque l'on clique sur l'élément.

• à partir de n'importe quel élément lié, sélectionnezDynamique > Actions > Popup. Cliquez sur l'ic?ne"Fenêtres pop-up".choisir par"Ouvrir une fenêtre pop-uppeut-être"Fermer les fenêtres pop-up".. Si vous choisissez de fermer la fenêtre contextuelle, "n'est plus affichéL'option " " sera disponible.
• Dans le formulaire Elementor, sélectionnezActions postérieures à la soumission > Ajouter une action > Ouvrir la fenêtre pop-up ou Fermer la fenêtre pop-up
• à partir des sélecteurs personnalisés : tout élément peut avoir un sélecteur qui peut être utilisé comme déclencheur manuel de fenêtre contextuelle. Modifiez l'élément et allez àAvancé > Classes CSS(ouID CSS), puis spécifiez le nom de la classe (sans le point initial) ou le nom de l'ID (sans le # initial) de l'élément. Dans la fenêtre contextuelle de l'outilConditionsdans lequel la page contenant l'élément est sélectionnée à l'aide d'un sélecteur unique (par ex.Conditions > Inclure > Singulier > Pages > Titre de votre page). La fenêtre contextuelle sera déclenchée lorsque l'utilisateur visitera la page et cliquera sur l'élément. Cette fonction est utile pour ouvrir des fenêtres contextuelles à partir des éléments du menu de navigation d'un thème, du contenu des widgets d'un éditeur de texte, d'éléments ou de scripts qui ne font pas partie d'Elementor, etc.

Lors du déclenchement d'une fenêtre contextuelle à partir d'un sélecteur personnalisé, il convient de noter que l'élément ne doit pas nécessairement être un "lien". Les éléments normalement non cliquables (par exemple du texte simple) peuvent également être cliqués pour générer une fenêtre contextuelle. Notez également que les déclencheurs et les règles avancées sont ignorés lors de l'utilisation de cette option.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.