For the best editing experience, we highly suggest using, as the browser, the latest Chrome version
The editor is mainly splitted in 3 different sections:
Canvas - the largest and the most important section. This where you'll see your project taking life, by creating layouts with blocks and arranging them via Drag & Drop capability
Right Sidebar - The right sidebar is responsible to handle the behaviour and styles (color, background, etc.) of any component dropped in the canvas, the components settings, the layers or hierarchical structure of the page and the Blocks of components to add to the page.
Component settings configuration
Layers or Hierarchical structure
Editing the elements of the page
Components to drag 'n' drop
Topbar - This section contains different commands for your project editing and management like view without borders, preview, view code, undo, redo, import, erase canvas and save page.
You should know that all the elements dropped in the canvas are what we call Blocks. A block can be a really simple element like an image and text or also a complex composition of other blocks. For this reason, we've split them into different categories but the most important one is definitely the Basic Blocks, getting good knowledge on how they work will help to create and manage all other categories.
As you see the Basic Blocks category is selected by default and underneath there are also other sub-categories, for now, we'll stick with the Basic one.
Click on the Basic sub-category to show all the available blocks in it and let's focus on 2 really fundamental blocks: Section and Grid
The Section is quite easy to use and understand, you can drop it only in the root layer (the Body) of the page, it's not nestable, so you can't put one Section into another. The purpose of this block is quite simple, keep your content centered and responsive. All you have to do is to drop it into the canvas and you'll see its outline
You can start to drop in the Body whatever you want, the editor doesn't limit you, but to keep your content look good across multiple devices we highly suggest starting with this Block.
You will see that the Section has an inner element called Container, this is where we'll drop our content and it's responsible to keep our content centered. It also has the width set to auto applied by default, but you can change it if you want your content to be placed in a specific size.
For centering the block set the left and right margin to auto
Now that we have placed a section block we can start exploring the next immediately suggested one, the Grid block.
#Three column block
The Three column block is mainly responsible to layout your content so it's probably the one you'll need to use the most. Indeed, we suggest taking your time and get very confident with this block as once grasped the basics you'll be able to build any possible layout. Let's start by dropping one Three column block in our section.
As you can see the block is composed of a row element (Row) and 3 inner columns (Cells). By selecting the Cell you'll see in the right sidebar, cell-related properties.
You can add as many columns as you want, by selecting the Cello and clicking by cloning a selected column (via clone action on the block element toolbar or simply using ⌘ + C/ ⌘ + V shortcuts)
Copying a cell
For deleting columns, just select one and press ⌫ (Delete) key or via delete action (trash icon) on the block toolbar
deleting a cell
If you make a mistake, remember you can use these shortcuts:
⌘ + Z - Undo
⌘ + ⇧ + Z - Redo
Drag a text icon into a cell
Drag a Text block into a cell. To update text blocks just double-click on them to enter in edit mode and once you've finished just click anywhere else outside of the block.
Double click on the text to edit it
Great, now you've probably noticed that texts have some kind of white space between them. The Header block has default top and bottom margins (outer gap, highlighted with yellow color on hover), instead, the text has paddings (inner gap, highlighted with blue color on hover) around all its content. When you need, you can actually adjust them very quickly via the Style Manager under the Dimension section.
Now let's drag an Image block into the right column of our header. Once the block is dropped the Image Manager modal will pop up.
You can start uploading an image from your computer by clicking on the Upload button.
Now just double-click on the image you like, to select it and close the modal, then you will see it in the canvas. If you need to change the image you can always double-click on that block to reopen the Image Manager.
The image will try, automatically, to fill the available width of the element containing the image but you can always resize it by using resize handlers.
We can drop a Link anywhere in a cell. When you select a Link, on the right sidebar, you can see all the available options under Settings
Select the link and then click on the configuration button in the right sidebar
Title - Is a name for the link that only appears in certain audio accesible devices for the hearing impaired
Href - Is the URL you want to link
Target - It would be the window in which the link would open, it could be the same window the link is or another one.
The Link component doesn't accept any other element than text inside it, but if you need to apply a link on anything else (eg. an image) you can use the Link Block which allows you to have the same options of the Link but with the possibility to drop anything else inside it
Link block with an image
The top navbar contains a logo and links.
Usually, it might be not easy to move around things into small blocks, so remember, in that case, it's much easier to move things in the Layers panel (right sidebar)
A lot nested grids might create too much white space around the content, so remember you can adjust it by changing their relative margins/paddings under the Dimension properties
By using some block you might have noticed how the Style Manager changes its properties based on the currently selected block (eg. grid-related properties under Layout category). So, each block can have its own set of properties to style in order to avoid the user let break the layout with some incompatibility.
Almost all the blocks have this set of styling categories
but there are some particular cases where this set might differ (eg. the Body block has only Background)
The State category you see above the classes is a bit a different category and its main purpose is to change some behavior of the block.
To change the background color, select the main section and change its Fill color (under Background) to the hexadecimal value you need ( eg. #FFFFF). To change Font color select the text block go under Typography and update its Font color with the same value.
By default, blocks are all made with the responsive design in mind, so most of them adapt automatically to the screen size change, but as it also allows a high level of layout customization some manual changes are still required for each type of device. So, keep in mind to check your design frequently.
On the topbar at the top left you can find the buttons to select the view for each device: desktop, tablet and mobile
#Shared styles with Classes
You can find the Class viewer in the right sidebar of the editor, right above the Style Manager properties
This panel will show you all the classes assigned to the selected block (with multiple selections it will show all the common classes between selected blocks). There is also a dropdown with States (we will see them later) and the "+" (Plus) button for adding classes to selected blocks.
Class viewer with the added class
You can edit by double-clicking on the name or remove it by clicking its "x" button.
Keep in mind that when you update style properties of a block containing classes it will updato all the block with that class applied.
Once the design of the page is finished we can finally publish it online. Save your page and close the editing window.
Click on the green Publish button at the top right. Put a name for your page and click publish. At this point your page is already published and available for viewing at the web publicly.