TUTO — Page flexible

Sont présentés ici les différents blocs de mise en page des pages statiques modulables.

Le carrousel d'introduction ci-dessous peut contenir autant d'images/vidéos souhaitait

Layout 1 colonne

Un layout/bloc pour une mise en page pleine largeur

Les layouts sont des blocs principaux/parents, ils définissent la composition en nombre de colonnes.
Les blocs de contenus sont ajoutés au sein des layouts.
Ici, nous utilisons un bloc de texte dans une layout 1 colonne.

Layout 2 colonnes

Un layout/bloc pour une mise en page sur deux colonnes

Ici, la première colonne est composée d’un bloc de texte.
Tous les blocs de texte ont des fonctions de mise en page.
Voici un aperçu des possibilités:

Gros Titre

Titre

Paragraphe avec la fonte Light/Thin

Le texte peut être en gras, italique, gras et italique, souligné…

Texte aligné à gauche

Texte centré

Texte aligné à droite

Un lien simple apparaitra comme ceci

En appliquant le format « Lien bouton » il devient encadré

Pour créer un menu déroulant, utiliser le bouton à côté de ‘Formats’

TitreContenu déroulant

Un bloc de texte peut également contenir, des images.
Ceci dit, ce n’est pas adapté à de grandes images, qui seront plutôt dans des blocs spécifiques. Ici on pourra inclure des logos/pictos.
Pour ajouter une image utiliser le boutons ‘Ajouter un média’.
Dans ‘Formats’, vous pouvez ajuster sa taille.
Des liens sont également possibles sur les images.

 

La touche ‘Enter/Retour’ de votre clavier créera un saut de ligne (avec marge), la combinaison de touche ‘Shift’ + ‘Enter/Retour’ fera une retour ligne sans saut.

Le bloc Image/Vidéos permet d’ajouter une image/vidéo.

Le bouton aspect permet de définir sa taille:

  • Mode Auto: le média est affiché dans la largeur du bloc, et sa taille respecte le ratio intrinsèque.
  • Mode Ratio: Vous définissez un ratio et le media sera redimensionné.

La premier image est en mode Auto.

La seconde en mode Ratio, avec une ratio de 1, soit format carré.

Les ratios peuvent être définis en nombre, type 1 ou 1.5, mais aussi dans un format L/H, comme par exemple 16/9.

Layout 3 colonnes

Un layout/bloc pour une mise en page sur trois colonnes

Nous avons vu les blocs de texte et d’image/vidéos.

Ici, nous pouvons voir les deux autres types de blocs disponibles:

  • Embed/Iframe
  • Gallerie/Carrousel

Les carrousels/galleriesfonctionnent de la même manière que les images, mais nous pouvons en ajouter plusieurs.

Layout 1 colonne

Le layout 1 colonne permet des blocs spécifiques en plus

Un bloc de liens colorés.
Les pages listées ici utilise tout ce que nous venons de voir en terme de structuration de pages.

Un bloc de colonage de pictos, pour des sections types caractéristiques/dispositifs

Titre
texte
Titre
texte
Titre
texte
Titre
texte