Thème › Personnalisation de la bannière

Paramètres

Les positions possibles sont 'Dans le site', la bannière présente la même largeur que le site, ou 'Au-dessus du site', dans ce cas un sélecteur de 'Largeur' apparaît et vous pourrez choisir entre une bannière 'Limitée au site' ou 'Étendue sur la page'. La bannière peut être également 'Cachée'.

Avec la sélection 'Nature du contenu' vous avez le choix entre une bannière de type papier-peint, une bannière animée avec Swiper ou une bannière avec un contenu personnalisé. Ces options sont détaillées plus bas.

Si vous utilisez une bannière de type papier peint le réglage de 'Hauteur maximale' le plus satisfaisant est souvent 'Hauteur de l'image sélectionnée'.

L'option 'Bannière visible uniquement sur la page d'accueil' masque la bannière sur les autres pages.

L'option 'Masquer la bannière en écran réduit', quand elle est proposée, est indépendante du réglage précédent.

L'option 'Aligner la bannière sur le contenu' fait apparaître au-dessus et sur les côtés de la bannière des marges de largeur égales à celles du 'Site' et de couleur du fond du site.

 Couleurs

Ces réglages de couleur se font par une saisie des valeurs ou par un sélecteur graphique, le curseur horizontal règle la transparence. Le 'Texte' est le titre du site.

Couleur unie ou papier peint

Si vous utilisez un site de largeur fixe (750, 960 ou 1170 pixels) et que vous souhaitez utiliser une image pour la bannière, le plus simple est de réaliser une image de largeur identique au site et de sélectionner pour 'Adaptation' : 'Responsive (cover)' et, dans 'Paramètres' pour 'Hauteur maximale' : 'Hauteur du contenu'.

Si vous utilisez un site fluide (100% de l'écran), ou si le réglage précédent ne vous satisfait pas, vous pouvez essayer différentes valeurs  pour 'Adaptation'  (et 'Hauteur maximale'  dans 'Paramètres') :
=> 'Automatique' le fond de la bannière apparaît autour de l'image, elle n'est pas déformée,
=> 'Image étirée 100% 100%' l'image est étirée, déformée, jusqu'à occuper toute la largeur de l'écran et la 'Hauteur maximale'  de la bannière sélectionnée,
=> 'Responsive (cover)', les modes responsifs ne déforment pas l'image, avec cover la largeur et la hauteur de l'image sont modifiées jusqu'à occuper toute la surface de la bannière,
=> 'Responsive (contain)', avec contain, la largeur et la hauteur de l'image sont modifiées jusqu'à occuper toute la largeur ou toute la hauteur de la bannière, le fond apparaît donc sur les côtés de l'image ou au-dessus et en dessous.
Un aperçu immédiat du résultat facilite ce réglage délicat et la compréhension de ces explications !

Les sélections 'Répétition' et 'Position' couplées aux réglages précédents vous permettront sans doute de trouver une solution satisfaisante quelle que soit la taille de votre image et quelle que soit la hauteur de la bannière. Les possibilités sont très nombreuses, mais un aperçu immédiat du résultat facilite ces réglages.
Si vous avez opté pour une 'Bannière cliquable', un clic renvoie sur la page d'accueil.

Mise en forme du titre

La 'Taille' du texte (titre du site) est proportionnelle à celle définie pour le 'Site'.

Le sélecteur 'Alignement du contenu' positionne le titre du site (s'il n'est pas masqué) à gauche, au centre, ou à droite.

 

Contenu personnalisé

Pour cette sélection de 'Nature de contenu', vous disposez de 2 blocs de réglages et d'une zone d'édition.


Les positions possibles sont 'Dans le site', la bannière présente la même largeur que le site, ou 'Au-dessus du site', dans ce cas un sélecteur de 'Largeur' apparaît et vous pourrez choisir entre une bannière 'Limitée au site' ou 'Étendue sur la page'. La bannière peut être également 'Cachée'.

L'option 'Masquer la bannière en écran réduit', quand elle est proposée, est indépendante du réglage précédent.

Vous pouvez choisir pour la 'Hauteur maximale' une hauteur fixe en pixels ou sélectionner 'Hauteur du contenu'.

En contenu personnalisé vous disposez également d'un sélecteur pour la couleur du fond de la bannière.

Astuce, vous pouvez placer une bannière video en écrivant le code source suivant :

le '  p style="margin: 0;"  ' permet de régler la position verticale de la video,

Il faudra adapater les dimensions et la source à votre vidéo.

 

Bannière animée

Cette option est réalisée avec Swiper, les scripts utiles ici sont inclus dans votre CMS, il n'y a pas de requête externe.

Bannière animée

Choisissez le dossier dans lequel vous avez placé les images de votre bannière animée, elles devront avoir toutes les mêmes dimensions.

Vous pouvez sélectionner 4 types d'effet défilements vertical ou horizontal, fondu ou effet cube. La case à cocher située sous la sélection d'effet permet, suivant votre choix, d'inverser la direction, le sens de rotation ou l'ordre de passage des images.

Réglez ensuite le temps d'affichage de l'image et le temps de transition.

cookie
Gérer les cookies

Ce site utilise des cookies nécessaires à son fonctionnement, ils permettent de fluidifier son fonctionnement par exemple en mémorisant les données de connexion, la langue que vous avez choisie ou la validation de ce message.


Consulter les mentions légales