Améliorer l'expérience utilisateur : Créer une navigation de pied de page collante adaptée aux mobiles avec Elementor

Vous voulez votreNavigation en bas de pageToujours en vue comme une application mobile ? Ce guide vous apprendra comment le faire dans Elementor.Créer 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 qu'il faut savoir avant de commencer

Avant de commencer, il est utile de connaître quelques notions de base en matière de CSS, car nous allonsUtiliser des 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 d'elementor Edit".

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 électroniquevous pouvez utiliser la colonne de gauche 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 est ajustée en fonction de 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 navigationAjouter 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 ; /* S'assurer 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 le rendre plus haut */ right : 0 ; /* Ajusté de 10px à 20px pour le rendre plus haut */
    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 ; /* Supprimer 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 ; /* Disposer 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 Fixer 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 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 permettent d'augmenter l'interactivité des icônes en fournissant un retour d'information 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 afin de le rendre plus attrayant, par exemple en l'intégrant ou en le faisant glisser lors du défilement.
• 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. Ceci 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.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.