skip to Main Content

Comment concevoir des barres autocollantes pour les pages de produits avec les modules Woo de Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Les Barres collantes continuent d’être un élément populaire de la conception Web. Ils sont parfaits pour stimuler les conversions en gardant des appels à l’action à la pointe sans être aussi intrusifs que des popups.

Dans ce cas d’utilisation, nous allons concevoir une barre collante pour les produits WooCommerce utilisant les modules Woo de Divi. La barre collante peut inclure n’importe quel module Divi. Pour ce didacticiel, nous allons créer une barre collante incluant le bouton «Ajouter au panier» afin qu’elle reste visible lorsque l’utilisateur fait défiler la page. De plus, nous allons également créer une barre de notification de panier afin que les utilisateurs voient toujours le bouton «afficher le panier» une fois que le bouton «Ajouter au panier» est cliqué.

Ces éléments de barre collante aideront à stimuler les conversions en gardant ces CTA cruciales en vue.

Aperçu

Voici un aperçu de ce que nous allons concevoir dans ce didacticiel.

Partie 1: Conception de la barre adhésive sur une page produit

Nous allons utiliser un produit simulé simple pour cet exemple, vous devez donc créer un nouveau produit ou modifier un produit existant. Les informations sur le produit ne sont pas importantes pour ce didacticiel. Assurez-vous de disposer des bases telles que le titre du produit, le prix, la description, l’image, etc.

Une fois qu’un produit simple est prêt, cliquez sur pour modifier le produit sur le backend et déployer Divi Builder sur la page du produit. Sous Paramètres de page Divi, sélectionnez «Fullwidth» pour la mise en page, puis cliquez sur «Construire sur le devant».

La page de produit devrait ressembler à ceci.

Sous la première ligne contenant le fil d’Ariane et l’avis de panier, ajoutez une nouvelle ligne avec une disposition à une colonne.

Paramètres de ligne

Avant d’ajouter des modules, mettez à jour les paramètres de ligne comme suit:

  • Couleur de fond: # 333333
  • Utiliser une largeur de gouttière personnalisée: OUI
  • Largeur de gouttière: 1
  • Largeur: 100%
  • Rembourrage: 0px Haut, 0px Bas

Rendre la ligne collante

Pour rendre la ligne collante, ajoutez le code CSS personnalisé suivant à l’élément principal du bureau:

position: -webkit-sticky !important; position: sticky !important; top: 50px;

Ajoutez ensuite le code CSS suivant au même élément principal pour l’affichage de la tablette:

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

top: 0px;

Si vous n’êtes pas familier avec la propriété css «position: sticky», il s’agit en quelque sorte d’un mélange entre la position fixe et la position relative où l’élément (dans ce cas la ligne) défilera avec son conteneur jusqu’à atteindre une position désignée en haut ou en bas de la page (ou le décalage spécifié). Dans cet exemple, nous définissons le décalage sur 50px à partir du haut de la fenêtre du navigateur (en laissant de la place pour la hauteur d’un en-tête fixe par défaut sur le bureau). Ensuite, sur tablette, le décalage est modifié en « top: 0px » afin de corriger la ligne / barre adhésive en haut du navigateur sur mobile.

Remarque: Ignorer les erreurs que vous voyez lorsque vous ajoutez le CSS à la zone. Le code fonctionnera bien.

Après vous la CSS, mettez à jour l’index Z comme suit:

  • Indice Z: 10

Maintenant, la ligne deviendra collante à mesure que l’utilisateur fait défiler la page du produit.

Colonne CSS personnalisée

Avant de commencer à remplir la ligne avec du contenu, nous devons nous assurer que le module à l’intérieur de notre ligne à une colonne s’alignera horizontalement au lieu de verticalement. Nous pouvons utiliser une simple astuce CSS pour le faire avec la propriété flex. Ouvrez les paramètres de colonne et ajoutez le CSS personnalisé suivant à l’élément principal:

display:flex; align-items:center;

Cela prend soin de notre conception de lignes collantes. Maintenant, nous devons remplir la ligne avec du contenu.

Ajouter un titre Woo

Ajoutez un nouveau module de titre Woo à la colonne de la ligne collante.

