Une barre latérale verticale est un élément de conception pratique placé sur le côté de la page qui reste visible dans la fenêtre de visualisation lorsque les utilisateurs font défiler la page vers le bas. Cette barre latérale à position fixe peut être un outil efficace pour guider les visiteurs dans votre contenu en leur permettant d'accéder rapidement à des sections spécifiques de la page. Pour les sites web contenant de nombreuses informations, comme les pages de service, les portfolios ou les articles de blog, une barre latérale collante améliore l'expérience de l'utilisateur en lui offrant un outil de navigation pratique, qui lui permet d'accéder plus facilement aux sections souhaitées sans avoir à faire défiler la page de manière intensive.
Ce tutoriel vous guidera dans la création d'une barre latérale verticale collante dans Elementor avec des éléments de navigation, des liens d'ancrage et un style personnalisé pour correspondre à l'esthétique de votre site web.
Préparation
Avant de commencer, vérifiez les points suivants :
- Elementor Pro Installé et activé: L'effet collant nécessite Elementor Pro.
- Mise en page: Une nouvelle page ou une page existante sur laquelle vous souhaitez ajouter la barre latérale verticale.
- Familiarité avec les conteneurs Elementor: Nous vous recommandons de travailler avec Flexbox Le mode conteneur permet un contrôle plus souple dans le cadre de ce tutoriel.
Étape 1 : Créer un modèle de page unique
Nous allons commencer par créer un modèle de page unique et le configurer pour accueillir le conteneur qui servira de barre latérale verticale collante.
- Naviguez vers Modèles
Dans votre tableau de bord WordPress, allez dans Elementor > Modèles > Ajouter un nouveau.
- Sélectionnez le type de modèle
Dans la fenêtre contextuelle, choisissez Page unique comme type de modèle et donnez-lui un nom, comme "Business Service Page Template".
- Choisissez le type de page
En haut de la bibliothèque de modèles, sélectionnez l'option Pages tabulation.
Parcourez les modèles disponibles pour trouver le style qui vous convient. Vous pouvez utiliser la barre de recherche pour trouver des modèles correspondant à des objectifs spécifiques, tels que "Services" ou "Entreprise". Si vous créez cette barre latérale pour un type de page particulier, vous pouvez également configurer des conditions dans les paramètres d'affichage afin de limiter son apparition à des pages spécifiques.
Vous pouvez choisir d'insérer un modèle existant et, si vous devez ajouter une navigation latérale à l'une de vos pages, vous pouvez modifier la page directement.
Étape 2 : Créer le conteneur dans Elementor
Ce conteneur servira de base à la barre latérale verticale collante.
- Ajouter le conteneur
Dans l'éditeur de pages, cliquez sur Ajouter un nouveau conteneur et faites-le glisser dans votre zone de conception. Ce conteneur servira de structure principale pour la barre latérale collante.
- Définir la direction du conteneur
Sélectionnez le conteneur, puis réglez sa direction sur Vertical dans le panneau de configuration situé à gauche. La direction verticale permet aux éléments de la barre latérale de s'empiler de haut en bas, ce qui est essentiel pour créer une disposition verticale de la barre latérale.
- Définir la largeur du conteneur
Dans le cadre de la Style ajustez la largeur pour qu'elle corresponde aux besoins de la barre latérale, par exemple 200 px ou moins, en fonction de vos préférences en matière de conception. En veillant à ce qu'elle occupe le moins d'espace possible sur la page, vous contribuerez à maintenir l'attention sur le contenu principal.
Étape 3 : Créer la barre latérale verticale autocollante
- Insérer des éléments de titre et de navigation
Ajouter un Rubrique à l'intérieur du conteneur avec un titre comme "Navigation rapide" ou "Contenu".
- Ajouter des éléments de liste
Insérer un Liste des icônes ou Bouton sous l'en-tête pour créer des éléments de navigation. Ici, nous utiliserons une liste d'icônes pour une présentation simplifiée, en laissant de l'espace entre chaque élément dans la barre latérale.
- Ajouter des liens de navigation
Pour votre barre de navigation latérale, ajoutez des éléments tels que :
- A propos de nous: Ce lien permet d'accéder à la présentation de l'entreprise.
- Nos services: Dirige vers la section des services.
- Témoignages: Conduit à la zone de retour d'information du client.
- Contactez nous: Liens vers le formulaire de contact ou la section d'information.
Personnalisez les noms et les icônes en fonction de votre mise en page. Supprimez l'icône ou allez dans la galerie d'icônes pour la sélectionner.
- Définir des liens d'ancrage
Ajoutez des liens d'ancrage à chaque élément de navigation en définissant des points d'ancrage sur la page. Par exemple, pour une section "À propos de nous", nous utiliserons 1TP5A propos de nouset des ancrages similaires pour les autres sections.
Ajouter une ancre pour "À propos de nous"
Dans Elementor, trouvez l'élément Ancre de menu widget. Faites-le glisser juste au-dessus du titre de la section "À propos de nous" ou à tout autre endroit approprié. Nommez l'ancre (par exemple, à propos de nous) dans les paramètres pour faciliter la création de liens par la suite.
Lier l'ancre à la navigation
Revenez à l'élément de la liste d'icônes "À propos de nous" et créez un lien en définissant l'URL comme #about-us. Les utilisateurs qui cliqueront sur cet élément de navigation accèderont immédiatement à la section.
Répétez cette opération pour les autres éléments du menu.
- Définir la largeur de la barre latérale
Pour maintenir une mise en page cohérente, fixez la largeur du conteneur de la liste d'icônes et du conteneur principal à une valeur fixe, par exemple 200px.
- Personnaliser le style de la barre latérale
Vous pouvez ajuster la police, les couleurs et l'espacement dans la rubrique Style pour qu'il corresponde au style de votre site. Vous pouvez également ajouter un couleur de fondLa barre latérale se distingue visuellement par des effets d'ombrage, de rembourrage et d'ombrage.
Étape 4 : Activer l'effet collant
Pour que la barre latérale reste fixe lorsque l'utilisateur fait défiler la page, procédez comme suit :
- Définition de l'ID CSS pour la barre de navigation et la zone de contenu
Sélectionnez le conteneur de la barre de navigation et, dans l'onglet Avancé, ajoutez un ID CSS. menu latéral.
- Ajouter un code CSS personnalisé
Ouvrez Custom CSS dans Elementor (un paramètre global ou un CSS personnalisé pour le conteneur de la barre de navigation). Ajoutez le code suivant :
#sidebar-menu {
position : fixed ; /* Fixe la barre latérale en place, de sorte qu'elle ne se déplace pas lors du défilement */
left : 0 ; /* Aligne la barre latérale sur le côté gauche de la page */
top : 0 ; /* Positionne la barre latérale en haut de la page */
height : 100vh ; /* Fixe la hauteur de la barre latérale à la hauteur totale de la fenêtre */
width : 200px ; /* Ajuste la largeur de la barre latérale selon les besoins */
z-index : 10 ; /* Assure que la barre latérale reste au-dessus des autres éléments */
background-color : #e0f7fa ; /* Définit la couleur d'arrière-plan de la barre latérale */
color : #FFF ; /* Définit la couleur du texte à l'intérieur de la barre latérale */
padding-top : 250px ; /* Ajoute du padding en haut de la barre latérale */
overflow-y : auto ; /* Permet le défilement si le contenu de la barre latérale est trop long */
}
Explication
- position : fixe ;
- Maintient la barre latérale dans une position fixe sur l'écran lorsque les utilisateurs font défiler la page. Elle restera toujours visible dans la fenêtre de visualisation, quel que soit le défilement de la page.
- gauche : 0 ;
- Alignez la barre latérale sur le bord gauche de la fenêtre de visualisation, en la positionnant au même niveau que le côté gauche de la page.
- top : 0 ;
- La barre latérale commence ainsi en haut de la fenêtre, s'alignant sur le haut de la page.
- hauteur : 100vh ;
- Définit la hauteur de la barre latérale de manière à ce qu'elle occupe toute la hauteur de la fenêtre (100% de la hauteur de la fenêtre). Cela permet de s'assurer que la barre latérale s'étend du haut au bas de l'écran.
- largeur : 200px ;
- Fixe la largeur de la barre latérale à 200px. Cette valeur peut être ajustée en fonction des besoins de conception.
- z-index : 10 ;
- Définit l'ordre d'empilement de la barre latérale. Un indice z plus élevé garantit que la barre latérale apparaît au-dessus d'autres éléments qui pourraient se chevaucher.
- couleur de fond : #e0f7fa ;
- Cette option définit la couleur d'arrière-plan de la barre latérale. Ici, un bleu pastel clair (#e0f7fa) a été choisi pour donner une impression de calme et de propreté.
- couleur : #FFF ;
- Définit la couleur du texte dans la barre latérale en blanc (#FFF). Cela crée un contraste avec l'arrière-plan bleu pastel, améliorant ainsi la lisibilité.
- padding-top : 250px ;
- Ajoute un rembourrage en haut de la barre latérale. Cela peut être utile si vous souhaitez que le contenu principal de la barre latérale (comme les liens de navigation) commence plus bas, en laissant de l'espace en haut pour les marques ou les logos.
- overflow-y : auto ;
- Il permet le défilement vertical à l'intérieur de la barre latérale si le contenu dépasse sa hauteur. Ainsi, le contenu reste accessible sans affecter la présentation générale de la page.
Une barre latérale verticale collante est un élément de conception qui reste fixe sur le côté d'une page Web lorsque les utilisateurs font défiler la page, offrant une navigation rapide vers des sections spécifiques. Ce tutoriel vous guide dans la création d'une barre latérale collante dans Elementor, en utilisant des éléments de navigation, des liens d'ancrage et un style personnalisé pour une expérience utilisateur transparente. Avec Elementor Pro installé, vous allez créer un modèle de page unique, mettre en place un conteneur pour la barre latérale, ajouter des éléments de navigation et assigner des liens d'ancrage. Enfin, en ajoutant des feuilles de style CSS personnalisées, la barre latérale reste fixe dans la fenêtre de visualisation, ce qui améliore l'accessibilité des pages à fort contenu, telles que les sections de service ou de portefeuille.