Pleine largeur
Widgets et sections dont le rendu change quand ils occupent toute la largeur de l’écran, et non la seule largeur du contenu : bandeau d’ouverture, diaporamas et carrousels bord à bord, galerie, mosaïque, carte. Sur cette page, les zones de démonstration vont d’un bord à l’autre de l’écran.
Hero
Bandeau d’ouverture de page. Le fond (image, vidéo ou diaporama) couvre toute la largeur de l’écran, quelle que soit sa taille ; le titre, le texte et les boutons restent alignés sur la largeur du contenu du site.
Texte court qui présente le contenu de la page. Il tient sur deux ou trois lignes.
Hauteur de l’écran, contenu centré
Le bandeau occupe toute la hauteur de la fenêtre du navigateur.
Texte court qui présente le contenu de la page. Il tient sur deux ou trois lignes.
Texte et image côte à côte
Deux moitiés d’écran ; sur mobile, l’image passe sous le texte.
Texte court qui présente le contenu de la page. Il tient sur deux ou trois lignes.
Fond vidéo
Une vidéo muette tourne en boucle derrière le texte.
Texte court qui présente le contenu de la page. Il tient sur deux ou trois lignes.
Fond en diaporama
Plusieurs images se succèdent en fondu derrière le texte, avec un léger zoom.
Texte court qui présente le contenu de la page. Il tient sur deux ou trois lignes.
Slider
Diaporama bord à bord : chaque diapositive couvre toute la largeur de l’écran. Même widget que 05.04, placé dans une section pleine largeur.
Avec vignettes
Carousel
Carrousel dont les diapositives dépassent des deux bords de l’écran : celles des extrémités sont coupées, ce qui signale qu’il reste du contenu à faire défiler. Même widget que 05.02.
Débordement à droite uniquement
La première diapositive s’aligne sur le contenu du site, les suivantes sortent de l’écran par la droite.
Advanced Carousel
Carrousel en mode centré : une diapositive est centrée, celles des deux extrémités sont coupées par les bords de l’écran. Même widget que 05.03.
Départ aligné sur le contenu, débordement à droite
Au départ, la première carte s’aligne sur le contenu du site et rien ne dépasse à gauche ; la dernière carte visible est coupée par le bord droit de l’écran. Quand on fait défiler, les cartes glissent jusqu’au bord gauche de l’écran avant de disparaître. Le carrousel ne boucle pas.
Carrousel de médias
Présentation coverflow sur toute la largeur de l’écran : l’image centrale est de face, les autres s’inclinent vers les bords. Même widget que 05.01-b.
Galerie
Galerie justifiée bord à bord, sans marge : les images remplissent toute la largeur de l’écran et le nombre d’images par rangée s’ajuste à cette largeur. Même widget que 04.06-a.
Image Accordion
Bandes d’images qui se partagent toute la largeur de l’écran ; la bande survolée s’élargit. Même widget que 03.03.
Smart Posts Tiles
Mosaïque d’articles étirée sur toute la largeur de l’écran. Même widget que 10.05.
Text Ticker
Bandeau d’actualités qui traverse l’écran d’un bord à l’autre. Même widget que 10.06.
Google Maps
Carte étirée sur toute la largeur de l’écran. Même widget que 12.01.
Séparateur de forme
Découpe décorative en haut ou en bas d’une section pleine largeur. La forme s’étire sur toute la largeur de l’écran ; sa hauteur et sa couleur se règlent.
La découpe du bas s’étire sur toute la largeur de l’écran.
Forme inclinée
La découpe du bas s’étire sur toute la largeur de l’écran.
Forme courbe
La découpe du bas s’étire sur toute la largeur de l’écran.
Forme en montagnes
La découpe du bas s’étire sur toute la largeur de l’écran.