Vous voulez votreNavigation en bas de pageToujours en vue comme une application mobile ? Ce guide vous apprendra à le faire dans Elementor.Créez une navigation collante en bas de pageApplicable àversion gratuiterépondre en chantantVersion payante d'Elementor. La création d'une telle navigation peut grandement améliorer l'expérience utilisateur d'un site web, en particulier sur les appareils mobiles, en facilitant l'accès des utilisateurs aux pages importantes.

Ce que vous devez savoir avant de commencer

Avant de commencer, il est utile de connaître quelques notions de base en matière de CSS, car nous allonsUtilisation de feuilles de style CSS personnalisées pour styliser la navigation collante. Assurez-vous qu'Elementor est installé et que vous pouvezCréer une page.

Étape 1 : Créer un nouveau conteneur

Tout d'abord, vous pouvez créer une nouvelle page ou modifier une page existante en sélectionnant "Utilisation des éditeurs elementor".

En cliquant sur le bouton Signe plus (+) pour créer un nouveau conteneur, ou dans le panneau Elementor, placez le bouton "conteneurs"Faites glisser l'option sur la page.

Pour une meilleure organisation des éléments de navigation, il est recommandé de choisir une structure à deux colonnes ou plus.

• Cliquez sur le bouton plus ( + ) dans Elementor pour ajouter un nouveau conteneur.

• Définissez la structure sur deux colonnes ou plus pour faciliter l'ajout d'éléments de navigation.

exemple typiqueSi vous travaillez sur unCréer une navigation collante en bas de page pour les sites de commerce électroniqueLa colonne de gauche peut être utilisée pour "Retour à la page d'accueil"icône, colonne de droite pour "chariot"Les utilisateurs peuvent ainsi accéder facilement aux pages importantes.

Étape 2 : Personnalisation du conteneur

Ensuite, le conteneur doit être personnalisé. Cliquez sur le bouton Icônes de dés ou six points en haut du conteneur pour ouvrir le réglage.

• Largeur du contenuChoisissez "boxed" ou "full width", selon vos préférences en matière de design. Nous choisissons largeur totale.

• ampleurLa largeur de l'image est réglable selon vos besoins. Les autres options conservent leurs paramètres par défaut et peuvent être modifiées ultérieurement si nécessaire.

• contextes: entypeajoutez un arrière-plan au conteneur afin que le menu de navigation ne soit pas confondu avec d'autres contenus.

• ID CSS: en niveau élevé pour spécifier un conteneur pour le ID CSSDans ce tutoriel, nous utilisons la fonction der-sticky-navigation-footer. Si d'autres classes sont sélectionnées, veillez à ce que, dans les étapes suivantes, lesAjustement du code CSS.

exemple typiqueSi l'arrière-plan de votre pied de page estplus sombreVous pouvez choisircouleur claireles icônes de navigation afin de garantir une présentation plus attrayante.

Étape 3 : Ajouter du contenu au conteneur

Ajoutez du contenu de navigation, tel que des icônes et des liens, au conteneur.

• Widget boîte à icônesUtilisation recommandée boîte à icônesWidgets pour un accès facile à laChaque élément de navigationAjoutez des icônes et des étiquettes. Ajoutez chaque icône et chaque étiquette dans une colonne distincte pour que tout soit bien organisé.

Exemple : pour un site de commerce électronique qui comprend "page d'accueil","rechercher qqch.","chariot"et"menu"Les utilisateurs peuvent facilement accéder aux pages importantes. Les utilisateurs peuvent ainsi accéder facilement aux pages importantes.

Étape 4 : Ajouter du HTML et du CSS personnalisés

Afin de rendre la barre de navigation collante, il est nécessaire d'ajouter un fichier personnalisé HTML et CSSpour le maintenir en place au bas de l'écran.

• Widgets HTML: Trouver Widgets HTMLet faites-le glisser vers la fenêtreSous le menu de navigationde n'importe quelle région.

• Ajouter un code HTMLAjouter le code suivant au widget HTML :

