Template d’article Divi : stylisez vos articles de blog tout simplement !

Publié le 06/01/2020 | 55 commentaires

Je vous propose un mode d’emploi, pas à pas, pour définir le design de votre template d’article Divi. Voici ce que vous allez obtenir en suivant ce tutoriel :

Grâce à la fonctionnalité de Thème Builder, Divi vous permet de customiser toutes les templates de votre site.

Nous avions vu précédemment comment customiser la page boutique et comment créer un modèle de fiche produit… Il est temps de s’attaquer au design de vos articles de blog !

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce qu’une template d’article ?

Une « template » est tout simplement un « modèle ».

Cela signifie que la création d’un nouveau modèle – que ce soit pour les articles, les pages, les produits etc. – s’appliquera à tous les contenus utilisant ce modèle.

Donc, en créant une template d’article Divi, l’ensemble de vos articles de blogs (ceux déjà publiés et les prochains) utiliseront le même design. Vous créez le modèle 1 seule fois et tous vos articles auront la même composition, c’est le but d’une « template ».

Cela n’est possible qu’en utilisant le Thème Builder puisque ce dernier permet de modifier les fichiers modèles du thème.

Template Hierarchie WordPress
Template Hierarchie WordPress : hiérarchie des fichiers modèles

Pour information, les articles utilisent généralement le fichier du thème nommé « single.php« . C’est donc celui-ci qui sera modifié par le thème builder… Plus besoin de thème enfant ni de savoir coder !

2 – À quoi ressemble une template d’article Divi classique ?

Si vous utilisez le thème Divi « de base » (si on peut le dire comme ça) et que vous n’avez pas encore créé de modèle avec le Divi Thème Builder, vos articles de blog devraient ressembler plus ou moins à cela :

Template d'article Divi classique
Apparence d’une template d’article Divi classique (sans le Divi Theme Builder)

Sur cette capture d’écran, vous pouvez voir un article classique, rédigé avec l’éditeur de WordPress (Gutenberg), donc un article qui n’utilise ni le Divi Builder, ni le Thème Builder.

À lire aussi : ne pas confondre le thème Divi et le Divi Builder.

Il faut avouer que ce n’est pas très glamour… Et je suis gentille !

L’article est composé des éléments suivants :

  1. Le Header (en haut de l’écran) comprenant le menu principal et le logo (nous n’interviendrons pas sur cette partie),
  2. Le titre de l’article,
  3. Les métadonnées de l’article,
  4. L’image de mise en avant,
  5. Le contenu de l’article (le texte),
  6. La section des commentaires,
  7. La Sidebar (sur la partie droite),
  8. Le Footer (en bas de l’écran) comprenant les crédits et les icônes de réseaux sociaux (nous n’interviendrons pas non plus sur cette partie).

Hey !Envie d’essayer gratuitement le thème Divi ?. Cliquez sur « TRY IT FOR FREE »

Dans la suite de ce tutoriel, nous allons essayer de redynamiser l’ensemble afin que l’article soit plus « attractif » et plus « design » pour finalement obtenir un rendu comme vous avez pu le voir dans la vidéo en début d’article.

3 – Créer une template d’article Divi avec le Thème Builder

Découvrons les quelques étapes faciles à réaliser pour obtenir un modèle pour l’ensemble de vos articles

Créer une template article Divi
Créer une template d’article avec le Divi Thème Builder
  1. Allez à l’onglet Divi > Thème Builder
  2. Cliquez sur « Ajouter un nouveau modèle »
  3. Cochez la case « Tous les articles ». Si vous créez un modèle d’article sur un site existant qui compte de nombreux articles, vous pouvez aussi assigner ce nouveau modèle à un article spécifique (un article qui compte peu de visites par exemple). Ainsi, vous pourrez peaufiner le design de celui-ci avant de l’assigner à l’ensemble de vos articles.
  4. Validez en cliquant sur « Créer un modèle »
  5. Cliquez sur « Ajouter un corps personnalisé »
  6. Puis sur « Construire un corps personnalisé »
Ajouter le titre du poste
Ajouter le module « titre du poste »
  1. Choisissez « Construire à partir de zéro »
  2. Cliquez sur « + »
  3. Choisissez une ligne 1/1
  4. Et commencez par insérer le module « Titre du poste »

