TABLE OF CONTENTS
- 1 - ‣ Hero
- a - General
- b - Heading
- c - Colors
- d - Buttons
- e - Composition
- 2 - ‣ Columns
- a - General
- b - Heading
- c - Card
- d - Colors
- e - Buttons
- f - Composition
- 3 - ‣ Editor
- a - General
- b - Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
- 4 - ‣ Facts & Figures
- a - General
- b- Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
- 5 - ‣ Form
- a - General
- b - Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
- 6 - ‣ Image
- a - General
- b - Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
- 7 - ‣ Text & Image
- a- General
- b - Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
- 8 - ‣ Video
- a - General
- b - Heading
- c - Content
- d - Colors
- e - Buttons
- f - Composition
🔥 For block configuration management, you can click the small padlock to the right of the name — this will open a small box with all the settings, which you can move freely around the screen. You can also make this box transparent to better visualize your design.
1 - 
Hero
For this block, you have 4 possible image positions relative to the text:
- centered
- left
- right
- background
When configuring this block, the layout will change depending on the position. For example, if you set the title in white, it will be clearly visible when the image is centered, on the left, or on the right, but it will be less readable if the image is used as a background (even with a color overlay for opacity).
Don’t hesitate to create several compositions so you can reuse different Hero blocks depending on the image position you want.
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → texts position, images, and buttons
- Depending on what you selected above , you can also set the image border radius
- Choice of container type → whether the block is framed by another block or not
- Based on your choice, you can then set the border thickness of this new frame, as well as its border radius
b - Heading
- Title font style → choice of typography (from one of those previously created)
- Text font style → choice of typography (from one of those previously created)
c - Colors
- Choice of the container border color
- Choice of the container background color
- Choice of the image color opacity (if the image is placed behind the text — as a watermark, it should be dimmed to keep the text readable; you define the overlay opacity)
- Choice of the block background color
d - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
e - Composition
Add a new composition = redo everything for a new block style, so you can create a different Hero block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
2 - 
Columns
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → texts position, images, and buttons
- Container type selector for the entire block
- Based on your choice, you can then set the border thickness of this new frame and its border radius
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Card
- Choice of card type - for each column, whether it will be framed or not.
- Based on your choice, you can then set the border thickness of this new frame and its border radius
- Choice of column title typography
- Choice of paragraph typography in the column
- Choice of typography style for the different heading levels available in the columns: level 3, level 4, level 5, level 6
d - Colors
- Choice of bullet points color (for a bullet list)
- If the column has a frame: choice of the frame’s border and background color
- If there is a container: choice of the container’s border and background color
- Choice of the block’s background color (yes, you can have up to 3 colors together for the backgrounds!)
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Columns block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
3 - 
Editor
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → whether the text is framed or not.
- Depending on what you selected above, you can also set the border radius and thickness.
- Container type selector → whether the block is framed by another block or not.
- Based on your choice, you can then set the border thickness and border radius of this new frame.
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Space → choice of the block width (reduced or full screen width)
- Choix des styles de typographies pour les :
- paragraph
- title level 1
- title level 2
- title level 3
- title level 4
- title level 5
- title level 6
- Quote
- Variant selector: depending on the shape you choose, you can also set the border radius and/or thickness
- Choice of the typography style for quotes
- Table : choisissez le style de tableau souhaité
- Variant selector: depending on the shape you choose, you can also set the border radius and/or thickness
- Choice of the typography style for table head and table content
- Image & video
- Choice of the image/video border radius inserted in the Editor block
- Choice of the typography style for image caption
d - Colors
- Choice of bullet color (for a bulleted list)
- If there is a table: choice of the header background color and the color of the borders separating the rows
- If there is an inner container: choice of the inner container’s border and background color
- If there is a container: choice of the container’s border and background color
- Choice of the block’s background color (yes, you can have multiple colors together for the backgrounds!)
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Editor block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
4 - 
Facts & Figures
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → only one available
- Selection of the container type: depending on your choice, you can set the border thickness and border radius
b- Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Choice of inner container style: whether the elements are framed within the block or not
- Depending on the choice, you can set the border radius and thickness
- Fact & Figure position (left, center, right)
- Choice of figures typography style
- Choice of facts typography style, and if desired, the radius of their border
- Choice of title and paragraph typography style
d - Colors
- Choice of the background color of the facts
- Choice of the border and background color of the container, and of the inner container if applicable
- Choice of the overall block background color
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Fact & Figures block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
5 - 
Form
- Preview in the center / settings on the left + close button (X)
a - General
- Choice of container type. Depending on the choice, set the border radius and thickness
- Choice of inner container style within the block
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Choice of border radius and thickness for the form input fields
- Choice of label typography style
- Choice of input typography style (what users actually type in the fields)
- Choice of typography style for the rest of the block content
d - Colors
- Choice of error color
- Choice of success color
- Choice of required field color
- Choice of input field border color
- Choice of secondary color, also applied to active fields (e.g., fields currently being typed in or checked)
- Choice of block and container background color, if any (in this case, also choose the border color)
- For multi-step form, choice of progress indicator color and text color
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
- Bouton “soumettre” → choix du style du lien simple parmi la liste de ceux créés au préalable
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Form block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
6 - 
Image
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → choice of the image layout and caption position
- Choice of container type, and depending on the choice, set the border radius and thickness
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Choice of image border radius
- Choice of block title typography style
- Choice of paragraph typography style, and of heading levels 3, 4, 5, and 6
d - Colors
- Choice of bullet color
- If there is a container: choice of the container’s border and background color
- Choice of caption background color
- Choice of block background color
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Image block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
7 - 
Text & Image
- Preview in the center / settings on the left + close button (X)
a- General
- Variants selector → choice of the layout for images and text blocks
- Depending on the selection, set the inner container’s border radius
- Choice of container type, and if applicable, set the container’s border radius and thickness
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Choice of image border radius
- Choice of block title typography style
- Choice of paragraph typography style, and of heading levels 3, 4, 5, and 6
d - Colors
- Choice of bullet color
- If there is an inner container: choice of the inner container’s border and background color
- If there is a container: choice of the container’s border and background color
- Choice of block background color
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Text & Image block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).
8 - 
Video
- Preview in the center / settings on the left + close button (X)
a - General
- Variants selector → choice of the video size within the block
- Choice of container type, and if applicable, set the border radius and thickness
b - Heading
- Heading style → choice of title alignment (left, center, right)
- Title font style → choice of typography (from one of those previously created)
- Description font style → choice of typography (from one of those previously created)
c - Content
- Set the video border radius
d - Colors
- If there is a container, choice of the container’s border and background color
- Choice of the block’s background color
e - Buttons
- Primary → choice of the primary button style from the list of those previously created
- Secondary → choice of the primary button style from the list of those previously created
- Tertiary → choice of the primary button style from the list of those previously created
- Basic link → choice of the primary button style from the list of those previously created
f - Composition
Add a new composition = redo everything for a new block style, so you can create a different Video block to reuse whenever you like.
- Name your new composition, then go through the elements one by one as above!
- You can delete or duplicate these new compositions (useful to quickly create small variations!).
- At any time, you can reset each group of elements: the group will revert to the settings of the default block (if you saved it in the meantime).