{"id":5603,"date":"2019-02-06T03:28:24","date_gmt":"2019-02-06T02:28:24","guid":{"rendered":"https:\/\/www.vla-bag.ch\/2019\/02\/06\/construire-len-tete-de-la-page-daccueil\/"},"modified":"2025-08-17T18:09:27","modified_gmt":"2025-08-17T16:09:27","slug":"construire-len-tete-de-la-page-daccueil","status":"publish","type":"post","link":"https:\/\/www.vla-bag.ch\/fr\/2019\/02\/06\/construire-len-tete-de-la-page-daccueil\/","title":{"rendered":"Construire l’en-t\u00eate de la page d’accueil"},"content":{"rendered":" \n

La page d’accueil utilise un \u00e9l\u00e9ment d’en-t\u00eate tr\u00e8s sp\u00e9cifique. Il profite de presque toutes les fonctionnalit\u00e9s de l’\u00e9l\u00e9ment d’en-t\u00eate. Cela inclut l’arri\u00e8re-plan de l’image en vedette, la fusion avec l’en-t\u00eate du site et l’emplacement et les couleurs de navigation personnalis\u00e9s. Pour en savoir plus sur l’\u00e9l\u00e9ment d’en-t\u00eate, cliquez ici : <\/p> \n \n

\nhttps:\/\/docs.generatepress.com\/article\/header-element-overview\/ \n<\/div><\/figure> \n \n

L’\u00e9l\u00e9ment d’en-t\u00eate du site fusionn\u00e9<\/h2> \n \n

Pour \u00e9diter l’en-t\u00eate allez \u00e0 : Apparence > Elements -> Home Page Hero - Merged.<\/strong> A noter que cet en-t\u00eate a \u00e9t\u00e9 con\u00e7u sp\u00e9cifiquement autour de l’image. Nous couvrons maintenant les diff\u00e9rents param\u00e8tres et leur but. Cela devrait vous fournir suffisamment de compr\u00e9hension sur la fa\u00e7on de manipuler l’en-t\u00eate pour votre propre contenu. <\/p> \n \n

Param\u00e8tres de l’onglet Page Hero<\/h3> \n \n
  • Hero Content ><\/strong> Balisage HTML de base compos\u00e9 d’un sous-titre de balise span, d’une balise H1 pour l’en-t\u00eate principal et d’une balise d’ancrage utilisant la classe GP Button.<\/li>
  • Classes d’\u00e9l\u00e9ments ><\/strong> None<\/em><\/li>
  • Conteneur ><\/strong> Set to contained<\/li>
  • Padding Desktop ><\/strong> Notable le 30% RHS padding est la cr\u00e9ation d’une zone de s\u00e9curit\u00e9 pour emp\u00eacher le contenu de la page h\u00e9ros de chevaucher le RHS de l’image.<\/li>
  • Padding Mobile ><\/strong> Mettre un padding s\u00e9par\u00e9 pour permettre au texte de s’\u00e9tendre sur l’\u00e9l\u00e9ment d’en-t\u00eate.<\/li>
  • Background Image ><\/strong> Utilise l’image en vedette et la met au centre. The featured images is disabled in the page content. <\/li>
  • Colors ><\/strong> pas de couleur d’arri\u00e8re-plan ou de superposition. Les couleurs du texte ont \u00e9t\u00e9 ajust\u00e9es pour l’en-t\u00eate. Toutes les couleurs sont laiss\u00e9es par d\u00e9faut dans les param\u00e8tres de personnalisation. <\/li><\/ul> \n \n

    Param\u00e8tres de l’onglet En-t\u00eate du site<\/h3> \n \n
    • Fusionner avec le contenu ><\/strong> Fusionner<\/li>
    • D\u00e9caler la hauteur de l’en-t\u00eate du site ><\/strong> \u00e0 169px sur ordinateur et 50px sur mobile. Ces valeurs sont la hauteur brute de l’en-t\u00eate du site et de l’en-t\u00eate mobile. Cela emp\u00eache notre contenu de se d\u00e9placer sous la navigation et l’en-t\u00eate du site. <\/li>
    • Couleurs ><\/strong> L’arri\u00e8re-plan est d\u00e9fini sur un blanc transparent et le titre du site et la ligne de balises restent par d\u00e9faut et respectent les couleurs d\u00e9finies dans le Customizer.<\/li>
    • Navigation Location ><\/strong> D\u00e9faut<\/li>
    • Couleurs de navigation ><\/strong> V\u00e9rifi\u00e9 et l’arri\u00e8re-plan est d\u00e9fini sur transparent.<\/li><\/ul> \n \n

      R\u00e8gles d’affichage<\/h3> \n \n

      Cet en-t\u00eate est d\u00e9fini pour s’afficher sur la page d’accueil<\/strong>. Il s’agit du terme par d\u00e9faut pour la page qui a \u00e9t\u00e9 attribu\u00e9e dans Dashboard > Settings > Reading -><\/strong> Your Home Page Displays.<\/strong> <\/p> \n \n

      Foire aux questions<\/h2> \n \n

      Comment changer l’image d’arri\u00e8re-plan ?<\/h3> \n \n

      L’\u00e9l\u00e9ment d’en-t\u00eate utilise l’arri\u00e8re-plan de l’image en vedette. Il suffit de changer l’image en vedette dans l’\u00e9diteur de message sur la page d’accueil. <\/p> \n \n

      Comment modifier l’en-t\u00eate et le sous-en-t\u00eate ?<\/h3> \n \n

      \u00c9ditez les \u00e9l\u00e9ments d’en-t\u00eate du contenu h\u00e9ro\u00efque. Les styles et tailles de police sont d\u00e9finis dans les param\u00e8tres du Customizer > Typograpghy<\/strong> <\/p> \n \n

      Comment ajuster le contenu du texte ?<\/h3> \n \n

      L’en-t\u00eate et le sous-en-t\u00eate actuels sont contenus, de sorte qu’ils ne chevauchent pas la partie plus sombre de l’image sur le c\u00f4t\u00e9 droit de la main. Pour ce faire, ajoutez un padding suppl\u00e9mentaire sur le c\u00f4t\u00e9 droit de l’\u00e9l\u00e9ment d’en-t\u00eate. Supprimez ou modifiez le remplissage en fonction de vos besoins. <\/p> \n \n

      Comment changer les couleurs de navigation ?<\/h3> \n \n

      Dans l’onglet En-t\u00eate du site, vous disposez de contr\u00f4les de couleur pour l’en-t\u00eate et la navigation. Celles-ci remplacent les couleurs d\u00e9finies dans le customizer. Note : les couleurs dans le customizer s’appliqueront toujours \u00e0 la navigation collante. <\/p> \n \n

      Comment utiliser cet \u00e9l\u00e9ment d’en-t\u00eate sur d’autres pages ?<\/h3> \n \n

      Si vous voulez une copie exacte de cet en-t\u00eate, vous pouvez simplement ajouter plus de pages, de posts ou de mod\u00e8les aux r\u00e8gles d’affichage. Mais comme la page d’accueil m\u00e9riterait des en-t\u00eates tr\u00e8s sp\u00e9cifiques, vous voudrez probablement en faire une copie et modifier le contenu en fonction de vos besoins. Bien s\u00fbr, vous pouvez le faire manuellement ou utiliser le plugin Duplicate Post - assurez-vous juste de modifier les param\u00e8tres du plugin et d’inclure des \u00e9l\u00e9ments. <\/p> \n","protected":false},"excerpt":{"rendered":"

      Voici l’extrait<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[71],"tags":[],"class_list":["post-5603","post","type-post","status-publish","format-standard","hentry","category-stylisme-des-produits-derives","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/comments?post=5603"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5603\/revisions"}],"predecessor-version":[{"id":5605,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5603\/revisions\/5605"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/media?parent=5603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/categories?post=5603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/tags?post=5603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}