Master Editor X your way. Find your learning flow with video tutorials, webinars, feature breakdowns and hands on training in Academy X.

On the workspace, on the left side is a man wearing sports clothing looking to the right. On the right, is a green gradient background with the word ‘Cyclo’ over it. On top of that, is a mobile with a map display on it and a KM counter.

VIDEO LIBRARY

Getting Started on Editor X

Image of a repeating layout on its side with an image of a handbags, a woman wearing a dress, flowers and jewelry. There is also a drop down menu showing page code options.

WEBINARS

A Closer Look at Velo

Watch now →

Photo of Gavin Strange’s head and shoulders with purple and green light shining on him. He is wearing a baseball cap and looking at the camera. He is standing in front of a block outline of his name.
Photo of Gavin Strange’s head and shoulders with purple and green light shining on him. He is wearing a baseball cap and looking at the camera. He is standing in front of a block outline of his name.

CLASS WITH

Gavin Strange

Watch now →

New to Academy X? Dive into these.

Video tutorial about how to structure a site on Editor X using pages, sections, containers and more

VIDEO LIBRARY

Site Structure

Learn how to structure a website using pages, sections and containers.

▶

Green background showing grid with 4 columns and 2 rows on it. In the middle of the grid are three tubular shapes stacked.

LESSONS & EXERCISES

Breakpoints Part 1

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

▶

Video about hierarchy on Editor X, and how the parenting model influences how elements interact with each other across all breakpoints

VIDEO LIBRARY

Element Hierarchy

Dive into the concept of element hierarchy and parenting on Editor X.

▶

Video tutorial about creating complex layouts on Editor X using CSS Grid

VIDEO LIBRARY

Grid

See how to apply a grid, dock elements to gridlines and edit with custom units.

▶

FROM THE X TEAM

Wisdom from in-house designer, Matanya Dayfani.

In-house designer Matanya shares his essential tips for designing on Editor X. Check out the must-knows from a designer who knows the platform inside out.

Image of a clothing store website in progress inside the Editor X workspace. The brand name SS21 is positioned in chunky letters on the left, and a mosaic box design shows off purple and gold squares, plus male & female clothing models in black and white.
Image of a clothing store website in progress inside the Editor X workspace. The brand name SS21 is positioned in chunky letters on the left, and a mosaic box design shows off purple and gold squares, plus male & female clothing models in black and white.

New in Academy X.

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

Learn how to apply interactions to any element on hover.

▶

Video about how to apply and customize hover interactions on Editor X.

VIDEO LIBRARY

Hover Interactions

Learn how to apply and customize interactions to any element on hover.

▶

Thumbnail for live comments. Pink background with shaded box in the centre. Box is split into 2 uneven sized boxes. There is 1 speech bubble symbol in the middle of the big box and shapes in the bottom of the smaller one.

LESSONS & EXERCISES

Live Comments

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

▶

Thumbnail indicating design libraries. Pink background with a shaded pink box over it and an icon in the middle.

LESSONS & EXERCISES

Design Libraries

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

▶

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
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
Collaboration
Arrow down icon
External link icon
External link 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

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

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

VIDEO LIBRARY

Site Structure

Learn how to structure a website using pages, sections and containers.

Watch video →
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.

Start lesson →
ACADEMY MENU ▶
Search icon