All lessons.

Hands-on learners, this page is for you. Read bite-size feature breakdowns then try out the exercises on Editor X.

Editor X Essentials

Get to grips with the basics on Editor X. Meet your workspace, dive into site structure and learn how to work with breakpoints.

Small icon of a workspace. There is a box with a row at the top, there are 2 tiny black rectangles on the left side.

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Icon indicating sections. There is a rectangle with a black line above it and one below it, both lines are shorter than the rectangle side.

Sections

Learn how to work with sections—the building blocks of your site.

Icon for editing the grid. 5 small boxes connected in an upside down L shape. There are black dots in the opposite corner connecting them making a square shape.

Grid

Get to know how to customize grids using different units of measure.

Icon for element hierarchy. A small rectangle with black dots in it and a smaller one overlapping its bottom right corner.

Element Hierarchy 

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Icon for breakpoints with a small black rectangle indicating a desktop with a smaller rectangle on its short side indicating a mobile.

Breakpoints Part 1

Meet breakpoints and get an intro to the cascading model on Editor X.

Design & Layouting

Learn how to size and dock elements and work with advanced layouting tools like flexbox and CSS grid.

Icon for editing the grid. 5 small boxes connected in an upside down L shape. There are black dots in the opposite corner connecting them making a square shape.

Editing the Grid

Get to know how to customize grids using different units of measure.

Icon for sizing, showing a black line with two short vertical lines at the end of it

Sizing

Discover the difference between Fixed, Fluid and Scale Proportionally.

Icon for measurements. A small rectangle with a smaller one inside it on the left side.

Measurements

Learn when to use the right CSS units of measure to control how elements resize.

Icon for docking & margins. 2 very small black circles with 3 dots connecting them in one row.

Docking & Margins

Explore Editor X’s smart docking system.

Icon for containers. Outline of container with the sides made up of black dots.

Containers

Find out how to organize your content in containers.

Icon for stack. A small rectangle on its side with 2 black lines of different lengths underneath it.

Stack

Learn how to use stack to control the vertical relationship between elements.

Icon for layouter. A small black rectangle with smaller boxes inside it.

Layouter

Get to know the Editor X Layouter, built on flexbox technology.

Icon for Repeaters. A small box with the outline of 2 more, one beneath it and one next to it on the right.

Repeater

Explore displaying content in a multi-box, responsive layout with uniform styling.

Interactions & Effects

Find out how to bring each site to life with scroll effects, animations and interactions.

Icon for overflow. 3 black lines with a line at the top and bottom. On the right is an arrow facing outwards.

Overflow

Control what happens when elements overflow their parent containers.

Icon for interactions, of a the outline of a lightning bolt.

Interactions

Learn how to apply interactions to any element on hover.

Elements & Components

Explore how to work with everything you can drag onto your site from the Add panel.

Icon for images. Small box with the outline of a mountain and sun indicating an image.

Single Images

Discover how to customize size, position and behavior of images at each breakpoint.

Icon for custom menus. A small rectangle with a thin smaller rectangle over its top left corner. In the smaller rectangle are 3 black dots.

Custom Menus

Find out how to add menu components, manage custom menus and more.

Web Concepts

Get to know features like breakpoints and anchors—and learn how to streamline your creation flow with Masters.

Icon for breakpoints with a small rectangle indicating a desktop with a smaller rectangle on its short side indicating a mobile.

Breakpoints Part 2

Get to know the cascading rule and how to override it.

Icon for masters. 3 small circles are connected by lines into a triangle shape.

Masters

Find out how to save and reuse your designs to streamline your workflow.

Content Management

Learn how to build advanced web applications on Editor X with custom code, APIs and more.

Icon for the Content Manager. Icon shows 3 discs layered on top of one another.

Content Manager

Explore creating and storing heavy or dynamic content using database collections.

Collaboration

Explore how to streamline your workflow and drive collaboration with design libraries, concurrent editing and more.

Icon for design libraries of the outline of an open book.

Design Libraries

Learn how to create, manage and share design libraries with your team.

Icon for team accounts. Small outline of the upper body of a person with another person’s outline behind them.

Team Accounts

Find out how to set up a team account to give teammates access to every site in your account.

Icon for roles & permissions. Outline for the upper body of a person with a 6 pointed star overlapping it on the right.

Roles & Permissions

Learn how to give every teammate and collaborator a custom role on each site.

Icon for live comments, of a speech bubble symbol.

Live Comments

Discover how to communicate with fellow creators in real time on the Editor X workspace.

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.