Editor basics
Editor layout
- [1] The top menu bar.
- [2] The canvas. You can select an element here (and the sidebar will show).
- [3] The sidebar for elements. You can change the data and styles of each element here.
Elements
- [1] Click in the canvas to select an element.
- [2] Add an element by the add buttons before or after the selected element. You can click the add icon inside the Page and Container element.
- [3] Element layers are on the top of the sidebar. If you cannot select certain elements such as Page or Background, you can click its child elements and then select it in element layers.
- [4] The duplicate button
- [5] The delete button
- [6] You can rearrange the position of an element by dragging it.
Changing data
Normally if you just use the template and don't want to mess with the designs, you can focus on the Data tab in the sidebar. It will have everything you need to fill in the template, such as button labels, links and image uploads.
Changing styles
Shape and contents
If you want to change attributes of the element itself, such as Width, Height, Rounded corners, try the Shape tab in the sidebar. But if you're looking to change the attributes inside the element, such as Align, Gap, Padding vertical, take a look at the Contents tab.
Other tabs like Text, Background, Borders etc. have more intuitive naming. And you can also learn by doing since the small color preview is there to help guide you.
Changing colors
If you check closely, there's a small preview of the colors ( and images ) of the current element inside the tab. This could help you quickly locate if you want to customize the colors or re-upload background images.
Publish
Once you've done editing the data and the styles. In the top menu bar, you can preview your edits. And if everything looks good to you. You can publish your site!
Learn more (optional)
You can ignore the following topics now. Since it's already enough for you to create a simple website. But when you become more serious in making a unique design, you can come back to the following topics to unlock the full power of the slidde editor.