Interface
Topbar
Content:
  • Dashboard
  • Pages and Layers Panel
  • Code Editor
  • Undo
  • Redo
  • Share
  • Preview
  • Export in create-react-app
  • Account Settings
Work Area
Content:
  • View panel
  • Page
  • Theme panel
  • Element props panel (when an element is selected)
  • Help button
View panel
Under Topbar, you can find the View panel. You can zoom and resize the page, choose the desired breakpoint option.
Zoom
Zoom in the page if you want to take a closer look at the details, and zoom out if you want to see an overall view of the page design. To make your work even faster, use the following shortcuts: cmd(ctrl)+, cmd(ctrl)-, cmd(ctrl) + 0.
Page resolution
To specify the accurate resolution of the page, enter values in the input fields: left field is for width, the right one is for height. If you want the height to be set automatically, enter auto.
Breakpoints
Breakpoints (control points) are the conditions under which additional design options for your page appear. For example, if your screen width is less than 768px, your four-column layout can turn into the two-column one.
Choosing the breakpoint design is up to you. Just activate the desired breakpoint and set the element styles. There are three ways to activate a breakpoint:
  • Select an option from the dropdown list.
  • Click on the corresponding breakpoint width range on the panel.
  • Stretch or narrow down the page to the desired width.
If you want to add a custom breakpoint or edit an existing one, go to the Theme panel and click on the “+” icon to add a new value to the Breakpoints section.
Preset resolutions of popular devices
To make sure that your website is displayed correctly, use our presets resolutions of popular devices.
Page
On the page, you can see the page version that is close to how it is going to appear for your visitors. The page consists of elements and blocks.
Blocks
Blocks are a group of elements. To select a block, click on it. To select several blocks at a time, click on the desired blocks holding down the Shift key.
Blocks are a group of elements. To select a block, click on it. To select several blocks at a time, click on the desired blocks holding down the Shift key.
Once you select a block, the Props and Button tabs will appear. You can do the following actions to the blocks:
  • Move a block with the handler.
  • Add an element to a block by clicking on the “+” icon or dragging it from the Components tab.
  • Move up a block.
  • Move down a block.
  • Clone a block.
  • Remove a block.
How to add a block
To add a new block to the page, click on the “+” icon. Blocks are grouped by categories.
Elements
Elements are components the page contains. To select an element, click on it. To select several elements at a time, click on the desired elements holding the Shift key.
Once you select an element, the Props panel (on the right) and Button bar (on the page) will appear.
In addition, you can manage elements in the Tree tab. You can do the following actions to the elements on the page and layers panel:
  • Select one or several elements.
  • Move an element to another place.
  • Clone an element (shift+d or drag it while holding down the Alt key).
  • Remove an element (del or backspace).
You can call the context menu for an element. The menu contains a list of actions you can do to the element. To call it, mouse over the element and right-click on it.
How to add an element
There are two ways to add an element on the page:
  • Click on the “+” icon on the Button tab.
  • Open the layer panel, go to the Components tab and drag the desired component on the page.
How to resize an element
You can resize elements with absolute and fixed position with a mouse. Just grab any corner or edge of the selected element and pull it to the desired size.
Text Editing
When you select the text, a bar allowing to quickly edit the text appears above the selected text.
There, you can find the following action buttons:
  • Bold
  • Italic
  • Insert link
  • Convert to a part(span)
  • Clear formatting
Converting to span
If you need to restyle a part of the text, for example, highlight a few words, highlight a sentence, or change the letter spacing of a word, you can select the desired part of the text and convert it to span clicking on the 
 icon. After the conversion, you can change the style of the span if needed — apply any properties from the panel.
Help Button
When you select the text, a bar allowing to quickly edit the text appears above the selected text.
Shows a list of links to:
  • Documentation
  • Keyboard Shortcuts
  • Community on Spectrum
Share project
You can share your project to work on it together with your team. The access to the project is given by link only. Everyone has edit permissions.
To share the project with other users, click on the “Share project” button. A window with a list of users the project is available to will appear. At the end of the list, you can find the “Copy invite link” button. Click on it to copy the link. Send the link to another user so that this user could work on it.
Preview
To preview how the page is going to appear for your visitors, click “Preview” or use the shortcut Cmd(Ctrl)+P. In this view mode, it’s convenient to check how elements interact with the mouse cursor, how animation effects load and how the site is displayed on devices with different screen width and height.
Export
If you would like to have your site hosted on your own hosting provider, the site export option will come in handy. You can export your site into an archive with a create-react-app or gatsby project.
Create-react-app
Here are the steps to export your site and enjoy the result of your work:
  • Click on the “Export” button.
  • Choose create-react-app.
  • Extract the downloaded ZIP archive.
  • Open the project in your code editor.
  • Open the console.
  • In the console, go to the main project folder.
  • You should have the node.js library already installed.
  • Enter the command “npm i” to set dependencies.
  • After the successful installation, enter “npm start”.
Gatsby project
Account
To switch an account, click on the profile icon in the top right corner and choose “Sign Out”.
Context Menu
A context menu allows you to do actions to:
  • Element
  • Component
  • Layer on the layers panel
  • Page
To call a context menu, mouse over the desired object and right-click on it.
Context Menu of an element
  • Dublicate
  • Delete
  • Create component
Context Menu of a group of elements
  • Dublicate
  • Delete
  • Create component
  • Detach
Context Menu of a component
  • Dublicate
  • Delete
  • Create component
Context Menu of a layer
  • Rename
  • Dublicate
  • Delete
Context Menu of a page
  • Rename
  • Dublicate
  • Delete