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:

  1. 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
Did this answer your question?