Téléchargez un modèle de billet de blog gratuit à deux côtés avec Divi

Bien que les barres latérales existent depuis longtemps, elles sont encore fréquemment utilisées sur le Web. Ils permettent d'afficher différents éléments liés à la publication, tels que les publications recommandées et les formulaires d'inscription par e-mail, sans négliger l'objectif principal, à savoir le contenu réel de la publication. Maintenant, avec le générateur de thèmes de Divi, il existe de nombreuses façons de créer votre modèle de publication de blog. Dans ce didacticiel, nous allons vous montrer comment ajouter une barre latérale recto-verso à votre modèle de publication. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Abonnez-vous à notre chaîne Youtube

Téléchargez le modèle d'article de blog GRATUITEMENT

Pour mettre la main sur le modèle d'article de blog gratuit, vous devez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Commencez par vous rendre sur votre Divi Theme Builder. Une fois là-bas, ajoutez un nouveau modèle.

Utiliser le modèle sur tous les messages

Nous utilisons ce nouveau modèle sur tous les messages.

• Utiliser sur : tous les messages

Commencer à créer le corps du modèle

Eh bien, commencez à créer le corps du modèle.

2. Commencez à créer le corps de l'article de blog

Ajouter une nouvelle section

Couleur de l'arrière plan

Une fois dans le Divi Theme Builder, vous remarquerez une section. Ouvrez cette section et changez la couleur d'arrière-plan.

• Couleur d'arrière-plan : #f4f4f4

Espacement

Modifiez également les valeurs d'espacement de la section sur différentes tailles d'écran.

• Rembourrage supérieur : 50 pixels (ordinateur de bureau), 20 pixels (tablette), 10 pixels (téléphone)
• Rembourrage inférieur : 50 pixels (ordinateur de bureau), 20 pixels (tablette), 10 pixels (téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2
• Largeur : 100 %
• Largeur maximale : 95 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Colonne 2

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 2 et changez la couleur d'arrière-plan en blanc.

• Couleur d'arrière-plan : #ffffff

Boîte ombre

Ajoutez également une ombre de boîte à la colonne.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte : -21px
• Couleur de l'ombre : rgba(0,0,0,0.08)

Ajouter un module d'image à la colonne 2

Contenu dynamique

Il est temps de commencer à ajouter des modules ! Dans la deuxième colonne, nous placerons tous les modules pertinents pour le billet de blog lui-même, en commençant par un module Image. Utilisez le contenu dynamique de l'image en vedette.

• Image : Image en vedette

Dimensionnement

Ensuite, passez à l'onglet de conception du module et forcez la pleine largeur sur le module Image.

• Forcer la pleine largeur : Oui

Ajouter un module de titre de message à la colonne 2

Éléments

Passons au deuxième module, qui est le module Post Title. Désactivez l'image sélectionnée dans les paramètres des éléments.

• Afficher l'image en vedette : Non

Paramètres du texte du titre

Passez à l'onglet de conception du module et modifiez les paramètres du texte du titre en conséquence :

• Police du titre : Oxygène
• Taille du texte du titre : 2vw (ordinateur de bureau), 4vw (tablette), 6vw (téléphone)
• Hauteur de la ligne de titre : 1,2 em

Paramètres de méta-texte

Apportez ensuite quelques modifications aux paramètres de méta-texte.

• Meta Font: Open Sans
• Couleur du méta-texte : #ffc023
• Taille du méta-texte : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Espacement

Modifiez également les valeurs d'espacement.

• Marge supérieure : 100 pixels
• Marge gauche : 4vw
• Marge droite : 4vw

Titre CSS

Et complétez les paramètres du module en ajoutant une marge inférieure à l'élément CSS du titre dans l'onglet avancé.

margin-bottom: 20px;

Ajouter un module de contenu de publication à la colonne 2

Paramètres de texte

Passons au module suivant, qui est le module de contenu de publication qui contient tout le contenu dynamique de votre article de blog. Modifiez les paramètres de texte du module en conséquence :

• Police de texte : Open Sans
• Taille du texte : 0.9vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)
• Hauteur de la ligne de texte : 2,2 em

Paramètres de texte d'en-tête

Ensuite, apportez également quelques modifications aux paramètres du texte de l'en-tête.

• Police de titre : Oxygène
• Taille du texte H2 : 1.5vw (ordinateur de bureau), 3vw (tablette), 4vw (téléphone)
• Taille du texte H3, H4, H5 et H6 : 1,3 vw (ordinateur de bureau), 2,5 vw (tablette), 3,5 vw (téléphone)

Espacement

Nous utilisons également des valeurs de marge et de remplissage personnalisées.

• Marge gauche : 4vw
• Marge droite : 4vw
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 100px

Classe CSS

Complétez les paramètres du module en ajoutant une classe CSS. Dans la prochaine partie de ce didacticiel, nous utiliserons cette classe CSS pour ajouter de l'espacement aux titres et aux paragraphes.

• espacement-post-contenu

Ajouter le module de code à la colonne 2

Insérer le code CSS

