Interface
Topbar
Content:
  • Dashboard
  • Pages and Layers Panel
  • Code Editor
  • Undo
  • Redo
  • Share
  • Preview
  • Publish
  • 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'll find the View panel. You can zoom, resize the page, and choose the desired breakpoint option.
Zoom
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.
Page resolution
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
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.
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 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:
  • 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 category.
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 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.
Text Editing
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:
  • Bold
  • Italic
  • Insert link
  • Convert to a part(span)
  • Clear formatting
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.
Help Button
If you need reference information on how to work in Quarkly, use the Help Button.
This shows a list of links to:
  • Documentation
  • Video Documentation
  • Video Tutorials
  • 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 will find the “Copy invite link” button. Click on it to copy the link. Send the link to another user so that this user can work on too.
Preview
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.
Publish
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 “Publish” 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
On the official website you can read where you can deploy and host your Gatsby project.
Account
To switch account, click on the profile icon in the top right corner and choose “Sign Out”.
Context Menu
A context menu allows you to perform actions on an:
  • Element
  • Group of element
  • Component
  • Layer on the layers panel
  • Page
  • Project
To open a context menu, mouse over the desired object and right-click on it.
Context menu of an element
  • Duplicate
  • Delete
  • Create component
Context menu of a group of elements
  • Duplicate
  • Delete
  • Create component
  • Detach
Context menu of a component
  • Duplicate
  • Delete
  • Create component
Context menu of a layer
  • Rename
  • Duplicate
  • Delete
Context menu of a page
  • Rename
  • Duplicate
  • Delete
Made on Quarkly