Nous allons voir ce module en détails…

3.1 – Insérer le module « Titre du poste »

Le module « Titre du poste » vous permet d’ajouter le titre de votre article au sein de votre modèle. Celui-ci est indispensable !

Lorsque vous l’insérez, le titre est nommé « Votre titre de publication dynamique s’affiche ici ». N’essayez pas de le modifier. Comme indiqué, il s’agit d’un « titre dynamique », cela signifie que chaque article utilisera cet emplacement pour afficher son titre. Peu importe si vous avez rédigé l’article avec Gutenberg ou avec le Divi Builder (depuis l’onglet Article > Ajouter). En savoir plus sur le contenu dynamique ici.

Depuis l’onglet « Contenu », le module « Titre du poste » offre diverses options d’affichage :

Paramétrer le module "Titre du poste"
Procéder aux paramètres du module « Titre du poste »
  1. Le titre de l’article.
  2. Les métadonnées de l’article.
  3. Le nom de l’auteur.
  4. La date de publication. Cela fonctionnera aussi si vous utilisez la date de mise à jour de l’article.
  5. La ou les catégories : elles n’apparaissent pas encore pour l’instant mais seront bien visible du côté front-end.
  6. Le nombre de commentaires.
  7. L’image principale (image de mise en avant).
  8. Position de l’image associée : cette option propose 3 positions différentes pour l’image de mise en avant de votre article. Vous aurez le choix entre « Titre en dessous » (image d’abord puis titre ensuite), « Titre au-dessus » (titre d’abord puis image ensuite) et « Image de fond du titre ». Je vous propose d’utiliser cette dernière option qui offre un visuel bien plus sympa que les deux autres. Ainsi, en choisissant « Image de fond du titre », l’image de mise en avant de votre article se positionnera en arrière-plan du titre de l’article.
  9. Pensez à valider et enregistrer vos modifications.

Toujours dans les paramètres du module « Titre du poste » et toujours dans l’onglet « Contenu », vous pourrez vous rendre à la section « Fond » pour ajouter un dégradé de couleur qui se placera au-dessus de l’image de mise en avant.

Ajouter un "overlay"
Ajoutez un « overlay » au-dessus de l’image de mise en avant

Cette couleur semi-transparente qui se place au-dessus de votre image (overlay) ne sera visible que si vous activez l’option « image de fond du titre ».

Sinon, vous pouvez activer l’effet parallaxe afin que l’image de mise en avant soit fixée en arrière-plan. Cela donne un effet très sympa !

Ajouter du parallaxe sur l'image de mise en avant Divi
Ajouter du parallaxe sur l’image de mise en avant Divi

Attention, si vous activez cette option, veuillez tenir compte de ces 2 choses importantes :

3.2 – Insérer le module « Publier un contenu »

Le titre étant paramétré, il vous faut insérer le module « Publier un contenu » afin que vos articles affichent leur contenu (textes, images etc.).

Ajouter le module "Publier un contenu"
Ajoutez le module « Publier un contenu » pour faire apparaitre le contenu de vos articles

Ce module est très complet et est indispensable : il doit obligatoirement être inséré dans votre template d’article Divi.

Pour le paramétrage, je vous donne rendez-vous à l’article dédié au module « Publier un contenu ».

3.3 – Insérer le module « Commentaires »

Que serait un article de blog sans formulaire de commentaire ?

Toutefois, ce module n’est pas indispensable, contrairement au module « Titre du poste » et « Publier un contenu ».

À vous de décider si vous souhaitez accepter les commentaires au sein de vos articles.

Ajouter le module "Commentaires"
Ajoutez le module « Commentaires » au sein de votre template d’article
  1. En bas de la template d’article, cliquez sur le « + » gris. Ce dernier permet d’ajouter un nouveau module au sein de la même « rangée ».
  2. Insérez le module « Commentaires ».
  3. Vous pouvez afficher ou non la photo de l’auteur du commentaire.
  4. Vous pouvez afficher ou masquer le bouton « répondre ».
  5. Affichez ou masquez le nombre de commentaires.
  6. Peaufinez le design (police, taille, couleur etc.) de la section « commentaires » depuis l’onglet « Style » et/ou « Avancé ».
  7. Enregistrez vos modifications.

