Comment inclure une barre latérale fixe pleine hauteur dans votre modèle de publication de blog

Le choix d'ajouter une barre latérale à vos articles de blog dépend entièrement de vous. Certains blogueurs choisissent de ne pas utiliser du tout de barre latérale. Ce didacticiel est destiné à ceux d'entre vous qui préfèrent utiliser une barre latérale mais qui souhaitent la rendre un peu différente. Habituellement, les barres latérales sont positionnées de manière statique, mais si le contenu de la publication est long, cela signifie que le lecteur devra faire défiler vers le haut pour voir la barre latérale.

Dans cette conception de modèle de publication de blog, nous avons créé une barre latérale fixe pleine hauteur qui reste en place tout en faisant défiler le contenu de la publication. Lors de la recréation du didacticiel, gardez deux onglets ouverts dans votre navigateur : un pour le générateur de thème et un autre pour un aperçu d'un article de blog. De cette façon, vous pouvez voir les changements au fur et à mesure.

Commençons!

Aperçu

Avant de commencer, examinons la barre latérale fixe pleine hauteur.

Bureau

Mobile

Téléchargez GRATUITEMENT le modèle de barre latérale fixe pleine hauteur

Pour mettre la main sur le modèle gratuit de barre latérale fixe pleine hauteur, 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 !

Créer un widget de barre latérale

Avant de commencer avec le modèle de barre latérale fixe pleine hauteur, créez un widget de barre latérale personnalisé. Nous l'inclurons plus tard dans notre barre latérale à l'intérieur du modèle.

Ouvrir le générateur de widgets

Cliquez sur « Apparence » et sélectionnez « Widgets ».

Ajouter des éléments au widget de la barre latérale

Faites glisser les éléments « messages récents » et « catégories » dans le widget de la barre latérale.

Ajuster les paramètres des éléments dans le widget

Choisissez de n'afficher que 3 articles récents et ajoutez un titre. Ajoutez également un titre au widget des catégories et n'oubliez pas de cliquer sur « Enregistrer » dans les deux cases lorsque vous avez terminé.

• Titre des messages récents : Lire la suite :
• Titre des catégories : Parcourir

2. Commencez avec le générateur de thème

Ouvrir le générateur de thème / Ajouter un nouveau modèle

Il est temps de commencer à recréer le modèle de barre latérale fixe pleine hauteur ! Tout d'abord, ouvrez votre générateur de thème et ajoutez un nouveau modèle.

Définir les paramètres du modèle

Dans les paramètres du modèle, sélectionnez « Tous les articles de blog ». Si vous souhaitez utiliser le modèle pour une catégorie ou une balise spécifique, modifiez les paramètres du modèle en conséquence.

Ajouter un corps personnalisé

Ensuite, cliquez sur « Ajouter un corps personnalisé ».

Sélectionnez Construire un corps personnalisé

Nous allons recréer ce modèle à partir de zéro, alors allez-y et choisissez « Créer un corps personnalisé ».

Construire à partir de zéro

Une fois à l'intérieur du constructeur visuel, sélectionnez l'option pour créer à partir de zéro une fois de plus.

Recréez le modèle avec la barre latérale fixe pleine hauteur

Paramètres de section

Fond

Ouvrez la section existante dans votre éditeur de modèles et ajoutez un arrière-plan dégradé.

• Dégradé de fond
  • Couleur 1 : Blanc #ffffff
  • Couleur 2 : Gris clair #eaeaea

Espacement

Ajoutez également un peu de rembourrage.

• Rembourrage supérieur : 55 px

Ajouter une nouvelle ligne

Structure des colonnes

Ajoutez maintenant une ligne avec une structure de colonnes 3/4 – 1/4.

Dimensionnement

Ajustez la taille de la rangée comme suit.

• Largeur de gouttière personnalisée : 2
• Largeur:
  • Ordinateur de bureau et tablette : 90 %
  • Téléphone : 100 %
• Largeur maximale:
  • Bureau : 1920px
• Hauteur minimale : 100 vh

Paramètres de la colonne 1

Espacement

Avant d'ajouter des modules, ajustez les paramètres de colonne. Colonne 1 en premier.

• Rembourrage gauche et droit
  • Tablette : 2%
  • Téléphone : 8%

