Divi Builder Plugin Documentation

Comment ajouter, configurer et personnaliser le module de blog Divi.

Avec Divi, même les blogs sont un module, et votre « blog » peut être placé n’importe où sur votre site Web, et dans différents formats. Vous pouvez combiner les modules blog et sidebar pour créer des designs de blog classiques. Les blogs à 1 colonne, 2 colonnes ou 3 colonnes peuvent tous être construits en utilisant les modules de blog et de barre latérale.

Voir une démonstration en direct de ce module

Comment ajouter un module de blog à votre page

Avant de pouvoir ajouter un module de blog à votre page, vous devrez d’abord sauter dans le Divi Builder. Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Use Divi Builder au-dessus de l’éditeur de post chaque fois que vous construisez une nouvelle page. En cliquant sur ce bouton, vous activerez le Divi Builder, ce qui vous donnera accès à tous les modules du Divi Builder. Ensuite, cliquez sur le bouton Utiliser le Visual Builder pour lancer le constructeur en mode visuel. Vous pouvez également cliquer sur le bouton Use Visual Builder lorsque vous parcourez votre site web sur le front-end si vous êtes connecté à votre tableau de bord WordPress.

Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton plus gris pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu’à l’intérieur des rangées. Si vous commencez une nouvelle page, n’oubliez pas d’ajouter d’abord une rangée à votre page. Nous avons quelques excellents tutoriels sur la façon d’utiliser les éléments de rangée et de section de Divi.

Localisez le module de blog dans la liste des modules et cliquez dessus pour l’ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot « blog » puis cliquer sur entrée pour trouver et ajouter automatiquement le module blog ! Une fois le module ajouté, vous serez accueilli par la liste des options du module. Ces options sont séparées en trois groupes principaux : Contenu, Design et Avancé.

Exemple de cas d’utilisation : Ajout du module Blog avec une disposition en grille dans une section spécialisée avec une barre latérale droite

Pour cet exemple, je vais ajouter un module Blog à une page de blog. Cette page de blog a un en-tête pleine largeur avec un module de recherche en dessous. Sous le module de recherche, je vais ajouter une section spécialisée avec le module de blog sur le côté gauche et une section de barre latérale sur la droite. La barre latérale sur la droite a un widget de posts récents, un module d’optin d’email, et un module de personne.

Voici à quoi ressemble la page d’exemple.

Notez que le module de blog est dans une disposition de grille sur le côté gauche de la section de spécialité.

Démarrons.

Utilisez le constructeur visuel pour ajouter une section de spécialité avec la disposition suivante :

Vous serez invité à ajouter une rangée de 1 colonne ou de 2 colonnes pour le côté gauche. Choisissez la rangée à 1 colonne.

Ajouter ensuite le module Blog à la rangée.

Mettre à jour les paramètres du blog comme suit :

Options de contenu

Nombre de messages : 6
Bouton Lire la suite : ON
Montrer la pagination : NO
Couleur d’arrière-plan des tuiles de la grille : #ffffff

Options de conception

Mise en page : Grille
Utiliser l’ombre portée : ON
Couleur de l’icône superposée : #ffffff
Couleur de la superposition : rgba(224,153,0,0.51)
Police de l’en-tête : Défaut
Taille de la police d’en-tête : 21px
Couleur du texte d’en-tête : #333333
Espacement des lettres de l’en-tête : 1px
Hauteur de la ligne d’en-tête : 1.2em
Utiliser la bordure : OUI
Couleur de la bordure : #f0f0f0
La largeur de la bordure : 1px
Le style de la bordure : Solid

Options avancées

Custom CSS (bouton Lire plus):

Le Custom CSS avancé pour le bouton Lire plus crée un look personnalisé qui s’adapte bien au design.

Sur la section de la barre latérale droite de la mise en page de la section spécialisée, vous devrez ajouter un module de barre latérale qui tire le widget des messages récents. En dessous de cela, vous devrez ajouter un module Email Optin. Et ensuite, en dessous de l’Email Optin, vous devrez ajouter le module Personne avec des informations sur l’auteur.

C’est tout !

Options de contenu du blog

Dans l’onglet contenu, vous trouverez tous les éléments de contenu du module, comme le texte, les images et les icônes. Tout ce qui contrôle ce qui apparaît dans votre module se trouvera toujours dans cet onglet.

Nombre de posts

Définissez le nombre de posts que vous souhaitez afficher. Vous devrez avoir des posts faits pour que quelque chose s’affiche à l’intérieur de ce module.

Sélectionnez les catégories que vous souhaitez inclure dans le flux de posts. Toutes les catégories de posts que vous avez créées s’afficheront ici pour que vous puissiez les sélectionner/désélectionner.