4 – Peaufiner le design de la template d’article

À ce stade du tutoriel, votre template d’article Divi devrait ressembler à cela :

Évolution de la template d'article Divi
Évolution de la template d’article – stade 1

Pour l’instant :

  • La Sidebar a disparu.
  • La largeur du contenu s’est élargi.
  • Le titre de l’article et les métadonnées apparaissent au centre de l’image de mise en avant.
  • Un dégradé de couleur a été apposé sur l’image de mise en avant.
  • Le formulaire de commentaire a légèrement été modifié.

4.1 – Passer l’image et le titre en pleine largeur

Pour un design d’article un peu plus « dans l’air du temps », on pourrait agrandir l’image de mise en avant afin qu’elle ait une largeur de 100%.

Pour cela, il va falloir agrandir « la boite » dans laquelle se trouve cette image : on va agir sur la « rangée » (boite verte).

Rangée "plein largeur"
Passez la « rangée » en mode « plein largeur »
  1. Cliquez sur la roue dentée pour ouvrir les « réglages de la rangée ».
  2. Allez à l’onglet Style > Dimensionnement
  3. Placez la largeur maximale à 100%
  4. Idem pour la deuxième valeur : poussez le curseur au maximum.
  5. Allez à l’onglet Style > Espacement pour placer les marges et marges internes à 0px.

À ce stade, l’image de mise en avant doit être de 100% et elle doit toucher les bords droit et gauche de votre écran.

Cependant, il est possible qu’une marge persiste en haut de l’image de mise en avant (entre l’image et le menu principal). Si c’est le cas, vous pourrez corriger cela à l’aide du bout de code CSS suivant :

Ajout de CSS pour la rangée "pleine largeur"
Ajoutez un peu de CSS pour obtenir une rangée « pleine largeur » sans marge au-dessus

Allez à l’onglet Apparence > Personnaliser > CSS additionnel et collez le code ci-dessous :

.et_pb_section_0_tb_body {
	padding-top: 0px !important;
}

@media (min-width: 981px){
	.et_pb_section_0_tb_body {
	padding-top: 0px !important;
}
}

Cela devrait corriger cette marge « résistante » et l’image de mise en avant de votre article devrait toucher le header de votre site.

4.2 – Ajuster la largeur du contenu de l’article

Idem pour la largeur du contenu de votre site. Vous pourriez élargir le contenant afin que le texte de vos articles présente des marge latérale moins large.

Ceci est facultatif mais si vous souhaitez agir sur ces marges, voici le procédé :

Contenu en pleine largeur template article Divi
Obtenir le module « Publier un Contenu » en pleine largeur
  1. Ouvrez les « réglages de la rangée » qui contient le module « Publier un contenu ».
  2. Allez à l’onglet Style > Dimensionnement
  3. Placez le curseur de la largeur maximale sur 100%
  4. Faites glisser le deuxième curseur au maximum
  5. Allez à l’onglet Style > Espacement pour y ajouter une marge interne à gauche de 50px. Ceci évitera que le texte de votre article soit complètement « collé » à la gauche de votre écran.
  6. N’oubliez pas de paramétrer les versions mobile et tablette en ajoutant, cette fois-ci, de la marge interne à gauche ET à droite.
  7. Enregistrez vos modifications.

4.3 – Ajoutez une sidebar Divi

Un autre élément assez commun pourrait être ajoutée au sein de votre template d’article Divi : une sidebar ou barre latérale.

On trouve cela très souvent sur les blogs, même si la tendance tend à la faire disparaitre complètement…

Ajouter une sidebar dans la template d'article Divi
Ajoutez une sidebar dans la template d’article Divi
  1. Modifiez la rangée qui contient le module « Publier un contenu ».
  2. Au lieu d’utiliser une rangée de type 1/1, je vous propose de choisir une composition de [2/3 + 1/3] ou de [3/4 + 1/4].
  3. Dans ce nouveau « quart », un bouton « + » gris apparaît et vous permet d’ajouter un nouveau module.
  4. Insérez un module « Barre latérale ».
  5. Dans les réglages du module, vous pourrez choisir quelle est la sidebar à faire apparaître. Cela sous-entend que vos sidebars doivent être prêtes. Vous les gérez à l’onglet Apparence > Widgets de WordPress.

