Comment créer une barre latérale coulissante dans Divi

Les barres latérales peuvent être géniales, mais elles peuvent aussi être une perte d'espace. C'est pourquoi la création d'une barre latérale coulissante peut être une option parfaite pour ceux qui cherchent à avoir une barre latérale qui ne distrait pas l'utilisateur du contenu principal de la page. De plus, ce type de barre latérale donne à l'utilisateur la possibilité de voir ou de masquer la barre latérale quand il le souhaite.

L'effet de poussée coulissante est unique en ce que la barre latérale glisse depuis le côté gauche de la page tout en poussant (ou en pressant) simultanément le contenu principal de la page afin d'adapter la barre latérale dans la fenêtre. Bref, ça glisse la barre latérale et pousse la page.

Une fois la barre latérale construite, elle devient un outil polyvalent pour tous les types d'applications, y compris les menus et les formulaires.

Allons-y !

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la disposition de la barre latérale coulissante de ce tutoriel, vous devrez d'abord la télécharger en utilisant le 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 !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Pour l'ajouter à une page ou à un modèle, vous devrez ajouter une nouvelle section et choisir la mise en page de la section dans la bibliothèque.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Choisir une mise en page prédéfinie ».
   
4. Choisissez le pack de mise en page de l'événement et cliquez pour utiliser la mise en page de la page d'accueil de l'événement.
   

Comment créer une barre latérale coulissante dans Divi

Pour créer la barre latérale coulissante, nous allons devoir utiliser une nouvelle section régulière. Nous allons dimensionner et positionner la section pour qu'elle devienne une barre latérale fixe qui s'ouvre lorsque vous cliquez sur un bouton, en appuyant (et en pressant) la zone de contenu principale sur la droite pour faire de la place pour la barre latérale.

Construire la section

Tout d'abord, ajoutons une nouvelle section régulière à la page.

Déplacez ensuite la section en haut de la page.

Paramètres de section

Ouvrez les paramètres de la section et mettez à jour la position à fixer comme suit :

• Poste : fixe
• Indice Z : 9999

Sous l'onglet Conception, mettez à jour la taille et l'espacement comme suit :

• Largeur : 350px (ordinateur de bureau et tablette), 100 % (téléphone)
• Hauteur : 100 %
• Remplissage : 100 pixels en haut, 0 pixels en bas

Le rembourrage sert à faire de la place pour l'en-tête en haut de la page.

Ensuite, sous l'onglet avancé, attribuez à la section une classe CSS :

• Classe CSS : et-push-sidebar

Une fois la classe css en place, donnez à la section une couleur de fond :

• Couleur d'arrière-plan : #1a1e36

Pour créer une séparation plus visible, revenez à l'onglet Conception et ajoutez une bordure droite.

• Largeur de la bordure droite : 2px
• Couleur de la bordure droite : #eeeeee

Cela prend en charge la section qui sert de conteneur principal à notre barre latérale. Il est maintenant temps de commencer à créer les deux boutons que nous utiliserons pour ouvrir puis fermer la barre latérale.

Création des boutons à bascule de la barre latérale

Il y aura deux boutons utilisés pour basculer la barre latérale. Le premier bouton sera une icône « X » qui fermera la version mobile de la barre latérale après son ouverture. Le « X » sera construit à l'aide d'un module de présentation. Le second est le bouton à bascule principal que nous allons construire à l'aide d'un module de présentation qui est tourné avec du texte vertical et positionné de manière absolument adjacente à la barre latérale/section.

Allons-y.

Création de la ligne pour les boutons

Créez une nouvelle ligne à une colonne à l'intérieur de la section/barre latérale.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Remplissage : 0px en haut, 0px en bas

Sous l'onglet Avancé, mettez à jour les options de position comme suit :

• Position : Absolu
• Indice Z : 1

Création de l'icône de fermeture « X »

Pour créer l'icône de fermeture « X », ajoutez un module de présentation à la ligne. Il peut être plus facile d'ajouter un nouveau module en utilisant le modal Layers car les choses seront un peu difficiles à cliquer.

Teneur

Ensuite, ouvrez les paramètres de présentation. Sous l'onglet Contenu, retirez le titre et le contenu du corps et ajoutez l'icône X au texte de présentation.

