Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Comment créer une navigation fixe pour WordPress (Plugins + jQuery)

Une navigation propre, simple et cohĂ©rente peut faire passer l’expĂ©rience utilisateur de votre site WordPress au niveau supĂ©rieur. C’est une partie cruciale d’un site Web qui permet aux visiteurs de naviguer Ă  travers ses pages, sans aucune distraction. Cela amĂ©liore non seulement la convivialitĂ© et l’accessibilitĂ© d’un site Web, mais vous aide Ă©galement Ă  gĂ©nĂ©rer des prospects de qualitĂ© pour votre entreprise.

Nous savons tous qu’il est important d’assurer la sĂ©curitĂ© de votre site Web Ă  99,9% et d’atteindre des temps de chargement en moins d’une seconde, mais une navigation naturelle et facile Ă  utiliser qui ravit les visiteurs pourrait faire une grande diffĂ©rence dans la façon dont les gens pensent. en vous.

Mais l’utilisation d’une navigation standard ne vous aidera pas Ă  obtenir les meilleurs rĂ©sultats possibles. Pour cela, vous devez implĂ©menter des en-tĂȘtes et des menus persistants pour rendre votre navigation plus visible et accessible. Lorsqu’un menu est «collant», cela signifie simplement que la barre autocollante est visible lorsque vous faites dĂ©filer la page de haut en bas, ce qui la rend accessible oĂč que vous soyez sur la page.

stickymenuwordpress "width =" 1024 "height =" 437 "srcset =" https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuwordpress-1024x437.gif 1024w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.  com / wp-content / uploads / 2017/01 / stickymenuwordpress-350x149.gif 350w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuwordpress-768x328.gif 768w "tailles =" ( largeur maximale: 1024px) 100vw, 1024px "src =" https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuwordpress-1024x437.gif "class =" aligncenter size-large wp-image- 1665 lazyload "></p>
<p>Nous avons également un menu de banniÚres collant implémenté sur ce site!  Voyez-vous à quoi ressemble le menu lorsque vous faites défiler la page de lecture de cet article?</p>
<div class=

Dans un monde influencé par le défilement, la navigation fixe joue un rÎle important en offrant des expériences riches aux visiteurs du site Web. De nombreuses personnes créent une navigation collante en haut ou en bas de leurs sites. Vous pouvez y parvenir en intégrant un plugin robuste ou du code jQuery (qui est un peu plus technique).

Ici, nous partagerons avec vous certains des meilleurs plugins et solutions jQuery qui vous aideront à créer une navigation conviviale pour votre site WordPress. Mais avant cela, nous explorerons les forces et les faiblesses de la navigation collante.

Pourquoi mettre en place un menu fixe?

1. Navigation plus rapide et plus simple

Les menus fixes permettent aux visiteurs de parcourir vos pages Web rapidement et facilement. Ils peuvent instantanĂ©ment survoler le menu et cliquer sur le lien qu’ils souhaitent visiter sur votre site. Cela encourage le visiteur Ă  rester plus longtemps, ce qui amĂ©liore automatiquement l’engagement des utilisateurs et les conversions sur votre site WordPress.

2. Aide à réduire le taux de rebond

Un menu simple, propre et facile Ă  naviguer peut rĂ©duire automatiquement le taux de rebond d’un site. Avec l’aide de la navigation fixe, vous pouvez augmenter le nombre de pages vues car les visiteurs peuvent accĂ©der rapidement et facilement Ă  diffĂ©rentes pages de votre site.

3. Améliorer la notoriété de la marque

Utilisez la navigation collante pour afficher votre logo ou tout autre contenu visuel dans l’en-tĂȘte qui peut augmenter la notoriĂ©tĂ© de votre entreprise.

Mise Ă  jour du contenu

Liste de contrÎle de sécurité WordPress gratuite

(4 pages) La liste de contrÎle en 21 étapes pour
Assurer un site WordPress sécurisé à 99,9%

Télécharger

Mais il y a des inconvénients

1. Restriction avec certains modĂšles

Vous serez confrontĂ© Ă  des limitations de conception lors de l’utilisation de la navigation fixe. Cela signifie que vous n’obtiendrez pas trop d’options de mise en page lors de la crĂ©ation de menus collants pour votre site WordPress. Par exemple, l’emplacement le plus courant pour la navigation horizontale fixe ou fixe est en haut d’un site, vous n’apporterez donc aucune modification aux modĂšles de mise en page.

2. Cela peut ĂȘtre distrayant

Assurez-vous de concevoir soigneusement votre navigation collante, sinon vous risquez de distraire vos visiteurs Web potentiels. Certains Ă©lĂ©ments collants reviennent tard Ă  leur position d’origine lorsque l’utilisateur fait dĂ©filer la page. Assurez-vous donc que votre navigation est simple, accessible et n’entre pas en concurrence avec le contenu principal de votre site.