Paramètres de la colonne 2

Fond

Ensuite, ajoutez une couleur d'arrière-plan à la colonne 2.

• Couleur de fond : Blanc #ffffff

Espacement

Incluez aussi un peu d'espacement.

• Rembourrage gauche et droit
  • Ordinateur de bureau : 3%
  • Tablette et téléphone : 14 %

Frontière

Donnez ensuite à la colonne des coins arrondis.

• Coins arrondis
  • Tablette et ordinateur de bureau : 15 pixels

CSS personnalisé

Passez à l'onglet avancé et ajoutez quelques lignes de code CSS à l'élément principal. Cela nous aidera à créer la barre latérale pleine hauteur sur le bureau.

• Élément principal
  • hauteur minimale : 100 %

min-height: 100%;

Position

Enfin, pour créer l'effet de barre latérale fixe, ajoutez une position fixe à la colonne.

• Position
  • Bureau : corrigé
  • Tablette et téléphone : par défaut
• Emplacement : en haut à droite

Ajouter le module de titre de poste #1

Éléments

Il est temps d'ajouter des modules ! Commencez avec un premier module de titre de message dans la colonne 1 et activez le titre uniquement.

• Afficher le titre : Oui

Image de fond dynamique

Ensuite, accédez aux paramètres d'arrière-plan et utilisez l'image sélectionnée comme image d'arrière-plan dynamique.

Texte du titre

Stylisez les paramètres du texte du titre.

• Police du titre : Bai Jamjuree
• Style de police du titre : majuscule
• Couleur du texte du titre : #e98074
• Taille du texte du titre :
  • Bureau : 45px
  • Tablette : 35px
  • Téléphone : 25px
• Espacement des lettres du titre : 3px
• Hauteur de la ligne de titre : 1,3 em

Espacement

Ensuite, ajoutez un rembourrage haut et bas personnalisé.

• Rembourrage supérieur : 20 %
• Rembourrage inférieur : 20 %

Frontière

Incluez également des coins arrondis.

• Tous les coins : 15px

Titre CSS

Et complétez les paramètres du module en ajoutant trois lignes de code CSS à l'élément de titre du module dans l'onglet avancé.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Ajouter le module de titre de poste #2

Éléments

Ajoutez maintenant un autre module de titre de publication. Sélectionnez les éléments suivants.

• Méta
• Auteur
• Catégories de messages

Méta-texte

Ouvrez l'onglet Conception et stylisez le méta-texte.

• Police : Bai Jamjuree
• Poids : Moyen
• Couleur : Gris #8e8d8a
• Taille
  • Bureau : 20px
  • Tablette et téléphone : 15px
• Espacement des lettres : 2px

Dimensionnement

Ajustez également la taille.

• Largeur: 90%
• Alignement du module : Centre

Espacement

Complétez les paramètres de ce module avec un certain espacement.

• Rembourrage supérieur : 15px

Ajouter un module de contenu de publication

Fond

Ajoutez ensuite un module de contenu de publication avec un fond blanc.

• Couleur de fond : Blanc #ffffff

Texte

Maintenant, stylisez le corps du texte.

• Police : Lato
• Couleur : Gris #8e8d8a
• Taille : 16px

Texte d'en-tête

Continuez en stylisant tous les styles de texte de titre.

• H1
  • Police : Bai Jamjuree
  • Poids : Moyen
  • Couleur : Corail #e98074
  • Taille
    • Bureau : 45px
    • Tablette : 33 pixels
    • Téléphone : 30px
  • Espacement des lettres : 1px
• H2
  • Police : Bai Jamjuree
  • Poids : Moyen
  • Couleur : Corail #e98074
  • Taille
    • Bureau : 35px
    • Tablette et téléphone : 25px
  • Espacement des lettres : 1px
• H3
  • Police : Bai Jamjuree
  • Poids : Régulier
  • Couleur : Gris foncé #606060
  • Taille
    • Bureau : 25px
    • Tablette et téléphone : 22px
  • Espacement des lettres : 1px
• H4
  • Police : Bai Jamjuree
  • Poids : Régulier
  • Couleur : Gris foncé #606060
  • Taille
    • Bureau : 22px
    • Tablette : 20px
    • Téléphone : 18px
  • Espacement des lettres : 1px
