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
Elements panel (mini)
From the elements panel, you can quickly drag & drop on the canvas:
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:
Here you find
- Basic elements
- iFrames (custom, maps, videos)
- Templates & wireframe components
Browse & add images from a library of more than 690,000 stock images (unsplash).
Browse and add icons from a free icons library.
Upload your own image or GIF assets.
On the top bar you will find in order:
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
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).
The responsive bar allows you to visualize your website on multiple screen sizes, to quickly make it responsive.
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.
With live chat you can ask for support at any time and we’ll respond as quickly as possible.
From Help you can access all learning & support material.
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