Créer des popups Elementor dans WooCommerce

Nous sommes tous de grands fans de WooCommerce. Il est simple à configurer et à personnaliser. Des fonctionnalités qui simplifient la création et la gestion d'une boutique e-commerce dynamique et puissante sont incluses dans le package.

Cependant, la création d'une page de commerce électronique réussie ne se limite pas à l'ajout de produits populaires. Toutes les pages doivent également être visuellement attrayantes. Plus votre site Web est visuellement attrayant et convivial, plus il est probable qu'il attirera plus de clients.

• Configuration de la fenêtre contextuelle
• Vous pouvez également créer des popups à l'aide du constructeur visuel dans Elementor
• Préférences de publication

Bien que WooCommerce crée le panier et la page de paiement pour vous lorsque vous créez votre site, Elementor les rend plus attrayants en les personnalisant.

Vous avez la possibilité de les redessiner ou de recommencer depuis le début. Vous pouvez répéter le processus pour toutes les autres pages de votre site Web.

En créant une page de remerciement chaleureuse et en mettant à jour vos pages Mon compte et Conditions d'utilisation, vous pouvez gagner le cœur et l'esprit de vos clients.

La fonctionnalité glisser-déposer d'Elementor, combinée à ce didacticiel, vous garantira une expérience sans problème lors de la création de vos pages.

Après avoir configuré votre boutique wooCommerce, vous souhaiterez peut-être la rendre plus attrayante pour vos visiteurs et clients. L'ajout de popups donne à l'utilisateur une autre impression et une nouvelle envie de rester sur votre boutique.

 Pour créer une fenêtre contextuelle, accédez à Modèles > Fenêtres contextuelles dans la barre de menus. Une liste de toutes vos fenêtres contextuelles s'affichera, et si vous n'en avez pas encore créé une, vous verrez quelque chose de similaire à ce qui suit :

Une fois que vous avez cliqué sur Ajouter un POPUP ( ce qui est assez explicite), vous demandera de lui donner un nom, puis sélectionnez un modèle dans la premade ex amp les affiche. Divers modèles sont disponibles à des fins multiples ; certains sont appropriés pour les annonces, d'autres pour promouvoir une remise, d'autres sont idéaux pour encourager les utilisateurs à s'inscrire à quelque chose. Il existe même des amp pour avertir les utilisateurs de l'utilisation de cookies ou d'autres notifications GDPR. Dès que vous avez trouvé quelque chose que vous aimez, cliquez dessus pour voir un aperçu plus grand, puis appuyez sur le bouton Insérer.

Vous serez redirigé vers le générateur de popup dans le backend WordPress après avoir cliqué sur ce bouton.

Si vous avez déjà travaillé avec Elementor, vous vous sentirez comme chez vous avec l'interface, les options et la façon dont tout est conçu pour vous. C'est essentiellement le même processus que la création de modèles de page Elementor dans WordPress.

Sur le côté droit de l'écran se trouve le canevas principal, qui affiche un aperçu de ce sur quoi vous travaillez actuellement. Vous pouvez modifier et personnaliser chaque élément individuellement en le sélectionnant et en sélectionnant Modifier > Modifier les éléments. Lorsque vous avez terminé, vous verrez les commandes et les préférences affichées dans la barre latérale à gauche, ainsi que l'option Publier votre travail.

Configuration de la fenêtre contextuelle

 C'est à ce moment-là que vous devriez voir un aperçu de votre popup - soit une ardoise vierge, soit le modèle que vous avez choisi.

Les paramètres contextuels, toujours ouverts par défaut, vous permettent de personnaliser le fonctionnement du canevas contextuel lui-même. Ils sont les suivants :

• C'est là que vous voudrez passer le plus de temps car c'est là que vous pourrez créer différents types de popups. Autrement dit, en ajustant ces paramètres, vous pourrez faire les effets suivants :

• Les popups modaux sont un type de fenêtre modale.
• Slide-ins, barres de notification, etc.

De plus, vous pouvez personnaliser plusieurs autres paramètres importants.

Les options suivantes sont disponibles dans l' onglet Paramètres :

• Modifiez la hauteur et la largeur de l'image.
• Changer l'orientation verticale ou horizontale de l'objet (ex amp le, vous pouvez le fixer au haut ou en bas pour créer une barre de notification)
• Prendre une décision sur l'utilisation ou non une superposition (ce qui vous permet, par ex amp le, gris sur l'arrière - plan lorsque la fenêtre est active)
• Désactivez le bouton de fermeture de votre navigateur.
• Inclure une animation pour l'entrée.

Vous pouvez effectuer les opérations suivantes dans l' onglet Style :

• Vous pouvez modifier la couleur de l'arrière-plan, en faire un dégradé ou utiliser une image comme arrière-plan.
• Si la superposition est activée, configurez-la.
• Si vous avez activé le bouton de fermeture, vous devez le configurer.

Enfin, l'onglet Avancé contient divers paramètres d'importation qui vous permettent d'effectuer les opérations suivantes :

• Affichez le bouton de fermeture ou faites en sorte que la fenêtre contextuelle se ferme automatiquement après un certain temps.
• En cliquant sur la superposition ou en appuyant sur la touche d'échappement, vous pouvez empêcher la fermeture de la fenêtre.

• Désactivez la possibilité de faire défiler la page vers le bas.
• Évitez les popups multiples (si vous avez ciblé plusieurs popups sur la même page, cela évitera que vos visiteurs ne soient ennuyés).

Pour vous donner une idée de la façon dont ces paramètres affecteront votre popup, voici à quoi cela ressemble lorsque vous modifiez la position dans le coin inférieur droit de la fenêtre :

