Comment créer un en-tête collant dans WordPress

Avant d’expliquer comment créer un en-tête collant dans WordPress, comprenons d’abord ce qu’ils sont et pourquoi nous pouvons vouloir les utiliser. Les éléments collants, ou éléments fixes, sont des types particuliers d’éléments qui restent toujours visibles et ne changent pas de position lorsque l’utilisateur fait défiler vers le haut ou vers le bas. Ces éléments sont accessibles à tout moment de par leur positionnement et sont donc très utiles pour les menus ou autres options de navigation.

Vous souhaitez offrir à vos utilisateurs autant d’options pratiques que possible, pour rendre votre contenu facilement accessible et réduire la frustration des utilisateurs. En utilisant les éléments collants, les utilisateurs peuvent rapidement passer d’une page de votre site Web à l’autre et trouver exactement ce dont ils ont besoin. Tout ce confort et cette facilité d’utilisation signifient que votre expérience utilisateur sera bien meilleure et que vous aurez une meilleure rétention des utilisateurs.

Maintenant, nous allons aborder l’un des principaux types d’éléments collants, l’en-tête collant, et un outil génial qui peut nous aider à créer et personnaliser facilement ces éléments. L’outil en question s’appelle WP Sticky.

Il existe de nombreuses façons différentes de créer des en-têtes collants en plus de WP Sticky. Vous pouvez même créer ces éléments collants en utilisant du code HTML et CSS pur, mais cela nécessite des connaissances techniques et prend du temps. Ce plugin est une solution beaucoup plus simple au problème et est extrêmement convivial pour les débutants.

Avant de pouvoir commencer à utiliser WP Sticky, nous devons d’abord le télécharger et installer le plugin. Comme il s’agit d’un processus très simple, nous n’y perdrons pas de temps. Au lieu de cela, passons directement à la création de notre tout premier en-tête collant.

La première chose que nous devons faire est d’entrer dans la section plugins de notre panneau d’administration WordPress ; à partir de là, sélectionnez WP Sticky Pro puis cliquez sur Paramètres.

Nous serons accueillis avec ces options où nous devrons sélectionner Ajouter un nouvel élément collant.

Une fois cela fait, nous verrons une nouvelle entrée sous l’onglet Your Sticky Elements appelée Sticky Element #1. Félicitations, vous avez créé votre premier élément collant, mais il reste encore beaucoup à faire avant d’avoir un en-tête collant fonctionnel. Comme vous pouvez le constater, il existe peu de catégories de paramètres différentes pour notre élément collant.

Voyons-les plus en détail.

C’est ici que nous nommerons notre élément et choisirons exactement ce que nous voulons rendre collant.

Tout d’abord, nous devons donner un nom à notre élément collant ; dans ce cas, ce sera Sticky Header.

Ensuite, nous devons localiser et sélectionner un élément que nous voulons rendre collant. Il y a deux façons d’y parvenir.

Sélecteur visuel

C’est l’option la plus pratique et la plus simple. Allez simplement dans la section Basique et sélectionnez l’option Choisir un élément.

Une fois que vous avez fait cela, votre site Web s’ouvrira avec le menu WP Sticky en haut, signalant que vous êtes entré dans le sélecteur visuel. Si vous passez votre pointeur sur certains des éléments, vous remarquerez un rectangle de ligne brisée jaunâtre, visualisant la zone que vous avez sélectionnée. Cliquez dessus avec le clic gauche, pour le sélectionner.

Cela vous ramènera à la page des paramètres de WP Sticky, où vous verrez l’ identifiant unique de l’élément sélectionné. Dans notre cas, cela ressemble à ceci.

Ensuite, cliquez sur le bouton Enregistrer les modifications dans le coin supérieur droit, et nous avons terminé.

Ecriture de l’identifiant unique

Si vous préférez et connaissez l’identifiant unique de l’élément que vous souhaitez rendre collant, au lieu de le sélectionner visuellement, vous pouvez simplement écrire son identifiant unique.

Options visuelles

Une fois que nous avons fini de nommer et de sélectionner notre élément, il est temps d’en faire un en-tête et de le personnaliser. WP Sticky nous offre de nombreuses options pour le faire.

Comme nous voulons faire un en-tête, nous allons laisser cette option dans son état par défaut, qui est Top. Si vous changez d’avis ou si les exigences changent, vous pouvez également sélectionner l’option Bottom.

