{"id":370109,"date":"2022-03-29T21:08:27","date_gmt":"2022-03-29T21:08:27","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=370109"},"modified":"2022-03-30T00:16:17","modified_gmt":"2022-03-30T00:16:17","slug":"comment-et-ou-inclure-la-navigation-des-articles-dans-votre-modele-darticle-de-blog-divi","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-et-ou-inclure-la-navigation-des-articles-dans-votre-modele-darticle-de-blog-divi\/","title":{"rendered":"Comment et o\u00f9 inclure la navigation des articles dans votre mod\u00e8le d’article de blog Divi"},"content":{"rendered":"
La navigation par article est un ensemble de liens, g\u00e9n\u00e9ralement situ\u00e9s au bas d’un article de blog, qui permettent d’acc\u00e9der \u00e0 l’article pr\u00e9c\u00e9dent ou suivant. Heureusement, la navigation par article est facile \u00e0 ajouter \u00e0 vos mod\u00e8les d’articles de blog dans le Cr\u00e9ateur de th\u00e8me Divi. Dans cet article, nous allons voir comment et o\u00f9 inclure la navigation dans votre mod\u00e8le d’article de blog Divi. Nous examinerons \u00e9galement trois fa\u00e7ons diff\u00e9rentes de les styliser.<\/p>\n

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

Aper\u00e7u de<\/h2>\n

Tout d’abord, voici un aper\u00e7u des trois mod\u00e8les diff\u00e9rents que nous allons cr\u00e9er.<\/p>\n

Liens texte pr\u00e9c\u00e9dent et suivant du bureau<\/h3>\n

\"Desktop<\/p>\n

Liens texte pr\u00e9c\u00e9dent et suivant pour t\u00e9l\u00e9phone<\/h3>\n

\"Phone<\/p>\n

Boutons Pr\u00e9c\u00e9dent et Suivant sur le bureau<\/h3>\n

\"Previous<\/p>\n

Boutons Pr\u00e9c\u00e9dent et Suivant pour le t\u00e9l\u00e9phone<\/h3>\n

\"Previous<\/p>\n

Boutons double face Pr\u00e9c\u00e9dent et Suivant sur le bureau<\/h3>\n

\"Double<\/p>\n

Boutons Pr\u00e9c\u00e9dent et Suivant double-face pour le t\u00e9l\u00e9phone<\/h3>\n

\"Double-Sided<\/p>\n

Pourquoi inclure la post-navigation<\/h2>\n

La post-navigation est un excellent moyen d’optimiser la navigation de votre site Web. Son emplacement fonctionne comme un appel \u00e0 l’action. Elle attire l’attention sur votre contenu et incite vos lecteurs \u00e0 rester plus longtemps sur votre site Web. Elle simplifie le processus de recherche d’un autre article \u00e0 lire.<\/p>\n

Le module Post Navigation de Divi permet \u00e0 l’utilisateur de naviguer vers l’article pr\u00e9c\u00e9dent ou suivant. Vous avez plusieurs options quant \u00e0 leur fonctionnement. Ils peuvent \u00eatre li\u00e9s aux articles de toutes les cat\u00e9gories ou de cat\u00e9gories sp\u00e9cifiques. Ils peuvent afficher le texte que nous entrons ou les noms des articles. Nous pouvons m\u00eame d\u00e9sactiver les liens pr\u00e9c\u00e9dent et suivant de mani\u00e8re ind\u00e9pendante.<\/p>\n

O\u00f9 placer la navigation des articles<\/h2>\n

Les liens de navigation ne doivent pas ressembler \u00e0 des liens al\u00e9atoires. Ils doivent \u00eatre plac\u00e9s de mani\u00e8re \u00e0 ce que les lecteurs comprennent intuitivement de quoi il s’agit. Le meilleur emplacement pour cela est sous le contenu de l’article de blog.<\/p>\n

D\u00e8s que le lecteur a termin\u00e9 l’article du blog, il dispose d’un moyen facile de voir l’article pr\u00e9c\u00e9dent ou suivant. C’est l’emplacement qui lui convient le mieux et qui est le plus utile pour augmenter le trafic.<\/p>\n

T\u00e9l\u00e9chargez ou cr\u00e9ez un mod\u00e8le d’article de blog<\/h2>\n

\"Upload<\/p>\n

Pour votre mod\u00e8le d’article de blog, vous pouvez en cr\u00e9er un de toutes pi\u00e8ces ou en t\u00e9l\u00e9charger un sur le blog d’Elegant Themes. Le blog d’Elegant Themes contient de nombreux mod\u00e8les d’articles de blog gratuits, con\u00e7us pour s’adapter aux packs de mise en page gratuits de Divi. Il suffit de rechercher \u00ab\u00a0free blog post template\u00a0\u00bb. T\u00e9l\u00e9chargez et d\u00e9compressez votre mod\u00e8le.<\/p>\n

Pour mes exemples de captures d’\u00e9cran, j’utilise le mod\u00e8le gratuit Corporate Blog Post Template. Je vais adapter le module Post Navigation \u00e0 ce mod\u00e8le d’article de blog.<\/p>\n

\"Upload<\/p>\n

Pour t\u00e9l\u00e9charger ou cr\u00e9er votre mod\u00e8le, allez dans Divi<\/strong> >Theme Builder<\/strong> dans le tableau de bord de WordPress. Pour t\u00e9l\u00e9charger, s\u00e9lectionnez Portabilit\u00e9<\/strong> et cliquez sur Importer<\/strong> dans la modale qui s’ouvre. Cliquez pour choisir votre fichier<\/strong> et naviguez jusqu’au fichier JSON sur votre ordinateur, puis s\u00e9lectionnez-le. Cliquez sur Importer les mod\u00e8les Divi Theme Builder<\/strong> et attendez que le t\u00e9l\u00e9chargement soit termin\u00e9. Enregistrez<\/strong> vos param\u00e8tres.<\/p>\n

    \n
  1. Divi<\/li>\n
  2. Cr\u00e9ateur de th\u00e8me<\/li>\n
  3. Portabilit\u00e9<\/li>\n
  4. Importer<\/li>\n
  5. Choisir un fichier<\/li>\n
  6. Importer des mod\u00e8les de Divi Theme Builder<\/li>\n
  7. Sauvegarder<\/li>\n<\/ol>\n

    Ajout d’une navigation de poste \u00e0 votre mod\u00e8le de poste Divi<\/h2>\n

    \"Adding<\/p>\n

    Nous allons ajouter la navigation de l’article \u00e0 sa propre rang\u00e9e sous le contenu de l’article. Cette mise en page utilise des couleurs de fond dans les rang\u00e9es, nous allons donc ajouter de l’espace avec un s\u00e9parateur. Nous utiliserons cette m\u00eame ligne pour les trois mod\u00e8les.<\/p>\n

    \"Adding<\/p>\n

    Je suis pass\u00e9 \u00e0 la vue filaire pour faciliter la visualisation. Ajoutez une nouvelle rang\u00e9e \u00e0 colonne unique<\/strong> sous la rang\u00e9e contenant le contenu du message.<\/p>\n

    \"Adding<\/p>\n

    Ajoutez un module Divider<\/strong> \u00e0 la rang\u00e9e.<\/p>\n

    \"Adding<\/p>\n

    Dans les param\u00e8tres du diviseur, d\u00e9finissez la visibilit\u00e9 pour ne pas afficher le diviseur<\/strong>. Fermez les param\u00e8tres du diviseur.<\/p>\n

      \n
    • Afficher le s\u00e9parateur : Non<\/li>\n<\/ul>\n

      \"Adding<\/p>\n

      Ensuite, ajoutez un module de navigation Post<\/strong>.<\/p>\n

      \"Adding<\/p>\n

      Enfin, faites glisser le module au-dessus du diviseur<\/strong> dans la m\u00eame rang\u00e9e. Nous allons utiliser cette m\u00e9thode pour nos deux premiers mod\u00e8les. Nous apporterons une petite modification pour le troisi\u00e8me mod\u00e8le. Ensuite, nous allons styliser le module Post Navigation pour cr\u00e9er trois mod\u00e8les diff\u00e9rents.<\/p>\n

      Premier mod\u00e8le de navigation par article : Liens textuels pr\u00e9c\u00e9dents et suivants<\/h3>\n

      \"Previous<\/p>\n

      Les liens textuels constituent l’option de navigation la plus simple. Il s’agit du param\u00e8tre par d\u00e9faut du module de navigation des articles. Nous allons conserver le texte mais changer le nom des liens. Par d\u00e9faut, ils affichent le nom des articles.<\/p>\n

      S\u00e9lectionnez Desktop et entrez Previous Post dans le champ Previous Link<\/strong>, et Next Post dans le champ Next Link<\/strong>. Nous laisserons les autres param\u00e8tres par d\u00e9faut pour ce module.<\/p>\n

        \n
      • Lien pr\u00e9c\u00e9dent : Article pr\u00e9c\u00e9dent<\/li>\n
      • Lien suivant : Message suivant<\/li>\n<\/ul>\n

        \"Previous<\/p>\n

        S\u00e9lectionnez l’ic\u00f4ne du t\u00e9l\u00e9phone sous Lien pr\u00e9c\u00e9dent<\/strong> et entrez Prev et Next dans les champs.<\/p>\n

          \n
        • Lien pr\u00e9c\u00e9dent : Pr\u00e9c\u00e9dent<\/li>\n
        • Lien suivant : Suivant<\/li>\n<\/ul>\n

          \"Previous<\/p>\n

          Ensuite, allez dans l’onglet Design<\/strong>. Changez la police<\/strong> en Open Sans, mettez-la en gras, tout en majuscules, et changez la couleur en #1d1d25.<\/p>\n

            \n
          • Police de caract\u00e8res des liens : Open Sans<\/li>\n
          • Poids de la police : Gras<\/li>\n
          • Style de police : Tout en majuscules<\/li>\n
          • Couleur : #1d1d25<\/li>\n<\/ul>\n

            \"Previous<\/p>\n

            Modifiez l’espacement des lettres<\/strong> \u00e0 2px et la hauteur des lignes<\/strong> \u00e0 1,2em. Fermez la modale et enregistrez vos param\u00e8tres.<\/p>\n

              \n
            • Espacement des lettres : 2px<\/li>\n
            • Hauteur de ligne : 1.2em<\/li>\n<\/ul>\n

              Conception de la navigation du deuxi\u00e8me article : Boutons Pr\u00e9c\u00e9dent et Suivant<\/h3>\n

              \"Previous<\/p>\n

              Dans les param\u00e8tres du contenu de<\/strong> la navigation, faites d\u00e9filer l’\u00e9cran jusqu’\u00e0 l’arri\u00e8re-plan<\/strong> et d\u00e9finissez-le sur #4c594c (ou une autre couleur de votre mise en page). Nous laisserons les autres param\u00e8tres de l’onglet Contenu \u00e0 leur valeur par d\u00e9faut. Cela permettra au module d’afficher les noms des articles.<\/p>\n

                \n
              • Couleur d’arri\u00e8re-plan : #4c594c<\/li>\n<\/ul>\n

                \"Previous<\/p>\n

                S\u00e9lectionnez l’onglet Design<\/strong>. Pour la police des liens, choisissez Open Sans, Bold, et changez la couleur en blanc. D\u00e9finissez l’espacement des lettres \u00e0 2px et la hauteur de ligne \u00e0 1,2em.<\/p>\n

                  \n
                • Police des liens : Open Sans<\/li>\n
                • Poids de la police : Bold<\/li>\n
                • Couleur : #ffffff<\/li>\n
                • Espacement des lettres : 2px<\/li>\n
                • Hauteur de ligne : 1.2em<\/li>\n<\/ul>\n

                  \"Previous<\/p>\n

                  Faites d\u00e9filer l’\u00e9cran jusqu’\u00e0 l’espacement<\/strong>. Ajoutez 40px de remplissage en haut et en bas, et 20px de remplissage \u00e0 gauche et \u00e0 droite. Fermez les param\u00e8tres et enregistrez-les.<\/p>\n

                    \n
                  • Rembourrage : 40px (Haut, Bas), 20px (Gauche, Droite)<\/li>\n<\/ul>\n

                    Conception de la navigation du troisi\u00e8me article : Bouton pr\u00e9c\u00e9dent et suivant \u00e0 double face<\/h3>\n

                    \"Double<\/p>\n

                    Tout d’abord, cr\u00e9ez une nouvelle rang\u00e9e<\/strong> sous la rang\u00e9e qui contient le module de navigation de l’article et faites glisser le s\u00e9parateur vers celle-ci.<\/p>\n

                    \"Double<\/p>\n

                    Maintenant, ouvrez les param\u00e8tres de la rang\u00e9e<\/strong> contenant le module de navigation pour les articles.<\/p>\n

                    Param\u00e8tres de la rang\u00e9e<\/h4>\n

                    \"Double<\/p>\n

                    Faites d\u00e9filer l’\u00e9cran jusqu’aux param\u00e8tres d’arri\u00e8re-plan<\/strong> et d\u00e9finissez la couleur sur #1d1d25 (ou toute autre couleur de votre mise en page).<\/p>\n

                      \n
                    • Couleur d’arri\u00e8re-plan : #1d1d25<\/li>\n<\/ul>\n

                      \"Double<\/p>\n

                      Allez dans l’onglet Design<\/strong>. Sous Dimensionnement, changez la Largeur \u00e0 90% et la Largeur maximale \u00e0 500px.<\/p>\n

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

                        \"Double<\/p>\n

                        Faites d\u00e9filer jusqu’\u00e0 Espacement<\/strong> et ajoutez 20px de remplissage en haut et en bas, et 30px de remplissage \u00e0 gauche et \u00e0 droite.<\/p>\n

                          \n
                        • Rembourrage : 20px (Haut, Bas), 30px (Gauche, Droite)<\/li>\n<\/ul>\n

                          \"Double<\/p>\n

                          Acc\u00e9dez aux param\u00e8tres de bordure<\/strong> et ajoutez des px aux quatre c\u00f4t\u00e9s des coins arrondis. Fermez les param\u00e8tres de la rang\u00e9e.<\/p>\n

                            \n
                          • Coins arrondis : 30px<\/li>\n<\/ul>\n

                            Param\u00e8tres du module de navigation des messages<\/h4>\n

                            \"Double<\/p>\n

                            Ouvrez le module Post Navigation<\/strong> et s\u00e9lectionnez l’onglet Design<\/strong>. Nous allons proc\u00e9der au r\u00e9glage du contenu en dernier lieu. D\u00e9finissez la police sur Open Sans, l’\u00e9paisseur sur Bold, le style sur All Caps et la couleur sur White. D\u00e9finissez l’espacement des lettres sur 2px et la hauteur des lignes sur 1,2em.<\/p>\n

                              \n
                            • Police de caract\u00e8res des liens : Open Sans<\/li>\n
                            • Poids de la police : Bold<\/li>\n
                            • Style de police : Tout en majuscules<\/li>\n
                            • Couleur : #ffffff<\/li>\n
                            • Espacement des lettres : 2px<\/li>\n
                            • Hauteur de ligne : 1.2em<\/li>\n<\/ul>\n

                              \"Double<\/p>\n

                              Allez dans l’onglet Contenu<\/strong>. Faites d\u00e9filer jusqu’\u00e0 Cat\u00e9gories<\/strong> et activez l’option Naviguer dans la cat\u00e9gorie actuelle. Cette option permet d’afficher uniquement les articles de la m\u00eame cat\u00e9gorie. Nous allons laisser le champ vide, mais vous pouvez ajouter le nom de la taxonomie si vous le souhaitez. Nous laisserons \u00e9galement les champs Texte vides pour utiliser les noms des articles. Fermez les param\u00e8tres et enregistrez-les.<\/p>\n

                                \n
                              • Naviguer dans la cat\u00e9gorie actuelle : OUI<\/li>\n<\/ul>\n

                                R\u00e9sultats de la navigation dans les articles<\/h2>\n

                                Voici les r\u00e9sultats pour les trois conceptions.<\/p>\n

                                Liens texte pr\u00e9c\u00e9dents et suivants du bureau<\/h3>\n

                                \"Desktop<\/p>\n

                                T\u00e9l\u00e9phone Liens texte pr\u00e9c\u00e9dent et suivant<\/h3>\n

                                \"Phone<\/p>\n

                                Boutons Pr\u00e9c\u00e9dent et Suivant pour Desktop<\/h3>\n

                                \"Previous<\/p>\n

                                Boutons Pr\u00e9c\u00e9dent et Suivant pour le t\u00e9l\u00e9phone<\/h3>\n

                                \"Previous<\/p>\n

                                Boutons Pr\u00e9c\u00e9dent et Suivant double face pour le bureau<\/h3>\n

                                \"Double<\/p>\n

                                Boutons Pr\u00e9c\u00e9dent et Suivant double-face pour le t\u00e9l\u00e9phone<\/h3>\n

                                \"Double-Sided<\/p>\n

                                R\u00e9flexions finales<\/h2>\n

                                C’est ainsi que nous avons vu comment et o\u00f9 ajouter la navigation dans votre mod\u00e8le d’article de blog Divi. Ce type de navigation fonctionne tr\u00e8s bien sous le contenu de l’article pour attirer l’attention sur un contenu similaire. Les lecteurs restent ainsi plus longtemps sur votre site Web, ce qui vous permet d’obtenir plus de partages, plus de lecteurs, etc. La navigation par article est facile \u00e0 ajouter et \u00e0 styliser \u00e0 l’aide du cr\u00e9ateur de th\u00e8me Divi.<\/p>\n

                                Nous voulons conna\u00eetre votre avis. Avez-vous ajout\u00e9 la navigation par article \u00e0 votre mod\u00e8le d’article de blog Divi ? Faites-nous en part dans les commentaires <\/strong>\"Upload\"Upload\"Adding\"Adding\"Adding\"Adding\"Adding\"Adding\"Previous\"Previous\"Previous\"Previous\"Previous\"Previous\"Previous\"Double\"Double\"Double\"Double\"Double\"Double\"Double\"Double\"Desktop\"Phone\"Previous\"Previous\"Double\"Double-Sided\"Upload\"Upload\"Adding\"Adding\"Adding\"Adding\"Adding\"Adding\"Previous\"Previous\"Previous\"Previous\"Previous\"Previous\"Previous\"Double\"Double\"Double\"Double\"Double\"Double\"Double\"Double\"Desktop\"Phone\"Previous\"Previous\"Double\"Double-Sided
                                \n<\/span><\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"

                                La navigation par article est un ensemble de liens, g\u00e9n\u00e9ralement situ\u00e9s au bas d’un article de blog, qui permettent d’acc\u00e9der \u00e0 l’article pr\u00e9c\u00e9dent ou suivant. Heureusement, la navigation par article est facile \u00e0 ajouter \u00e0 vos mod\u00e8les d’articles de blog dans le Cr\u00e9ateur de th\u00e8me Divi. Dans cet article, nous allons voir comment et o\u00f9 […]<\/p>\n","protected":false},"author":1,"featured_media":370110,"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-370109","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\/370109","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=370109"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/370109\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/370110"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=370109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=370109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=370109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}