Créer site internet facile
Créer son site web pour les nuls
Créez votre propre site Internet
Gratuit, Facile, Rapide
Découvrez SiteW Inscription gratuite

Présenter votre site en créant une entête !

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é !

La page d’arrière-plan

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 vignette vidéo :

Les modules insérés en arrière-plan sont reconnaissables à leur cadre de sélection de couleur orangée.

Dans ce tutoriel, nous utiliserons donc la page d’arrière-plan pour créer un exemple d’entête.

Exemple de bannière

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 !

Image en pleine largeur d’écran

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.

Filtre d’image

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 le guide [lien vers le guide consacré au colorpicker].

Avant et après l’application d’un filtre

Exemple de menu

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 !

Module Bande

Créer des sites internet
Le module Bande se situe dans la rubrique Design de l’onglet Contenu

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.

Position figée et position collante

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.

Position figée

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 :

La présence du module Bande permet de cacher les contenus qui défilent sous le menu.

Position collante

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 : 29 septembre 2020

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.