Espace entre le haut de la page et l’élément collant

Parfois, nos éléments collants peuvent se rapprocher trop du haut de la page. Nous pouvons corriger cela manuellement en tapant le nombre de pixels entre le haut de la page et notre élément collant désigné.

Par défaut, cette option n’est pas définie car la plupart des éléments seront correctement placés automatiquement.

Vérifier la barre d’outils d’administration

Si votre site Web dispose d’une barre d’outils d’administration spécialisée, cela peut obstruer votre en-tête collant. Si tel est le cas, il vous suffit de cocher cette option et le problème sera résolu. WP Sticky reconnaîtra automatiquement la taille de la barre d’outils et réagira en conséquence.

Parfois, vous souhaitez avoir des comportements différents en fonction de l’appareil que vos visiteurs utilisent pour consulter votre site Web. Vous ne voudrez peut-être pas avoir un en-tête collant sur les appareils mobiles. WP Sticky vous donne la possibilité de sélectionner les catégories d’appareils qui auront le comportement collant. Dans notre cas, nous refuserons les petits et moyens appareils.

Un autre cas qui pourrait nécessiter une personnalisation manuelle est s’il y a des éléments qui apparaissent sur votre en-tête collant. Pour éviter que cela ne se produise, vous devrez augmenter l’index Z de votre en-tête collant.

Si vous n’êtes pas sûr des valeurs d’index Z des éléments qui chevauchent votre en-tête, saisissez la valeur maximale, 99999, et cela résoudra le problème.

Vous pouvez utiliser deux paramètres d’effet. Montée en fondu et glissement vers le bas. Maintenant, celui que vous allez utiliser dépend entièrement de vos préférences personnelles et de l’apparence souhaitée du site Web. Expérimentez jusqu’à ce que vous vous décidiez.

Une autre personnalisation visuelle de l’élément collant. Selon le reste du site Web, à l’aide du curseur, nous pouvons rendre l’élément collant plus ou moins transparent.

Que se passe-t-il si vous ne voulez pas que certaines parties de votre site Web aient l’en-tête collant ? Eh bien, ce curseur vous permet de personnaliser le point de départ et le point d’arrivée où votre en-tête collant sera affiché sur votre site Web pendant que vous continuez à faire défiler.

Couleur de l’arrière plan

Et si notre élément collant n’était pas si clairement visible? Le plugin est livré avec la possibilité de le faire ressortir en lui donnant une couleur d’arrière-plan. Pour ce faire, cliquez sur le bouton ci-dessous et choisissez la couleur de fond souhaitée. C’est si facile.

Si vous souhaitez apporter encore plus de modifications à votre élément collant qui ne sont pas couvertes par les options mentionnées ci-dessus, il existe un champ dans lequel vous pouvez ajouter une personnalisation via CSS. Une chose importante à garder à l’esprit, dans ce cas, est qu’il n’est pas nécessaire d’envelopper les styles dans les sélecteurs. Vous n’avez pas besoin d’écrire .classname{color:#FFF;}, à la place tout ce que vous avez à écrire est color:#FFF;

Nous laisserons ce champ vide car il n’est plus nécessaire de personnaliser notre en-tête de démonstration collant.

Après avoir modifié tous les paramètres souhaités, n’oubliez pas d’enregistrer les modifications. Cela fait, nous pouvons continuer et cliquer sur le bouton Aperçu collant dans le coin supérieur droit pour prévisualiser les modifications que nous avons apportées jusqu’à présent.

En conclusion

WP Sticky est un excellent ajout à n’importe quel site Web et facilite grandement le travail du développeur. Si simple à utiliser, tout en offrant des options de personnalisation détaillées et approfondies, ce plugin est garanti pour vous aider à créer l’en-tête collant parfait pour votre site Web. C’est une excellente nouvelle car un en-tête collant peut augmenter considérablement les conversions de sites Web.

WP Sticky a une version Pro, qui inclut toutes les options susmentionnées et coûte 5,99 $ par mois ou 39 $ pour une licence à vie. Plusieurs plans tarifaires différents sont également proposés pour les équipes et les agences.

Vallery Henings

Vallery Henings est un rédacteur et rédacteur de contenu spécialisé dans les blogs fantômes, les campagnes de marketing par e-mail et les pages de vente. Elle aime aussi les voyages en voiture, les biscuits au beurre de cacahuète et un nom de chien Mimy.