Puis mettez à jour les paramètres comme suit:

  • Titre du texte couleur: #ffffff
  • Titre du texte Taille: 28px (bureau), 20px (tablette), 16px (téléphone)
  • Largeur: 30%
  • Rembourrage: 2vw en haut, 2vw en bas, 2vw à gauche, 2vw à droite

Ajouter le prix Woo

Ensuite, ajoutez un module de prix Woo en cliquant sur l’icône grise plus qui apparaît lorsque vous survolez le module de titre woo que vous venez de créer.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Ensuite, mettez à jour les paramètres Woo Price comme suit:

  • Prix ​​Taille du texte: 28px (bureau), 20px (tablette), 16px (téléphone)
  • Largeur: 30%
  • Rembourrage: 2vw en haut, 2vw en bas, 2vw à gauche, 2vw à droite
  • Largeur de la bordure droite: 1px
  • Couleur de la bordure droite: #777777
  • Largeur de la bordure gauche: 1px
  • Couleur de bordure gauche: #777777

Ajouter un module Ajouter au panier

Pour le dernier élément de contenu, ajoutez un module Ajouter au panier Woo juste après le module Prix Woo.

Puis mettez à jour les paramètres comme suit:

Simplifiez l’élément Ajouter au panier en masquant la quantité en stock et le champ de quantité sur mobile.

  • Afficher le champ de quantité: OFF (tablette)
  • Montrer Stock: OFF
  • Alignement du texte: droit
  • Utiliser des styles personnalisés pour Button: YES
  • Taille du texte du bouton: 18px (tablette), 14px (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur de fond du bouton: #0c71c3
  • Largeur de la bordure du bouton: 0px
  • Largeur: 40%
  • Rembourrage: 2vw à gauche, 2vw à droite

Résultat

Voyons maintenant à quoi cela ressemble sur la page en direct.

Partie 2: Créer une barre de notification de panier

Créer une barre adhésive de notification de panier implique en réalité quelques étapes simples, mais le résultat peut être extrêmement efficace. Comme vous le savez peut-être déjà, l’avis de panier n’apparaît que lorsqu’un utilisateur clique sur le bouton «Ajouter au panier». Mais c’est la prochaine étape cruciale du processus d’achat qui conduit les utilisateurs à la page de paiement. Ainsi, lorsque l’avis de panier apparaît sous la forme d’une barre adhésive au bas de la fenêtre, il est plus visible pour l’utilisateur.

Pour créer la barre adhésive de notification de panier, créez tout d’abord une nouvelle ligne d’une colonne au bas de la page du produit. Puis mettez à jour les paramètres de ligne comme suit:

  • Largeur: 100%
  • Rembourrage: 0px en haut, 0px en bas

Rendez la ligne collante en ajoutant le CSS personnalisé suivant à l’élément principal:

position: -webkit-sticky !important; position: sticky !important; bottom: 0px;

Remarque: comme nous l’avons fait précédemment, vous pouvez ignorer les erreurs qui apparaissent lors de l’ajout de la propriété position: sticky.

La rangée restera collée au bas de la fenêtre lors du défilement vers le haut.

Puis mettez à jour l’index z pour le conserver à l’avant-plan, comme suit:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Indice Z: 10

Ajouter le module de notification de panier

Une fois que vous avez créé la ligne, ajoutez le module Avis de panier Woo à la ligne et mettez à jour les paramètres comme suit:

  • Taille du texte (téléphone): 15px
  • Marge: 0em en bas

C’est ça ! C’est à vous de décider si vous souhaitez ou non supprimer l’élément d’avertissement de panier par défaut en haut de la page, mais il peut être judicieux de le laisser pour de meilleures conversions.

Résultat final

Voici à quoi pourrait ressembler le résultat final.

Dernières pensées

Espérons que cet article nous aidera à comprendre comment créer des barres autocollantes pour nos pages produits dans Divi. Nous avons expliqué comment créer une barre adhésive comprenant un titre de produit, un prix et un bouton Ajouter au panier. Et nous avons également montré comment créer un bar collant. Ces deux éléments devraient faciliter le processus d’achat et stimuler les conversions. Et nous n’avons même pas besoin d’un plugin!

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
3 Partages
Partagez3
Tweetez
Enregistrer