Jetez un œil à la façon dont la fenêtre contextuelle est désormais fixée de manière permanente dans le coin inférieur droit. En utilisant un déclencheur de défilement en conjonction avec une animation d'entrée, vous pouvez obtenir un effet de glissement agréable et discret.

Vous pouvez également créer des popups à l'aide du constructeur visuel dans Elementor

Dès que vous avez terminé les paramètres de base des fenêtres contextuelles, vous pouvez commencer à concevoir le contenu réel de votre fenêtre contextuelle en faisant glisser et en déposant des éléments dans l'interface visuelle de glisser-déposer.

Vous pouvez utiliser n'importe quel widget Elementor de votre choix, ce qui vous donne un grand contrôle sur la conception finale. Le widget Formulaire est la seule chose que vous devez absolument inclure car c'est la seule qui vous permet de créer votre formulaire d'inscription par e-mail.

Avec le widget Formulaire, vous avez un contrôle total sur les champs que vous souhaitez proposer, ainsi que sur le texte et l'apparence du bouton de soumission. Ex amp le:

Au-delà de cela, je vous conseille fortement de vous familiariser avec tous les widgets et options de conception d'Elementor.

Comme indiqué précédemment, vous avez un grand contrôle sur l'apparence de votre site Web et vous avez également accès à des widgets utiles qui peuvent vous aider à augmenter votre taux de conversion.

Préférences de publication

Lorsque vous êtes satisfait de ce que vous avez créé, vous aurez envie de le partager avec le monde. Après avoir appuyé sur le bouton PUBLIER, une série de questions vous sera posée. Pour illustrer:

Est-il possible de préciser les conditions dans lesquelles vous souhaitez que le popup apparaisse ? Vous pouvez choisir les pages à inclure ou à exclure de vos résultats de recherche. Vous pouvez avoir autant de conditions que vous le souhaitez.

Quel est donc l'événement qui provoque l'apparition de la fenêtre contextuelle ? Vous pouvez choisir d'afficher ou non la fenêtre contextuelle immédiatement au chargement de la page, au défilement ou lorsque l'utilisateur fait défiler vers un élément spécifique, entre autres possibilités. Toutes ces options ont leurs paramètres, permettant une personnalisation complète.

Enfin et surtout, vous verrez quelques règles avancées, telles que l'affichage de la fenêtre contextuelle uniquement aux visiteurs connus, l'affichage de la fenêtre contextuelle uniquement un certain nombre de fois ou peut-être uniquement l'affichage de la fenêtre contextuelle lorsqu'un visiteur est référé à votre site Web à partir d'un site Web spécifique. URL. Il y en a d'autres aussi. Ces options peuvent améliorer considérablement l'expérience utilisateur de votre popup, vous permettant de le concevoir avec une véritable intégrité et une considération pour vos utilisateurs.

Complétez les paramètres de la manière que vous désirez, puis cliquez sur ENREGISTRER ET FERMER. Vous serez redirigé comme amp le pop - up de ce que votre ressemblera après avoir cliqué sur ce bouton.

Les fenêtres contextuelles peuvent être personnalisées et du contenu dynamique peut y être ajouté.

Amener les choses au niveau supérieur, d'accord ? Jusqu'à présent, nous avons sélectionné un modèle et modifié une ou deux séances, et c'est à peu près tout. Considérez le scénario dans lequel nous voulons personnaliser davantage notre popup.

Nous sommes de retour à l'étape AJOUTER UN NOUVEAU POPUP du processus, où nous pouvons spécifier un titre et choisir à nouveau un modèle.

Après cela, nous pouvons le sélectionner, apporter les modifications nécessaires aux paramètres de base et appuyer à nouveau sur PUBLIER.

D'accord, c'est là que les choses commencent à devenir intéressantes. Nous pouvons utiliser Elementor pour récupérer des données dynamiques à partir de notre installation WordPress et les insérer dans le popup lui-même dans notre popup. Nous pouvons inclure des informations telles que le nom de l'utilisateur, le titre de la page, etc.

Considérez le scénario suivant : nous exécutons WooCommerce et nous souhaitons informer un utilisateur qu'une remise est disponible sur le produit spécifique qu'il consulte actuellement. Pour commencer, sélectionnez une section de texte dans le modèle, puis cliquez sur Dynamique dans la barre latérale :

Nous avons une grande variété d'options parmi lesquelles choisir, y compris les informations de la publication elle-même, les informations du site dans son ensemble, les informations sur les médias, les informations sur l'auteur et même les informations sur WooCommerce. Nous sélectionnerons un titre de produit et il sera ajouté à notre bloc de contenu textuel à la suite de notre sélection.

Supposons que les détails de la base de données ne soient pas correctement récupérés. Dans ce cas, il est possible d'en spécifier avant le texte, d'autres après le texte et un texte de secours (si les détails de la base de données ne sont pas correctement récupérés).

Dupliquons donc ce processus pour le bouton, qui affichera le prix du produit. Nous pouvons formuler le texte précédent comme ACHETER MAINTENANT POUR pour nous fournir un appel à l'action convaincant :

Nous pouvons même aller plus loin et utiliser l'image du produit comme arrière-plan de la fenêtre contextuelle elle-même.

Lorsque nous appuyons sur PUBLIER, les paramètres de publication nous sont à nouveau présentés, ce qui nous permet de spécifier que nous souhaitons que la fenêtre contextuelle apparaisse uniquement sur les pages WooCommerce. Nous allons régler la minuterie sur 15 secondes d'inactivité pour être le déclencheur. Voici comment cela s'est passé au final :

Bien que le design puisse être amélioré, vous pouvez voir que nous affichons le nom du produit, son prix et une image du produit en arrière-plan de la fenêtre contextuelle. Brillant!