• Utiliser l'icône : OUI
• Icône : x (voir capture d'écran)

Concevoir

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #eeeeee
• Placement de l'image et de l'icône : à gauche
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 40 px
• Largeur : 50px

Ensuite, réduisez un peu l'icône en ajoutant la propriété transform translate suivante :

• Transformer Traduire X : 100px
• Transformer Traduire Y : -10px

Avancée

Sous l'onglet Avancé, désactivez le texte de présentation sur la tablette et le bureau afin que nous ne le voyions que sur l'écran du téléphone.

• Désactiver activé : tablette et ordinateur de bureau

Ajoutez ensuite une classe CSS au texte de présentation et attribuez-lui une position fixe afin qu'elle reste visible lors du défilement du contenu de la barre latérale sur l'écran du téléphone.

• Classe CSS : et-slide-push-close
• Poste : fixe
• Emplacement : en haut à droite

Cela prend en charge le bouton "X" Fermer l'icône.

Création du bouton bascule de la barre latérale principale

Pour créer le bouton à bascule de la barre latérale principale, ajoutez un module de présentation sous l'icône « X » existante.

Teneur

Mettez à jour le titre et cliquez pour utiliser la flèche vers le bas.

• Titre : Informations sur l'événement
• Utiliser l'icône : OUI
• Icône : flèche vers le bas (voir capture d'écran)

Ensuite, ajoutez une couleur d'arrière-plan au texte de présentation.

• couleur de fond : #eeeeee

Concevoir

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #1a1e36
• Placement des images/icônes : à gauche
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 25px
• Police du titre : Overpass
• Poids de la police du titre : gras
• Style de police du titre : TT
• Couleur du texte du titre : #1a1e36
• Espacement des lettres du titre : 2px
• Hauteur de la ligne de titre : 1,2 em
• Rembourrage : 0,6 em en haut, 1 em à gauche, 1 em à droite
• Coins arrondis : 5px sur les deux coins inférieurs

Pour positionner et faire pivoter le texte de présentation en dehors de la section, utilisez les options de transformation comme suit :

• Transformer Traduire Y : 100px
• Transformer Rotation Z : -90deg
• Origine de la transformation : en haut à droite

Avancée

Sous l'onglet Avancé, mettez à jour les éléments suivants :

• Classe CSS : et-slide-push-toggle
• Position : Absolu
• Emplacement : Centre droit

Ajout de code personnalisé avec un module de code

Une fois les deux boutons terminés, nous sommes prêts à ajouter le code personnalisé qui fournira la fonctionnalité de poussée coulissante dont nous avons besoin pour la barre latérale.

Pour ajouter le code, ajoutez d'abord un module de code à la même colonne.

Collez ensuite le code suivant dans le module de code.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Création de la ligne de contenu de la barre latérale

La première ligne que nous avons créée était pour les boutons et le code qui font fonctionner la barre latérale. Cette ligne suivante sera pour le contenu de la barre latérale.

Pour créer la ligne de contenu de la barre latérale, ajoutez une nouvelle ligne à une colonne sous la première ligne de la barre latérale/section.

Paramètres de ligne

Ouvrez les paramètres de la nouvelle ligne et mettez à jour les éléments suivants :

• Largeur : 100 %
• Hauteur : 100 %
• Rembourrage : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite

Sous l'onglet Avancé, mettez à jour les options de débordement comme suit :

• Débordement horizontal : défilement (ordinateur de bureau et tablette), automatique (téléphone)
• Débordement vertical : défilement (ordinateur de bureau et tablette), automatique (téléphone)

Remplir la barre latérale avec du contenu/des modules

Maintenant que votre barre latérale est prête, tout ce que vous avez à faire est d'ajouter n'importe quel module à la deuxième rangée de la barre latérale selon vos besoins. Pour cet exemple, je copie simplement les modules de la mise en page de la page d'accueil de l'événement et je les colle dans la colonne de la ligne.

Résultat final

Découvrez le résultat final sur la page en direct.

Ajout de la barre latérale coulissante à un modèle de page

Si vous souhaitez utiliser cette barre latérale sur toutes vos pages par défaut, vous devrez ajouter la barre latérale/section à un modèle de page à l'aide de Divi Theme Builder.

Enregistrer la mise en page de la section dans la bibliothèque Divi

Pour ce faire, enregistrez d'abord la section qui a servi à créer la barre latérale dans la bibliothèque Divi. Vous pouvez le faire en cliquant sur les trois points de la barre latérale dans le modal des calques, en ajoutant le nom de la mise en page et en l'enregistrant dans la bibliothèque.

Créer un nouveau modèle de page

Ensuite, accédez au générateur de thème et créez un nouveau modèle et attribuez ce modèle à toutes les pages.

Ajout de la barre latérale coulissante au modèle de page

Ensuite, cliquez pour modifier le modèle de page.

Dans l'éditeur de mise en page de modèle, ajoutez une nouvelle section pleine largeur.

Insérez ensuite un module Fullwidth Post Content dans la section.

Cliquez ensuite sur. créer une nouvelle section au-dessus de la section pleine largeur. Cliquez ensuite sur l'onglet Ajouter à partir de la bibliothèque et sélectionnez la disposition de la section Barre latérale coulissante dans la bibliothèque.

Une fois cela fait, vous pouvez modifier la barre latérale selon vos besoins à l'aide de l'éditeur de mise en page du corps.

Enregistrer les paramètres du générateur de thème

Assurez-vous d'enregistrer les modifications dans le générateur de thème.

Maintenant, toutes vos pages auront la barre latérale.

Dernières pensées

Une barre latérale coulissante est une option parfaite pour ceux d'entre vous qui recherchent le meilleur des deux mondes - une barre latérale qui reste au premier plan sans enlever (ou distraire) le contenu principal de la page. N'hésitez pas à l'utiliser pour toutes sortes de choses comme les formulaires d'inscription, les inscriptions par e-mail, les menus et bien plus encore.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!