Create your homepage and content pages with the visual editor
Create your homepage and content pages with the visual editor
Access the video
The visual editor is available to customize your home page, your free content pages, a free content area below your formulas and gift cards, your unsubscribe tunnel and the description of your shop products.
IMPORTANT
Prepare your visuals (images and icons) in the right formats and compressed before importing them into your media gallery from the visual editor.
You can create subfolders in your media gallery to organize your images. Be sure to not put spaces or special characters in the names assigned to your subfolders.
You can use Photopea to resize your images and Squoosh to compress them.
Open your image in Photopea.
Resize it by going to Image > image size (as a general rule, an image in web content should not exceed 500 px in width)
Export your image at 60% quality
Drag your image into Squoosh for a final compression layer
IMPORTANT
Your colors, text and title fonts can be customized from the CSS Variables window:
CSS variables: /docs/website-creation/customize-design
Presentation of the visual editor
The visual editor includes 2 parts:
the gallery of available blocks on the left
the preview of the page on the right (in computer and mobile version)
The arrangement of the blocks between them can be modified by selecting a block and dragging it to the desired place in the left part (management of the blocks and their content).
The disposition of elements within a block can also be customized by a simple drag and drop.
For each block in the content of a page, you can indicate if it is visible in computer version, in mobile version or both (from the block's Appearance tab).
Then, access the block details on the left side to customize the content.
In the block content, you will find 2 tabs:
Content : to fill in your text and add buttons
Appearance* : to define background colors and images, in computer and mobile version, and its filling
You also have the possibility to modify the text and background colors by accessing a color palette.
Build your palette of 10 colors: exit the visual editor and click on My sites in the left column then Edit (small pencil icon). In the Appearance tab, fill in your html color codes in the second custom CSS window.
It is also in the CSS variables window that you can customize the colors of your buttons, footer, ...
To help you define your colors, you can use the [Coolors] site (https://coolors.co/022b3a-1f7a8c-bfdbf7-e1e5f2-ffffff).
A block can be deleted.
A block can be copied. Then press CTRL+V to paste the block.
The content of a page can be copied. Then press Ctrl+V to paste its content.
When you have finished making changes, save the changes you made.
List of available blocks and examples
html : to build directly the content of your pages in html
markdown : to build text pages, like GTC, legal mentions
columns
.png>)
[**banner**](/docs/website-creation/add-a-banner)****
.png>)
section with icons
.png>)
section with title and icons !
newsletter
testimonials
steps
block centered
hovering images
evaluations
news
call to action hover
alternating right/left content
text with image !
title with button on the right
carousel of images
image gallery !
.png>)
If your instagram account is set up in the marketing settings of your site, the images can be directly uploaded to your gallery :)
products
checklist
statistics
text carousel with images !
FAQ / Features
Updated on: 24/01/2023
Thank you!