Ensuite, il ne vous restera plus qu’à styliser l’apparence de la sidebar à votre convenance grâce aux options du module :

Styliser la sidebar Divi
Stylisez la sidebar Divi
  1. À l’onglet Contenu > Fond, choisissez une couleur d’arrière-plan. J’ai choisi le blanc.
  2. À l’onglet Style > Espacement, ajoutez un peu de marge interne. J’ai ajouté 20px de tous les côtés.
  3. À l’onglet Style > Boite ombre, ajoutez une ombre à la sidebar afin de donner un peu de relief.
  4. À l’onglet Style > Bordure, j’ai fait le choix d’arrondir les angles de ma sidebar. Mais vous pourrez laisser les angles droits ou ajouter une bordure de couleur si vous le souhaitez.
  5. À l’onglet Style > Transformer > Outil curseur, vous pourrez déplacer légèrement la position de votre sidebar. Cet onglet est intéressant pour mettre un élément à cheval sur deux sections. J’ai déplacé ma sidebar de -140px vers le haut et de -15px sur la gauche.
  6. Attention à cette option de transformation, veillez à mettre les valeurs à 0px pour les versions mobile et tablette. Lire également cet article pour optimiser vos sidebars pour les versions mobiles.
  7. Sauvegardez vos modifications.

5 – Design final de la template d’article Divi

Tadaaa ! Voici le design final du modèle qui s’appliquera à l’ensemble de mes articles de blog.

Template d'article Divi finale
Apparence de la template d’article Divi – version finale

Pour bien faire, il faudrait encore styliser le formulaire des commentaires qui est encore un peu trop classique à mon goût.

Idée : vous pourriez assigner cette template d’article Divi qu’à une seule catégorie de votre blog et créer des versions un peu différente pour les autres catégories. Par exemple, vous pourriez assigner une sidebar différente pour chaque template de catégorie de votre blog. Ou des couleurs différentes etc.

Voici également d’autres tutoriels pour vos templates d’article :

Avec Divi, les possibilités sont infinies !

Template d'article Divi
Template article Divi Theme Builder
Blog Post Template with Divi Theme Builder

2,216 mots

9

Ça devrait vous plaire aussi :

Formation Divi PDF : un guide pas à pas

Formation Divi PDF : un guide pas à pas

Quoi de mieux qu’une formation Divi PDF pour maitriser ce thème WordPress, son Visual Builder et son Thème Builder ? C’est comme si un formateur s’invitait chez vous… Découvrez son contenu !

