Blocs simples

🔥 Pour toute la gestion de la configuration des blocs, vous pouvez cliquer à droite du nom sur le petit cadenas - cela créer une petite boîte avec tous les paramètres, que vous pouvez promener sur tout l’écran à votre guise. Vous pouvez également rendre cette petite boîte transparente pour mieux visualiser votre design.

1 - Hero

💡

Pour ce bloc, vous avez 4 choix possibles de position de l’image par rapport au texte :

centrée
à gauche
à droite
en filigrane

Lorsque vous configurez ce bloc, d’une position à une autre, les éléments vont apparaître différemment. Par exemple, si vous définissez un titre en blanc, il sera bien visible si l’image est centrée, à gauche ou à droite, mais moins bien lisible si l’image est en filigrane et ce malgré l’opacité d’un éventuel voile de couleur sur l’image. N’hésitez donc pas à faire plusieurs compositions pour pouvoir utiliser différents blocs Hero selon les positions des images souhaitées.

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → position des textes, images et boutons
En fonction de ce que vous avez sélectionné ci-dessus, vous pourrez également définir l’arrondi de l’image
Choix du type de contenant → si le bloc est ou non encadré par un autre bloc.

Selon ce que vous choisissez, vous pourrez alors définir l’épaisseur de la bordure de ce nouveau cadre, et son arrondi

b - En-tête

Style de police du titre → choix de la typographie (parmi l’une de celles créées au préalable)
Style de police du texte → choix de la typographie (parmi l’une de celles créées au préalable)

c - Couleurs

Choix de la couleur de bordure du contenant
Choix de la couleur de fond du contenant
Choix de la couleur d’opacité de l’image (si l’image est derrière le texte - en filigrane, elle devra être opacifiée pour que le texte reste lisible, à vous de définir l’opacité de votre couleur)
Choix de la couleur de fond du bloc

d - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

e - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Hero différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

2 - Colonnes

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → position des textes, images et boutons
Sélecteur du type de contenant pour le bloc entier

Selon ce que vous choisissez, vous pourrez alors définir l’épaisseur de la bordure de ce nouveau cadre, et son arrondi

b - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Encadré

Choix du type d’encadré - pour chaque colonne, si elle sera encadrée ou non

Selon ce que vous choisissez, vous pourrez alors définir l’épaisseur de la bordure de ce nouveau cadre, et son arrondi

Choix de la typographie du titre de la colonne
Choix de la typographie du paragraphe dans la colonne
Choix du style de typographie des différents niveaux de titres disponibles pour les colonnes : niveau 3, niveau 4, niveau 5, niveau 6

d - Couleurs

Choix de la couleur des puces (pour une liste à puces)
S’il y a un encadré à la colonne : choix de la couleur de bordure et de fond de l’encadré
S’il y a un contenant : choix de la couleur de bordure et de fond du contenant
Choix de la couleur de fond du bloc lui-même (oui, vous pouvez avoir jusqu’à 3 couleurs ensemble pour les fonds !)

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Colonne différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

3 - Éditeur

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → si le texte est encadré ou non

En fonction de ce que vous avez sélectionné ci-dessus, vous pourrez également définir l’arrondi et l’épaisseur de la bordure

Choix du type de contenant → si le bloc est ou non encadré par un autre bloc.

Selon ce que vous choisissez, vous pourrez alors définir l’épaisseur de la bordure de ce nouveau cadre, et son arrondi

b - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Contenu

Espace → choix de la largeur accordée au bloc (réduite ou pleine largeur de l’écran)
Choix des styles de typographies pour les :

paragraphe
titre niveau 1
titre niveau 2
titre niveau 3
titre niveau 4
titre niveau 5
titre niveau 6

Citation

Choix du style de typographie des citations
Choix de la variante : selon la forme choisie, vous pourrez définir en plus l’arrondi et/ou l’épaisseur de la bordure

Tableau : choisissez le style de tableau souhaité

Sélecteur de variantes - en fonction, définition éventuelle de l’épaisseur de la bordure
Définition de l’arrondi des cases
Choix du style de typographie des entêtes du tableau et de son contenu

Image et vidéo

Choix de l’arrondi des images et/ou vidéos qui seront insérées dans le bloc Éditeur
Choix du style de typographie pour les légendes

d - Couleurs