#der-sticky-navigation-footer {
    display : flex ; justify-content : space-around ; /* Distribuer les icônes uniformément dans le conteneur */
    justify-content : space-around ; /* Distribuer les icônes uniformément dans le conteneur */ align-items : centre ; /* Centrer verticalement les icônes */
    align-items : centre ; /* Centrer verticalement les icônes */
    flex-wrap : nowrap ; /* Assure que toutes les icônes restent sur une seule ligne */
    position : fixed ; bottom : 20px ; /* Veiller à ce que toutes les icônes restent sur une seule ligne */
    bottom : 20px ; /* Ajusté de 10px à 20px pour l'élever */ right : 0 ; /* Ajusté de 10px à 20px pour l'élever */
    right : 0 ; left : 0 ; /* Ajusté de 10px à 20px pour le rendre plus haut */
    left : 0 ; max-width : 400px ; /* Ajusté de 10px à 20px pour l'agrandir */ right : 0 ; left : 0 ; /* Ajusté de 10px à 20px pour l'agrandir
    max-width : 400px ; max-height : 60px
    
    margin : auto ; z-index : 1000 ;
    z-index : 1000 ; }
}

#custom-html {
    display : none ; }
}

#der-sticky-navigation-footer .elementor-icon-box {
    margin : 0 ; /* Supprimez les marges supplémentaires pour un espacement cohérent */
}

@media (max-width : 768px) {
    #der-sticky-navigation-footer {
        flex-direction : row ; /* Disposer les icônes en ligne pour l'affichage mobile */
        justify-content : space-evenly ; /* Disposez les icônes sur une ligne pour l'affichage mobile */.
        justify-content : space-evenly ; width : 100% ;
    }
    #der-sticky-navigation-footer .elementor-icon-box {
        flex : 1 ; /* Distribue un espace égal à chaque icône */
    }
}

Ce code ancre la navigation en bas de page au bas de l'écran et garantit un espacement et un positionnement corrects.

• position : fixe Fixez le pied de page en bas.
• largeur maximale répondre en chantant hauteur maximale Limite la taille du pied de page.
• z-index Veillez à ce que le pied de page soit affiché au-dessus du reste du contenu.

Cacher le HTML personnalisé: ajoute un nouvel élément à l'élément HTML personnalisé appelé custom-html (utilisé comme expression nominale) ID CSSpour masquer l'élément.

exemple typiqueSi vous souhaitez que la navigation soit toujours en haut de l'écran, vous pouvez augmenter la valeur de l'attribut z-index afin de s'assurer que la navigation n'est pas écrasée par d'autres contenus.

Étape 5 : Ajustements finaux et achèvement

Vous pouvez peaufiner le CSS ou apporter d'autres modifications à la conception si nécessaire pour améliorer le résultat final. Le design du pied de page de navigation collant présenté dans ce tutoriel est relativement basique et peut être optimisé avec un peu de créativité.

exemple typiqueLes icônes peuvent par exemple être remplacées par des logos de marque ou différentes animations peuvent être utilisées pour améliorer l'interactivité de la navigation et la rendre plus unique.

Conseils pour une navigation collante en bas de page

• Ajouter un effet de survolLes effets de survol : augmentez l'interactivité des icônes grâce à des effets de survol qui fournissent un retour visuel lorsque l'utilisateur survole ou clique sur un lien.
• Utiliser des couleurs contrastéesChoisissez une couleur qui contraste avec l'arrière-plan du site afin d'attirer l'attention sur la navigation autocollante.
• Ajout d'effets d'animationAjouter des animations subtiles au pied de page lorsqu'il apparaît pour le rendre plus attrayant, par exemple en l'intégrant ou en le faisant glisser lorsqu'on le fait défiler.
• Assurer la compatibilité avec les appareils mobilesTest d'écran : Testez différentes tailles d'écran pour vous assurer que la navigation fonctionne de manière transparente sur les appareils mobiles, en ajustant le CSS si nécessaire.

exemple typiqueLes icônes de navigation sont plus grandes sur les appareils mobiles, de sorte que les utilisateurs peuvent facilement cliquer sur ces icônes. C'est particulièrement important pour améliorer l'expérience de l'utilisateur, surtout sur les petits écrans.

Pourquoi utiliser une navigation collante en bas de page ?

La navigation collante en bas de page est particulièrement utile pour améliorer l'expérience de l'utilisateur, notamment sur les appareils mobiles. Elle permet aux utilisateurs d'accéder rapidement aux pages importantes sans avoir à revenir en haut de la page, ce qui contribue à améliorer la convivialité, à accroître l'engagement et, en fin de compte, à améliorer les conversions sur le site web.

résumés

L'utilisation d'une barre de navigation collante en bas de page est un moyen efficace d'améliorer l'expérience de l'utilisateur sur votre site web. En gardant la barre de navigation toujours dans la ligne de mire de l'utilisateur, les visiteurs peuvent facilement accéder aux pages importantes à tout moment sans avoir à revenir en haut de la page. Cela permet non seulement d'améliorer la convivialité de votre site web, mais aussi d'accroître l'interaction avec les utilisateurs.