{"id":366119,"date":"2022-11-19T16:04:00","date_gmt":"2022-11-19T13:04:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=366119"},"modified":"2023-01-20T19:27:25","modified_gmt":"2023-01-20T16:27:25","slug":"comment-creer-un-en-tete-collant-dans-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-un-en-tete-collant-dans-wordpress\/","title":{"rendered":"Comment cr\u00e9er un en-t\u00eate collant dans WordPress"},"content":{"rendered":"\n

Avant d’expliquer comment cr\u00e9er un en-t\u00eate collant dans WordPress, comprenons d’abord ce qu’ils sont et pourquoi nous pouvons vouloir les utiliser. Les \u00e9l\u00e9ments collants, ou \u00e9l\u00e9ments fixes, sont des types particuliers d’\u00e9l\u00e9ments qui restent toujours visibles et ne changent pas de position lorsque l’utilisateur fait d\u00e9filer vers le haut ou vers le bas<\/strong>. Ces \u00e9l\u00e9ments sont accessibles \u00e0 tout moment de par leur positionnement et sont donc tr\u00e8s utiles pour les menus ou autres options de navigation.<\/p>\n

Vous souhaitez offrir \u00e0 vos utilisateurs autant d’options pratiques que possible, pour rendre votre contenu facilement accessible et r\u00e9duire la frustration des utilisateurs. En utilisant les \u00e9l\u00e9ments collants, les utilisateurs peuvent rapidement passer d’une page de votre site Web \u00e0 l’autre et trouver exactement ce dont ils ont besoin<\/strong>. Tout ce confort et cette facilit\u00e9 d’utilisation signifient que votre exp\u00e9rience utilisateur sera bien meilleure et que vous aurez une meilleure r\u00e9tention des utilisateurs.<\/p>\n

Maintenant, nous allons aborder l’un des principaux types d’\u00e9l\u00e9ments collants, l’en-t\u00eate collant, et un outil g\u00e9nial qui peut nous aider \u00e0 cr\u00e9er et personnaliser facilement ces \u00e9l\u00e9ments. L’outil en question s’appelle WP Sticky<\/a>.<\/p>\n

Il existe de nombreuses fa\u00e7ons diff\u00e9rentes de cr\u00e9er des en-t\u00eates collants en plus de WP Sticky. Vous pouvez m\u00eame cr\u00e9er ces \u00e9l\u00e9ments collants en utilisant du code HTML et CSS pur<\/strong>, mais cela n\u00e9cessite des connaissances techniques et prend du temps<\/strong>. Ce plugin est une solution beaucoup plus simple au probl\u00e8me et est extr\u00eamement convivial pour les d\u00e9butants.<\/p>\n

Avant de pouvoir commencer \u00e0 utiliser WP Sticky, nous devons d’abord le t\u00e9l\u00e9charger et installer le plugin<\/a>. Comme il s’agit d’un processus tr\u00e8s simple, nous n’y perdrons pas de temps. Au lieu de cela, passons directement \u00e0 la cr\u00e9ation de notre tout premier en-t\u00eate collant.<\/p>\n

La premi\u00e8re chose que nous devons faire est d’entrer dans la section plugins de notre panneau d’administration WordPress ; \u00e0 partir de l\u00e0, s\u00e9lectionnez WP Sticky Pro puis cliquez sur Param\u00e8tres<\/strong>.<\/p>\n

Nous serons accueillis avec ces options o\u00f9 nous devrons s\u00e9lectionner Ajouter un nouvel \u00e9l\u00e9ment collant.<\/p>\n

\"Comment<\/a><\/p>\n

Une fois cela fait, nous verrons une nouvelle entr\u00e9e sous l’onglet Your Sticky Elements appel\u00e9e Sticky Element #1<\/strong>. F\u00e9licitations, vous avez cr\u00e9\u00e9 votre premier \u00e9l\u00e9ment collant<\/strong>, mais il reste encore beaucoup \u00e0 faire avant d’avoir un en-t\u00eate collant fonctionnel. Comme vous pouvez le constater, il existe peu de cat\u00e9gories de param\u00e8tres diff\u00e9rentes pour notre \u00e9l\u00e9ment collant.<\/p>\n

\"Comment<\/a><\/p>\n

Voyons-les plus en d\u00e9tail.<\/p>\n

C’est ici que nous nommerons notre \u00e9l\u00e9ment et choisirons exactement ce que nous voulons rendre collant<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Tout d’abord, nous devons donner un nom \u00e0 notre \u00e9l\u00e9ment collant ; dans ce cas, ce sera Sticky Header.<\/p>\n

Ensuite, nous devons localiser et s\u00e9lectionner un \u00e9l\u00e9ment que nous voulons rendre collant<\/strong>. Il y a deux fa\u00e7ons d’y parvenir.<\/p>\n

S\u00e9lecteur visuel<\/h3>\n

C’est l’option la plus pratique et la plus simple. Allez simplement dans la section Basique et s\u00e9lectionnez l’option Choisir un \u00e9l\u00e9ment.<\/p>\n

\"Comment<\/a><\/p>\n

Une fois que vous avez fait cela, votre site Web s’ouvrira avec le menu WP Sticky en haut<\/strong>, signalant que vous \u00eates entr\u00e9 dans le s\u00e9lecteur visuel. Si vous passez votre pointeur sur certains des \u00e9l\u00e9ments, vous remarquerez un rectangle de ligne bris\u00e9e jaun\u00e2tre, visualisant la zone que vous avez s\u00e9lectionn\u00e9e. Cliquez dessus avec le clic gauche, pour le s\u00e9lectionner.<\/p>\n

\"Comment<\/a><\/p>\n

Cela vous ram\u00e8nera \u00e0 la page des param\u00e8tres de WP Sticky<\/strong>, o\u00f9 vous verrez l’ identifiant unique de l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9<\/strong>. Dans notre cas, cela ressemble \u00e0 ceci.<\/p>\n

\"Comment<\/a><\/p>\n

Ensuite, cliquez sur le bouton Enregistrer les modifications dans le coin sup\u00e9rieur droit, et nous avons termin\u00e9.<\/p>\n

Ecriture de l’identifiant unique<\/h3>\n

Si vous pr\u00e9f\u00e9rez et connaissez l’identifiant unique de l’\u00e9l\u00e9ment que vous souhaitez rendre collant, au lieu de le s\u00e9lectionner visuellement, vous pouvez simplement \u00e9crire son identifiant unique<\/strong>.<\/p>\n

Options visuelles<\/h2>\n

Une fois que nous avons fini de nommer et de s\u00e9lectionner notre \u00e9l\u00e9ment, il est temps d’en faire un en-t\u00eate et de le personnaliser. WP Sticky nous offre de nombreuses options pour le faire.<\/p>\n

Comme nous voulons faire un en-t\u00eate, nous allons laisser cette option dans son \u00e9tat par d\u00e9faut, qui est Top. Si vous changez d’avis ou si les exigences changent, vous pouvez \u00e9galement s\u00e9lectionner l’option Bottom<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Espace entre le haut de la page et l’\u00e9l\u00e9ment collant<\/h3>\n

Parfois, nos \u00e9l\u00e9ments 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 \u00e9l\u00e9ment collant d\u00e9sign\u00e9<\/strong>.<\/p>\n

\"Comment<\/a><\/p>\n

Par d\u00e9faut, cette option n’est pas d\u00e9finie car la plupart des \u00e9l\u00e9ments seront correctement plac\u00e9s automatiquement.<\/p>\n

V\u00e9rifier la barre d’outils d’administration<\/h3>\n

Si votre site Web dispose d’une barre d’outils d’administration sp\u00e9cialis\u00e9e, cela peut obstruer votre en-t\u00eate collant. Si tel est le cas, il vous suffit de cocher cette option et le probl\u00e8me sera r\u00e9solu<\/strong>. WP Sticky reconna\u00eetra automatiquement la taille de la barre d’outils et r\u00e9agira en cons\u00e9quence.<\/p>\n

\"Comment<\/a><\/p>\n

Parfois, vous souhaitez avoir des comportements diff\u00e9rents en fonction de l’appareil que vos visiteurs utilisent pour consulter votre site Web. Vous ne voudrez peut-\u00eatre pas avoir un en-t\u00eate collant sur les appareils mobiles. WP Sticky vous donne la possibilit\u00e9 de s\u00e9lectionner les cat\u00e9gories d’appareils qui auront le comportement collant. Dans notre cas, nous refuserons les petits et moyens appareils.<\/p>\n

\"Comment<\/a><\/p>\n

Un autre cas qui pourrait n\u00e9cessiter une personnalisation manuelle est s’il y a des \u00e9l\u00e9ments qui apparaissent sur votre en-t\u00eate collant. Pour \u00e9viter que cela ne se produise, vous devrez augmenter l’index Z de votre en-t\u00eate collant.<\/p>\n

Si vous n’\u00eates pas s\u00fbr des valeurs d’index Z des \u00e9l\u00e9ments qui chevauchent votre en-t\u00eate, saisissez la valeur maximale, 99999, et cela r\u00e9soudra le probl\u00e8me.<\/p>\n

\"Comment<\/a><\/p>\n

Vous pouvez utiliser deux param\u00e8tres d’effet. Mont\u00e9e en fondu et glissement vers le bas. Maintenant, celui que vous allez utiliser d\u00e9pend enti\u00e8rement de vos pr\u00e9f\u00e9rences personnelles et de l’apparence souhait\u00e9e du site Web. Exp\u00e9rimentez jusqu’\u00e0 ce que vous vous d\u00e9cidiez.<\/p>\n

\"Comment<\/a><\/p>\n

Une autre personnalisation visuelle de l’\u00e9l\u00e9ment collant. Selon le reste du site Web, \u00e0 l’aide du curseur, nous pouvons rendre l’\u00e9l\u00e9ment collant plus ou moins transparent.<\/p>\n

\"Comment<\/a><\/p>\n

Que se passe-t-il si vous ne voulez pas que certaines parties de votre site Web aient l’en-t\u00eate collant\u00a0? Eh bien, ce curseur vous permet de personnaliser le point de d\u00e9part et le point d’arriv\u00e9e o\u00f9 votre en-t\u00eate collant sera affich\u00e9 sur votre site Web pendant que vous continuez \u00e0 faire d\u00e9filer.<\/p>\n

\"Comment<\/a><\/p>\n

Couleur de l’arri\u00e8re plan<\/h3>\n

Et si notre \u00e9l\u00e9ment collant n’\u00e9tait pas si clairement visible? Le plugin est livr\u00e9 avec la possibilit\u00e9 de le faire ressortir en lui donnant une couleur d’arri\u00e8re-plan. Pour ce faire, cliquez sur le bouton ci-dessous et choisissez la couleur de fond souhait\u00e9e. C’est si facile.<\/p>\n

\"Comment<\/a><\/p>\n

Si vous souhaitez apporter encore plus de modifications \u00e0 votre \u00e9l\u00e9ment collant qui ne sont pas couvertes par les options mentionn\u00e9es ci-dessus, il existe un champ dans lequel vous pouvez ajouter une personnalisation via CSS. Une chose importante \u00e0 garder \u00e0 l’esprit, dans ce cas, est qu’il n’est pas n\u00e9cessaire d’envelopper les styles dans les s\u00e9lecteurs. Vous n’avez pas besoin d’\u00e9crire .classname{color:#FFF;}, \u00e0 la place tout ce que vous avez \u00e0 \u00e9crire est color:#FFF;<\/p>\n

\"Comment<\/a><\/p>\n

Nous laisserons ce champ vide car il n’est plus n\u00e9cessaire de personnaliser notre en-t\u00eate de d\u00e9monstration collant.<\/p>\n

Apr\u00e8s avoir modifi\u00e9 tous les param\u00e8tres souhait\u00e9s, n’oubliez pas d’enregistrer les modifications. Cela fait, nous pouvons continuer et cliquer sur le bouton Aper\u00e7u collant dans le coin sup\u00e9rieur droit pour pr\u00e9visualiser les modifications que nous avons apport\u00e9es jusqu’\u00e0 pr\u00e9sent.<\/p>\n

En conclusion<\/h2>\n

WP Sticky est un excellent ajout \u00e0 n’importe quel site Web et facilite grandement le travail du d\u00e9veloppeur. Si simple \u00e0 utiliser, tout en offrant des options de personnalisation d\u00e9taill\u00e9es et approfondies, ce plugin est garanti pour vous aider \u00e0 cr\u00e9er l’en-t\u00eate collant parfait pour votre site Web. C’est une excellente nouvelle car un en-t\u00eate collant peut augmenter consid\u00e9rablement les conversions de sites Web<\/a>.<\/p>\n

WP Sticky a une version Pro, qui inclut toutes les options susmentionn\u00e9es et co\u00fbte 5,99 $ par mois ou 39 $ pour une licence \u00e0 vie. Plusieurs plans tarifaires diff\u00e9rents sont \u00e9galement propos\u00e9s pour les \u00e9quipes et les agences.<\/p>\n

Vallery Henings<\/p>\n

Vallery Henings est un r\u00e9dacteur et r\u00e9dacteur de contenu sp\u00e9cialis\u00e9 dans les blogs fant\u00f4mes, 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\u00e8te et un nom de chien Mimy.<\/p>\n

Source d’enregistrement: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Cr\u00e9ez un en-t\u00eate collant dans WordPress et am\u00e9liorez l’exp\u00e9rience utilisateur de votre site Web.<\/p>\n","protected":false},"author":1,"featured_media":364361,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[568],"tags":[844],"class_list":["post-366119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-les-bases-de-wordpress","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/366119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/comments?post=366119"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/posts\/366119\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media\/364361"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/media?parent=366119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/categories?post=366119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fr\/wp-json\/wp\/v2\/tags?post=366119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}