55 Commentaires

  1. Kaellyana

    Bonjour,
    Bonne année Lycia.
    J’aime beaucoup la sidebar qui déborde dans l’image et qui est arrondis, cela change totalement de la sidebar de base de divi.
    Je garde l’idée de personnalisation sous le coude.
    Tu crois que l’on peut faire la même chose avec l’image mise en avant qui apparaîtrais?

  2. Lycia Diaz

    Salut Kaellyana !
    Bonne année à toi aussi…
    Oui, c’est possible en bidouillant un peu. J’ai essayé de le faire aussi pour le tuto. En fait tu dois utiliser le module « Titre du poste » et supprimer tous les autres éléments (le titre, les métas etc.) ainsi tu ne gardes que l’image de mise en avant. Ensuite tu la customises et tu la mets où tu veux. Par contre, il te faudra rajouter un deuxième module « Titre du poste » que tu afficheras cette fois-ci sans son image. Tu vois l’idée ?
    À bientôt 😉

  3. Kaellyana

    Coucou,
    oui ce que tu me dis c’est ce que j’avais en tête pour faire un essais.
    En tout cas merci de ta réponse et de tous les articles que tu proposes.
    Mon soucis moi avec divi c’est leurs partie blog.
    C’est moche
    soit en grille soit en méga grand.

    Avec le thème builder on commence de pouvoir faire quelques trucs plus sympa c’est déjà mieux.

  4. Lycia Diaz

    Oui, tu peux tout faire, quasiment 😉 ou du moins tu peux améliorer ce qui ce faisait jusqu’à présent !

  5. Decoster

    Bonjour,
    Je voulais tester cette présentation d’article mais l’option « activer l’effet parallaxe » ne s’affiche pas ?
    Quelle erreur ai-je commis ?
    Merci.

  6. Lycia Diaz

    Salut Decoster.
    En effet, mon image n’était pas explicite et comme c’est compliqué de l’expliquer par écrit, j’ai mis à jour l’image qui montre comment activer l’effet parallaxe sur l’image de mise en avant.
    Tu verras sur la dernière image du chapitre 3.1, une capture d’écran qui montre comment faire. Si tu n’as pas trouvé cette option, c’est parce que j’avais omis d’entourer un détail qui a son importance. Tu verras sur cette capture une annotation en violet (au lieu de rose). La réponse à ta question est là.
    😉

  7. James

    Bonjour,
    Comment peut-on changer l’image du haut pour CHAQUE article ?
    Merci,

  8. Decoster

    Bonjour Lycia, merci pour les précisions, j’ai vu.
    Une autre question : est-il possible d’utiliser cette méthode pour tout nouvel article ou ne peut-elle s’appliquer qu’à des articles déjà rédigés ?
    Merci.

  9. Lycia Diaz

    Salut Decoster, la template s’appliquera à tous tes articles déjà publiés et ceux à venir…

  10. Decoster

    Bonjour Lycia, merci pour l’info. Ça ne m’arrange pas mais tant pis ! Belle journée à vous.

  11. Lycia Diaz

    Salut Decoster. Si ça ne t’arrange pas, tu peux tout simplement appliquer ce template à certains articles ou certains catégories seulement. Lors de la création du template, au lieu de cocher « tous les articles » tu peux faire d’autres choix 😉

  12. Jean-Luc Vandeweghe

    Bonsoir Lycia,
    Je suis subjugué par la qualité de tes articles. Merci.
    Quand le modèle est enregistré, comment faire pour l’utiliser sur un article ?
    Je clique sur « Créer/Article » mais pas de vue sur les modèles crées.

  13. Lycia Diaz

    Salut Jean-Luc et merci 😉
    Normalement, tu n’as rien à faire. Si tu as bien paramétré ton template, tous tes articles auront le même design. Tu as juste à créer ton article, avec Gutenberg ou le Divi Builder, et le contenu apparaîtra avec le design que tu as prédéfini avec le Thème Builder. Si ça ne marche pas : désolée de te le dire, mais tu as dû rater une étape. Vérifies le tuto, tu as peut-être omis de cocher quelque chose 😉

  14. Lycia Diaz

    Salut James,
    L’image insérée dans cette template est « dynamique ». Cela signifie que l’emplacement affichera l’image principale que vous insérez dans chaque article (dans le backoffice de l’article – pas dans Divi) : changez donc votre « image de mise en avant » à chaque article et votre image sera personnalisée à chaque publication.

  15. JLuc

    Lycia,
    Peut-on créer une Template à partir d’une page/article existante ?

  16. JLuc

    Bizarre ! J’ai bien créé un modèle avec Thème Builder. J’ai coché « Tous les articles », mais je ne le retrouve pas dans Divi Builder « Télécharger le modèle ».

  17. JLuc

    Bonjour Lycia,
    J’espère que tu as passé un bon week-end bien mérité…
    Excuse-moi d’insister, mais j’ai repris toutes les étapes de ton tutoriel.
    Rien à faire, ma template Article ne modifie pas mes articles existant et je ne la retrouve pas dans « Choisir la mise en page » ni dans « Cloner une mise en page existante ». Qu’ai-je bien pu oublier ?

  18. Lycia Diaz

    Salut Jean Luc. Oui, bon WE et toi ? Concernant ta demande, je crains qu’il y ait une erreur de compréhension. Quand je lis ton commentaire, je crois comprendre que tu n’as pas assimilé ce qu’est une template de thème. Tu ne la trouves en aucun cas dans tes mises en pages du Divi Builder. C’est un design qui va s’appliquer d’office à tous tes articles, si tu as bien paramétré ta template. Si tu défini un design pour tes articles, toutes ces publications seront affectées. Tu n’as à le définir qu’une seule fois depuis le thème Builder. Il ne faut pas confondre un template de thème et un layout, qui lui s’applique au corps de ton article. Si tu as besoin d’un accompagnement personnalisé c’est faisable (je le fais à discrétion : https://astucesdivi.com/produit/support-premium-divi/) J’espère que mes explications t’auront aider et t’aideront encore 😉

  19. JLuc

    Merci bcp pour ta réponse Lycia,
    Je vais rassembler mes besoins et reviendrai vers toi en mode discret 😉

  20. kaellyana

    Coucou Lycia
    J’ai testé ton article
    ça marche c’est cool.
    Bon par contre il faut avoir des images mises en avant au format horizontal. Car sinon avec une image au format vertical c’est moche.
    Ce qui fait que niveau chroniques littéraires avec la couverture d’un livre cela ne rend pas tip top.

    Je garde l’idée de la présentation de ces articles pour d’autres projets.

  21. Lycia Diaz

    Merci Kaellyana pour ton retour… Je pense que tu peux adapter avec des images au format portrait ? Mais je n’ai pas testé… À voir… À bientôt 😉

  22. Florent

    Hello Lycia,

    Super blog et contenu au top ! Je t’écris ce message car quand je publie mon article je ne retrouve que le dégradé et non pas mon image de fond avec le dégradé. Ai-je oublié quelque chose ?

    Merci pour ton retour 🙂

  23. Lycia Diaz

    Ah mais j’y pense, je t’ai donné le tuto du parallaxe mais toi tu veux simplement le dégradé qui recouvre ton image ? Il y a une petite case à cocher pour ça : « image de fond du titre » (très mauvaise traduction, je te l’accorde). Coche-la. Le tuto du parallaxe l’explique aussi.

  24. Florent

    Lycia, merci pour ton retour.
    Malheureusement j’ai déjà cliqué sur cette case et cela affiche le dégradé de couleur au lieu de l’image avec le dégradé.
    Pour faire simple lorsque je la décoche, je vois mon image sans dégradé et lorsque je la coche uniquement le dégradé..

  25. Lycia Diaz

    Dans ce cas, décoche l’option « parallaxe », c’est à cause de ça. Lis mon tuto à ce sujet, tu vas comprendre

  26. Florent

    Désolé, je dois surement oublier quelque chose mais cette option est décochée également..

  27. Lycia Diaz

    Ah … je vois pas, désolée . Essaye une autre image juste pour voir. Ou recommence depuis le début, y’a peut-être un truc que tu as oublié ?

  28. Thuret

    Bonjour Lycia, je me retrouve face à un petit soucis, lorsque je personnalise ma mise en page, mon menu de thème disparait. Sais-tu comment gérer ce problème ?

  29. Lycia Diaz

    Salut Thuret. Pourrais-tu être plus précis ? Car je ne crois pas que ce soit un souci mais plutôt le comportement normal, tout dépend de ce que tu as fait et de ce que tu entend par « mon menu de thème disparaît » ?

  30. Bruno

    Bonjour Lycia,
    J’ai démarré avec DIVI il y a 15 jours, j’ai créé plusieurs pages et je viens de découvrir ton article et le fonctionnement du thèmes Divi Builder.
    Quand je veux créer une nouvelle page avec un modèle de thème, j’ai ce message qui s’affiche et e ne comprend pas pourquoi.

    Message:Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module Publier le contenu.

    Un module de publication de contenu est requis pour ajouter un contenu unique dans le modèle de générateur de thèmes. Une fois qu’un module de contenu de publication a été ajouté au modèle, vous pourrez ajouter un contenu de publication unique dans cette zone pour chaque publication à l’aide du modèle.

    Merci pour ta réponse et la qualité de tes articles.
    Cordialement

  31. Lycia Diaz

    Salut Bruno. Du a du créer un modèle avec le thème Builder mais tu as du oublié d’y placer le module indispensable : le module Publier un contenu. Une fois que tu l’auras ajouté dans ton modèle (theme Builder) tu pourras continuer à créer ton contenu avec le visual Builder depuis ta page ou ton article ! Voir cet article : https://astucesdivi.com/module-post-content/

  32. IsabelleM

    Merci pour ce tuto ! Efficace et clair 🙂

  33. Jérémy

    Bonjour Lycia,

    Merci pour ce tuto ! J’ai le même problème que Thuret mais je n’arrive à voir ou le régler :(.
    J’ai suivi ton tuto mais mon header et mon footer n’apparaît pas dans mon article. Je pense qu’il doit y avoir une checkbox que je n’ai pas vu… Je suis preneur de ton aide si tu vois à quoi cela peut être dû !

    Merci 🙂

  34. Jérémy

    EDIT mon commentaire précédant… je viens de comprendre. L’erreur c’est d’avoir utilisé le bloc « Ajouter un en-tête » pour mettre le titre et « ajouter un pied de page » pour mettre un bloc d’inscription newsletter. Tout doit être dans le corps personnalisé. Ça va résoudre le problème de Thuret également 😉

  35. Lycia Diaz

    Salut Jeremy ! Je crois que tu viens de comprendre le fonctionnement du thème Builder… sans que j’ai eu besoin de t’aider 😉

  36. Bruno

    Bonjour Lycia,
    Il me semble que le module ‘publier un contenu’ ne s’affichait pas car j’avais déjà créé des pages sans les référencer au niveau du thème builder.
    Je les ait toutes supprimé, je suis repartis a zéro et là le module est apparu.
    Cordialement

  37. Lycia Diaz

    Super ! Merci pour ton retour

  38. pierre-gerard martin

    Bonjour Lycia,

    Super article merci,

    Une fois que c’est fait comment éditer le textes des articles ? je me retrouve avec l’éditeur de base de WordPress.

    Merci

  39. Lycia Diaz

    Je crois que vous avez la réponse maintenant Pierre Gérard 😉

  40. José Caceres

    Franchement top les explications, étape par étape, le tout en images !!!. Quel beauté. Bravo Lucya, merci.
    Seul bémol, peut-être plus qu’un simple détail, l’usage du « français, » dont la traduction est franchement ambiguë. L’usage de la traduction française n’aide pas toujours à comprendre de quel module ou quel réglage parle-t-on. De sorte qu’il faut basculer en version original (anglais) pour bien comprendre.
    Ici, il ne suffit pas de cliquer sur le drapeau anglais. Car la version proposée et alors du très mauvais franglais: c’est à dire de l’anglais mal traduit en français retraduit en soit disant anglais.
    Bien sûr, je comprends que « éditer » le franglais est un travail qui prendrais un temps fou. Je me contente d’aller regarder la version original pour savoir de quoi on parle.
    Tout ceci pour dire que c’est le meilleur blog français sur DIVI que je connaisse à ce jour.

  41. Lycia Diaz

    Merci infiniment José !!!
    Oui, mon site est initialement en FR et utilise les termes « mal traduits » de Divi afin que tout le monde puisse s’y retrouver, disons, les francophones qui utilisent Divi en FR.
    Concernant mes traductions ENG, elles sont automatiques avec Weglot. Du coup, Weglot traduit un français mal traduit provenant de l’anglais, hi hi hi. Il faudrait que je corrige manuellement les versions anglaises de mes articles mais comme tu l’as dit, il me faudrait du temps… Donc, oui, ce n’est pas encore parfait 😉
    En tout cas, merci pour ton compliment !

  42. Sophie SEVERIN

    Bonjour Lycia ! Merci infiniment pour cet article très instructif, j’en découvre toujours plus grâce à toi.
    J’ai suivi à la lettre ta méthode, et mon thème Builder est bien adapté, j’ai crée mon « modèle » d’article de blog dans le Theme Builder, designé comme je le souhaite. Toutefois, rien à faire, ce modèle s’intègre dans un autre article ! Comme un effet poupée russe, comme un emboitement d’articles. … incroyable, j’ai 2 entetes et 2 sidebars !! As-tu une explication? je cherche la solution depuis des heures, en vain. J’espère que ma description est claire…
    Merci d’avance !

  43. Gwendoline

    Bonjour, merci pour cette article. J’ai une petite question, pourriez-vous me dire comment supprimer le « sur » qui apparait dans les métadonnées et qui donne qqch de pas très français : « Jane Doe sur 1er janvier 2019 à 12h00… » Merci beaucoup.

  44. Lycia Diaz

    Salut Gwendoline, j’ai jamais fait gaffe. Il faut que je regarde.

  45. Lycia Diaz

    Salut Sophie, tu es sûre d’avoir suivi à la lettre le tuto ? Car comme tu le vois sur mon blog, rien ne s’emboite et pourtant j’utilise exactement (ou à quelques choses près) le design que je propose dans ce tutoriel. Donc, je me demande si tu as bien utilisé le module Publier un Contenu ? Et si tu n’aurais pas saisi du texte en « dur » au sein de ta template. Ta template doit être utilisable à l’infini et donc, tu ne dois placer que des modules « dynamiques » comme le module Publier un contenu. Est-ce plus clair ? J’espère que tu vas rapidement trouver d’où ça vient, au quel cas, n’hésite pas à faire un retour ici, cela pourrait aider d’autres personnes 🙂

  46. Rine.up

    Bonjour Lycia et merci beaucoup pour cet article qui m’a bien aidé !
    J’ai réalisé un modèle pour mes articles, et j’ai mi une section commentaire.
    Toutefois, je n’arrive pas à modifier les textes « soumettre un commentaire » et le bouton « submit comment ».
    Sais tu comment y arriver ?

    Merci pour tous tes conseils !

  47. Lycia Diaz

    Salut Rine ! Non, l’option n’existe pas… il faudrait le coder

  48. Matt

    Un grand merci pour ce tuto, j’étais vraiment en galère avec le design des articles 🙂

  49. Sophie SEVERIN

    Bonjour Lycia,
    Navrée pour le retour tardif ! J’ai fait plusieurs essais car j’avais réellement suivi ton tuto à la lettre.Après maintes recherches, il s’avère que le plugin DIVI Section Enhancer générait cet affichage délirant (emboitement des sections). En le désactivant, le modèle de page blog que j’avais configuré dans Divi Builder est apparu normalement, j’ai pu mettre en forme mes articles tout simplement!

  50. Lycia Diaz

    Super Sophie !

  51. Sarah RIGAUD

    Bonjour, je viens de mettre à DIVI est mon Dieu c’est pas de la tarte, rien de compliqué en soit mais sans mode d’emploi… Du coup j’ai acheté votre pack Work book + wp. J’ai hâte d’avoir un peu de temps pour me plonger dedans. J’ai 2 soucis le premier est que j’ai une barre (le fond gris) sous ma photo en fond de titre. Votre bout de code à solutionné le haut mais pas le bas. Et je ne vous pas du tout le contenu de publication une fois sur l’article alors qu’il est visible sur le layout ? Merci de votre aide

  52. Lycia Diaz

    Salut Sarah et merci pour ta confiance. J’arrive pas trop à comprendre ton souci. Tu as trouvé depuis ?

  53. Laure

    Bonjour,

    je viens à l’instant de me créer un template d’article via le thème builder. À partir de là comment faire pour utiliser ce template dans wordpress ? Ou plutôt quelle est la façon la plus simple d’utiliser ce template. Je passe par articles > ajouter et ensuite ? Il me propose d’utiliser le Divi Builder mais du coup il me redemande si je souhaite construire à partir de zéro, choisir la mise en page ou cloner la page existante. Je pensais que le fait de créer un template dans le thème builder aurait permis d’obtenir la mise en page du thème builder au moment de créer un nouvel article… Là je ne parviens pas à ce résultat… Et votre billet est super clair mais s’arrête à la fin de la création du template, on ne voit donc pas comme l’utliser à la création d’un nouvel article…

    Merci d’avance de votre aide,
    Belle journée

  54. Lycia Diaz

    Salut Laure.
    Une fois que tu as créé ton modèle (template) il te suffit de créer un nouvel Article (Article > Ajouter) et d’utiliser l’éditeur que tu préfères : soit tu utilises Gutenberg soit tu actives le Divi Builder. Le contenu que tu auras créé avec l’éditeur de ton choix prendra la place du module « Publier un contenu » que tu as placé dans ton modèle (étape 3.2 de ce tuto).

Soumettre 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.

Pin It on Pinterest

Shares
Share This