Catégories incluses

Choisissez les catégories que vous souhaitez inclure dans le flux.

Format de date méta

Définissez ici le format de date que vous souhaitez afficher sur vos posts de blog. La mise en page par défaut est un format M j, Y (6 janvier 2014) Voir le Codex WordPress sur les formats de date pour plus d’options.

Contenu

Afficher le contenu complet ne tronquera pas vos articles sur la page d’index. Afficher l’extrait n’affichera que votre texte d’extrait.

Nombre de décalage

Choisissez combien de posts vous souhaitez décaler. Si vous décalez de 3 messages, par exemple, les trois premiers messages de votre flux de blog ne seront pas affichés.

Show Featured Image

Cette option vous permet de choisir si vous souhaitez ou non que les images miniatures apparaissent dans votre module de blog.

Bouton Lire plus

Vous pouvez définir ici si vous souhaitez afficher le lien « lire plus » après l’extrait ou non.

Show Author

Choisissez si vous souhaitez ou non afficher l’auteur de chaque article de blog dans la zone méta de l’article, sous le titre de l’article.

Show Date

Choisissez si vous souhaitez ou non afficher la date à laquelle chaque article a été créé dans la zone méta de l’article sous le titre de l’article.

Show Categories

Choisissez si vous souhaitez ou non afficher les catégories d’articles dans la zone méta de l’article sous le titre de l’article.

Show Comment Count

Choisissez si vous souhaitez ou non afficher le nombre de commentaires au sein de la zone méta du post sous le titre du post.

Show Pagination

Choisissez si vous souhaitez ou non afficher la pagination pour ce flux. Pour activer la pagination numérotée, vous devrez installer le plugin WP Page Navi.

Admin Label

Cela changera le label du module dans le constructeur pour une identification facile. Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc du module dans l’interface Divi Builder.

Options de conception du blog

Dans l’onglet de conception, vous trouverez toutes les options de style du module, telles que les polices, les couleurs, le dimensionnement et l’espacement. C’est l’onglet que vous utiliserez pour modifier l’apparence de votre module. Chaque module Divi a une longue liste de paramètres de conception que vous pouvez utiliser pour changer à peu près tout.

Layout

Vous pouvez choisir d’afficher vos articles de blog dans une grille ou une disposition pleine largeur.

Featured Image Overlay

Si elle est activée, une couleur et une icône de superposition seront affichées lorsqu’un visiteur survole l’image vedette d’un article.

Couleur de l’icône de superposition

Vous pouvez définir ici une couleur personnalisée pour l’icône de superposition.

Couleur de la superposition du survol

Vous pouvez définir ici une couleur personnalisée pour la superposition.

Choix de l’icône de survol

Vous pouvez définir ici une icône personnalisée pour la superposition.

Couleur du texte

Si votre blog est placé sur un fond clair, la couleur du texte doit être définie sur ‘foncé’. Visa versa, si votre blog est placé sur un fond sombre, la Couleur du texte doit être définie sur ‘Clair’.

Police de l’en-tête

Vous pouvez changer la police de votre texte d’en-tête en sélectionnant la police de votre choix dans le menu déroulant. Divi est livré avec des dizaines de superbes polices alimentées par Google Fonts. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, tout en majuscules et souligné.

Taille de la police d’en-tête

Vous pouvez ici ajuster la taille de votre texte d’en-tête. Vous pouvez faire glisser le curseur de la plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir votre valeur de taille de texte souhaitée directement dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Couleur du texte d’en-tête

Par défaut, toutes les couleurs de texte dans Divi apparaîtront comme blanches ou gris foncé. Si vous souhaitez modifier la couleur de votre texte d’en-tête, choisissez la couleur de votre choix dans le sélecteur de couleurs en utilisant cette option.

En-tête Espacement des lettres

L’espacement des lettres affecte l’espace entre chaque lettre. Si vous souhaitez augmenter l’espace entre chaque lettre dans votre texte d’en-tête, utilisez le curseur de plage pour ajuster l’espace ou saisissez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Hauteur de ligne d’en-tête

La hauteur de ligne affecte l’espace entre chaque ligne de votre texte d’en-tête Si vous souhaitez augmenter l’espace entre chaque ligne, utilisez le curseur de plage pour ajuster l’espace ou saisissez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Police du corps

Vous pouvez modifier la police de votre texte du corps en sélectionnant la police de votre choix dans le menu déroulant. Divi est livré avec des dizaines de superbes polices alimentées par Google Fonts. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, tout en majuscules et souligné.

