{"id":350277,"date":"2022-03-30T08:57:40","date_gmt":"2022-03-30T08:57:40","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=350277"},"modified":"2022-03-30T08:57:44","modified_gmt":"2022-03-30T08:57:44","slug":"comment-creer-une-barre-laterale-personnalisee-avec-des-colonnes-collantes-pour-un-modele-de-page-produit-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-creer-une-barre-laterale-personnalisee-avec-des-colonnes-collantes-pour-un-modele-de-page-produit-divi\/","title":{"rendered":"Comment cr\u00e9er une barre lat\u00e9rale personnalis\u00e9e avec des colonnes collantes pour un mod\u00e8le de page produit Divi"},"content":{"rendered":"\n
divi-sticky-columns-sidebar-product-page-template.json_ (1)<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n

\u00a0<\/p>\n

\n

Les barres lat\u00e9rales collantes pour vos pages de produits peuvent \u00eatre utiles pour am\u00e9liorer l’exp\u00e9rience utilisateur et les revenus. C’est un excellent moyen de garder les informations essentielles sur le produit, cet important bouton Ajouter au panier, et\/ou d’autres offres promotionnelles en vue lorsque l’utilisateur fait d\u00e9filer la page du produit.<\/p>\n

Dans ce tutoriel, nous allons vous montrer comment construire une barre lat\u00e9rale personnalis\u00e9e avec des colonnes collantes pour votre mod\u00e8le de page produit Divi. Gr\u00e2ce \u00e0 cette disposition unique, vous pouvez faire flotter une colonne de contenu dans la zone de la barre lat\u00e9rale \u00e0 n’importe quelle section de la page (ou \u00e0 toutes). Cela vous permet de cibler l’utilisateur avec de nouvelles informations dans la barre lat\u00e9rale en fonction de la section qu’il consulte \u00e0 ce moment-l\u00e0. C’est plut\u00f4t cool !<\/p>\n

C’est parti !<\/p>\n

Coup d’\u0153il rapide<\/h2>\n

Voici un aper\u00e7u de la conception que nous allons r\u00e9aliser dans ce tutoriel.<\/p>\n

\"sticky<\/p>\n

T\u00e9l\u00e9chargez la mise en page GRATUITEMENT<\/h2>\n

Pour mettre la main sur le design de ce tutoriel, vous devez d’abord le t\u00e9l\u00e9charger en utilisant le bouton ci-dessous. Pour avoir acc\u00e8s au t\u00e9l\u00e9chargement, vous devez vous inscrire \u00e0 notre liste de diffusion Divi Daily \u00e0 l’aide du formulaire ci-dessous. En tant que nouvel abonn\u00e9, vous recevrez encore plus d’astuces Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous \u00eates d\u00e9j\u00e0 sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur t\u00e9l\u00e9charger. Vous ne serez pas \u00ab\u00a0r\u00e9inscrit\u00a0\u00bb et ne recevrez pas d’e-mails suppl\u00e9mentaires.<\/p>\n

\n
\n
\n
\n
\n
\n

Vous vous \u00eates inscrit avec succ\u00e8s. Veuillez v\u00e9rifier votre adresse e-mail pour confirmer votre abonnement et avoir acc\u00e8s aux packs hebdomadaires gratuits de mises en page Divi !<\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

Comment t\u00e9l\u00e9charger le mod\u00e8le<\/h2>\n

Allez sur Divi Theme Builder<\/h3>\n

Pour t\u00e9l\u00e9charger le mod\u00e8le, acc\u00e9dez au Divi Theme Builder dans le backend de votre site WordPress.<\/p>\n

\"blog<\/p>\n

T\u00e9l\u00e9charger le mod\u00e8le de site Web<\/h3>\n

Ensuite, dans le coin sup\u00e9rieur droit, vous verrez une ic\u00f4ne avec deux fl\u00e8ches. Cliquez sur l’ic\u00f4ne.<\/p>\n

\"blog<\/p>\n

Naviguez vers l’onglet d’importation, t\u00e9l\u00e9chargez le fichier JSON que vous avez pu t\u00e9l\u00e9charger dans cet article, et cliquez sur \u00a0\u00bb Importer les mod\u00e8les de Divi Theme Builder \u00ab\u00a0.<\/p>\n

\"blog<\/p>\n

Enregistrer les modifications apport\u00e9es \u00e0 Divi Theme Builder<\/h3>\n

Une fois que vous avez t\u00e9l\u00e9charg\u00e9 le fichier, vous remarquerez un nouveau mod\u00e8le avec une nouvelle zone de corps qui a \u00e9t\u00e9 attribu\u00e9e \u00e0 All Posts. Enregistrez les modifications apport\u00e9es par Divi Theme Builder d\u00e8s que vous souhaitez activer le mod\u00e8le.<\/p>\n

\"divi<\/p>\n

Passons au tutoriel afin d’apprendre \u00e0 construire cette chose \u00e0 partir de z\u00e9ro, d’accord ?<\/p>\n

Comment construire une barre lat\u00e9rale personnalis\u00e9e avec des colonnes collantes pour un mod\u00e8le de page produit Divi<\/h2>\n

T\u00e9l\u00e9chargement du mod\u00e8le de page produit du Theme Builder Pack 2<\/h3>\n

Pour commencer, nous allons donner un coup de pouce \u00e0 la conception en ajoutant l’un de nos mod\u00e8les de page produit pr\u00e9\u00e9tablis. Pour importer le mod\u00e8le dans le Cr\u00e9ateur de th\u00e8me, vous devez proc\u00e9der comme suit :<\/p>\n

    \n
  1. Naviguez vers le Cr\u00e9ateur de th\u00e8mes de Divi<\/li>\n
  2. Cliquez sur l’ic\u00f4ne de portabilit\u00e9 en haut \u00e0 droite de la page.<\/li>\n
  3. S\u00e9lectionnez l’onglet Importation dans la fen\u00eatre popup de portabilit\u00e9.<\/li>\n
  4. T\u00e9l\u00e9chargez et importez le fichier de mod\u00e8le de produit Divi Divi Theme Builder 2. Une fois que vous avez t\u00e9l\u00e9charg\u00e9 le pack ici, d\u00e9compressez le fichier et vous trouverez le fichier \u00ab\u00a0divi-theme-builder-pack-5-product-page-template.json\u00a0\u00bb que vous devrez importer.<\/li>\n
  5. Cliquez sur le bouton d’importation<\/li>\n
  6. Une fois le mod\u00e8le import\u00e9, cliquez sur l’ic\u00f4ne d’\u00e9dition dans la zone du corps personnalis\u00e9 du mod\u00e8le pour modifier la disposition du mod\u00e8le.<\/li>\n<\/ol>\n

    \"sticky<\/p>\n

    Modification de la mise en page du mod\u00e8le<\/h3>\n

    La disposition pr\u00e9\u00e9tablie que nous utilisons ne pr\u00e9voit pas d’espace pour une barre lat\u00e9rale. Nous devrons donc apporter quelques modifications aux rang\u00e9es afin d’inclure de l’espace pour nos colonnes lat\u00e9rales adh\u00e9sives. Cette mise en page comprendra deux colonnes adh\u00e9sives, chacune ayant une limite d’adh\u00e9sivit\u00e9 d\u00e9finie pour la section dans laquelle elle se trouve. Nous allons limiter la mise en page \u00e0 trois sections. Cela nous donnera plus d’espace pour que nos colonnes adh\u00e9sives lat\u00e9rales flottent pendant que l’utilisateur fait d\u00e9filer la page. La premi\u00e8re colonne lat\u00e9rale flottante se trouvera dans la section sup\u00e9rieure et la deuxi\u00e8me colonne flottante dans la section inf\u00e9rieure. La section du milieu contiendra simplement un CTA.<\/p>\n

    \u00c9tiquetage des sections que nous utiliserons<\/h4>\n

    Pour commencer, ouvrez la modale d’affichage des couches et mettez \u00e0 jour l’\u00e9tiquette de la section sup\u00e9rieure. Nommez-la simplement \u00ab\u00a0Section sup\u00e9rieure\u00a0\u00bb.<\/p>\n

    \"sticky<\/p>\n

    Ajoutez ensuite l’\u00e9tiquette \u00ab\u00a0Mid Section\u00a0\u00bb \u00e0 la troisi\u00e8me section de la mise en page.<\/p>\n

    \"sticky<\/p>\n

    Enfin, ajoutez l’\u00e9tiquette \u00ab\u00a0Section inf\u00e9rieure\u00a0\u00bb \u00e0 la quatri\u00e8me section de la mise en page actuelle.<\/p>\n

    \"sticky<\/p>\n

    D\u00e9placement du contenu\/des lignes dans les sections<\/h4>\n

    Maintenant que nous avons \u00e9tiquet\u00e9 nos sections, nous devons nous assurer que nous d\u00e9pla\u00e7ons les rang\u00e9es de contenu dont nous avons besoin dans les trois sections que nous allons conserver.<\/p>\n

    Pour commencer, utilisez la vue en couches pour faire glisser la rang\u00e9e de la deuxi\u00e8me section vers le bas de la \u00ab\u00a0section sup\u00e9rieure\u00a0\u00bb.<\/p>\n

    \"sticky<\/p>\n

    Ensuite, supprimez la section vide.<\/p>\n

    \"sticky<\/p>\n

    Ensuite, faites glisser la ligne de la quatri\u00e8me section vers le bas de la \u00ab\u00a0Section du bas\u00a0\u00bb.<\/p>\n

    \"sticky<\/p>\n

    Puis supprimez cette section vide.<\/p>\n

    \"sticky<\/p>\n

    Vous ne devriez plus avoir que trois sections (\u00ab\u00a0Section sup\u00e9rieure\u00a0\u00bb, \u00ab\u00a0Section interm\u00e9diaire\u00a0\u00bb et \u00ab\u00a0Section inf\u00e9rieure\u00a0\u00bb), chacune remplie de rang\u00e9es de contenu.<\/p>\n

    Mise \u00e0 jour de la taille des rang\u00e9es<\/h4>\n

    Puisque nous ajoutons une zone de barre lat\u00e9rale dans cette mise en page, nous devons \u00e9largir un peu les rang\u00e9es.<\/p>\n

    Dans la modale des calques, s\u00e9lectionnez plusieurs fois toutes les rang\u00e9es de la mise en page.<\/p>\n

    Cliquez ensuite sur l’ic\u00f4ne de modification de l’une d’entre elles pour faire appara\u00eetre les param\u00e8tres de l’\u00e9l\u00e9ment qui leur donnera un style \u00e0 toutes en m\u00eame temps.<\/p>\n

    Sous l’onglet design, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

      \n
    • Largeur : 90<\/li>\n
    • Largeur maximale : 1400px<\/li>\n<\/ul>\n

      \"sticky<\/p>\n

      Mise \u00e0 jour de la structure en colonnes des rang\u00e9es<\/h4>\n

      Traditionnellement, une barre lat\u00e9rale est construite dans une seule colonne sur le c\u00f4t\u00e9 droit d’une section. Toutefois, pour cette conception, nous allons cr\u00e9er plusieurs rang\u00e9es \u00e0 deux colonnes dans une section, la colonne de droite de chaque rang\u00e9e \u00e9tant consacr\u00e9e \u00e0 la zone de la colonne adh\u00e9sive. Nous pouvons ensuite remplir le contenu de la colonne de droite de la rang\u00e9e sup\u00e9rieure de la section et rendre cette colonne adh\u00e9sive. Elle flottera ensuite au-dessus des colonnes de droite vides des rang\u00e9es inf\u00e9rieures avant de s’arr\u00eater \u00e0 la fin de la section lorsque l’utilisateur fait d\u00e9filer la page.<\/p>\n

      Pour cr\u00e9er les structures de colonnes des rang\u00e9es, s\u00e9lectionnez plusieurs fois les deux rang\u00e9es inf\u00e9rieures de la section sup\u00e9rieure et les deux rang\u00e9es de la section inf\u00e9rieure.<\/p>\n

      Ouvrez ensuite les param\u00e8tres de l’\u00e9l\u00e9ment et choisissez la structure de colonne trois cinqui\u00e8mes deux cinqui\u00e8mes.<\/p>\n

      \"sticky<\/p>\n

      Deux autres ajustements de mise en page<\/h4>\n

      Maintenant que nos rang\u00e9es sont d\u00e9finies avec la bonne structure de colonne, apportons quelques modifications suppl\u00e9mentaires \u00e0 la mise en page.<\/p>\n

      Ouvrez les param\u00e8tres de ligne pour la ligne inf\u00e9rieure de la section inf\u00e9rieure et supprimez le box-shadow utilis\u00e9.<\/p>\n

      \"sticky<\/p>\n

      Ensuite, allez dans la colonne de droite de la ligne 2 de la section sup\u00e9rieure et supprimez le module de basculement (nous n’aurons pas de place pour lui dans notre colonne adh\u00e9sive).<\/p>\n

      \"sticky<\/p>\n

      Cr\u00e9ation de la premi\u00e8re colonne adh\u00e9sive pour la barre lat\u00e9rale<\/h3>\n

      Nous allons cr\u00e9er notre premi\u00e8re colonne adh\u00e9sive en utilisant le contenu de la colonne existante qui contient les informations sur les produits dans la section sup\u00e9rieure.<\/p>\n

      Ouvrez les param\u00e8tres de la colonne 2 dans la deuxi\u00e8me ligne de la section sup\u00e9rieure et mettez \u00e0 jour les \u00e9l\u00e9ments suivants.<\/p>\n

        \n
      • Position de l’adh\u00e9sif : Coller en haut et en bas (ordinateur de bureau), Ne pas coller (tablette)<\/li>\n
      • D\u00e9calage de l’autocollant en haut : 20px<\/li>\n
      • D\u00e9calage de l’autocollant en bas : 20px<\/li>\n
      • Limite de l’autocollant en haut : Section<\/li>\n
      • Limite d’accroche en bas : Section<\/li>\n<\/ul>\n

        \"sticky<\/p>\n

        Sous l’onglet Design, mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

          \n
        • Rembourrage : 2% haut, 2% bas, 2% gauche, 2% droite<\/li>\n
        • Ombre de la bo\u00eete : voir la capture d’\u00e9cran<\/li>\n
        • Position verticale de l’ombre de la bo\u00eete : 10px<\/li>\n
        • Intensit\u00e9 du flou de l’ombre port\u00e9e : 60px<\/li>\n
        • Couleur de l’ombre : transparent (bureau), rgba(103,151,255,0.24) (collant)<\/li>\n<\/ul>\n

          \"sticky<\/p>\n

          Cr\u00e9ation de la deuxi\u00e8me colonne adh\u00e9sive pour la barre lat\u00e9rale<\/h3>\n

          La prochaine colonne adh\u00e9sive sera situ\u00e9e dans la colonne de droite ou la rang\u00e9e sup\u00e9rieure de la section inf\u00e9rieure. Pour cette colonne adh\u00e9sive, nous allons la remplir avec une offre promotionnelle personnalis\u00e9e, une image de produit et un bouton Ajouter au panier.<\/p>\n

          Tout d’abord, copiez le module de texte et le module de bouton dans la rang\u00e9e du milieu et collez-les dans la nouvelle colonne adh\u00e9sive (situ\u00e9e dans la colonne 2 de la rang\u00e9e 1 de la section inf\u00e9rieure).<\/p>\n

          \"sticky<\/p>\n

          Ensuite, allez dans la section sup\u00e9rieure et utilisez la s\u00e9lection multiple pour copier le module Woo Title, le module Woo Images et le module Woo Add to Cart.<\/p>\n

          \"sticky<\/p>\n

          Collez ensuite les trois modules sous le contenu existant dans notre deuxi\u00e8me colonne adh\u00e9sive.<\/p>\n

          \"sticky<\/p>\n

          Ajustement des modules de la colonne autocollante<\/h4>\n

          Ouvrez les param\u00e8tres du module Woo Title et mettez \u00e0 jour les \u00e9l\u00e9ments suivants :<\/p>\n

            \n
          • Niveau de l’en-t\u00eate du titre : H2<\/li>\n
          • Alignement du texte du titre : centre<\/li>\n
          • Taille du texte du titre : 38px (desktop)<\/li>\n<\/ul>\n

            \"sticky<\/p>\n

            Ensuite, ouvrez les param\u00e8tres du module Woo Images et mettez \u00e0 jour ce qui suit :<\/p>\n

              \n
            • Afficher les images de la galerie : OFF<\/li>\n
            • Afficher l’insigne de vente : OFF<\/li>\n<\/ul>\n

              \"sticky<\/p>\n

              Sous l’onglet avanc\u00e9, ajoutez le CSS personnalis\u00e9 suivant \u00e0 l’\u00e9l\u00e9ment principal :<\/p>\n

              max-width : 200px ;\nmargin : 0 auto ;\n<\/pre>\n
              \"sticky<\/p>\n
              Enfin, ouvrez les param\u00e8tres de Woo Add to Cart et centrez l’alignement du texte.<\/p>\n
              \"sticky<\/p>\n
              Pour rendre la colonne collante, copiez les styles de la premi\u00e8re colonne collante que nous avons cr\u00e9\u00e9e dans la section sup\u00e9rieure, puis collez ces styles dans la nouvelle colonne collante.<\/p>\n
              \"sticky<\/p>\n
              Une fois les styles mis \u00e0 jour, nous devons ajuster la position collante de la deuxi\u00e8me colonne collante comme suit :<\/p>\n
                \n
              • Position d’accrochage : Coller en haut (bureau)<\/li>\n
              • D\u00e9calage du haut de l’autocollant : 20px<\/li>\n<\/ul>\n
                \"sticky<\/p>\n
                Voil\u00e0, c’est fait ! Nous avons termin\u00e9.<\/p>\n
                R\u00e9sultat final<\/h2>\n
                Pour v\u00e9rifier le r\u00e9sultat final, ouvrez un produit existant sur votre site Web.<\/p>\n
                REMARQUE : Cette mise en page suppose que vous avez une quantit\u00e9 importante de texte dans la zone de description du produit sur le backend. Si le contenu du produit de la page n’est pas assez \u00e9toff\u00e9, vous ne pourrez pas voir l’effet collant s’activer tr\u00e8s longtemps, voire jamais. Il en va de m\u00eame pour la section inf\u00e9rieure avec les commentaires. Il est utile d’avoir ajout\u00e9 quelques commentaires pour voir l’effet.<\/p>\n
                Et voici le design sur mobile. Sur les tablettes et les t\u00e9l\u00e9phones, il n’y a pas de colonnes adh\u00e9sives actives, car elles couvriraient le contenu de la page lorsque vous la faites d\u00e9filer.<\/p>\n
                \"sticky<\/p>\n
                R\u00e9flexions finales<\/h2>\n
                L’ajout d’une barre lat\u00e9rale \u00e0 votre mod\u00e8le de page produit \u00e0 l’aide de colonnes adh\u00e9sives peut \u00eatre un excellent compl\u00e9ment \u00e0 tout site cherchant \u00e0 am\u00e9liorer l’exp\u00e9rience utilisateur et \u00e0 stimuler le processus d’achat en gardant les CTA importants \u00e0 port\u00e9e de main \u00e0 tout moment. Il convient toutefois de noter qu’avec cette conception, la quantit\u00e9 de contenu que vous pouvez inclure dans la colonne est limit\u00e9e. \u00c9tant donn\u00e9 qu’elle est collante, le contenu ne doit pas d\u00e9passer la hauteur de la fen\u00eatre d’affichage du navigateur, sinon il restera cach\u00e9 dans l’\u00e9tat coll\u00e9. Mais vous pouvez toujours int\u00e9grer ce contenu suppl\u00e9mentaire dans une autre colonne adh\u00e9sive, dans une autre section de la page.<\/p>\n
                J’esp\u00e8re que tout cela a \u00e9t\u00e9 clair. Si ce n’est pas le cas, je suis heureux de r\u00e9pondre \u00e0 vos questions.<\/p>\n
                J’ai h\u00e2te de vous entendre dans les commentaires.<\/p>\n
                \u00c0 la v\u00f4tre !<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
                \u00a0 Les barres lat\u00e9rales collantes pour vos pages de produits peuvent \u00eatre utiles pour am\u00e9liorer l’exp\u00e9rience utilisateur et les revenus. C’est un excellent moyen de garder les informations essentielles sur le produit, cet important bouton Ajouter au panier, et\/ou d’autres offres promotionnelles en vue lorsque l’utilisateur fait d\u00e9filer la page du produit. Dans ce tutoriel, […]<\/p>\n","protected":false},"author":1,"featured_media":350278,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[106],"tags":[],"class_list":["post-350277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=350277"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/350277\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/350278"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=350277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=350277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=350277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}