SiteW rend la création de site simple et agréable grâce à une solution sans contrainte technique ou financière.
Témoignages, interviews et exemples de sites créés. Découvrez les avis et réalisations de nos utilisateurs.
Notre histoire, nos actualités et engagements. Bien au-delà d'un service en ligne, découvrez SiteW.
Toutes les ressources au service de votre présence en ligne.
La plupart des internautes visiteront votre site en passant par la page d’accueil, et sur la page d’accueil, ils seront accueillis par l’entête situé en haut de la page. Il s’agit donc d’un élément de webdesign important. L’ensemble des fonctionnalités de l’éditeur SiteW peuvent être convoquées pour ajouter un entête original à votre site. Pour les besoins de ce tutoriel, nous étudions ici un exemple simple. Mais ce n’est aussi qu’un simple exemple, en souhaitant qu’il libère votre propre créativité !
L’onglet Pages dévoile la liste des pages de votre site. Au sommet de cette liste se trouve une page spéciale intitulée Arrière-plan. Tous les modules insérés dans cette page spéciale sont visibles sur l’ensemble des pages du site, ce sont en quelque sorte des modules communs à toutes les pages. De ce fait, la page d’arrière-plan est le lieu privilégié pour créer l’entête de votre site.
Une illustration de ce principe est mise en évidence dans cette vidéo :
Les modules insérés en arrière-plan sont reconnaissables à leur cadre de sélection de couleur rosée.
Dans ce tutoriel, nous utiliserons donc la page d’arrière-plan pour créer un exemple d’entête.
Beaucoup de sites possèdent une bannière en entête, avec une image panoramique en pleine largeur et un texte en surimpression. Prenons donc cet exemple !
Certains modules peuvent être configurés pour occuper systématiquement toute la largeur disponible dans le navigateur. C’est le cas du module Image, avec l’option Pleine largeur d’écran.
Cette option est disponible dans l’onglet Contenu du module Image. Quand un module est configuré en pleine largeur d’écran, la largeur occupée par le module dans l’éditeur n’a pas d’effet, seul le réglage de la hauteur est effectif :
La hauteur du module étant fixe, et la largeur étant variable, l’ajustement de l’image dans le module ne sera pas toujours identique, car dépendante de la largeur disponible.
Il est courant de placer un titre de bienvenue par-dessus l’image de la bannière. Cependant, selon les couleurs qui se superposent, la lisibilité du texte peut se trouver dégradée. La solution la plus courant consiste à éclaircir l’image quand le texte est sombre, ou à assombrir l’image si le texte est clair.
Inutile de démarrer votre logiciel de traitement photo préféré ! Vous pouvez directement créer un filtre dans l’onglet Design du module Image.
Le filtre Couleur ou dégradé permet de créer des dégradés de couleurs avec différents niveaux de transparence. Vous trouverez de plus amples détails sur la définition des dégradés dans ce guide.
Le module Menu n’a pas de fond, il est transparent. Or il n’est pas rare qu’on ait besoin de placer un menu sur un fond de couleur. Il est donc temps de découvrir le module Bande !
Le module Bande peut s’accompagner d’effets d’inclinaison ou de vague, mais dans cet exemple une simple bande suffira.
Le module Menu appartenant à la page d’arrière-plan, le module Bande destiné à être placé au-dessus du menu doit aussi appartenir à la page d’arrière-plan.
En superposant le module Bande au niveau du module Menu, la couleur de la bande permettra d’offrir un fond au module Menu. Pour que la bande occuper toute la largeur disponible dans la fenêtre du navigateur, il est possible de cocher Pleine largeur d’écran dans l’onglet Design du module Bande.
Comme son nom l’indique, en agissant sur la barre de défilement vertical, on fait défiler les modules dans la page. Par défaut, le module Menu défile donc au même titre que les autres modules.
Or il est courant de souhaiter maintenir la visibilité du menu pendant le défilement de la page, afin d’éviter au visiteur de revenir en haut de la page s’il souhaite changer de rubrique. Pour cela, il existe deux possibilités de webdesign : la position figée et la position collante.
Ces deux options peuvent être activées dans le menu contextuel des modules.
Un module figé n’est plus sensible au défilement demeure à la même position dans la fenêtre du navigateur. En figeant le module Bande et le module Menu, l’effet obtenu est le suivant :
Un module en position collante est sensible au défilement tant qu’il n’a pas atteint le haut de l’écran. Lorsque le haut de l’écran est atteint, il devient figé, afin de rester visible. Voici le résultat obtenu :
Dernière mise à jour : 20 octobre 2022