• H5
  • Police : Bai Jamjuree
  • Poids : Moyen
  • Couleur : Gris foncé #606060
  • Taille : 16px
  • Espacement des lettres : 1px
• H6
  • Police : Bai Jamjuree
  • Poids : Régulier
  • Couleur : Gris foncé #606060
  • Taille : 16px
  • Espacement des lettres : 1px

Espacement

Ajoutez également des paramètres d'espacement.

• Marge supérieure : 40px
• Rembourrage supérieur : 10 %
• Rembourrage inférieur : 10 %
• Rembourrage gauche : 10 %
• Rembourrage droit : 10 %

Frontière

Enfin, ajoutez des coins arrondis.

• Bordure arrondie : 15px

Module d'ajout de commentaires

Éléments

Pour compléter la première colonne, ajoutez un module de commentaires. Activez les éléments suivants :

• Bouton Répondre
• Compteur de commentaire

Des champs

Dans l'onglet Conception, stylisez les champs.

• Couleur de fond : gris clair #f7f7f7
• Couleur du texte : gris #8e8d8a
• Police : Bai Jamjuree
• Taille du texte : 17 pixels
• Coins arrondis : 15px

Texte du nombre de commentaires

Stylisez également le texte du nombre de commentaires.

• Niveau de titre : H3
• Police : Bai Jamjuree
• Couleur : Corail #e98074
• Taille : 22px
• Espacement des lettres : 1px

Texte du titre du formulaire

Puis le titre du formulaire.

• Niveau de titre : H3
• Police : Bai Jamjuree
• Couleur : Corail #e98074
• Taille : 18px
• Espacement des lettres : 1px

Méta-texte

Stylisez également le méta-texte.

• Police : Bai Jamjuree
• Couleur : #606060
• Taille: 14px
• Espacement des lettres : 1px

Texte du commentaire

N'oubliez pas le texte du commentaire.

• Police : Bai Jamjuree
• Taille : 1px

Bouton

Maintenant, stylisez les boutons.

• Styles personnalisés
• Taille du texte : 18px
• Couleur du texte : Blanc #ffffff
• Couleur de fond : Corail #e98074
• Rayon de la bordure du bouton : 15px
• Police des boutons : Bai Jamjuree

Dimensionnement

Ajustez également la taille des lignes.

• Largeur: 90%

Espacement

Ainsi que les paramètres d'espacement.

• Rembourrage supérieur : 8 %
• Rembourrage gauche et droit : 4%

Ajouter un module de personne

Texte

Passez à la colonne de la barre latérale fixe et ajoutez un module de personne.

• Nom : Auteur de la publication dynamique
• Avant : Écrit par :

Texte du titre

Dans l'onglet Conception, stylisez le texte de l'en-tête comme suit :

• Niveau de titre : H4
• Police : Bai Jamjuree
• Couleur : Corail #e98074
• Taille: 2vh
• Espacement des lettres : 2px

Dimensionnement

Ajustez ensuite la taille.

• Hauteur minimale :
  • Bureau : 3vh
  • Tablette et téléphone : automatique
• Hauteur maximum:
  • Bureau : 3vh
  • Tablette et téléphone : automatique

Espacement

Ajoutez également un espacement personnalisé.

• Marge supérieure
  • Bureau : 6vh
  • Tablette et téléphone : 10vh

Ajouter un module d'images

Image

Maintenant, ajoutez un module d'image. Sélectionnez le contenu dynamique pour l'image de l'auteur.

• Image : Image de profil d'auteur dynamique

Alignement

Passez à l'onglet Conception et choisissez l'alignement suivant :

• Alignement de l'image : à gauche

Dimensionnement

Ajustez ensuite la taille du module.

• Largeur maximale: 15vh
• Alignement du module : à gauche
• Hauteur maximum
  • Ordinateur de bureau : 15vh

Frontière

Enfin, ajoutez des coins arrondis aux paramètres de bordure.

• Coins plus arrondis : 15px

Ajouter un module de barre latérale

Teneur

Il est maintenant temps d'ajouter les widgets de la barre latérale à l'aide du module de la barre latérale.

• Zone des widgets : barre latérale

