Pages and Layers Panel
Under Topbar, you'll find the View panel. You can zoom, resize the page, and choose the desired breakpoint option.
Zoom in on 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 speed up your work even more, use the following shortcuts: cmd(ctrl)+, cmd(ctrl)-, cmd(ctrl) + 0.
To specify the accurate resolution of the page, enter values in the input fields: the left field is for width, the right one for height. If you want the height to be set automatically, enter auto.
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 can turn your four-column layout into a two-column layout.
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 for popular devices
To make sure that your website is displayed correctly, use our presets resolutions for popular devices.
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 are groups of elements. To select a block, click on it. To select several blocks while at a time, click on the desired blocks holding down the Shift key.
Once a block is selected, the Props panel (on the right) and Button bar (on the page) will appear. You can perform the following actions to the blocks:
How to add a block
To add a new block to the page, click on the “+” icon. Blocks are grouped by category.
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 while holding the Shift key.
Once an element is selected, 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 perform 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 open the context menu
for an element. The menu contains a list of actions you can perform on the element. To open it, mouse over the element and right-click on it.
How to add an element
There are two ways to add an element to the page:
Click on the “+” icon on the Button tab.
Open the layer panel, go to the Components tab and drag the desired component onto the page.
How to resize an element with absolute and fixed position
You can use your mouse to resize elements with absolute and fixed position. Just grab any corner or edge of the selected element and pull it to the desired size.
When you select the text, a bar allowing you to quickly edit the text appears above the selected text.
There, you can find the following action buttons:
Convert to a part(span)
Converting to span
If you need to restyle 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 by clicking on the
icon. After the conversion, you can change the style of the span if needed — apply any properties from the panel.
To preview how the page is going to appear for your visitors, click “Preview” or use the shortcut Cmd(Ctrl)+P. In this preview mode, it’s easy 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.
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.
Here are the steps to export your site and enjoy the result of your work:
Click on the “Publish” button.
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”.
To switch account, click on the profile icon in the top right corner and choose “Sign Out”.