TRUCS & ASTUCES

Étape 1 : Configurer le Module Blog en Plein Écran

Pour commencer, vous devez définir la mise en page de votre module Blog en Fullwidth (pleine largeur). Cela permet de mieux contrôler la disposition des éléments par la suite.

• Accédez à votre page ou section où vous avez ajouté le module Blog.
• Ouvrez les paramètres du module Blog.
• Dans l’onglet Style, descendez jusqu’à l’option Modèle (ou Layout en anglais).
• Sélectionnez Plein Écran.

Ne vous inquiétez pas si cela ne semble pas correct au début. L’étape suivante apportera les modifications nécessaires.

Étape 2 : Ajouter une Classe CSS Personnalisée

Pour que la modification s’applique uniquement à certains modules Blog et non à tous ceux de votre site, nous allons ajouter une classe CSS personnalisée. Cette classe permettra de cibler précisément le module Blog que vous souhaitez transformer.

• Dans les paramètres du module Blog, allez à l’onglet Advanced (Avancé).
• Cliquez sur le menu CSS ID & Classes.
• Dans le champ CSS Class, ajoutez la classe suivante : pa-blog-list.

Cela limitera les changements à ce module Blog spécifique, vous offrant ainsi plus de flexibilité pour d’autres modules.

Étape 3 : Appliquer le Code CSS pour la Disposition en Liste

Ensuite, il vous suffit d’ajouter le CSS personnalisé pour transformer le blog en liste avec une image à gauche et les détails à droite.

Voici le code à ajouter :

Où Ajouter le Code CSS ?

Le code CSS peut être ajouté de plusieurs manières dans Divi :

1. Via le Divi Theme Options :
   • Allez dans Divi > Theme Options (Options du thème).
   • Accédez à l’onglet General (Général) et descendez jusqu’à Custom CSS (CSS personnalisé).
   • Collez le code CSS dans la zone de texte.
2. Via les Page Settings (Paramètres de la page) :
   • Si vous souhaitez que ce changement ne s’applique qu’à une page spécifique, ouvrez cette page dans l’éditeur Divi.
   • Cliquez sur l’icône des paramètres de la page (la roue dentée en bas à gauche).
   • Allez à l’onglet Advanced > Custom CSS, puis collez le code.
3. Dans le fichier style.css du Child Theme :
   • Si vous utilisez un thème enfant, vous pouvez ajouter le code CSS directement dans le fichier style.css de votre thème enfant. Cela permettra que le style soit appliqué globalement à tout le site.
4. Dans un module Code de Divi :
   • Ajoutez un Module Code sur la page où vous souhaitez que le CSS soit actif.
   • Collez le code CSS dans ce module en n’oubliant pas d’ajouter les balises <style> autour de votre code.

Étape 4 : Ajuster la Largeur des Colonnes

Selon vos préférences de mise en page et la taille de votre site, vous pouvez ajuster les pourcentages de largeur pour l’image et les détails. Par exemple, vous pouvez décider de rendre l’image plus grande ou de donner plus de place aux détails.

Voici quelques exemples d’ajustements :

• Si vous voulez que l’image soit un peu plus large, augmentez la valeur width: 30% à width: 40%.
• Pour réduire la largeur des détails, ajustez width: 70% à width: 60% afin que cela corresponde à la largeur de l’image.

Veillez simplement à ce que la somme des pourcentages soit égale à 100 % pour éviter des problèmes d’affichage.

Étape 5 : Ajouter un Style Raffiné

Pour rendre l’apparence de votre liste encore plus attrayante, ajoutons quelques touches de style. Le snippet suivant va styliser chaque article de votre blog en ajoutant de l’espace autour de chaque post, un radius pour les bordures, et une ombre portée pour un effet plus moderne et élégant.

Après avoir appliqué ces étapes, votre module Blog ressemblera à une liste élégante où chaque article s’affiche avec l’image à gauche et les détails (titre, métadonnées, extrait) à droite.

Conclusion

Avec quelques ajustements simples de CSS, vous pouvez transformer le module Blog de Divi pour offrir une présentation en liste plus structurée et esthétique. Ce guide vous a montré comment :

• Configurer le module Blog en Plein Écran.
• Ajouter une classe CSS personnalisée.
• Appliquer un CSS simple pour ajuster la mise en page.

Ces petites modifications peuvent grandement améliorer l’expérience utilisateur et rendre votre blog plus attrayant et facile à naviguer. N’hésitez pas à expérimenter avec les valeurs de largeur et à personnaliser d’autres aspects pour correspondre à vos besoins spécifiques.