{"id":55918,"date":"2022-04-22T07:27:35","date_gmt":"2022-04-22T06:27:35","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=55918&preview=true&preview_id=55918"},"modified":"2024-09-18T09:44:15","modified_gmt":"2024-09-18T08:44:15","slug":"en-tetes-epingles-elementor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/","title":{"rendered":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s"},"content":{"rendered":"

Que vous soyez un aspirant d\u00e9veloppeur web<\/a> ou un entrepreneur en eCommerce, vos sites web partagent probablement certains \u00e9l\u00e9ments essentiels. Par exemple, chaque site a besoin d’un en-t\u00eate clair pour aider les visiteurs \u00e0 naviguer entre les diff\u00e9rentes pages. Cependant, si vous utilisez un constructeur de pages<\/a> comme Elementor pour r\u00e9duire le codage, vous vous demandez peut-\u00eatre s’il est encore possible de r\u00e9aliser un en-t\u00eate \u00e9pingl\u00e9 Elementor sophistiqu\u00e9 mais convivial.<\/p>\n

Heureusement, l’utilisation d’un en-t\u00eate Elementor<\/a> peut offrir \u00e0 vos utilisateurs un moyen simplifi\u00e9 d’explorer votre site web. Avec ce constructeur de pages populaire<\/a>, vous pouvez cr\u00e9er une grande vari\u00e9t\u00e9 d’en-t\u00eates qui ne disparaissent pas lorsque les utilisateurs font d\u00e9filer un site. C’est cette caract\u00e9ristique qui les rend \u00ab \u00e9pinlg\u00e9s \u00bb.<\/p>\n

Dans cet article, nous verrons comment fonctionne un en-t\u00eate \u00e9pinlg\u00e9 et quels sont les avantages de son utilisation. Nous vous montrerons ensuite comment cr\u00e9er un en-t\u00eate Elementor \u00e9pinlg\u00e9 avec les versions gratuite et professionnelle de l’outil. Enfin, nous vous proposerons des options de personnalisation suppl\u00e9mentaires pour vos en-t\u00eates \u00e9pinlg\u00e9s \u00e0 l’aide de CSS. C’est parti !<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Introduction aux en-t\u00eates \u00e9pinlg\u00e9s d’Elementor<\/h2>\n

Aucun site web n’est identique \u00e0 un autre. Cependant, il existe quelques caract\u00e9ristiques que les sites web de qualit\u00e9 ont en commun.<\/p>\n

Si vous exploitez un site \u00e0 plusieurs pages, l’un de ces \u00e9l\u00e9ments est un en-t\u00eate. Il s’agit de la barre horizontale situ\u00e9e en haut de toute page qui contient des informations utiles.<\/p>\n

G\u00e9n\u00e9ralement, un en-t\u00eate comprend votre menu de navigation avec des pages telles que \u00c0 propos<\/strong>\u00a0ou Nous contacter<\/strong>:<\/p>\n

\"En-t\u00eate
En-t\u00eate du site Kinsta<\/figcaption><\/figure>\n

Lorsque les visiteurs explorent votre page, ils s’attendent probablement \u00e0 un en-t\u00eate organis\u00e9 pour les guider sur votre site. L’exp\u00e9rience utilisateur (UX) \u00e9tant la cl\u00e9 du succ\u00e8s d’un site web, il serait sage de cr\u00e9er un en-t\u00eate intuitif et simple. C’est l\u00e0 qu’un en-t\u00eate \u00e9pingl\u00e9, con\u00e7u avec Elementor, peut faire une grande diff\u00e9rence.<\/p>\n\n

Comment fonctionne un en-t\u00eate \u00e9pingl\u00e9<\/h3>\n

Avant d’apprendre comment fonctionne un en-t\u00eate Elementor \u00e9pingl\u00e9, v\u00e9rifions comment se comporte un en-t\u00eate standard lorsque vous faites d\u00e9filer une page :<\/p>\n

\"Exemple
Exemple d’en-t\u00eate standard<\/figcaption><\/figure>\n

Comme vous pouvez le voir dans l’exemple ci-dessus, cet en-t\u00eate contient une barre de navigation complexe avec des cat\u00e9gories telles que Soldes<\/strong>, V\u00eatements<\/strong>, Chaussures<\/strong>, et plus encore. Ces onglets aideront sans aucun doute les acheteurs \u00e0 trouver ce qu’ils recherchent. Cependant, lorsque vous faites d\u00e9filer la page vers le bas, l’en-t\u00eate dispara\u00eet.<\/p>\n

Les utilisateurs peuvent trouver cela frustrant, car cela les oblige \u00e0 revenir en haut de la page pour acc\u00e9der au menu de navigation. Heureusement, un en-t\u00eate \u00e9pingl\u00e9 offre une solution simple.<\/p>\n

En restant ou en \u00ab collant \u00bb en haut de votre page, un en-t\u00eate \u00e9pingl\u00e9 peut am\u00e9liorer consid\u00e9rablement l’UX de votre site web :<\/p>\n

\"Exemple
Exemple d’en-t\u00eate \u00e9pingl\u00e9<\/figcaption><\/figure>\n

Lorsque la conception de votre site comprend un en-t\u00eate \u00e9pingl\u00e9, vos utilisateurs peuvent rapidement passer \u00e0 de nouvelles pages sans perdre de temps \u00e0 les faire d\u00e9filer.<\/p>\n

De plus, avec cet \u00e9l\u00e9ment fixe, vous pouvez inclure votre logo \u00e0 l’avant et au centre \u00e0 tout moment. Cette caract\u00e9ristique peut aider les utilisateurs \u00e0 se souvenir plus facilement de votre marque et les encourager \u00e0 rester plus longtemps sur votre site.<\/p>\n

Quand vous devriez envisager d’utiliser un en-t\u00eate \u00e9pingl\u00e9<\/h3>\n

Les visiteurs seront moins susceptibles de se perdre lorsqu’ils exploreront des sites plus grands avec un en-t\u00eate \u00e9pingl\u00e9. En tant que tel, vous voudrez peut-\u00eatre tirer parti de cette fonctionnalit\u00e9 si votre site web comporte de nombreuses pages. C’est pourquoi vous verrez souvent des en-t\u00eates \u00e9pingl\u00e9s sur des sites eCommerce<\/a>.<\/p>\n

Un en-t\u00eate \u00e9pingl\u00e9 peut \u00eatre particuli\u00e8rement utile si vous souhaitez inclure une fonction de recherche dans votre en-t\u00eate. Ainsi, lorsque les utilisateurs font d\u00e9filer les pages et se rendent compte qu’ils ne trouvent pas ce qu’ils cherchent, ils peuvent rapidement saisir une requ\u00eate dans la barre de recherche.<\/p>\n

En outre, un en-t\u00eate \u00e9pingl\u00e9 peut changer la donne si vous g\u00e9rez un blog mon\u00e9tis\u00e9<\/a> qui affiche tous vos articles sur la page d’accueil. En g\u00e9n\u00e9ral, cet en-t\u00eate peut garantir que votre site web est maintenable et \u00e9volutif<\/a>.<\/p>\n

Toutefois, si votre site ne comporte qu’une seule page, il n’est pas tr\u00e8s judicieux de transformer votre en-t\u00eate de cette mani\u00e8re. En outre, si vous avez une bonne quantit\u00e9 de pages sur votre site web, mais que chacune d’entre elles est relativement courte, vous n’avez probablement pas besoin non plus d’un en-t\u00eate \u00e9pingl\u00e9.<\/p>\n

Dans l’ensemble, un en-t\u00eate \u00e9pingl\u00e9 r\u00e9duit le temps de d\u00e9filement et augmente la convivialit\u00e9 et la navigation du site. Si vous n’\u00eates pas s\u00fbr que cette fonctionnalit\u00e9 soit b\u00e9n\u00e9fique pour votre site web, vous pouvez faire un audit rapide de la longueur de vos pages et d\u00e9cider ensuite.<\/p>\n

Comment cr\u00e9er un en-t\u00eate Elementor \u00e9pingl\u00e9<\/h2>\n

Dans ce tutoriel, nous allons vous guider \u00e0 travers les \u00e9tapes de la cr\u00e9ation d’un en-t\u00eate Elementor \u00e9pingl\u00e9. Nous supposerons que vous avez d\u00e9j\u00e0 install\u00e9 et activ\u00e9 l’extension Elementor<\/a> sur votre site.<\/p>\n

Nous allons vous expliquer comment cr\u00e9er cet en-t\u00eate avec la version gratuite et la version Pro d’Elementor<\/a>. Vous serez probablement heureux d’apprendre que vous n’aurez pas besoin d’apprendre le langage HTML<\/a> ou de modifier le code<\/a>\u00a0de mani\u00e8re significative pour le faire !<\/p>\n

Comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide d’Elementor (gratuit)<\/h3>\n

La version gratuite d’Elementor offre des fonctionnalit\u00e9s puissantes pour la cr\u00e9ation de pages. Toutefois, si vous souhaitez apporter des modifications \u00e0 vos en-t\u00eates et pieds de page, vous aurez besoin de quelques outils suppl\u00e9mentaires (\u00e9galement gratuits).<\/p>\n

Dans cette optique, voyons comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide d’Elementor !<\/p>\n

\u00c9tape 1 : Installez et activez vos plugins essentiels<\/h4>\n

Heureusement, quelques outils fiables peuvent facilement \u00e9tendre les fonctionnalit\u00e9s de la version gratuite d’Elementor.<\/p>\n

Naviguez vers votre tableau de bord WordPress pour trouver votre premier outil. Allez dans Extensions > Ajouter<\/strong>\u00a0et recherchez ElementsKit Elementor addons<\/a> en utilisant la fonction de recherche :<\/p>\n

\"Installer
Installer et activer ElementsKit<\/figcaption><\/figure>\n

Installez et activez<\/a> cette extension comme vous le feriez habituellement. Lorsque vous aurez termin\u00e9 ce processus, vous serez amen\u00e9 \u00e0 votre page principale des extensions :<\/p>\n

\"Extension
Extension install\u00e9e<\/figcaption><\/figure>\n

Maintenant, cliquez \u00e0 nouveau sur Ajouter<\/strong> pour localiser l’extension Sticky Header Effects for Elementor<\/a> avec la barre de recherche :<\/p>\n

\"Sticky
Sticky Header Effects for Elementor<\/figcaption><\/figure>\n

R\u00e9p\u00e9tez le processus d’installation et d’activation de cet outil, et vous \u00eates pr\u00eat pour l’\u00e9tape suivante !<\/p>\n

\u00c9tape 2 : Cr\u00e9ez votre menu<\/h4>\n

Avant de pouvoir faire n’importe quel type d’en-t\u00eate, vous aurez besoin d’un menu de navigation. Nous allons cr\u00e9er un menu simple avec les \u00e9l\u00e9ments les plus courants. Il comprendra un logo, des pages et un appel \u00e0 l’action (CTA).<\/p>\n

Pour cr\u00e9er votre propre menu dans votre tableau de bord WordPress, allez dans Apparence > Menus<\/strong>. \u00c0 c\u00f4t\u00e9 du champ Nom du menu<\/strong>, donnez au v\u00f4tre un nom descriptif. Nous allons appeler le n\u00f4tre \u00ab Sticky Header Menu \u00bb :<\/p>\n

\"Donnez
Donnez un nom \u00e0 votre menu d’en-t\u00eate \u00e9pingl\u00e9<\/figcaption><\/figure>\n

Veillez \u00e0 choisir En-t\u00eate<\/strong> comme Emplacement d’affichage<\/strong>. Vous pouvez \u00e9galement cocher la case pour ajouter automatiquement de nouvelles pages \u00e0 votre menu.<\/p>\n

Ensuite, vous devrez ajouter des pages \u00e0 votre menu. Dans la section Pages<\/strong> \u00e0 gauche, cochez les cases des pages que vous souhaitez inclure, puis cliquez sur Ajouter au menu<\/strong>:<\/p>\n

\"Ajouter
Ajouter des pages \u00e0 votre menu d’en-t\u00eate \u00e9pingl\u00e9<\/figcaption><\/figure>\n

Vous verrez ensuite vos pages transf\u00e9r\u00e9es dans votre menu \u00e0 droite. Allez-y et cliquez sur Enregistrer le menu<\/strong> en bas \u00e0 droite de votre \u00e9cran :<\/p>\n

\"Enregistrer
Enregistrer votre menu d’en-t\u00eate \u00e9pingl\u00e9<\/figcaption><\/figure>\n

Comme vous pouvez le voir, nous avons ajout\u00e9 quelques pages de base, notamment Contact Us<\/strong>, About<\/strong><\/a>, et Sample Page<\/strong>. Vous voudrez peut-\u00eatre r\u00e9organiser vos pages pour que la s\u00e9quence soit intuitive pour les visiteurs.<\/p>\n

\u00c9tape 3 : Cr\u00e9ez votre en-t\u00eate<\/h4>\n

Votre menu de navigation existe maintenant, mais vous ne pouvez y acc\u00e9der nulle part. C’est parce que vous devez cr\u00e9er un en-t\u00eate pour lui.<\/p>\n

Pour cela, allez dans l’onglet ElementsKit <\/strong>dans votre menu de gauche. Si vous ne l’avez pas encore fait, vous devrez cliquer sur quelques pages de d\u00e9marrage \u00e0 ce stade.<\/p>\n

Chacun aura probablement des pr\u00e9f\u00e9rences diff\u00e9rentes, alors prenez votre temps pour s\u00e9lectionner les fonctionnalit\u00e9s que vous souhaitez activer. Toutefois, assurez-vous que le module Header Footer<\/strong> est sur ON <\/strong>:<\/p>\n

\"Activer
Activer l’option de pied de page d’en-t\u00eate dans le kit Elements<\/figcaption><\/figure>\n

Maintenant, allez dans ElementsKit > Header Footer<\/strong>:<\/p>\n

\"Ajouter
Ajouter un nouveau mod\u00e8le<\/figcaption><\/figure>\n

Cette page sera vide puisque vous n’avez pas encore de mod\u00e8le d’en-t\u00eate ou de pied de page. Cliquez sur Ajouter<\/strong>\u00a0en haut de votre \u00e9cran pour cr\u00e9er votre premier mod\u00e8le d’en-t\u00eate :<\/p>\n

\"Fill
Remplir les r\u00e9glages du mod\u00e8le<\/figcaption><\/figure>\n

Dans l’\u00e9cran ci-dessus, saisissez un nom descriptif et assurez-vous que l’option En-t\u00eate<\/strong> est s\u00e9lectionn\u00e9e comme Type<\/strong>. Puisque vous utilisez la version gratuite, cet en-t\u00eate appara\u00eetra sur l’ensemble du site<\/strong>.<\/p>\n

Assurez-vous de basculer l’interrupteur Activer\/D\u00e9sactiver<\/strong> sur ON<\/strong> et cliquez sur Enregistrer les changements<\/strong>. Maintenant, vous serez ramen\u00e9 \u00e0 votre page de mod\u00e8les, o\u00f9 vous pouvez voir votre nouveau mod\u00e8le d’en-t\u00eate list\u00e9 :<\/p>\n

\"Le
Le nouveau mod\u00e8le d’en-t\u00eate est maintenant disponible<\/figcaption><\/figure>\n

Vous pouvez \u00e9galement remarquer une ic\u00f4ne verte Active<\/strong>\u00a0\u00e0 c\u00f4t\u00e9 de cet en-t\u00eate. Cependant, il n’est pas encore en ligne.<\/p>\n

Pour compl\u00e9ter votre en-t\u00eate, survolez-le dans la liste des mod\u00e8les, et cliquez sur Modifier dans Elementor<\/strong>, juste en dessous de son nom. Cela vous am\u00e8nera \u00e0 l’\u00e9cran Elementor Builder.<\/p>\n

Ici, cliquez sur l’ic\u00f4ne ElementsKit<\/strong>:<\/p>\n

\"Cliquez
Cliquez sur l’ic\u00f4ne ElementsKit<\/figcaption><\/figure>\n

Sur l’\u00e9cran suivant, s\u00e9lectionnez l’onglet Sections<\/strong>:<\/p>\n

\"S\u00e9lectionnez
S\u00e9lectionnez l’onglet Sections<\/figcaption><\/figure>\n

Faites d\u00e9filer un peu vers le bas pour trouver une section d’en-t\u00eate qui vous pla\u00eet, puis cliquez sur Ins\u00e9rer<\/strong>. Nous avons choisi En-t\u00eate – Section 5<\/strong>:<\/p>\n

\"Ins\u00e9rez
Ins\u00e9rez l’en-t\u00eate o\u00f9 vous voulez<\/figcaption><\/figure>\n

Comme vous pouvez probablement le constater, notre menu de navigation n’est pas visible. Alors allons-y et ajoutons-le \u00e0 notre mod\u00e8le d’en-t\u00eate. Pour cela, survolez la section du menu de navigation de votre en-t\u00eate. Dans ce cas, c’est juste au centre :<\/p>\n

\"Survolez
Survolez la section du menu de navigation de l’en-t\u00eate<\/figcaption><\/figure>\n

Cliquez sur cette zone, et vos R\u00e9glages de menu<\/strong> devraient appara\u00eetre dans le panneau de gauche. Maintenant, localisez le champ S\u00e9lectionner le menu<\/strong>. Dans la liste d\u00e9roulante, choisissez le menu que vous avez cr\u00e9\u00e9 plus t\u00f4t :<\/p>\n

\"Choisissez
Choisissez le menu que vous avez cr\u00e9\u00e9 pr\u00e9c\u00e9demment<\/figcaption><\/figure>\n

\u00c0 ce stade, vous devriez voir le menu s’afficher dans votre mod\u00e8le d’en-t\u00eate. Cliquez sur Mise \u00e0 jour<\/strong>\u00a0dans le coin inf\u00e9rieur gauche de l’\u00e9cran, et votre en-t\u00eate standard est termin\u00e9.<\/p>\n

Voyons comment cela fonctionne en action :<\/p>\n

\"Nouvel
Nouvel en-t\u00eate<\/figcaption><\/figure>\n

Comme vous pouvez le voir, notre en-t\u00eate est superbe. Cependant, il dispara\u00eet lorsque nous faisons d\u00e9filer la page vers le bas. Voyons comment nous pouvons le faire tenir.<\/p>\n

\u00c9tape 4 : \u00e9pingler votre en-t\u00eate<\/h4>\n

Pour notre derni\u00e8re \u00e9tape, allez dans ElementsKit > En-t\u00eate et pied de page > Modifier avec Elementor<\/strong>. S\u00e9lectionnez ensuite votre en-t\u00eate et cliquez sur l’ic\u00f4ne centrale avec six points :<\/p>\n

\"Cliquez
Cliquez sur l’ic\u00f4ne en pointill\u00e9s<\/figcaption><\/figure>\n

Lorsque vous la survolez, vous verrez que cela vous permet de modifier la section<\/strong>. Une fois que vous aurez cliqu\u00e9 dessus, vos options d’\u00e9dition appara\u00eetront dans le panneau de gauche.<\/p>\n

Cliquez sur l’onglet Avanc\u00e9<\/strong> et faites d\u00e9filer la page jusqu’\u00e0 Effets d’en-t\u00eate \u00e9pingl\u00e9s<\/strong>. Il y aura un message d’avertissement indiquant que l’extension ne contr\u00f4le pas l’en-t\u00eate \u00e9pingl\u00e9, mais vous pouvez ne pas en tenir compte. Puisque nous avons \u00e9galement ajout\u00e9 l’extension Sticky Header Effects for Elementor, il fonctionnera parfaitement.<\/p>\n

Activez maintenant l’en-t\u00eate \u00e9pingl\u00e9 d’Elementor en basculant l’interrupteur sur ON <\/strong>:<\/p>\n

\"Activer
Activer l’en-t\u00eate \u00e9pingl\u00e9 d’Elementor<\/figcaption><\/figure>\n

En fonction de votre th\u00e8me, votre en-t\u00eate \u00e9pingl\u00e9 peut sembler transparent. Si c’est le cas, vous voudrez peut-\u00eatre effectuer un changement stylistique.<\/p>\n

Dans votre panneau Modifier la section<\/strong>, sous Style<\/strong>, allez dans Arri\u00e8re-plan > Couleur<\/strong> et assurez-vous d’avoir s\u00e9lectionn\u00e9 une nuance qui se d\u00e9marquera de votre arri\u00e8re-plan normal :<\/p>\n

\"Effectuez
Effectuez un changement stylistique si n\u00e9cessaire<\/figcaption><\/figure>\n

Cliquez ensuite sur METTRE \u00c0 JOUR<\/strong>. Vous pouvez maintenant pr\u00e9visualiser votre site pour v\u00e9rifier le r\u00e9sultat final :<\/p>\n

\"En-t\u00eate
En-t\u00eate \u00e9pingl\u00e9 en action<\/figcaption><\/figure>\n

C’est tout ! Il s’agit d’un simple en-t\u00eate Elementor \u00e9pingl\u00e9, mais il peut facilement faire passer votre site au niveau sup\u00e9rieur.<\/p>\n

Comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 \u00e0 l’aide d’Elementor Pro<\/h3>\n

Lorsque vous utilisez Elementor Pro, la cr\u00e9ation d’un en-t\u00eate \u00e9pingl\u00e9 est un peu plus simple. Vous pouvez ajouter cette fonctionnalit\u00e9 \u00e0 votre site en seulement trois \u00e9tapes faciles.<\/p>\n

\u00c9tape 1 : Cr\u00e9ez votre menu<\/h4>\n

Pour cr\u00e9er votre menu, allez dans Apparence > Menus<\/strong> dans votre tableau de bord WordPress :<\/p>\n

\"Cr\u00e9er
Cr\u00e9er un menu<\/figcaption><\/figure>\n

Donnez \u00e0 votre menu un nom descriptif, s\u00e9lectionnez Menu principal<\/strong> \u00e0 c\u00f4t\u00e9 de Emplacement<\/strong>, et cliquez sur Cr\u00e9er un menu<\/strong>:<\/p>\n

\"Nommez
Nommez votre menu et s\u00e9lectionnez un emplacement<\/figcaption><\/figure>\n

\u00c0 ce stade, vous devriez avoir quelques pages existantes sur votre site web. S\u00e9lectionnez les pages que vous souhaitez inclure dans votre menu dans le panneau de gauche.<\/p>\n

Cliquez ensuite sur Ajouter au menu<\/strong>, puis sur Enregistrer le menu<\/strong>:<\/p>\n

\"S\u00e9lectionnez
S\u00e9lectionnez les pages \u00e0 inclure dans le menu<\/figcaption><\/figure>\n

Maintenant, vos pages devraient appara\u00eetre sur le c\u00f4t\u00e9 droit sous Structure du menu<\/strong>.<\/p>\n

\u00c9tape 2 : Cr\u00e9ez votre en-t\u00eate<\/h4>\n

Ensuite, nous devons cr\u00e9er notre base. Faisons un en-t\u00eate classique.<\/p>\n

Pour commencer, localisez l’onglet Elementor<\/strong> dans votre colonne lat\u00e9rale de gauche. Juste en dessous, allez dans Mod\u00e8les > Constructeur de th\u00e8me<\/strong>. La page suivante ressemblera \u00e0 ceci :<\/p>\n

\"Trouvez
Trouvez les mod\u00e8les dans le constructeur de th\u00e8me<\/figcaption><\/figure>\n

Comme vous pouvez probablement le constater, avec Elementor Pro, vous pouvez facilement commencer \u00e0 concevoir chaque \u00e9l\u00e9ment de votre site.<\/p>\n

Cliquez sur l’ic\u00f4ne plus (+<\/strong>) sur l’\u00e9l\u00e9ment En-t\u00eate<\/strong>. Vous devriez maintenant voir une popup qui affiche plusieurs blocs d’en-t\u00eate parmi lesquels vous pouvez choisir :<\/p>\n

\"Choisissez
Choisissez parmi plusieurs blocs d’en-t\u00eate<\/figcaption><\/figure>\n

Si vous avez un mod\u00e8le d’en-t\u00eate pr\u00e9existant, vous pouvez le s\u00e9lectionner sous l’onglet Mes mod\u00e8les<\/strong>. Sinon, vous pouvez utiliser l’un des blocs de section fournis avec Elementor Pro.<\/p>\n

Lorsque vous avez fait votre s\u00e9lection, il suffit de passer la souris sur le bloc souhait\u00e9 et de cliquer sur Ins\u00e9rer<\/strong>:<\/p>\n

\"Ins\u00e9rer
Ins\u00e9rer le bloc souhait\u00e9<\/figcaption><\/figure>\n

Ici, vous verrez que ce bloc est accompagn\u00e9 de son propre logo, mais que notre menu de navigation s’est automatiquement rempli. Maintenant, cliquez sur PUBLIER <\/strong>:<\/p>\n

\"Cliquez
Cliquez sur Ajouter une condition dans les r\u00e9glages de publication<\/figcaption><\/figure>\n

L’\u00e9cran suivant vous invite \u00e0 d\u00e9terminer vos R\u00e9glages de publication<\/strong>. Ici, s\u00e9lectionnez Ajouter une condition<\/strong>\u00a0pour d\u00e9cider o\u00f9 vous voulez afficher votre en-t\u00eate :<\/p>\n

\"S\u00e9lectionnez
S\u00e9lectionnez o\u00f9 vous voulez afficher le mod\u00e8le<\/figcaption><\/figure>\n

Vous voudrez probablement s\u00e9lectionner Site entier<\/strong> \u00e0 c\u00f4t\u00e9 de INCLURE<\/strong>. Vous pouvez \u00e9galement exclure certaines zones du site en cliquant sur la fl\u00e8che \u00e0 c\u00f4t\u00e9 de INCLURE<\/strong> et en passant \u00e0 l’alternative. Lorsque vous \u00eates satisfait de vos s\u00e9lections, cliquez sur Enregistrer et fermer<\/strong>.<\/p>\n

\u00c0 ce stade, un message contextuel appara\u00eetra dans le coin inf\u00e9rieur droit de votre \u00e9cran. S’il ne dispara\u00eet pas avant que vous puissiez cliquer dessus, s\u00e9lectionnez l’option permettant de visualiser votre site en direct.<\/p>\n

Vous pouvez \u00e9galement retourner \u00e0 votre tableau de bord WordPress<\/a> et visualiser votre site en cliquant sur l’ic\u00f4ne de la maison dans le coin sup\u00e9rieur gauche, puis en s\u00e9lectionnant Visiter le site<\/strong>:<\/p>\n

\"L'en-t\u00eate
L’en-t\u00eate est maintenant disponible<\/figcaption><\/figure>\n

Comme vous pouvez le constater, notre en-t\u00eate est maintenant fonctionnel, mais lorsque nous faisons d\u00e9filer la page vers le bas, il dispara\u00eet. Voyons ce que nous pouvons faire \u00e0 ce sujet !<\/p>\n

\u00c9tape 3 : \u00c9pinglez votre en-t\u00eate<\/h4>\n

Voyons maintenant comment cr\u00e9er un en-t\u00eate Elementor \u00e9pingl\u00e9 avec l’outil pro !<\/p>\n

Allez dans Mod\u00e8les > Constructeur de th\u00e8me<\/strong> et s\u00e9lectionnez l’en-t\u00eate que vous venez de cr\u00e9er. Ensuite, cliquez sur Modifier<\/strong>\u00a0\u00e0 c\u00f4t\u00e9 de l’ic\u00f4ne du crayon sur l’\u00e9cran suivant. Cela vous ram\u00e8nera \u00e0 l’\u00e9diteur Elementor.<\/p>\n

Passez la souris sur votre mod\u00e8le d’en-t\u00eate, puis cliquez sur l’ic\u00f4ne \u00e0 six points au centre. Cela ouvrira votre panneau de modification de section<\/strong> sur la gauche :<\/p>\n

\"Cliquez
Cliquez sur l’option en pointill\u00e9 pour modifier<\/figcaption><\/figure>\n

Maintenant, naviguez vers l’onglet Avanc\u00e9 <\/strong>et localisez la section Effets de mouvement<\/strong>. Ici, activez les effets de d\u00e9filement<\/strong> en basculant le commutateur sur ON<\/strong>:<\/p>\n

\"Basculez
Basculez l’option d’effets de d\u00e9filement sur \u00ab On \u00bb<\/figcaption><\/figure>\n

Ensuite, faites d\u00e9filer la section Effets de mouvement<\/strong> pour trouver le champ \u00c9pingl\u00e9<\/strong>. Dans le menu d\u00e9roulant, s\u00e9lectionnez Haut <\/strong>:<\/p>\n

\"S\u00e9lectionnez
S\u00e9lectionnez \u00ab Haut \u00bb dans le menu d\u00e9roulant de l’option \u00ab \u00c9pingl\u00e9\u00a0\u00bb<\/figcaption><\/figure>\n

Maintenant, cliquez sur METTRE \u00c0 JOUR<\/strong>. Gardez \u00e0 l’esprit que, selon la palette de couleurs de votre th\u00e8me, votre en-t\u00eate Elementor \u00e9pingl\u00e9 peut sembler transparent :<\/p>\n

\"L'en-t\u00eate
L’en-t\u00eate \u00e9pingl\u00e9 fonctionne maintenant correctement<\/figcaption><\/figure>\n

Si c’est le cas, et que vous n’aimez pas son apparence, vous pouvez toujours changer la couleur de votre arri\u00e8re-plan. Dans votre panneau Modifier la section<\/strong>, allez dans Style > Arri\u00e8re-plan<\/strong> et s\u00e9lectionnez Classique <\/strong>comme type d’arri\u00e8re-plan.<\/p>\n

Maintenant, s\u00e9lectionnez une nouvelle couleur d’arri\u00e8re-plan pour votre mod\u00e8le d’en-t\u00eate. Vous voudrez choisir une nuance qui soit compl\u00e9mentaire au reste de la page mais qui cr\u00e9e \u00e9galement un joli contraste :<\/p>\n

\"Modifiez
Modifiez l’en-t\u00eate \u00e9pingl\u00e9 si n\u00e9cessaire<\/figcaption><\/figure>\n

Puisqu’il ne s’agit que d’un exemple, nous allons simplement choisir une couleur grise pour rendre notre en-t\u00eate moins transparent.<\/p>\n

Maintenant, cliquez sur METTRE \u00c0 JOUR<\/strong> pour enregistrer vos modifications. Allez-y et pr\u00e9visualisez votre r\u00e9sultat final :<\/p>\n

\"Afficher
Afficher les modifications apport\u00e9es<\/figcaption><\/figure>\n

C’est termin\u00e9 ! Vous voudrez probablement modifier le style et les couleurs en fonction de votre marque. Veillez simplement \u00e0 toujours enregistrer vos modifications lorsque vous avez termin\u00e9.<\/p>\n

Comment utiliser le CSS pour am\u00e9liorer votre en-t\u00eate Elementor \u00e9pingl\u00e9<\/h2>\n

Lorsque vous impl\u00e9mentez un en-t\u00eate Elementor \u00e9pingl\u00e9 sur votre site web, vous pouvez avoir l’impression que la conception de votre site s’est consid\u00e9rablement am\u00e9lior\u00e9e. Cependant, vous \u00eates peut-\u00eatre int\u00e9ress\u00e9 par d’autres personnalisations ou des fonctionnalit\u00e9s plus dynamiques.<\/p>\n

Maintenant que vous savez comment cr\u00e9er un en-t\u00eate \u00e9pingl\u00e9 de base, voyons comment faire passer votre conception au niveau sup\u00e9rieur. Pour ce faire, vous pouvez utiliser le\u00a0code des feuilles de style en cascade (CSS)<\/a> dans WordPress.<\/p>\n

Si vous \u00eates un d\u00e9butant ou si vous n’avez pas d’exp\u00e9rience dans le codage, ne vous inqui\u00e9tez pas. Am\u00e9liorer vos designs est un jeu d’enfant avec Elementor.<\/p>\n

Pour cela, allez dans Mod\u00e8les > Constructeur de th\u00e8me > En-t\u00eate <\/strong>:<\/p>\n

\"Ajouter
Ajouter un CSS personnalis\u00e9 pour apporter des modifications \u00e0 l’en-t\u00eate<\/figcaption><\/figure>\n

Dans la section \u00c9dition > Avanc\u00e9 > CSS personnalis\u00e9<\/strong>,<\/em> vous pouvez ajouter un petit extrait CSS pour apporter des modifications stylistiques.<\/p>\n

Types d’en-t\u00eates Elementor \u00e9pingl\u00e9s<\/h2>\n

Voici quelques am\u00e9liorations populaires que vous pourriez envisager pour votre en-t\u00eate Elementor \u00e9pingl\u00e9 !<\/p>\n

En-t\u00eate \u00e9pingl\u00e9 transparent<\/h3>\n

Certains th\u00e8mes peuvent automatiquement d\u00e9finir des en-t\u00eates \u00e9pingl\u00e9s transparents. Toutefois, si vous souhaitez le faire \u00e0 l’aide de CSS<\/a>, vous pouvez utiliser un extrait de code<\/a> tel que celui-ci :<\/p>\n

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }\n\nselector{ transition: background-color 4s ease !important; }\n\nselector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }\n\nselector > .elementor-container{ transition: min-height 1s ease !important; }<\/code><\/pre>\n
Il suffit de copier et de coller ce code dans le champ CSS personnalis\u00e9<\/strong> et d’ajuster les champs selon vos pr\u00e9f\u00e9rences. Ce code modifie la couleur d’arri\u00e8re-plan, la transparence et la hauteur de votre en-t\u00eate, avec un effet d’animation :<\/p>\n
\"CSS
CSS pour la personnalisation de l’arri\u00e8re-plan de l’en-t\u00eate<\/figcaption><\/figure>\n
Les possibilit\u00e9s de ce seul type sont infinies.<\/p>\n
En-t\u00eate collant r\u00e9tr\u00e9cissant<\/h3>\n
Un autre choix populaire est un en-t\u00eate qui s’agrandit et se r\u00e9tr\u00e9cit au fur et \u00e0 mesure que les visiteurs le font d\u00e9filer. Voici le code dont vous aurez besoin pour ce type d’en-t\u00eate Elementor \u00e9pingl\u00e9 :<\/p>\n
header.sticky-header {\n    --header-height: 90px;\n    --opacity: 0.90;\n    --shrink-me: 0.80;\n    --sticky-background-color: #0e41e5;\n    --transition: .3s ease-in-out;\n\n    transition: background-color var(--transition),\n                background-image var(--transition),\n                backdrop-filter var(--transition),\n                opacity var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects {\n    background-color: var(--sticky-background-color) !important;\n    background-image: none !important;\n    opacity: var(--opacity) !important;\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n}\nheader.sticky-header > .elementor-container {\n    transition: min-height var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects > .elementor-container {\n    min-height: calc(var(--header-height) * var(--shrink-me))!important;\n    height: calc(var(--header-height) * var(--shrink-me));\n}\nheader.sticky-header .elementor-nav-menu .elementor-item {\n    transition: padding var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {\n    padding-bottom: 10px !important;\n    padding-top: 10px !important;\n}\nheader.sticky-header > .elementor-container .logo img {\n    transition: max-width var(--transition);\n}\nheader.sticky-header.elementor-sticky--effects .logo img {\n    max-width: calc(100% * var(--shrink-me));\n}\n<\/code><\/pre>\n
Si vous n’\u00eates pas \u00e0 l’aise avec une telle quantit\u00e9 de code, vous pouvez consulter le guide d’Elementor sur la cr\u00e9ation d’un en-t\u00eate r\u00e9tractable<\/a>.<\/p>\n
Avec cette conception, vous obtiendrez cet effet :<\/p>\n
\"Nouvel
Nouvel effet d’en-t\u00eate<\/figcaption><\/figure>\n
Bien que cet en-t\u00eate ait une touche subtile, sa sophistication peut donner \u00e0 votre design un aspect plus professionnel.<\/p>\n
Fondu entr\u00e9e\/sortie<\/h3>\n
En plus de ces options tendance, il y a aussi la fonction de fondu en entr\u00e9e ou fondu en sortie (\u00e9galement appel\u00e9e \u00ab r\u00e9v\u00e9ler \u00bb). Cela ressemble \u00e0 quelque chose comme ceci :<\/p>\n
\"Fondu
Fondu en entr\u00e9e\/sortie<\/figcaption><\/figure>\n
Pour cet effet, vous n’aurez pas besoin de toucher au moindre code. Il suffit de naviguer jusqu’\u00e0 votre en-t\u00eate dans votre constructeur de th\u00e8me. Puis allez dans Modifier la section > Avanc\u00e9 > Effets de mouvement > Effets de d\u00e9filement<\/strong>:<\/p>\n
\"Modifier
Modifier l’option de transparence<\/figcaption><\/figure>\n
Ici, cliquez sur l’ic\u00f4ne du crayon \u00e0 c\u00f4t\u00e9 du champ Transparence<\/strong>\u00a0et changez la direction<\/strong> en Fondu d’entr\u00e9e<\/strong> ou Fondu de sortie<\/strong>. Ensuite, ajustez votre design selon vos pr\u00e9f\u00e9rences.<\/p>\n
Il existe de nombreuses options pour ces effets de transparence, nous vous recommandons donc de consulter la documentation d’Elementor<\/a>. Ainsi, vous serez en mesure d’obtenir le look exact que vous souhaitez.<\/p>\n\n
R\u00e9sum\u00e9<\/h2>\n
Travailler avec un constructeur de sites web de confiance est une excellente alternative au paiement d’un d\u00e9veloppeur web<\/a>\u00a0pour cr\u00e9er votre site. En utilisant certains des meilleurs logiciels de conception de sites web<\/a>, vous pouvez facilement r\u00e9aliser les \u00e9l\u00e9ments essentiels de tout site web. Il s’agit notamment d’en-t\u00eates \u00e9pingl\u00e9s pratiques mais magnifiques.<\/p>\n
Un en-t\u00eate \u00e9pingl\u00e9 peut cr\u00e9er une exp\u00e9rience plus agr\u00e9able pour vos utilisateurs. Vous pouvez choisir parmi diff\u00e9rents styles d’en-t\u00eates dynamiques, notamment transparents et r\u00e9tr\u00e9cissants. Mieux encore, vous pouvez r\u00e9aliser ces superbes en-t\u00eates \u00e0 la fois avec Elementor Pro<\/a> et sa version gratuite.<\/p>\n
La conception de votre site web est l’une des premi\u00e8res \u00e9tapes de son lancement. Cependant, vous aurez d’abord besoin d’un h\u00e9bergement fiable. Consultez les plans d’h\u00e9bergement infog\u00e9r\u00e9<\/a> de Kinsta pour voir comment nous pouvons optimiser les performances de votre site !<\/p>\n","protected":false},"excerpt":{"rendered":"
Que vous soyez un aspirant d\u00e9veloppeur web ou un entrepreneur en eCommerce, vos sites web partagent probablement certains \u00e9l\u00e9ments essentiels. Par exemple, chaque site a besoin …<\/p>\n","protected":false},"author":117,"featured_media":56038,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[464,698],"topic":[1028],"class_list":["post-55918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-elementor","tag-page-builder","topic-developpement-wordpress"],"yoast_head":"\nLe guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s<\/title>\n<meta name=\"description\" content=\"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s\" \/>\n<meta property=\"og:description\" content=\"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-22T06:27:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T08:44:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s\",\"datePublished\":\"2022-04-22T06:27:35+00:00\",\"dateModified\":\"2024-09-18T08:44:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\"},\"wordCount\":4215,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\",\"keywords\":[\"Elementor\",\"page builder\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\",\"name\":\"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\",\"datePublished\":\"2022-04-22T06:27:35+00:00\",\"dateModified\":\"2024-09-18T08:44:15+00:00\",\"description\":\"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s","description":"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/","og_locale":"fr_FR","og_type":"article","og_title":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s","og_description":"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-04-22T06:27:35+00:00","article_modified_time":"2024-09-18T08:44:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Salman Ravoof","Dur\u00e9e de lecture estim\u00e9e":"25 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s","datePublished":"2022-04-22T06:27:35+00:00","dateModified":"2024-09-18T08:44:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/"},"wordCount":4215,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","keywords":["Elementor","page builder"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/","url":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/","name":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","datePublished":"2022-04-22T06:27:35+00:00","dateModified":"2024-09-18T08:44:15+00:00","description":"Un en-t\u00eate \u00e9pingl\u00e9 permet de garder les informations importantes en vue. Apprenez \u00e0 construire facilement un en-t\u00eate Elementor \u00e9pingl\u00e9 pour maintenir l'attention de votre public.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2022\/04\/en-tetes-epingles-elementor.jpeg","width":1460,"height":730,"caption":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/en-tetes-epingles-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Le guide ultime des en-t\u00eates Elementor \u00e9pingl\u00e9s"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinqsta.com\/fr\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/55918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=55918"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/55918\/revisions"}],"predecessor-version":[{"id":56231,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/55918\/revisions\/56231"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/translations\/nl"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/55918\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/56038"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=55918"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=55918"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=55918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}