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

Was this article helpful?

Share your feedback

Cancel

Thank you!