Disposition

Ajustez d'abord la mise en page.

• Afficher le séparateur de bordure : Non

Texte du titre

Modifiez ensuite les paramètres du texte du titre.

• Police : Bai Jamjuree
• Poids : Moyen
• Couleur : Corail #e98074
• Taille: 2vh
• Espacement des lettres : 2px

Le corps du texte

Continuez avec le corps du texte.

• Police : Bai Jamjuree
• Poids : Léger
• Couleur : gris foncé #7f7f7f
• Couleur du survol : Corail #e98074
• Taille: 1.5vh
• Espacement des lettres : 1px
• Hauteur de ligne : 1,8 em

Dimensionnement

Ajustez également la taille du module.

• Hauteur minimale
  • Ordinateur de bureau : 12vh
  • Tablette et téléphone : automatique
• Hauteur maximum
  • Ordinateur de bureau : 12vh
  • Tablette et téléphone : automatique

Espacement

N'oubliez pas d'ajouter un certain espacement.

• Rembourrage supérieur
  • Ordinateur de bureau : 1vh
  • Tablette et téléphone : 3vh

CSS personnalisé

Enfin, incluez quelques lignes de code CSS dans l'onglet avancé.

• Widget : padding-bottom : 0vh ;

padding-bottom: 0vh;

• Titre : padding-bottom : 2vh ;

padding-bottom: 2vh;

Ajouter une option d'e-mail

Texte

Le prochain module dont nous avons besoin dans notre barre latérale est un module d'inscription par e-mail. Ajoutez du contenu de votre choix.

• Titre : Mises à jour
• Bouton : S'abonner

Compte email

Connectez votre email au formulaire suivant.

• Fournisseur de services : votre fournisseur de messagerie
• Liste : Votre liste choisie

Des champs

Nous n'utilisons que le champ prénom dans les paramètres des champs.

• Afficher le champ Prénom

Fond

Ensuite, désactivez l'arrière-plan par défaut.

• Utiliser la couleur d'arrière-plan : Non

Disposition

Passez à l'onglet conception et modifiez les paramètres de mise en page.

• Disposition : corps en haut, forme en bas
• Prénom pleine largeur : Non
• E-mail pleine largeur : Non

Des champs

Ensuite, stylisez les champs comme suit :

• Couleur de fond : gris clair #f7f7f7
• Couleur du texte : #606060
• Rembourrage supérieur et inférieur : 1vh
• Rembourrage gauche : 1vh
• Police : Bai Jamjuree
• Taille du texte : 1.5vh
• Espacement des lettres : 1px
• Coins arrondis : 15px

Texte du titre

Style le texte du titre aussi.

• Niveau de titre : H4
• Police : Bai Jamjuree
• Couleur : Corail #e98074
• Taille: 2vh
• Espacement des lettres : 2px
• Hauteur de ligne : 1 em

Bouton

Ensuite, le bouton.

• Styles personnalisés
• Taille du texte : 1.5vh
• Couleur du texte : Blanc #ffffff
• Couleur de fond : Corail #e98074
• Rayon de bordure : 15px
• Espacement des lettres : 2px
• Police : Bai Jamjuree
• Rembourrage supérieur et inférieur : 1vh

Espacement

Et complétez les paramètres du module et le didacticiel en ajoutant des valeurs d'espacement personnalisées au module. C'est ça! Assurez-vous d'enregistrer toutes les modifications apportées au générateur de thème une fois que vous avez terminé de créer le corps du modèle.

• Rembourrage supérieur
  • Ordinateur de bureau et tablette : 0vh
• Rembourrage inférieur
  • Bureau : 2vh
  • Tablette et téléphone : 6vh
• Rembourrage gauche et droit
  • Ordinateur de bureau et tablette : 0vh

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

C'est un enveloppement !

Nous avons terminé de recréer la barre latérale fixe pleine hauteur pour vos modèles de publication de blog. Si vous avez téléchargé le modèle à partir du lien ci-dessus, n'oubliez pas de configurer vos widgets de la barre latérale comme indiqué dans la première partie de ce didacticiel.

Êtes-vous un type de personne à barre latérale ou pas de barre latérale ? Faites-nous savoir dans les commentaires si vous avez des idées ou des questions!