Taille de la police du corps

Vous pouvez ici ajuster la taille de votre texte du corps. Vous pouvez faire glisser le curseur de la plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez entrer votre valeur de taille de texte souhaitée directement dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Couleur du texte du corps

Par défaut, toutes les couleurs de texte dans Divi apparaîtront comme blanches ou gris foncé. Si vous souhaitez modifier la couleur de votre texte de corps, choisissez la couleur de votre choix dans le sélecteur de couleurs en utilisant cette option.

Corps Espacement des lettres

L’espacement des lettres affecte l’espace entre chaque lettre. Si vous souhaitez augmenter l’espace entre chaque lettre dans votre corps de texte, utilisez le curseur de plage pour ajuster l’espace ou saisissez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Hauteur de ligne du corps

La hauteur de ligne affecte l’espace entre chaque ligne de votre texte du corps. Si vous souhaitez augmenter l’espace entre chaque ligne, utilisez le curseur de plage pour ajuster l’espace ou saisissez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Police méta

Vous pouvez modifier la police de votre texte méta en sélectionnant la police de votre choix dans le menu déroulant. Divi est livré avec des dizaines de superbes polices alimentées par Google Fonts. Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, tout en majuscules et souligné.

Taille de la police méta

Vous pouvez ici régler la taille de votre méta texte. Vous pouvez faire glisser le curseur de la plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez entrer votre valeur de taille de texte souhaitée directement dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Couleur du texte méta

Par défaut, toutes les couleurs de texte dans Divi apparaîtront comme blanches ou gris foncé. Si vous souhaitez modifier la couleur de votre texte méta, choisissez la couleur de votre choix dans le sélecteur de couleurs en utilisant cette option.

Espacement des lettres méta

L’espacement des lettres affecte l’espace entre chaque lettre. Si vous souhaitez augmenter l’espace entre chaque lettre dans votre méta texte, utilisez le curseur de plage pour ajuster l’espace ou entrez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Hauteur de ligne méta

La hauteur de ligne affecte l’espace entre chaque ligne de votre méta texte Si vous souhaitez augmenter l’espace entre chaque ligne, utilisez le curseur de plage pour ajuster l’espace ou saisissez votre taille d’espacement souhaitée dans le champ de saisie à droite du curseur. Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir « px » ou « em » à la suite de votre valeur de taille pour changer son type d’unité.

Utiliser la bordure

L’activation de cette option placera une bordure autour de votre module. Cette bordure peut être personnalisée en utilisant les paramètres conditionnels suivants.

Couleur de la bordure

Cette option affecte la couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l’appliquer à votre bordure.

Border Width

Par défaut, les bordures ont une largeur de 1 pixel. Vous pouvez augmenter cette valeur en faisant glisser le curseur de la plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur. Les unités de mesures personnalisées sont prises en charge, ce qui signifie que vous pouvez changer l’unité par défaut de « px » à quelque chose d’autre, comme em, vh, vw etc.

Style de bordure

Les bordures prennent en charge huit styles différents, notamment : solide, pointillé, tiret, double, rainure, crête, encart et départ. Sélectionnez le style de votre choix dans le menu déroulant pour l’appliquer à votre bordure.

Options avancées du blog

Dans l’onglet avancé, vous trouverez des options que les concepteurs web plus expérimentés pourraient trouver utiles, comme les attributs CSS et HTML personnalisés. Ici, vous pouvez appliquer un CSS personnalisé à l’un des nombreux éléments du module. Vous pouvez également appliquer des classes et des ID CSS personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style.css de votre thème enfant.

CSS ID

Entrez un ID CSS facultatif à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé, ou pour créer des liens vers des sections particulières de votre page.

CSS Class

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé. Vous pouvez ajouter plusieurs classes, séparées par un espace. Ces classes peuvent être utilisées dans votre thème enfant Divi ou dans le CSS personnalisé que vous ajoutez à votre page ou à votre site Web à l’aide des options de thème Divi ou des paramètres de page Divi Builder.

Custom CSS

Le CSS personnalisé peut également être appliqué au module et à tout élément interne du module. Dans la section Custom CSS, vous trouverez un champ de texte où vous pouvez ajouter un CSS personnalisé directement à chaque élément. Les CSS saisis dans ces paramètres sont déjà enveloppés dans des balises de style, il vous suffit donc de saisir les règles CSS séparées par des points-virgules.

Visibilité

Cette option vous permet de contrôler sur quels appareils votre module apparaît. Vous pouvez choisir de désactiver votre module sur les tablettes, les smartphones ou les ordinateurs de bureau individuellement. Ceci est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.