En-tête du site Web – Conception

Le En-tête contient le premier ensemble d'éléments visibles lors du chargement de votre site Web. Vous pouvez organiser les éléments tels que le logo, le menu de navigation et les icônes sociales comme vous le souhaitez dans l'en-tête.

Dans cet article :


Vous pouvez gérer le style de l'en-tête (pour ordinateur et mobile) à partir du Design (1) partie.

Une fois dans la section Conception, cliquez sur En-tête (2) onglet.

Alternativement, vous pouvez également utiliser l'option de recherche du studio.

  • Entrer En-tête (1) dans la barre de recherche.
  • À partir des résultats associés, cliquez sur le Conception - En-tête du site Web choix (2).


En-tête pour le bureau

  1. Disposition des en-têtes – Vérifiez la disposition d'en-tête actuellement appliquée pour à poser version. Clique sur le Changer la disposition pour choisir parmi les options de mise en page d'en-tête disponibles et les appliquer à votre site Web.
    Nous fournissons deux types de mises en page d'en-tête - principales dispositions d'en-tête et dispositions d'en-tête à deux colonnes. Les dispositions d'en-tête à deux colonnes existent dans des thèmes tels que Burst et Isle. 
  2. Largeur – Spécifiez la largeur de l'en-tête comme Pleine largeur or Largeur du site.
    »Pleine largeur' affichera l'en-tête tout en couvrant toute la largeur sans laisser de marge.
    »Largeur du chantier' peut être spécifié dans le Design section. Vous pouvez spécifier une largeur fixe ici.
    Il affichera l'en-tête en respectant la largeur fixe spécifiée. Savoir plus.
  3. Rembourrage vertical – Ajoutez de l'espace (en haut et en bas) à l'en-tête de votre site Web (spécifié en vh). En savoir plus.
  4. COMPORTEMENT – La position de l'en-tête de votre bureau peut être définie sur Ffixe (ici l'entête sera fixé en haut, c'est à dire que même si la page défile, l'entête serait visible) ou Faites défiler avec le site (ici, l'en-tête défilera avec la page). 
  5. Navigation collante – Activer ou désactiver la navigation collante en cas de Sfaire défiler avec le site poste d'en-tête. 
  6. Menu Sticky – Définir la position du menu fixe lorsque la page est défilée vers la gauche ou le centre de l'écran.

Note

Pour une navigation persistante, l'en-tête s'affichera après que la section initiale ait défilé à moitié sur l'écran.

Découvrez le remplissage d'en-tête en action :

Jetez un oeil à un En-tête sur un site en ligne.


Voir différentes dispositions d'en-tête de bureau 

Voir différentes dispositions d'en-tête de bureau à 2 colonnes

Dispositions d'en-tête basées sur la recherche qui se concentrent sur la recherche de sites Web


En-tête – Bordure

  1. Frontière: Activez ou désactivez la bordure de l'en-tête.
  2. Épaisseur: Spécifiez la largeur des lignes de bordure pour l'en-tête.
  3. Poste: Définissez la position de la bordure d'en-tête. Vous disposez de quatre options : Tous les côtés, Haut et bas, Haut uniquement et Bas uniquement.


En-tête – Pilule

Le En-tête en forme de pilule dans Pixpa ajoute un look élégant et moderne à l'en-tête de votre site Web avec coins arrondis et une flexibilité d'espacement. Ce design est idéal pour les créatifs et les professionnels qui souhaitent un en-tête visuellement distinctif et élégant.

Vous pouvez appliquer ce style à n'importe quelle disposition d'en-tête, vous offrant une totale liberté de conception sur différents types d'en-têtes.

  1. En-tête – Pilule : Activez le bouton bascule En-tête – Pilule pour activer le style de pilule pour votre en-tête.
  2. Rayon d'angle: Ajustez l'arrondi des coins de l'en-tête à l'aide du curseur ou du champ « Rayon d'angle ». Des valeurs élevées rendront les coins plus arrondis.
  3. Rembourrage supérieur : Spécifiez l'espace au-dessus du contenu dans l'en-tête de la pilule pour contrôler l'espacement vertical.
  4. Rembourrage inférieur : Définissez l’espace sous le contenu pour assurer une apparence équilibrée.
  5. Largeur compacte : Cela vous permet de choisir la largeur de l'en-tête de votre pilule :
    • Pleine largeur: Étire l'en-tête sur toute la largeur de l'écran.
    • Largeur du site : Aligne l'en-tête avec la largeur globale du contenu de votre site.
    • Compact: Réduit l'en-tête en un bloc plus serré et centré – idéal pour les conceptions minimalistes.


En-tête pour mobile

Ces paramètres vous permettent de contrôler l'affichage de l'en-tête de votre site sur les appareils mobiles. Cela garantit une mise en page claire et optimisée pour les petits écrans.

  1. Mise En Page – Vérifiez la disposition d'en-tête actuellement appliquée pour mobile version. Clique sur le Changer la disposition pour choisir parmi les options de mise en page d'en-tête disponibles et les appliquer à votre site Web.
  2. Rembourrage vertical – Ajouter Espace vertical (haut et bas) à l'en-tête de votre site Web sur les appareils mobiles (spécifiés en vh).
  3. En-tête mobile – Indiquez si vous souhaitez que l'en-tête mobile apparaisse uniquement sur les appareils mobiles (jusqu'à 768 px) ou l'étendre également aux tablettes (jusqu'à 1199 XNUMX px).