Plugins pour vous aider avec un menu fixe

Si vous n’ĂȘtes pas Ă  l’aise avec le codage ou si vous ĂȘtes nouveau dans l’industrie du dĂ©veloppement Web, vous pouvez utiliser le meilleur plugin WordPress qui vous permettra de crĂ©er facilement des barres de menu collantes. Voici les cinq plugins WordPress qui vous aideront Ă  Ă©viter ces difficultĂ©s et Ă  amĂ©liorer l’expĂ©rience utilisateur de votre site lorsqu’un visiteur navigue sur vos pages Web.

1. myStickymenu

C’est un plugin WordPress simple, moderne et rĂ©actif qui vous permet de crĂ©er des menus collants en haut de votre page Web en quelques minutes. myStickymenu a Ă©tĂ© prĂ©cĂ©demment dĂ©veloppĂ© pour Twenty Thirteen Themes, mais il peut Ă©galement fonctionner incroyablement bien dans d’autres modĂšles modernes.

Les fonctionnalitĂ©s prĂȘtes Ă  l’emploi permettent aux propriĂ©taires de sites de crĂ©er une navigation fixe ou fixe Ă  l’aide de ce plugin. Il prend en charge les fonctionnalitĂ©s multilingues et peut parfaitement fonctionner sur diffĂ©rents appareils et tailles d’Ă©cran.

En fait, le plugin facilite l’ajout de code CSS personnalisĂ© si vous souhaitez personnaliser l’apparence de votre navigation.

stickymenuu "width =" 1024 "height =" 580 "srcset =" https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuu-1024x580.png 1024w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.  com / wp-content / uploads / 2017/01 / stickymenuu-350x198.png 350w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuu-768x435.png 768w, https: // mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/stickymenuu.png 1094w "tailles =" (largeur maximale: 1024px) 100vw, 1024px "src =" https://mk0wpbuffsa0vanw2d3s.kinstac contentdn.com/wp-w2d3s.kinstac contentdn.com/wp / uploads / 2017/01 / stickymenuu-1024x580.png "class =" aligncenter size-large wp-image-1666 lazyload "></p>
<h2><span class="ez-toc-section" id="2_Menu_fixe_ou_quoi_que_ce_soit_Dans_Scroll"></span>2. Menu fixe (ou quoi que ce soit!) Dans Scroll<span class="ez-toc-section-end"></span></h2>
<div class=

  width = "700" height = "220" src = "https://blogging-techies.com/wp-content/uploads/2020/04/1586545748_288_How-to-create-a-fixed-navigation-for-WordPress-Plugins-jQuery .png "class =" alignnone size-full wp-image-3475 lazyload "></p>
<p>C’est un plugin idĂ©al pour crĂ©er une navigation fixe pour votre site WordPress.  Bien qu’il soit couramment utilisĂ© pour les menus de navigation, vous pouvez Ă©galement l’utiliser pour coller n’importe quel Ă©lĂ©ment en haut de votre page Web une fois qu’ils dĂ©filent vers le bas.  Vous pouvez utiliser le Sticky Menu sur le Scroll pour crĂ©er une barre latĂ©rale collante, une banniĂšre publicitaire, une boĂźte d’appel Ă  l’action, etc.</p>
<p>Vous pouvez mĂȘme modifier l’apparence de vos Ă©lĂ©ments si vous connaissez les bases de l’encodage HTML / CSS.  Tout ce que vous avez Ă  faire est de connaĂźtre l’astuce pour choisir la bonne sĂ©lection pour l’Ă©lĂ©ment que vous souhaitez coller.  Parfois, vous devez ĂȘtre plus prĂ©cis lors du choix d’un sĂ©lecteur pour vos Ă©lĂ©ments.</p>
<div class=

Il existe Ă©galement une option de positionnement par le haut qui vous permet d’ajouter un peu d’espace entre l’Ă©lĂ©ment adhĂ©sif et en haut de la page pour la rendre plus flexible lors du dĂ©filement vers le bas. Vous pouvez mĂȘme ajouter un indice Z si un autre Ă©lĂ©ment Ă©clipse votre Ă©lĂ©ment adhĂ©sif.


3. Barre de notification WPFront

WPFront Notification Bar est bien plus un plugin de notification que de navigation. Les fonctionnalités et options disponibles avec ce plugin vous permettent de créer une barre collante en haut ou en bas de votre site pour afficher une notification.

Il est livrĂ© avec une tonne d’options de personnalisation qui vous permettent d’ajuster la hauteur, la couleur et l’apparence d’un article en quelques minutes. Vous pouvez Ă©galement choisir si vous souhaitez afficher votre Ă©lĂ©ment dans un parchemin ou coller en haut ou en bas de la page. Vous avez un contrĂŽle total sur l’apparence et le positionnement de votre barre de notification.

