Dans un précédent tutoriel nous avons vu comment créer une page avec Divi sous WordPress. Vous savez donc manipuler des sections, des lignes et des modules avec Divi. Si ce n’est pas encore le cas, jetez-y un oeil avant d’aller plus loin.

L’étape suivante dans votre progression consiste à créer un modèle de contenu, aussi appelé template. Nous allons donc créer un template d’article.

Qu’est-ce qu’un template ?

Un template est un modèle de page, c’est-à-dire une apparence ou un design, qui sera appliqué à plusieurs pages en même temps. Par exemple, sur un site e-commerce, on dispose de nombreuses fiches de produits. On peut donc y appliquer un modèle pour modifier l’apparence de toutes les fiches produits à la fois.

Il est possible d’appliquer un modèle (un template) à un ensemble de pages qui partagent une caractéristique commune. C’est le cas des articles de blog, des fiches produits…

Créer un modèle d’article permet de designer tous les articles de blog à sa guise sur un modèle unique.

Avantage : si demain vous avez besoin de faire un correctif ou une évolution de l’apparence de vos articles, il vous suffit de faire cette modification dans le template, une seule fois et elle sera appliquée à tous vos articles d’un seul coup et instantanément.

Reste donc à créer avec Divi un modèle d’article.

Voilà comment procéder.

1- Créer un article avec WordPress

Commencez par créer un nouvel article.

Allez dans le Tableau de bord > Articles > Ajouter

Choisissez la « mise en forme par défaut ».

Indiquez :

• Titre
• Contenu
• Uploadez une « image mise en avant » dans la colonne de droite

C’est tout. Sauvegardez.

Vous devriez obtenir un article dont l’apparence est proche de celle-ci, c’est le design par défaut de Divi.

On va la remodeler l’ensemble du design des articles  pour obtenir un résultat plus personnalisé. C’est assez simple visuellement mais libre à vous de tenter des choses plus extravagantes !

Le titre est centré, plus gros, la date de publication est aussi centrée, la photo est en pleine largeur de même que le contenu car la colonne de droite a disparu.

2- Accéder au constructeur de thème

Revenez maintenant dans le tableau de bord puis dirigez-vous vers

Tableau de bord > Divi > Theme builder > Ajouter un nouveau modèle > Nouveau modèle

Cochez ensuite sur « Utiliser ce modèle sur > Tous les articles » et appuyer sur le bouton « créer » en bas.

Cliquez enfin sur « Ajouter un corps personnalisé » > « Construire un corps personnalisé ».

Bien joué !

3- Ajouter une première ligne

Nous allons maintenant ajouter une ligne pour y insérer l’en-tête de l’article c’est-à-dire son titre, le nom de l’auteur, la date de publication et la photo à la une, tout ça d’un coup . Pour se faire cliquez simplement sur le + vert.

Choisissez une ligne simple avec une seule colonne. Premier choix en haut à gauche.

Ensuite, cliquez sur le + gris pour insérer un module.

Dans la liste trouvez le module « Titre du poste ».

Ensuite, on va styler un peu cet élément. Pour se faire allez dans l’onglet « Style » puis dans  » Titre texte » et appliquez le style qui vous sied : police, taille de police, graisse, couleur de la police, position… Pour mon exemple j’ai opté pour du Montserrat en gras centré et de 50 px de hauteur et j’ai centré le titre.

👉 N’oubliez pas de valider avec la coche verte en bas de la fenêtre modale.

Vous allez aussi n’afficher que la date de publication en dessous du titre en cliquant sur l’onglet « Contenu » puis dans la section « Élément » décocher les options : afficher l’auteur, afficher les catégories, afficher  le nombre de commentaires.

Pour centre la date, allez dans l’onglet « Style » puis dans la section 3métadonnées » puis clicquez sur le bouton de centrage.

4- Ajouter le contenu de l’article de façon dynamique

Maintenant, on va ajouter le contenu de l’article.

💡 Ne perdez pas de vue que l’on ne cherche pas à créer un article mais bien un modèle d’article. Il va s’appliquer à des centaines d’articles à la fois. IL ne s’agit donc pas de coller du texte mais un module qui va afficher le contenu de chaque article.

Cliquez sur le + vert en dessous de la ligne du titre. Ajoutez une ligne de une colonne.

Cliquez sur le + gris pour insérer un module nommé « Publier un contenu ».

6- Sauvegardez puis fermer

Sauvegardez une première fois (en bas à droite) puis fermez avec la croix en haut à droite.

Dans la fenêtre suivante, cliquez sur « Sauver les changements » ce qui a pour effet d’attribuer votre modèle à vos articles.

Et voilà, vous pouvez aller jeter un oeil à un article. Il aura le design que vous venez de créer.