Assurez-vous de cliquer sur le Publier bouton après avoir apporté des modifications pour vous assurer qu'elles sont actives sur votre site Web.

Voir différentes dispositions d'en-tête mobile 

Note

  • Le symbole de point dans l'en-tête mobile fait référence aux comptes clients.
  • Il apparaîtra seulement que l'option Compte client est activée en magasin. Apprendre encore plus.


Types d'en-tête

Vous pouvez choisir parmi quatre types d'en-têtes différents :

    1. En-tête normal
    2. En-tête à deux colonnes
    3. En-tête basé sur la recherche

 

En-tête normal

La disposition d'en-tête normale présente un design épuré et simple avec un logo, des liens de navigation, des icônes sociales et un bouton de menu affiché horizontalement. Il est idéal pour offrir une expérience de navigation classique et conviviale.


En-tête à deux colonnes

La disposition d'en-tête à deux colonnes divise l'en-tête en deux sections distinctes, permettant un logo et des icônes sociales à gauche ou au centre et le menu de navigation et d'autres éléments de l'en-tête à droite sous forme de barre latérale cliquable.

Cette mise en page est parfaite pour les sites Web qui doivent mettre simultanément en valeur leur marque et leurs actions importantes.


La disposition d'en-tête basée sur la recherche comprend bien en évidence une barre de recherche, permettant aux utilisateurs de trouver facilement et rapidement un contenu spécifique. Cette conception est particulièrement utile pour les sites Web riches en contenu où la fonctionnalité de recherche est une priorité.


Éléments d'en-tête

  1. Logo / Titre du site – Le tout premier élément de l'en-tête du site est le logo/titre du site. Définir le titre du site/télécharger le logo du site pour votre site
    À noter: Si vous n'avez pas téléchargé le logo du site, le titre du site apparaîtra sur l'en-tête de votre site. De plus, si vous avez fourni les deux, le logo du site sera visible sur l'en-tête de votre site.
  2. Menu – Un autre élément de l'en-tête du site est le menu (liens de menu). Vous pouvez séquencer les liens de navigation du site, or supprimer/masquer n'importe quel élément de menu de votre site
  3. Icônes sociales – Vous pouvez ajouter le Icônes sociales qui sont connectés à vos profils de médias sociaux à l'en-tête de votre site. Vous pouvez télécharger un image de partage social qui sera utilisée comme vignette lorsque le site Web ou l'une des pages du site Web sera partagé sur les réseaux sociaux. Choisissez également où icônes de médias sociaux apparaîtrait sur votre site Web. Les positions disponibles sont en-tête, pied de page, les deux ou aucune.
  4. Barre de recherche - Ajouter un boîte de recherche qui permet aux visiteurs de votre site de rechercher n'importe quel contenu dans les produits (si vous avez activé une boutique sur votre site Web), les images, les articles de blog et les pages (galeries, dossiers et autres pages) dans l'en-tête de votre site.
  5. Icône de panier – Ajouter un flottant icône de panier c'est facile à atteindre et toujours visible sans interférer avec votre site Web à l'en-tête de votre site.
  6. Bouton de menu - Ajouter un bouton de menu à l'en-tête de votre site, c'est-à-dire un bouton d'appel à l'action qui redirige vers une URL spécifiée. Vous pouvez spécifier le Étiquette et la URL pour le bouton Menu. Aussi, choisissez le Taille du bouton être Petit, Moyen ou Grand.

Vous ne trouvez pas ce que vous cherchez?

Contactez un Expert Pixpa.

Pixpa Studio vient d'être entièrement repensé. Nous mettons actuellement à jour les captures d'écran de tous les articles d'aide.