barontop "width =" 941 "height =" 210 "srcset =" https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/barontop.png 941w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/ wp-content / uploads / 2017/01 / barontop-350x78.png 350w, https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/barontop-768x171.png 768w "tailles =" (max- largeur: 941px) 100vw, 941px "src =" https://mk0wpbuffsa0vanw2d3s.kinstacdn.com/wp-content/uploads/2017/01/barontop.png "class =" aligncenter size-full wp-image-1667 lazyload "></p>
<h2><span class="ez-toc-section" id="4_Hero_Menu_%E2%80%93_Plugin_WordPress_Mega_Menu_reactif"></span>4. Hero Menu – Plugin WordPress Mega Menu rĂ©actif<span class="ez-toc-section-end"></span></h2>
<p><img alt=

C’est le seul plugin WordPress premium de notre collection. C’est une solution unique pour crĂ©er toutes sortes de menus, que ce soit un mĂ©ga menu gĂ©nial ou un simple menu dĂ©roulant.

Hero Menu permet aux utilisateurs de concevoir une belle navigation fixe ou fixe pour leur site WordPress, le tout grĂące Ă  ses fonctionnalitĂ©s et fonctions avancĂ©es. Et le point culminant est qu’il est entiĂšrement compatible WooCommerce afin que vous puissiez crĂ©er facilement un menu de navigation pour votre site de commerce Ă©lectronique.

Lorsqu’il s’agit de crĂ©er une navigation persistante, il vous suffit d’activer la navigation persistante dans les paramĂštres de votre plugin et de personnaliser l’apparence gĂ©nĂ©rale pour la rendre plus attrayante et conviviale.

menu héros collant

5. Barre de notification WordPress

WordPress Notification Bar est un plugin WordPress simple et intuitif qui vous permet de crĂ©er une barre de notification collante et un appel Ă  l’action pour votre site WordPress.

Le plugin est livrĂ© avec un certain nombre de fonctionnalitĂ©s intĂ©ressantes et d’options de personnalisation qui vous permettent de crĂ©er un bouton d’appel Ă  l’action accrocheur et une barre de notification collante en quelques minutes.

Vous pouvez utiliser ses options de personnalisation pour ajuster la couleur, la hauteur et le positionnement de vos autocollants Ă  la volĂ©e. Il prend mĂȘme en charge la fonctionnalitĂ© multisite et fonctionne trĂšs bien sur diffĂ©rents appareils.

plugin de barre de notification wordpress

CrĂ©ez une navigation collante pour WordPress Ă  l’aide de jQuery

Étant donnĂ© que tous les sites Web modernes utilisent la fonction de position fixe dans leur menu de navigation, nous proposons une mĂ©thode Ă©tonnante pour crĂ©er une navigation fixe Ă  l’aide de jQuery pour nos lecteurs techniques. Cependant, il existe de nombreux plugins jQuery sur le marchĂ© Web, vous pouvez le faire en utilisant certaines lignes de code jQuery.

La procédure jQuery suivante vous aidera à créer une navigation collante pour votre site WordPress rapidement et facilement. Sous cette méthode, nous utiliserons jQuery pour manipuler le DOM et intégrer une classe pour créer une navigation fixe sur une page Web. Vous pouvez facilement créer une navigation collante en utilisant certains des éléments HTML5 de votre balisage.

Le marché:

Pour le balisage, vous devrez crĂ©er un en-tĂȘte qui contiendra le contenu de l’unitĂ© avec une classe de navigation de dĂ©monstration, qui sera ensuite suivie de la navigation principale avec une classe de navigation principale qui comprend une sĂ©rie de liens pour le menu de navigation principal. Par la suite, vous configurerez votre contenu et le couvrirez dans un contenu de classe. Ici, vous pouvez utiliser le site lorem ipsum comme texte factice. ConsidĂ©rez l’encodage suivant:

Utilisation de jQuery
Utiliser CSS

foyer
À propos de
Profil
Contact

Contenu principal ici!

Lorem ipsum douleur sit amet, consectetur adipiscing elit.

Pointe: Le codage jQuery ci-dessus comprend certaines des balises et classes HTML5 qui vous aideront à créer un menu de navigation collant pour votre site WordPress.

Emballer

Les menus collants sont un excellent moyen d’amĂ©liorer l’expĂ©rience utilisateur d’un site WordPress. Non seulement cela accĂ©lĂšre la navigation, mais cela encourage Ă©galement les gens Ă  rester connectĂ©s Ă  votre site, augmentant ainsi les conversions et les revenus. À l’aide de ces plugins ou de ce code, vous pouvez crĂ©er une barre de notification et de navigation impressionnante pour votre site WordPress en quelques minutes.

EnregistrerEnregistrer