In this chapter, we're taking a look at the interface of the editor. We'll walk you through all of the panels and menu's, so you know exactly where to find a feature or setting, and, more importantly, what all of these settings do.
The left panel
The panel on the left controls the things you see on the canvas. From here, you can add new elements to our canvas, add and control scenes, switch between the desktop and mobile version, and show or hide the timeline used to control animations.
The top bar
At the top you'll find the global options under the 'M'-button, as well as the save, preview & publish buttons. On the right, there's options to align your selected element or zoom on the canvas.
The right panel
The panel on the right is where you'll find all of the settings and features that alter the canvas itself and the elements on it.
- In the 'General' panel, you can alter the size and behaviour of current scene you're editing on the canvas.
- The 'Media' panel contains all of the media for your current project. You can drag media from here directly to the canvas.
- The 'Layers' panel holds all of the elements you place on the canvas. You can swap their order or bring your layers together into groups.
The element panel
We're saving the best for last, as the element panel is maybe the most important one here. It holds all of the available settings and features you can apply to the selected element.
- The first tab holds the settings for your selected elements. This tab shows different settings, depending of the type of element you have selected. For example: for headings you'll see things like font, color and sizing, but for video's you'll see the option to enable autoplay.
- The second tab is used to animate your elements. There are four different types of animations available: start, repeating, end, and scroll path. Scroll path animations are only available on longpage scenes.
- The third tab contains the effects and hover effects you can apply to your elements, such as shadows, blendmodes or blurs.
- The fourth tab holds the interactions an element can perform. It can perform actions when it's hovered or clicked, such as enabling other elements, scrolling to a certain element or scene, or navigating to another page or url.
- Finally, there's the 'accessibility' tab, where you can optimise a selected element for SEO and WCAG accessibility, such as setting H-tags for headings.
Oh, and this chapter also contains the most important part of the entire course! We can't spoil it here though, so you'll have to watch the video to find out.
Build along with us
Want to build the complete example page in this essential course along with us? You can download all the course assets here:
