Stylisme de produits dérivés

Construire l’en-tête de la page d’accueil

Voici l'extrait

La page d’accueil utilise un élément d’en-tête très spécifique. Il profite de presque toutes les fonctionnalités offertes par l’élément d’en-tête. Inclut un fond d’image en vedette, fusionné avec l’en-tête du site et un emplacement et des couleurs de navigation personnalisés. Pour en savoir plus sur l’élément d’en-tête, cliquez ici :

L’élément d’en-tête du site fusionné

Pour éditer l’en-tête, allez à : Apparence > Elements –> Home Page Hero – Merged. To note this header has been specifically designed around the image. Nous couvrons à présent les différents paramètres et leur objectif. Cela devrait vous fournir suffisamment de connaissances sur la manière de manipuler l’en-tête pour votre propre contenu.

Paramètres de l’onglet Page Hero

  • Hero Content > Balisage HTML de base composé d’un sous-titre de balise span, d’une balise H1 pour l’en-tête principal et d’une balise d’ancrage utilisant la classe GP Button.
  • Classes d’éléments > None
  • Conteneur > Set to contained
  • Padding Desktop > Notable le padding RHS de 30% crée une zone de sécurité pour empêcher le contenu du héros de la page de chevaucher la RHS de l’image.
  • Padding Mobile > Mettre un padding séparé pour permettre au texte de s’étendre sur l’élément d’en-tête.
  • Image d’arrière-plan > Utilise l’image en vedette et la met au centre. The featured images is disabled in the page content.
  • Colors > pas de couleur d’arrière-plan ou de superposition. Les couleurs du texte ont été ajustées pour l’en-tête. Toutes les couleurs laissées par défaut respectent les paramètres du customizer.

Paramètres de l’onglet En-tête du site

  • Fusionner avec le contenu > Fusionner
  • Offset Site Header Height > Set to 169px on desktop and 50px on Mobile. Ces valeurs correspondent à la hauteur brute de l’en-tête du site et de l’en-tête du mobile. Cela empêche notre contenu de se déplacer sous la navigation et l’en-tête du site.
  • Couleurs > L’arrière-plan est défini sur un blanc transparent et le titre du site et la ligne de balises restent par défaut et respectent les couleurs définies dans le Customizer.
  • Navigation Location > Défaut
  • Couleurs de navigation > Vérifié et l’arrière-plan est défini sur transparent.

Règles d’affichage

Cet en-tête est défini pour être affiché sur la page de garde. This is the standard term for the page has been assigned in Dashboard > Settings > Reading –>Your Home Page Displays.

Foire aux questions

Comment changer l’image de fond ?

L’élément d’en-tête utilise l’arrière-plan de l’image en vedette. Il suffit de changer l’image en vedette dans l’éditeur de messages sur la page d’accueil.

Comment modifier l’en-tête et le sous-en-tête ?

Editer les éléments d’en-tête du contenu héroïque. Les styles et les tailles de police sont définis dans les paramètres du Customizer > Typograpghy

Comment ajuster le contenu du texte ?

L’en-tête et le sous-en-tête actuels sont contenus, de sorte qu’ils ne chevauchent pas la partie plus sombre de l’image sur le côté droit de la main. Pour ce faire, il suffit d’ajouter un padding supplémentaire sur le côté droit de l’élément d’en-tête. Enlève ou change le rembourrage en fonction de tes besoins.

Comment changer les couleurs de navigation ?

Dans l’onglet En-tête du site, vous disposez de contrôles de couleur pour l’en-tête et la navigation. Celles-ci remplacent les couleurs définies dans le customizer. To note : les couleurs dans le customizer s’appliqueront toujours à la Sticky Navigation.

Comment utiliser cet élément d’en-tête sur d’autres pages ?

Si vous souhaitez une copie exacte de cet en-tête, il vous suffit d’ajouter plus de pages, de posts ou de modèles aux règles d’affichage. Mais voyant que la page d’accueil mériterait des titres assez spécifiques, vous avez probablement envie d’en faire une copie et de modifier le contenu en fonction de vos besoins. Bien sûr, vous pouvez le faire manuellement ou utiliser le plugin Duplicate Post – assurez-vous juste de modifier les paramètres du plugin et d’inclure Elements.

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00