Comment configurer les popups sur un site WordPress avec Elementor

Les pop-ups sont des fenêtres d'appel à l'action qui s'ouvrent et couvrent une page à un moment précis ou dans des conditions spécifiques. Les pop-ups captent principalement l'attention des utilisateurs après qu'ils ont 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 des fenêtres pop-up, puis concevez leur contenu.

prenez noteCliquez sur Ejecter dans la barre d'outils au bas du panneau.Mise en place de l'engrenagepour modifier les paramètres de la fenêtre contextuelle.

Conception de fenêtres pop-up

mettre en place

ouverture (jargon des échecs)

1. ampleurLa largeur exacte de la fenêtre pop-up est définie en px ou en vh.
2. degré élevéPour les fenêtres popup, utilisez px ou vh pour définir la hauteur exacte de la fenêtre popup. Utilisez 100vh pour la largeur et la hauteur afin de créer des fenêtres contextuelles 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. écraserAffichage 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. Bouton d'affichage après x secondes(si Show Off button est sélectionné) : sélectionner le nombre de secondes à attendre avant d'afficher le bouton Off.
8. Aller à l'animationSélectionnez l'animation d'entrée pour la fenêtre contextuelle à partir des options déroulantes, telles que le fondu et le 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 n'est affiché que dans le backend et ne sera pas montré à l'utilisateur.
2. état des lieuxProjet, en cours d'examen, privé ou publié

Paramètres de prévisualisation

La dynamique de la prévisualisation est la suivanteChoisissez une archive, une page, un message, un média ou une page 404.

prenez notePour afficher la sélection, la page doit être rechargée après la sélection du 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 bordureChoisissez le type de bordure : pas de bordure, bordure solide, bordure à deux lignes, bordure en pointillés, bordure en tirets ou bordure crantée.
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. placement: Choisissez d'afficher le bouton "Fermer" à l'intérieur ou à l'extérieur de la fenêtre pop-up.
2. position verticale: Utilisez le curseur pour sélectionner la position verticale du bouton "Fermer".
3. position horizontale: Utilisez le curseur pour sélectionner la position horizontale du bouton "Fermer".

Normal | survol

1. couleur: Sélection de la couleur du bouton "Fermer" en mode normal et en mode 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. TailleRéglage de la taille du bouton de fermeture : Réglage de la taille du bouton de fermeture

Avancé

Avancé

1. Affiche le bouton d'arrêt après (en secondes): Entrez le nombre de secondes. La touche Off ne s'affiche qu'une fois ce temps écoulé.
2. Temps d'arrêt automatique (ms): Saisissez le nombre de millisecondes à attendre avant de fermer automatiquement la fenêtre contextuelle. Laissez ce champ vide pour désactiver la fermeture automatique.
3. Empêcher l'annulation de la fermetureLe choix de Oui empêche l'utilisateur de fermer la fenêtre contextuelle en cliquant sur Ignorer.
4. Empêche la fermeture en appuyant sur la touche ESCLe choix de "Oui" empêche l'utilisateur d'appuyer sur la touche ESC pour fermer la fenêtre contextuelle.
5. Désactiver le défilement des pagesLe choix de "Oui" empêche l'utilisateur de faire défiler la page affichée derrière la fenêtre contextuelle.
6. Éviter les fenêtres pop-up multiplesSi l'utilisateur voit une autre fenêtre contextuelle sur la page visitée, sélectionnez "Oui" pour masquer cette fenêtre.
7. Appuyer sur le sélecteur pour ouvrirSé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 sur quelles pages du site web la fenêtre contextuelle apparaîtra.

Définissez des conditions pour déterminer où la fenêtre contextuelle sera utilisée (à l'exclusion des déclencheurs manuels). Par exemple, ajoutez une condition d'inclusion et sélectionnez
Singulier > Accueil.afin que la fenêtre pop-up ne s'affiche que sur la page d'accueil du site.

Définition des déclencheurs

bascule (électronique)est l'action de l'utilisateur qui fait apparaître la campagne. Pour chaque option qui provoque une fenêtre contextuelle, sélectionnez "être"ou"bouché".

1. Lorsque la page se chargeSi la valeur est "Oui", le nombre de secondes d'attente avant le déclenchement de la fenêtre contextuelle après le chargement de la page est défini.
2. roulerSi elle est définie sur Oui, cette option permet de sélectionner 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 vers le bas de la page.pour cent; Scroll Up est basé sur Scroll Upnombre de pixels.
3. Lors du défilement vers un é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 l'élément. 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 ont déclenché la fenêtre contextuelle.
5. post-inactivitéSi la valeur est "Oui", entrez le nombre de secondes d'inactivité de l'utilisateur qui a déclenché 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 avoir consulté X pagesSi la valeur est "Oui", le nombre de pages vues avant le déclenchement de la fenêtre contextuelle est défini.
2. Affiché après X 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. Affiché jusqu'à X fois: Nombre maximal de fois où la fenêtre contextuelle peut être affichée. Si le compte est défini sur ouvert, la fenêtre contextuelle ne pourra s'ouvrir que le nombre de fois défini. Si le nombre est réglé sur Désactivé, la fenêtre contextuelle ne sera ouverte 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écifiqueRegex est une option pour les utilisateurs avancés qui leur permet de définir des règles avancées pour faire correspondre les modèles d'URL.
5. Affichage à l'arrivéeSi cette option a la valeur "Oui", elle indique si l'utilisateur provient d'un moteur de recherche, d'un lien externe (saisissez l'URL d'un lien spécifique) et/ou d'un lien interne (saisissez l'URL d'un lien spécifique).
6. Masquer les 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.

Note : La fenêtre pop-up ne peut pas être affichée plus d'une fois sans recharger ou réintroduire la page.

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 des actions de popup pour ouvrir ou fermer des fenêtres popup. Les formulaires peuvent utiliser une option d'action post-soumission pour ouvrir ou fermer une fenêtre contextuelle. Tout élément peut déclencher manuellement une fenêtre contextuelle lorsqu'il est cliqué à l'aide d'un sélecteur unique (classe, ID ou élément de données).

• À partir de n'importe quel élément lié, sélectionnezDynamique > Fonctionnement > Fenêtre contextuelle. Cliquez sur l'icônefenêtre contextuellechoisir parOuvrir une fenêtre pop-uppeut-êtreFermer la fenêtre pop-up. Si vous choisissez de fermer la fenêtre pop-up, le message "n'est plus affichéL'option " " sera disponible.
• Dans le formulaire Elementor, sélectionnez"Actions après soumission" > "Ajouter une action" > "Ouvrir la fenêtre contextuelle" ou "Fermer la fenêtre contextuelle".
• À 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) et attribuez à l'élément un nom de classe (sans le point initial) ou un nom d'identification (sans le # initial). Dans la fenêtre contextuelle de l'outilcondition préalabledans laquelle la page contenant l'élément avec le sélecteur unique est sélectionnée (par exemple, la pageConditions > Contains > Singular > Pages > Your Page Title). 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 du thème, du contenu des widgets de l'éditeur de texte, des éléments ou des scripts qui ne font pas partie d'Elementor, etc.

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.