Comme mentionné à l'étape précédente de cet article, nous utiliserons des CSS personnalisés pour ajouter de l'espace entre les titres et les paragraphes. Pour cela, nous utiliserons un module de code dans la colonne 2. Insérez les lignes de code CSS suivantes :

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Ajouter le module d'option de messagerie à la colonne 3

Ajouter du contenu

Il est temps de commencer à ajouter les éléments de la barre latérale ! Vous pouvez ajouter n'importe quel module que vous voulez. Nous commencerons par un module Email Optin dans la colonne 3. Utilisez une copie de votre choix.

Compte email

Continuez en associant un compte de messagerie au module.

Des champs

Ensuite, désactivez le champ du nom de famille dans les paramètres des champs.

• Afficher le champ du nom de famille : Non

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan en conséquence :

• Couleur d'arrière-plan : #ffc023

Paramètres des champs

Passez à l'onglet conception du module et modifiez les paramètres des champs comme suit :

• Police des champs : Open Sans
• Taille du texte des champs : 0.8vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)

Paramètres du texte du titre

Apportez également quelques modifications aux paramètres du texte du titre.

• Police du titre : Oxygène
• Poids de la police du titre : gras
• Taille du texte du titre : 1vw (ordinateur de bureau), 3vw (tablette), 5vw (téléphone)
• Hauteur de la ligne de titre : 1,5 em

Paramètres des boutons

Continuez en stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.9vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffc023
• Couleur d'arrière-plan du bouton : #f4f4f4
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 0px
• Police des boutons : Oxygène

• Rembourrage supérieur des boutons : 15 px
• Rembourrage inférieur des boutons : 15 px

Boîte ombre

Et complétez les paramètres du module en ajoutant une subtile ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte : -21px
• Couleur de l'ombre : rgba(0,0,0,0.08)

Ajouter le module de suivi des médias sociaux à la colonne 3

Ajouter des réseaux sociaux de choix

Le prochain module dont nous avons besoin dans la colonne 3 est un module de suivi des médias sociaux. Ajoutez quelques réseaux sociaux de votre choix.

Réinitialiser les styles de réseaux sociaux individuellement

Continuez en réinitialisant les styles d'élément pour chaque réseau social individuellement.

Paramètres des icônes

Ensuite, revenez aux paramètres généraux du module et modifiez la couleur de l'icône.

• Couleur de l'icône : #ffc023

Ajouter le module de blog à la colonne 1

Éléments

Dans la colonne 1, le seul module que nous ajoutons est un module Blog. Désactivez l'auteur dans les paramètres des éléments.

• Afficher l'auteur : Non

Disposition

Ensuite, passez à l'onglet conception du module et modifiez la mise en page.

• Disposition : Grille

Paramètres du texte du titre

Modifiez ensuite les paramètres du texte du titre.

• Police du titre : Oxygène
• Poids de la police du titre : gras
• Taille du texte du titre : 1vw (ordinateur de bureau), 3vw (tablette), 5vw (téléphone)
• Hauteur de la ligne de titre : 1,5 em

Paramètres du corps du texte

Apportez également quelques modifications aux paramètres du corps du texte.

• Police du corps : Open Sans
• Taille du corps du texte : 0.7vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)
• Hauteur de la ligne du corps : 2,2 em

Paramètres de méta-texte

Ensuite, stylisez les paramètres de méta-texte en conséquence :

• Meta Font: Open Sans
• Couleur du méta-texte : #ffc023
• Taille du méta-texte : 0.8vw (ordinateur de bureau), 1.8vw (tablette), 3vw (téléphone)

Frontière

Supprimez également la bordure par défaut du module.

• Largeur de la bordure de la disposition de la grille : 0px

Boîte ombre

Et utilisez une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte : -21px
• Couleur de l'ombre : rgba(0,0,0,0.08)

Visibilité

Maintenant, nous voulons que le module Blog s'affiche dans la colonne 1 lorsque quelqu'un consulte la publication sur le bureau. Sur des écrans plus petits, cependant, nous voulons que le contenu de la publication passe en premier. C'est pourquoi nous allons masquer l'intégralité du module sur tablette et téléphone.

Cloner le module de blog et placer le doublon dans la colonne 3

Nous allons ensuite cloner le module Blog et placer le doublon dans la troisième colonne.

Changer de visibilité

Nous voulons que ce module apparaisse dans la colonne 3 sur les appareils plus petits uniquement, c'est pourquoi nous masquerons l'intégralité du module sur le bureau.

3. Enregistrez toutes les modifications du générateur de thèmes et prévisualisez le résultat

Une fois que vous avez terminé le modèle d'article de blog (assurez-vous d'ajouter également un module de commentaires !), vous pouvez enregistrer toutes les modifications apportées au générateur de thèmes et afficher le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment ajouter une barre latérale recto-verso à votre modèle de publication de blog à l'aide du générateur de thème de Divi. Plus encore, nous avons partagé gratuitement le fichier JSON de la mise en page afin que vous puissiez le garder à portée de main au cas où vous en auriez besoin pour de futurs projets ! Si vous avez des questions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.