The STUDIO editor is where you can design your website structure & layout, add content and perfect the design to create and publish fully functional websites without writing any code.
The STUDIO Editor is organized this way:
Left bar - Elements panel (mini & extended)
Top bar - Project bar, Style panel, Responsive bar
Right bar - Layers panel
Bottom Bar - Help & Live chat.
The canvas
On top of the canvas - Page settings and page list
Left bar
Elements panel (mini)
From the elements panel, you can quickly drag & drop on the canvas:
Box
Image
Text
Icon
Elements panel (Extended)
Access the extended panel by clicking on the arrow on the minibar.
From the extended panel, access four tabs from which you can upload and drag & drop elements or content on the canvas:
Box
Here you find
Basic elements
iFrames (custom, maps, videos)
Forms
Templates & wireframe components
2. Images
Browse & add images from a library of more than 690,000 stock images (unsplash).
3. Icons
Browse and add icons from a free icons library.
4. Uploads
Upload your own image or GIF assets.
Top bar
On the top bar you will find in order:
Project bar
From the project bar you can:
Go to your personal dashboard by clicking on STUDIO icon
Go to your project dashboard by clicking on your project name
Undo or redo
Zoom in & out
Launch & share a live preview
Publish a website
Add & manage team members
Style panel
The style panel appears when selecting an element and its content changes according to which element has been selected (eg. when an icon is selected, the icon style bar will show.)
The box tab will always appear, containing: margin & padding, width & height, fill color & so on.
On the far left of the box tab you will find ‘Display’, ‘Position’ and ‘Z-index’.
On the far right of the box tab you find states (including Hover).
Responsive Bar
The responsive bar allows you to visualize your website on multiple screen sizes, to quickly make it responsive.
Layer Panel
The layer panel can be accessed by clicking on this icon on the right bar:
Once extended, the layers panel will show layered element, to clearly visualize parent & child relationships. You can expand and and shrink parent elements to show or hide their child boxes.
Bottom Bar
Live chat
With live chat you can ask for support at any time and we’ll respond as quickly as possible.
Help
From Help you can access all learning & support material.
Canvas
The canvas is your work area.
On the top of the canvas you find:
Pages List
Current page name and URL
Delete, Duplicate & Add page or modal buttons