Master Editor X one feature at a time. Each lesson has a detailed feature breakdown, followed by a hands-on exercise for you to complete on Editor X.
Learn how to structure a website on Editor X using pages, sections and containers. Add as many pages and sections as you need, rearrange them and navigate between them using layers and breadcrumbs.
Take a tour of the Inspector panel where you control size, position and behavior of all elements on your website. This is an overview of all the properties and dropdown options on the panel.
Create tailor-made experiences for every device with custom breakpoints. Find out where to find breakpoints on Editor X, and how to use them to edit style, position and behavior of elements at every viewport width.
Discover 3 layouting tools on Editor X that harness the power of flexbox technology. With Stack, Layouter and Repeater, you can let your content seamlessly adjust across all viewports.
Find out how to design intricate layouts using CSS grid. See how to apply a grid, dock elements to gridlines and edit the grid with custom units.
Dive in to the concept of Masters, headers and footers on Editor X. Explore the Masters panel, how to turn any section into a Master, and how to save, reuse, and redesign them.
Explore the building blocks of your Editor X canvas. Learn how to work with sections to create multiple design experiences on every site page.
Add new sections, apply grids, flip them to vertical and customize their style and layout per breakpoint.
See how you can use designed sections to learn new design techniques and bootstrap your creation process. Each section comes with built-in responsive behavior and can be broken apart and customized.
Element hierarchy & parenting.
Understand hierarchy on Editor X and see how the parenting model influences the behavior between elements. Discover the effects of hierarchy on the styling and positioning of elements across all breakpoints.
Explore the potential of a powerful image on Editor X. Learn how to add, style, replace and position images on every site page. See how you can organize your images and adjust their attributes to create exceptional web experiences.
Video tools & decorative elements.
Bring your boldest creations to life with video tools and decorative elements on Editor X. Learn how to add and edit Transparent Videos, VideoBox and Vector Art to create exceptional web experiences.
Use stack to control the vertical relationship between elements and prevent overlap on smaller screens. Add, remove and organize the elements in your stack to ensure your content maintains its order at every viewport.
Design responsive layouts with boxes that wrap at every viewport using Layouter. Add elements, control the wrap behavior, and customize your layout per breakpoint.
Create, manage and share design libraries with your team to streamline your workflow and drive collaboration. Build a library by adding typography, color themes and design assets, and reuse it on any site in the same account.