5 conseils pour organiser le contenu d'une page de blog dans Divi
Publié: 2019-12-21Le contenu de votre page de blog peut être organisé de nombreuses manières. Puisqu'il s'agit d'une page de blog, la plupart du contenu consistera en un flux d'articles de blog récents. Savoir comment organiser ce contenu peut être un excellent moyen de briser la monotonie et d'ouvrir la porte à des conceptions de pages de blog plus uniques.
Dans ce tutoriel, nous partagerons avec vous 5 conseils utiles pour organiser le contenu des pages de blog dans Divi qui vous aideront à apprendre ce qui suit :
- Comment créer une disposition à deux colonnes
- Comment utiliser les messages collants
- Comment utiliser les décalages postaux
- Comment utiliser plusieurs modules de blog pour créer une mise en page personnalisée pour les articles de blog
- Comment afficher les messages récents par catégorie
Aperçu
Voici un aperçu de certaines façons dont nous organiserons le contenu des pages de blog dans Divi.
Utiliser une disposition à deux colonnes
Une section de publication en vedette au-dessus du fil principal du blog
Un curseur de publication pleine largeur au-dessus du flux principal du blog
Utilisation de plusieurs modules de blog pour une mise en page et un design uniques
Présentation des articles récents par catégorie
Ce dont vous avez besoin pour commencer
Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
Pour ce didacticiel, j'utiliserai le modèle de page de catégorie du pack Second Theme Builder. Si vous souhaitez l'utiliser pour suivre, téléchargez le pack et importez le fichier divi-theme-builder-pack-2-category-page-template.json dans le générateur de thème à l'aide des options de portabilité. 
Par défaut, le modèle importé sera affecté à « Toutes les pages de catégorie ». Ouvrez les paramètres du modèle et attribuez-le au blog.
Vous êtes maintenant prêt à commencer le processus d'organisation du contenu de la page de blog dans le modèle. Pour commencer, cliquez sur l'icône de modification dans la zone du corps du modèle.
Vous pouvez maintenant utiliser l'éditeur de mise en page pour modifier la mise en page.
5 astuces pour organiser un modèle de page de blog dans Divi
Dans ce modèle, nous avons un module de blog qui se trouve dans une ligne à une colonne qui affiche les articles (en trois colonnes sur le bureau) pour la page actuelle. Il s'agit d'une configuration standard pour les modèles de page de blog et d'archive. Cependant, nous n'avons pas à conserver cette mise en page standard pour l'affichage des publications. Voici quelques conseils utiles pour organiser le contenu des pages de blog dans Divi.
#1 Créez une mise en page à deux colonnes
Le module de blog (s'il est défini sur une disposition en grille) affichera les articles dans une structure à trois colonnes si le module est ajouté à une ligne à une colonne (comme dans notre modèle).
Si vous souhaitez modifier la mise en page pour afficher les publications dans une mise en page à deux colonnes, voici quelque chose que vous pouvez faire.
Tout d'abord, modifiez la disposition des colonnes de la ligne en une disposition deux tiers un tiers. Cela affichera les articles de blog sur deux colonnes dans la colonne de gauche de la ligne.
Ensuite, ouvrez les paramètres de la colonne 1 (celle contenant le module de blog) et ajoutez le CSS personnalisé suivant à l'élément principal :
width: 100% !important;
Ainsi, la colonne s'étendra sur toute la largeur de la ligne.
Il ne nous reste plus qu'à masquer la colonne de droite. Ouvrez les paramètres de la colonne 2 (la vide) et désactivez la visibilité de la colonne sur tous les appareils.
Vous pouvez désormais organiser le contenu des pages de blog avec deux colonnes sur le bureau au lieu de trois si vous le souhaitez.
#2 Utilisez des messages collants
Si vous connaissez WordPress, vous connaissez peut-être déjà celui-ci. Chaque publication créée dans Divi (ou WordPress) peut être rendue collante. Lorsque vous créez un post collant, celui-ci s'affichera automatiquement tout au début du flux de blog sur la page du blog, même avant le dernier post publié. C'est un excellent moyen de présenter des publications que vous savez que votre public voudra (ou aura besoin) voir.
Pour rendre une publication collante, modifiez simplement une publication dans Divi et cochez l’option « Rester en haut du blog » dans la barre latérale droite.
Chaque publication que vous créez sera étiquetée comme « Sticky » lors de la visualisation de toutes les publications sur le backend.
Maintenant, lorsque vous visitez la page du blog, vous pouvez voir que les articles collants sont passés au premier plan du flux d'articles de blog.
Remarque : les publications collantes peuvent ne pas fonctionner comme prévu lors de l'utilisation de décalages de publication dans le module Blog. Par exemple, si vous configurez le module de blog pour afficher 3 articles avec un décalage de 3, vos articles persistants seront toujours affichés avant (et en plus) les 3 articles.
Avant de passer au conseil suivant, je vous suggère de vous débarrasser des messages collants.
#3 Utilisez les décalages de publication pour organiser le contenu de la page de blog en sections distinctes
Chaque module de blog a une option pour entrer un numéro de poste. Cela indique au module de blog d'ignorer un certain nombre de billets de blog récents avant d'afficher le flux de blog. Cette option est pratique chaque fois que vous souhaitez modifier un peu la mise en page de votre page de blog en utilisant plusieurs modules de blog pour afficher vos articles. Cela vous donne plus de flexibilité dans la conception de la mise en page car vous pouvez concevoir chaque module de blog différemment.
Présentation des publications les plus récentes avec un module de blog séparé utilisant le décalage de publication
Une façon d'organiser le contenu de la page de blog sur la mise en page de votre modèle consiste à ajouter une section d'article de blog en vedette en haut de la page. C'est une façon de mettre en évidence les trois premiers messages les plus récents d'une manière unique. Voici maintenant pour le faire.
Ajoutez une nouvelle section régulière à la mise en page.
Ajoutez ensuite une ligne à une colonne.
Copiez le module de blog fourni avec le modèle et collez-le dans la nouvelle ligne.
Mettez à jour les paramètres du blog comme suit :
- Nombre de messages : 3
- Afficher le bouton Lire la suite : NON
- Afficher les catégories : NO
- Afficher le nombre de commentaires : NON
- Afficher l'extrait : NON
- Afficher la pagination : NON
Nous aurons les trois messages les plus récents affichés dans la section supérieure de la page.
Nous devons maintenant ajouter un numéro de décalage de publication au module de blog d'origine afin qu'il ignore les trois premiers messages déjà affichés ci-dessus.
Ouvrez les paramètres de blog pour le module de blog d'origine et mettez à jour les éléments suivants :
- Numéro de compensation de poste : 3
Maintenant, le flux du blog commencera par le post #4.
Pour faire ressortir la section vedette en haut de la page, vous pouvez ajouter un dégradé d'arrière-plan.
Voici un exemple de ce à quoi cela ressemblerait.
Ajout d'un curseur de publication pleine largeur au-dessus du flux de blog principal
Tout comme la section en vedette ci-dessus, nous pouvons également organiser le contenu des articles de blog en ajoutant un curseur de publication pleine largeur en haut de la page du blog. Il s'agit d'une conception populaire pour les pages de blog et vous pouvez l'utiliser en combinaison avec un module de blog doté d'un décalage de publication.
Voici comment procéder.
Tout d'abord, ajoutez une section pleine largeur à la mise en page.
Ajoutez ensuite un module de curseur de poteau pleine largeur à la section.
Mettez ensuite à jour les paramètres suivants :
- Messages pour la page actuelle : OUI
- Nombre de messages : 3
Mettez ensuite à jour la conception du curseur de publication pour qu'il corresponde à la mise en page comme suit :
- Police du titre : Lato
- Poids de la police du titre : gras
- Taille du texte du titre : 40 px
- Taille du corps du texte : 16px
- Taille du texte du bouton : 14 px
- Couleur du texte du bouton : #ff0071
- Couleur d'arrière-plan du bouton : #ffffff
- Largeur de la bordure du bouton : 0px
- Police des boutons : Lato
- Poids de la police du bouton : gras
- Style de police des boutons : TT
Assurez-vous que le module de blog affiche le flux principal a un numéro de décalage de publication toujours défini sur 3 pour s'adapter aux 3 publications du curseur de publication.
Vérifiez ensuite le résultat.
Vous avez l'air bien jusqu'à présent.
Passons maintenant à l'idée d'utiliser un module de blog séparé un peu plus loin avec ce prochain conseil.
#4 Ajout de plusieurs modules de blog chacun avec un seul article
Nous n'avons pas à nous contenter d'ajouter un module de blog supplémentaire à une mise en page de modèle. En fait, nous pouvons utiliser autant de modules de blog que nous le souhaitons. On peut même choisir de n'afficher qu'un seul article par module de blog afin de donner un design unique à une seule carte postale de blog. Ensuite, en utilisant des décalages de publication, nous pouvons créer une mise en page complètement unique d'articles de blog à afficher dynamiquement.
Voici comment procéder.
Tout d'abord, ajoutez une nouvelle ligne demi-colonne au-dessus de la ligne contenant le module de blog principal.
Copiez le module de blog d'origine ci-dessous et collez-le dans la colonne de gauche de la nouvelle ligne. Ensuite, mettez à jour les éléments suivants :
- Nombre de messages : 1
- Numéro de compensation de poste : 0
- Afficher la pagination : NON
Ensuite, copiez le module de blog que vous venez de créer et collez un doublon dans la colonne de droite.
Ensuite, mettez à jour les éléments suivants :
- Numéro de compensation de poste : 1
- Afficher l'image en vedette : NON
- Afficher le nombre de commentaires : NON
- Afficher l'extrait : NON
Assurez-vous de définir le numéro de décalage de poste sur 1 afin d'ignorer le premier dans la colonne de gauche.
Continuez maintenant ce processus en créant un autre module de blog et en augmentant le nombre de décalage de publication de 1 à chaque fois.
Dupliquez le module de blog dans la colonne de droite.
Modifiez ensuite le numéro de décalage de poste en 2.
Dupliquez le module de blog une fois de plus et changez le numéro de décalage de publication en 3.
Vous pouvez désormais avoir la liberté de personnaliser individuellement la conception de chacun des modules de blog. Par exemple, vous pouvez ajouter une couleur d'arrière-plan différente à chacun.
Voici le résultat.
Si vous souhaitez conserver le flux principal du blog ci-dessous, assurez-vous de mettre à jour le numéro de décalage de la publication à 4 afin de prendre en charge les 4 publications de la rangée ci-dessus.
Vous pouvez également voir cette même technique utilisée sur certains de nos modèles de page de catégorie de générateur de thème. Consultez notre tutoriel sur la façon de créer un modèle de page de catégorie en utilisant le même concept.
#5 Afficher les articles récents par catégorie sur la page du blog
En plus du flux de blog principal sur le modèle de page de blog, vous pouvez également afficher vos articles récents par catégorie. C'est un excellent moyen d'organiser le contenu des pages de blog en divisant un peu la mise en page et en mettant en évidence différentes catégories en même temps.
Voici comment procéder.
Tout d'abord, ajoutez une nouvelle ligne à une colonne sous la ligne contenant le module de blog principal.
Mettez ensuite à jour les paramètres du blog comme suit :
- Messages pour la page actuelle : NON
- Type de message : messages
- Nombre de messages : 3
- Catégories incluses : Entreprise (ou l'une des vôtres)
Cela affichera les trois messages les plus récents de la catégorie Entreprise.
Ajoutez ensuite un module de texte au-dessus du module de blog avec un titre de catégorie correspondant.
Et juste comme ça, vous avez une section de catégorie en vedette sur votre page de blog – un excellent moyen d'organiser le contenu de la page de blog !
Vous pouvez même ajouter plusieurs sections de catégories en vedette, chacune avec un design unique.
Ces sections de catégorie en vedette s'intègrent bien au bas du modèle de page de blog.
Dernières pensées
Ces conseils devraient vous aider à organiser le contenu des pages de blog de toutes sortes de manières uniques. Et, ces mêmes conseils fonctionneraient pour de nombreux autres types de modèles (comme les modèles de page de catégorie/d'archive) qui utilisent le module de blog pour afficher le contenu. N'hésitez pas à explorer ces conseils et à les utiliser dans votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!