Création d'une barre inférieure de navigation pour mobile avec Elementor
Dans cet article, je vais vous guider à travers le processus de création d’une barre de navigation inférieure pour mobile avec Elementor, qui inclut un bouton “scroll to top” pour permettre aux utilisateurs de revenir rapidement en haut de la page.
Je vais vous expliquer en détail chaque étape, depuis la création de la barre de navigation avec Elementor jusqu’à l’ajout du script jQuery pour activer la fonction “scroll to top” les icones pour le téléphone, l’email et pour ouvrir un menu popup.
Si vous avez créé un footer avec Elementor, nous allons ajouter une nouvelle section directement en dessous du footer existant pour y placer la barre de navigation inférieure pour mobile.
Si vous utilisez Flexbox pour la mise en page, vous pouvez ajouter une nouvelle section et organiser les colonnes de la barre de navigation de gauche à droite ou avec les sections classiques, vous pouvez ajouter quatre colonnes pour la barre de navigation : une colonne pour le menu, une pour l’icone telephone, une pour le bouton “scroll to top”, et une pour les coordonnées de contact ou toute autre information que vous souhaitez inclure dans la barre de navigation.
Dans les options de la section pour la barre de navigation inférieure, vous pouvez choisir la couleur de fond de votre choix.
Si vous voulez utiliser une couleur blanche pour la barre de navigation et que votre site a un fond blanc, vous pouvez ajouter une ombre pour donner une démarcation à la barre.
Pour faire cela, rendez-vous dans la section “Style”, puis cliquez sur “Bordure” et “Ombre de boîte”, vous pouvez utiliser le curseur “Vertical Offset” dans les options de l’ombre et le régler à -3 (ou tout autre chiffre selon votre préférence) pour donner une légère ombre qui donnera de la profondeur et un contraste visuel à votre barre de navigation inférieure.
Pour rendre la section de la barre de navigation inférieure visible uniquement sur les appareils mobiles, accédez à la section “Avancé” des options de la section, cochez la case “Masquer sur ordinateur et tablette” dans les options de visibilité responsive.
my-footer
Maintenant nous allons ajouter un identifiant CSS à la section de la barre de navigation inférieure pour pouvoir l’utiliser avec le script jQuery que nous verrons plus tard.
L’identifiant que nous allons utiliser sera “my-footer”.
Nous devrons l’ajouter en avancée> mise page> ID de css
Ensuite, nous allons ajouter toujours dans les options avancées de la section (CSS personnalisée) un code CSS pour positionner la barre de navigation inférieure.
Ce code CSS sera appliqué uniquement aux appareils avec une largeur d’écran maximale de 767 pixels, c’est-à-dire aux appareils mobiles et Il fixera la barre de navigation inférieure en bas de la page.
@media only screen and (max-width: 767px) {
#my-footer.show-scroll-to-top {
position: fixed;
bottom: 0;
display: block;
}
}
Maintenant, ajoutez votre propre icône de taille 16 ou 18 pixels et appliquez-lui une couleur personnalisée de votre choix
Pour l’icône de flèche ver le haut utilisée pour le bouton “scroll to top”, nous utiliserons l’ID CSS scroll-to-top
Si vous avez décidé d’intégrer une icône de téléphone, nous créerons un lien personnalisé avec la syntaxe suivante : tel:+indicatif pays-numéro téléphone.
Pour un numéro de téléphone mobile, vous devrez supprimer le zéro initial du numéro.
Par exemple, pour un numéro de téléphone mobile belge, le lien serait : tel:+32465123456
Pou une icône d’email, nous allons créer un lien personnalisé en utilisant la syntaxe suivante : mailto:adresse-email. Par exemple, si notre adresse email est “exemple@gmail.com”, le lien serait : mailto:.”
si vous souhaitiez également ajouter l’objet de l’e-mail. mailto:exemple@gmail.com coml?subject=Demande d’information
Enfin, pour l’icône du menu, dans le lien de l’icône, accédez aux options de la balise dynamique > actions > fenêtre modale.
Enfin, pour l’icône du menu, dans le lien de l’icône, accédez aux options de la balise dynamique > actions > fenêtre modale.
Ensuite, cliquez sur l’icône en forme de clé anglaise pour ouvrir une fenêtre, puis cliquez sur “Tout” et recherchez votre popup de menu en écrivant son nom.
Si vous en avez déjà créé un, il apparaîtra dans la liste.
Dernière étape, nous devons insérer un script pour faire fonctionner le bouton “retour en haut”. Tout d’abord, rendez-vous dans Elementor > Code personnalisé > Ajouter.
<script>
jQuery(document).ready(function($) {
var offsetPercent = 0.6; //Décalage en pourcentage de la hauteur de la fenêtre
var duration = 500; // la durée de l'animation coulissante vers le haut
$(window).scroll(function() {
var windowHeight = $(window).height();
var footerHeight = $('#my-footer').outerHeight();
var offset = (windowHeight - footerHeight) * offsetPercent;
if ($(this).scrollTop() > offset) {
$('#my-footer').addClass('show-scroll-to-top');
} else {
$('#my-footer').removeClass('show-scroll-to-top');
}
});
$('#scroll-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
</script>
Attribuez un nom au code, nous l’appellerons “scroll to top”. Sélectionnez l’emplacement <body> Débout et collez le code.
Enregistrez et c’est tout !
Si vous avez suivi toutes les étapes, votre barre de navigation devrait fonctionner correctement.
Si vous souhaitez modifier le moment où votre barre doit apparaître, vous pouvez modifier les valeurs de “var offsetPercent = 0.6;” et “var duration = 500;”. Le 0,6 correspond à 60% de la hauteur de l’écran, ce qui signifie que la barre apparaîtra lorsque vous aurez fait défiler 60% de la page vers le bas. Le 500 est le temps en millisecondes pour faire apparaître la barre.
Je vous recommande de faire une sauvegarde avant de commencer ce petit travail qui vous permettra d’économiser l’utilisation d’un plugin.
