Les menus latéraux collants apportent non seulement une touche de modernité à un site web, mais ils offrent également aux visiteurs une expérience de défilement plus immersive. Dans cet article, nous allons voir comment utiliser la fonction Elementor répondre en chantant Elementor Pro Créez un puissant menu latéral collant.
Qu'est-ce qu'un menu latéral collant ?
Les menus latéraux collants sont différents des menus de navigation horizontaux traditionnels qui occupent l'espace vertical sur le côté gauche ou droit d'un site web. Ces menus sont toujours présents sur la page, même si l'utilisateur fait défiler la page vers le bas.Le menu sera également fixé en position latérale.Cela permet de disposer d'options de navigation en continu.
En règle générale, les menus latéraux collants sont réduits par défaut et n'occupent qu'une petite partie de l'espace. Les utilisateurs peuvent cliquer sur une icône pour développer le menu et afficher davantage de liens de navigation. Cette conception est particulièrement adaptée aux utilisateurs d'ordinateurs de bureau et de tablettes, mais un menu horizontal traditionnel peut s'avérer une meilleure option pour les appareils mobiles.
Avantages des menus latéraux collants
- Gain d'espace verticalLes menus latéraux collants placent les éléments de navigation à la verticale, libérant ainsi l'espace vertical en haut et permettant au contenu du site de tirer pleinement parti de la hauteur de l'écran.
- Amélioration de l'expérience de l'utilisateurCe menu offre une expérience de défilement unique et moderne qui permet aux utilisateurs d'accéder plus facilement aux options de navigation sans avoir à revenir en haut de la page.
- Meilleure organisation du contenuLa mise en page verticale permet de présenter les différentes parties du site web de manière plus claire et plus ordonnée, ce qui convient particulièrement aux sites web riches en contenu.
Outils nécessaires pour créer des menus latéraux collants avec Elementor
Avant de commencer à créer un menu latéral collant, vous devez préparer les outils et fonctionnalités suivants :
- Elementor: Il s'agit d'un constructeur de pages WordPress populaire qui offre une multitude d'options de conception et de mise en page.
- Elementor ProPour mettre en œuvre des menus latéraux collants, vous devrez utiliser certaines des fonctionnalités avancées d'Elementor Pro, telles que les popups et les modèles de thème.
- Modèles d'en-têtes réguliers: Il s'agit d'un modèle d'en-tête conçu pour les visiteurs d'appareils mobiles afin d'assurer une bonne expérience de navigation sur mobile.
- Modèle partiel: Utilisé pour créer des menus latéraux minimisés qui serviront de base à des barres latérales collantes.
- fenêtre contextuelle: Permet d'afficher le menu de navigation complet, en déclenchant une fenêtre contextuelle lorsque l'utilisateur clique sur l'icône de la barre latérale réduite.
Etapes pour créer un menu latéral collant
1. masquer les titres généraux dans les vues de bureau et de tablette
Tout d'abord, vous devezVeiller à ce que les modèles d'en-tête existants ne s'affichent que sur les appareils mobiles et non sur les ordinateurs de bureau et les tablettes.. Pour ce faire, suivez les étapes ci-dessous :
- Allez dans le constructeur de thèmes d'Elementor (Templates → Theme Builder → Titles), sélectionnez votre modèle de titre et modifiez-le avec Elementor.
- Dans l'éditeur Elementor, sélectionnez la section du titre et allez à "niveau élevé"Onglet.
- Activez les options "Hide on Desktop" et "Hide on Tablet" dans les paramètres de réponse.
Ainsi, les utilisateurs d'ordinateurs de bureau et de tablettes ne verront que le menu latéral et non l'en-tête horizontal normal.
2. création d'un modèle partiel pour la barre de navigation latérale
Ensuite, nous allons créer un nouveau modèle qui sera utilisé pour définir l'état minimisé du menu de la barre latérale. C'est ce que l'utilisateur verra lorsqu'il chargera la page pour la première fois.
- Allez dans la zone Modèles du backend de WordPress, sélectionnez l'onglet "Sections" et cliquez sur "Ajouter un nouveau".
- Créez une nouvelle section contenant une colonne et configurez les paramètres comme suit :
- Largeur du contenu : pleine largeur
- Dégagement de la colonne : pas de dégagement
- Hauteur → Hauteur minimale : 100vh (pour que la barre latérale occupe toute la surface de la page)hauteur verticale)
- Position de la colonne : étirement
- Balises HTML : titre (facultatif, mais utile pour le référencement)
Dans l'onglet Styles, vous pouvez configurer la couleur d'arrière-plan ou le dégradé de la barre latérale pour qu'elle soit cohérente avec le reste du site.
3. configurer les paramètres des colonnes et ajouter des widgets
Ajoutez quelques widgets de base à certains modèles, tels que des logos de sites web, des icônes de navigation (pour développer le menu complet) et des icônes de médias sociaux.
- Ajoutez un logo à l'aide du widget image.
- Utilisez le widget Icône pour ajouter une icône qui sera utilisée pour déclencher le menu de navigation contextuel. Vous pouvez choisir n'importe quelle icône appropriée, telle que l'icône Bars, et configurer sa couleur et son effet de survol.
- Utilisez le widget Icônes sociales pour ajouter des liens vers les médias sociaux et veillez à ce qu'ils soient alignés verticalement.
Une fois la configuration terminée, publiez ou mettez à jour certains des modèles.
4. création d'un nouveau modèle de page unique avec barre de navigation latérale
Ensuite, un nouveau modèle d'une page doit être créé à l'aide du constructeur de thèmes Elementor, qui contient le contenu de votre site et les en-têtes de navigation latérale collants.
Pour ce faire, veuillez vous rendre à l'adresse suivanteTemplates → Theme Builder :
- commutateur à"Page unique" onglets
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)"Ajouter nouveau
- Veiller à ce que Selectpage unique En tant que type de modèle
- Donnez-lui un nom.Pages pour la navigation latérale fixe
Dans l'éditeur Elementor, créez une section avec deux colonnes :
- colonne de gauche- Cela permettra de tenir compte des barres latérales collantes
- colonne de droite- Il contiendra le contenu régulier de votre site
Configurer la colonne de droite (contenu)
Pour ajouter un contenu général à la colonne de droite, ajoutez l'élément "Contenu du message"Widget.
Configurer la colonne de gauche (en-tête de la barre latérale)
Pour ajouter l'en-tête de navigation de la barre latérale au menu de gauche, ajoutez le widget du modèle. Sélectionnez ensuite celui que vous avez créé à l'étape précédenteModèle d'en-tête de barre latérale collante.
En outre, les transferts vers cette colonneParamètres avancés, définissez lesZ-indexLa valeur est fixée à10000 (dix mille) et seraréactifLa commande est réglée sur Activer"Caché sur les appareils mobiles".. Ainsi, seuls les visiteurs des ordinateurs de bureau et des tablettes verront vos en-têtes de navigation latérale collants.
Configurer l'espacement et la disposition des colonnes
La barre latérale occupe 50% de la page. Pour y remédier, sélectionnez la colonne de gauche (avec la barre latérale) et le boutonL'onglet "Mise en page" sera sonlargeur de la colonnefixé à5%. Cela rendra automatiquement la colonne de droite égale à95%.
La définition de la valeur z-index permet de s'assurer que la fenêtre contextuelle de navigation complète que vous créerez à l'étape suivante se glisse sous la navigation latérale.
sélecteur {
width : 60px ;
}Copie Ce CSS garantit que la navigation latérale est toujours étroite en fixant la largeur à 60 pixels. N'hésitez pas à ajuster ce chiffre à votre convenance, mais ne vous écartez pas trop de 60px.
Configuration Effet sport
Nous voulons maintenant nous assurer que la navigation latérale est toujours fixée à l'écran.
Pour ce faire, cliquez sur Modèles dans la colonne de droite :
- commutateur à"Avancé" Tab.
- cliquer (à l'aide d'une souris ou d'un autre dispositif de pointage)"Effets de mouvement.
- Mettre "haut"Régler sur"Top".
- commandant en chef (militaire) "Collant".fixé à"Bureau".répondre en chantant"Tablette"..
Publiez maintenant votre modèle d'une page et utilisez la fonctionConditions d'affichagepour contrôler l'endroit où elle est affichée. Si vous souhaitez utiliser la navigation latérale collante sur toutes les pages, réglez-la pour qu'elle s'affiche dans la sectionToutes les pagesEn haut.
Si vous ajoutez des modèles de page à un site qui en possède déjà, veillez à passer tous les modèles existants à l'état "brouillon" afin de les désactiver et d'éviter les conflits potentiels.
5. configuration des menus de navigation contextuels
Pour que l'utilisateur puisse développer le menu de navigation complet, nous devons créer une fenêtre contextuelle. Cette fenêtre s'affichera lorsque l'utilisateur cliquera sur l'icône de la barre latérale.
- Allez dans Modèles → Popups, cliquez sur "Ajouter un nouveau" et créez un nouveau popup.
- Configurez les paramètres de la fenêtre contextuelle tels que la largeur, l'animation d'entrée, l'animation de sortie, etc. et ajoutez les marges appropriées.
- Ajoutez un widget de menu de navigation à la fenêtre contextuelle, en veillant à ce que les éléments du menu soient alignés verticalement.
Après avoir publié la fenêtre contextuelle, revenez au modèle de barre latérale et configurez l'étiquette dynamique de l'icône à "fenêtre contextuelle"et sélectionnez le menu contextuel que vous venez de créer.
6. essais et optimisation
À ce stade, votre menu latéral collant est presque terminé. Ouvrez la page du site web et testez la fonctionnalité et l'apparence du menu latéral pour vous assurer qu'il fonctionne comme prévu.
Si vous rencontrez des problèmes lors des tests, il est recommandé d'essayer d'utiliser le thème Hello d'Elementor pour s'assurer qu'il n'y a pas de conflit avec d'autres thèmes.
résumés
Les menus latéraux collants apportent un tout nouveau design et une nouvelle expérience de navigation aux sites web WordPress. En exploitant la puissance d'Elementor et d'Elementor Pro, vous pouvez facilement créer un menu de navigation vertical flexible et esthétique qui offre une meilleure expérience de navigation à vos visiteurs.
