Header transparant

La fonctionnalité « Header transparent » permet d’afficher le méga slider ou le bandeau défilant par-dessus le header du site.

Cet affichage est particulièrement adapté pour les marques souhaitant afficher un visuel fort en haut de page.

Cela offre aux visiteurs une expérience plus immersive dans l’univers de la marque et permet de :

• Mettre en valeur une image en pleine largeur/hauteur
• Créer une transition plus fluide entre le header et le contenu
• Donner un aspect plus premium et éditorial à la page
• Réduire la sensation de “barre” en haut de l’écran

Le header transparent est particulièrement adapté pour :

• La page d’accueil
• Les pages marques
• Les pages éditoriales
• Les campagnes promotionnelles

AU SOMMAIRE : 

• 1. Comportement fonctionnel
• 2. Activation du header transparent sur le site
  • 2.1 Définir un style de l'entête
  • 2.2 Activer le header transparent sur une page 
    • 2.2.1 Page d'accueil 
• A noter que ce paramètre n'a d'effet que si un mega slider ou un bandeau défilant est actif (voir paramètre ci-dessous).
  • 2.2.2 Page de catégorie de produits 
• 3. Recommandations d'utilisation 
• 4. Exemples de réalisations

1. Comportement fonctionnel

Au chargement de la page

Lorsque le header du site est activé sur le mode transparent, le contenu situé en haut de la page reste visible derrière l’en-tête. Il se superpose donc avec le bandeau défilant ou le mega slider.

Au scroll

Le header du site utilise le mode entête standard au scroll de la page.

Lorsque le visiteur retourne en haut de page, le header redevient transparent.

Pages sans bandeau défilant/mega slider

Sur les pages de contenu ou sur les pages de catégories n’affichant pas de bandeau défilant ou de mega slider, le header conservera son entête standard.

Responsive

Le header transparent fonctionne sur tous les écrans : web, tablette et mobile.

2. Activation du header transparent sur le site

 L’activation du header transparent sur le site se déroule en 2 étapes :

• Paramétrage du style de l’entête
• Activation sur une page de contenu : page d’accueil du site, page de catégorie de produits ou autre

2.1 Définir un style de l'entête

Pour rappel, l’entête du site correspond à la zone suivante :

Dans le menu Site web > Graphisme > Modèles graphiques, vous avez la possibilité de paramétrer les 2  modes d’affichage de l’entête du site :

• Entête standard 
• Entête alternatif

L’entête standard

Il s’agit de l’entête par défaut du site. Les composants sont paramétrables dans les onglets Général/Images/Logos.

L’entête alternatif

L’entête alternatif est un nouveau mode et est paramétrable dans l’onglet Entête alternatif. Il permet de changer la couleur des textes et de charger des logos/pictos différents de l’entête standard. Ces paramètres sont utiles lorsque vous souhaitez par exemple afficher des éléments en blanc sur un slider ou un bandeau défilant sur fond foncé.

Ces paramètres sont facultatifs. Si un champ « Couleur du texte » est laissé vide ou si une image n’est pas remplacée, les valeurs standards sont reprises automatiquement.

2.2 Activer le header transparent sur une page 

2.2.1 Page d'accueil 

La page d’accueil du site est accessible depuis le menu Site web > Pages.

Cliquez sur la page d’accueil et sur l’onglet « graphisme » pour accéder au paramètre « Activer le header transparent ».

A noter que ce paramètre n'a d'effet que si un mega slider ou un bandeau défilant est actif (voir paramètre ci-dessous).

Une fois le paramètre activé, de nouveaux paramètres apparaissent :

• Style de l'entête
• Fond de l'entête transparent en dégradé

Style de l’entête

Sélectionner le type d’entête que vous souhaitez afficher sur la page :

• Entête standard
• Entête alternatif

Fond de l’entête transparent en dégradé

Afin de faire ressortir un peu plus les éléments du header transparent, il est possible d’appliquer un dégradé sur le fond. Ce dégradé est composé d’une couleur en haut (50% d’opacité) et d’une couleur en bas (25% d’opacité), ces paramètres sont facultatifs et indépendants.

Exemples : 
En laissant le 1er champ vide et en mettant "000000" dans le 2nd, le dégradé ira progressivement d'une transparence totale vers du noir à 25% opacité.
En mettant "FFFFFF" dans le 1er champ et en laissant vide le 2nd, le dégradé ira du blanc à 50% vers une transparence totale. 

2.2.2 Page de catégorie de produits 

Le principe est le même que pour les pages, avec en plus la notion d’héritage du parent qui permet de reprendre automatiquement le paramétrage de la catégorie mère.

Vous pouvez avoir un type d’entête différent de votre page d’accueil.

3. Recommandations d'utilisation 

Bonnes pratiques

• Privilégier des visuels avec une zone sombre ou claire homogène derrière le header
• Éviter les images trop chargées qui nuisent à la lisibilité du menu
• Prévoir une marge intérieure de 190px en haut de chaque slide afin que le contenu reste visible car le slider passe sous le header
• Mettre les éléments du header alternatif en couleurs claires si les bandeaux défilants ou mega slider sont foncées

Dans le cas où l'entête alternatif n'est pas paramétré, il est recommandé de concevoir ses slides en conséquence ou de paramétrer le dégradé de fond dans l'onglet "Graphisme" de la page. 

4. Exemples de réalisations

Voici un exemple avec un mega slider paramétré avec un header transparent.

Au scroll, le header passe sur le header standard. Ici, celui-ci a été paramétré avec un fond noir et les éléments ont été conservés en blanc.

Affichage sur mobile 

Autre exemple :