Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Les barres collantes continuent d’être un élément populaire dans la conception Web. Ils sont parfaits pour augmenter les conversions en gardant les CTA en première ligne sans être aussi intrusifs que les popups.

Dans ce cas d’utilisation, nous concevons une barre collante pour les produits WooCommerce en utilisant les modules Woo de Divi. Le sticky bar peut contenir n’importe quel module Divi. Dans ce tutoriel, nous allons créer une barre autocollante avec un bouton «Ajouter au panier» afin qu’elle reste visible lorsque l’utilisateur fait défiler la page. Nous créons également une barre d’avertissement de panier collante afin que les utilisateurs voient toujours un bouton « Afficher le panier » lorsque le bouton « Ajouter au panier » est cliqué.

Ces éléments de barre collante aident à augmenter les conversions en gardant un œil sur les CTA cruciaux.

Commençons!

Avant goût

Voici un aperçu de ce que nous allons concevoir dans ce didacticiel de cas d’utilisation.

Téléchargez la mise en page Sticky Bars GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger à l’aide du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Pour commencer, vous devez effectuer les opérations suivantes:

  1. Si vous ne l’avez pas déjà fait, installez et activez le thème Divi Mettre en place (ou le plugin Divi Builder si vous n’utilisez pas le thème Divi).
  2. Installez et activez le plugin WooCommerce. Si c’est la première fois que vous configurez WooCommerce, vous devrez exécuter l’assistant de configuration de base pour préparer votre entreprise. Une fois que vous avez terminé, il est temps d’ajouter vos nouveaux produits.
  3. Créez des produits si vous n’en avez pas déjà un. Pour plus d’informations sur l’ajout d’un nouveau produit, consultez ce tutoriel.

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Partie 1: Conception de la Sticky Bar sur une page de produit

Un produit simple est utilisé dans 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 simplement d’avoir les bases telles que le titre du produit, le prix, la description, l’image, etc.

Lorsque vous avez un produit simple prêt, cliquez pour modifier le produit dans le backend et déployez le Divi Builder sur la page du produit. Sous Divi Page Settings, sélectionnez « Fullwidth » pour la mise en page, puis cliquez sur « Build On the Front End ».

La page du produit doit être similaire.

Sous la première ligne avec le fil d’Ariane et le 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
  • Utilisez la largeur de gouttière personnalisée: OUI
  • Largeur de gouttière: 1
  • Largeur: 100%
  • Rembourrage: 0px au-dessus, 0px en dessous

Rendre la rangée collante

Ajoutez le CSS personnalisé suivant à l’élément principal du bureau pour rendre la ligne collante:

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

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

top: 0px;

Si vous n’êtes pas familier avec la propriété CSS position: sticky, c’est essentiellement un mélange entre la position fixe et la position relative où l’élément (dans ce cas la ligne) avec son conteneur à une position spécifiée en haut ou en bas de la page (ou le décalage spécifié) défile pour atteindre. Dans cet exemple, nous définissons le décalage du haut de la fenêtre du navigateur à 50 pixels (laissant de la place pour la hauteur d’un en-tête standard fixe sur le bureau). Ensuite, le décalage est changé en « haut: 0px » sur la tablette afin de corriger la ligne / barre adhésive en haut du navigateur sur les appareils mobiles.

REMARQUE: ignorez les erreurs qui apparaissent lors de l’ajout du CSS à la boîte. Le code fonctionnera bien.

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

Maintenant, la ligne devient collante lorsque l’utilisateur fait défiler la page du produit.

CSS personnalisé pour les colonnes

Avant de remplir la ligne avec du contenu, nous devons nous assurer que le module est aligné horizontalement au lieu de verticalement dans notre ligne à une seule colonne. 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 en charge notre conception de ligne collante. 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.

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

  • Couleur du texte du titre: #ffffff
  • Taille du texte du titre: 28 px (bureau), 20 px (tablette), 16 px (téléphone)
  • Largeur: 30%
  • Rembourrage: 2vw ci-dessus, 2vw ci-dessous, 2vw gauche, 2vw droite

Woo ajouter un prix

Ensuite, ajoutez un module de tarification 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.

Ensuite, mettez à jour les paramètres de prix woo comme suit:

  • Taille du texte du prix: 28 px (bureau), 20 px (tablette), 16 px (téléphone)
  • Largeur: 30%
  • Rembourrage: 2vw ci-dessus, 2vw ci-dessous, 2vw gauche, 2vw droite
  • Largeur de la marge droite: 1px
  • Couleur de la bordure droite: # 777777
  • Largeur de la marge gauche: 1px
  • Couleur de la bordure gauche: # 777777

Woo ajouter au module de panier

Pour le contenu final, ajoutez un module Woo Add to Cart juste après le module Woo Price.

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

Simplifiez l’article «Ajouter au panier» en masquant la quantité en stock et le champ de quantité sur le téléphone.

  • Afficher le champ de quantité: OFF (tablette)
  • Afficher le niveau de stock: OFF

  • Alignement du texte: à droite
  • Utiliser des styles personnalisés pour le bouton: OUI
  • Taille du texte du bouton: 18px (tablette), 14px (téléphone)
  • Couleur du texte du bouton: #ffffff
  • Couleur d’arrière-plan du bouton: # 7ac5af
  • Largeur du cadre du bouton: 0px

  • Largeur: 40%
  • Rembourrage: 2vw à gauche, 2vw à droite

Résultat

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

Et le voici au téléphone.

Partie 2: Créer une barre collante de panier d’achat

Créer une barre collante avec une notification de panier ne prend que quelques étapes simples, mais le résultat peut être extrêmement efficace. Comme vous le savez peut-être déjà, le panier n’apparaît que lorsque l’utilisateur clique sur le bouton «Ajouter au panier». Cependant, c’est la prochaine étape critique du processus d’achat qui conduit les utilisateurs à la page de paiement. Si le panier apparaît sous la forme d’une barre collante en bas de la fenêtre, il sera plus visible pour l’utilisateur.

Pour créer la barre collante pour le panier, commencez par créer une nouvelle ligne de colonne unique en bas de la page du produit. Ensuite, mettez à jour les paramètres de ligne comme suit:

  • Largeur: 100%
  • Rembourrage: 0px au-dessus, 0px en dessous

Ensuite, 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 précédemment, vous pouvez ignorer les erreurs qui se produisent lors de l’ajout de la propriété position: sticky.

Cela provoque le blocage de la ligne en bas de la fenêtre lors du défilement vers le haut.

Ensuite, mettez à jour le z-index pour le garder au top comme ceci:

Ajouter le module de notification du panier

Après avoir créé la ligne, ajoutez le module de notification Woo Cart à la ligne et mettez à jour les paramètres comme suit:

  • Texte Taille du texte (téléphone): 15px
  • Bord: 0em ci-dessous

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

En bout de ligne

Voici le résultat final avec les deux bâtons de colle.

Bureau

Téléphone portable, téléphone portable

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 autocollante comprenant un titre de produit, un prix et un bouton Ajouter au panier. Nous avons également montré comment fabriquer une barre collante avec un panier. Les deux devraient soutenir le processus d’achat et augmenter les conversions. Et nous n’avons même pas besoin de plugin!

Découvrez de nouvelles façons d’utiliser les barres autocollantes sur la page produit de votre propre site Web.

Nous sommes impatients de vous entendre dans les commentaires.

De bas en haut!

La poste Comment concevoir des sticky bars pour les pages produits avec les modules Divis Woo est apparu pour la première fois le Blog thématique élégant.



Source link

Recent Posts