We know that creating a website from scratch with a completely new tool can be intimidating and frustrating, that’s why we decided to show you step by step how to get started with STUDIO. We promise you will be an expert in no time!
Register and start a new project.
After registering your new account, you will see your dashboard. Here you will be able to have an overview of your projects. Click on “create new project” to get started.
Select Web page and choose whether to start with a template or with a blank canvas.
Get familiar with the UI.
Before jumping straight into the creation process, get to know the UI a little better so that you can hit the ground running.Select Web page and choose whether to start with a template or with a blank canvas.
Add menu - Left panel
You find components to drag and drop such as boxes, images, text, icons and so on.
Tool Panel - Top bar
At the very top you have live preview, publish and invite team members buttons. After clicking on the element you want to work on, the tool panel will show and you will be able to edit margin, padding, font, colors and so on.
Html tag button:
top left corner. Add tags to paragraphs and titles to make your site SEO friendly.
top right corner. When it’s checked, you can modify the site for hover mode.
Responsive bar - Top lower bar
Start with the standard format (no color and black lines on each side). You can modify your website for multiple screen sizes by clicking on the colorful icons on this bar.
Page menu - Right panel
Add pages and visualize elements and their hierarchies.
This contains the breadcrumb bar, which shows the element you are currently selecting. Also, you can use this bar to zoom, preview your site or go back to your previous site version.
Add & modify ready-made components, images, text
The breadth and depth of STUDIO functions may make it challenging to master all at once, so we will show you the most useful actions you can take to create your website.
💡: Make sure you always start creating your site from desktop size (the responsive bar is grey).
Add and modify a component & change image
Instead of starting from a completely blank canvas, you can select one of our wireframes or template components. Even if you choose to do so, you have complete customization freedom.
For example, as shown in the video, if you want to change the Hero header image, just select it and then browse one of the stock photos or upload your own one: you will be able to preview the site simultaneously.
Selecting the right component & Edit text
When trying to selecting the element you want to edit, clicking on it will firstly take you to the parent element (the outside box). Click again until the element’s edges are highlighted blue, and you will be able to modify the text or element.
Check out the video below for a practical demonstration:
Unlike Power point where you can drag & drop elements wherever you want on the canvas, on STUDIO you need to use horizontal & vertical alignment and direction. This is necessary to make your site look balanced on every screen size.
First, you need to select the element you want to move. As you can see on the video below, horizontal & vertical align buttons will appear at the top and left edges. When there is more than one element, or text within the same box, by using these buttons you will be able to align them along with the selected text, or other element. The direction arrow appears outside the box and lets you choose the direction of other items in relation to the selected one. The concept may sound very complicated, but after you start trying out yourself you will realise that it is actually extremely intuitive. Have a look at the video below to have a better image:
Padding & Margins
Padding and margins can be set either by inserting the numeral value on the tool bar (as always, only after selecting the right element) or by dragging the green and orange edges on the canvas.
Adding box & text
Simply drag and drop from the add bar on the left.
Adding Links & Live preview
To make text or images clickable, simply select the element. A round label will appear on the right side: once you click on it, you can select the page that you wish the element to link to from the list that will appear.
To check out whether the link works and is clickable, you can try out yourself by having a look at the preview (bottom bar, play button) or by using the live preview link that you can obtain from the top right of the UI.
Make your site responsive
To make your site look perfect and professional on any screen size, don’t forget to edit multi device versions by using the responsive bar.
Live preview, Add a domain and publish your website
Before going public you can check out a preview of your site by clicking on the “Live Preview” button on the top bar, like shown on step 3. You can also send the preview link to friends, or invite members to help you create or edit your site.
Once you’re happy with the result, click “Publish” and either enter a domain name you own or customize the studio domain name. Your site is finally live! Congratulations for making it this far.
We have covered all of the most important features to get you started with STUDIO!
For more advanced questions, we are always there to support you via the live chat!