Choix de la couleur des puces (pour une liste à puces)
S’il y a un tableau : choix de la couleur de fond des entêtes et de celle des bordures séparant les lignes
S’il y a un contenant interne : choix de la couleur de bordure et de fond du contenant interne
S’il y a un contenant : choix de la couleur de bordure et de fond du contenant
Choix de la couleur de fond du bloc lui-même (oui, vous pouvez avoir plusieurs couleurs ensemble pour les fonds !)

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Éditeur différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

4 -Chiffres-clés

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → une seule disponible
Sélection du type de contenant : selon le choix, possibilité de définir l’épaisseur et l’arrondi de la bordure

b- En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Contenu

Choix du style de contenant interne : si les éléments sont ou non encadrés dans le bloc

Selon le choix, possibilité de définir l’arrondi et l’épaisseur de la bordure

choix de l’alignement des FAQ (gauche, droite, centré)
Choix du style de typographie pour les chiffres
Choix du style de typographie pour les faits, et si souhaité, du rayon de leur bordure éventuelle
Choix du style de typographie pour le titre et le texte (paragraphe)

d - Couleurs

Choix de la couleur de fond des faits
Choix de la couleur de bordure et de fond du contenant, et du contenant interne s’il y a lieu
Choix de la couleur générale de fond du bloc

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Chiffres-clés différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

5 -Formulaire

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Choix du type de contenant. En fonction, choix de l’arrondi et de l’épaisseur de la bordure
Choix du style de contenant interne au bloc

b - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Contenu

Choix de l’arrondi et de l’épaisseur de la bordure des champs de saisie du formulaire
Sélection de la typographie des libellés des champs
Sélection de la typographie des entrées (= ce que les personnes vont effectivement taper dans les champs)
Sélection de la typographie du reste du contenu du bloc

d - Couleurs

Choix de la couleur des erreurs
Choix de la couleur des champs nécessaires
Choix de la couleur de bordure des champs de saisie
Choix de la couleur secondaire également valable pour les champs actifs (= ceux où les personnes sont en train de taper ou de cocher par exemple)
Choix de la couleur de fond du bloc et des contenants s’il y en a (dans ce cas, choix de la couleur de fond et de bordure)

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable
Bouton “soumettre” → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Formulaire différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

6 -Image

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → choix de la présentation de l’image et de la position de sa légende
Choix du type de contenant, et selon, définition de l’arrondi et de l’épaisseur de la bordure

b - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Contenu

Choix de l’arrondi de l’image
choix de la typographie du titre du bloc
Choix de la typographie du paragraphe, et des niveaux de titres 3, 4, 5 et 6

d - Couleurs

Choix de la couleur des puces
S’il y a un contenant : choix de la couleur de la bordure et du fond du contenant
Choix de la couleur de fond de la légende
Choix de la couleur de fond du bloc

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Image différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

7 - Texte-Image

Prévisualisation au centre / paramètres à gauche + croix pour fermer

Général

Sélecteur de variantes → choix de la présentation des images et blocs de texte

Selon la sélection, définition de l’arrondi du contenant interne

Choix du type de contenant, et le cas échéant, définition de l’arrondi et de l’épaisseur de la bordure du contenant

a - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

b - Contenu

Choix de l’arrondi de l’image
Choix de la typographie du titre du bloc
Choix de la typographie du paragraphe, et des niveaux de titres 3, 4, 5 et 6

c - Couleurs

Choix de la couleur des puces
S’il y a un contenant interne : choix de la couleur de la bordure et du fond du contenant interne
S’il y a un contenant : choix de la couleur de la bordure et du fond du contenant
Choix de la couleur de fond du bloc

d - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

e - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Texte-Image différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

8 - Vidéo

Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Général

Sélecteur de variantes → choix de la taille de la vidéo dans le bloc
Choix du type de contenant, et définition de l’arrondi et de l’épaisseur de la bordure le cas échéant

b - En-tête

Choix de l’alignement du titre
Choix de la typographie du titre (parmi celles créées au préalable)
Choix de la typographie de la description (parmi celles créées au préalable)

c - Contenu

Définition de l’arrondi de la vidéo

d - Couleurs

S’il y a un contenant, choix de la couleur de la bordure et du fond du contenant
Choix de la couleur de fond du bloc

e - Boutons

Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable

f - Composition

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Vidéo différent à réutiliser à l’envi.

Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
À tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

Aller sur Les Blocs avancés →