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

Image showing a desktop view of the Editor X workspace. In the center is a portrait photo which acts as a background. There are breakpoint indicators on each site of the window. At the top left there is a logo. On the right of the logo is a user avatar and name in white text. On the top left of the image is a stacked menu. There is an orange box around the menu. At the bottom of the box is a user name in white text. In the top middle of the center image is white text with a ground box around it. The box shows a username in white text on the bottom right. On the top right of the image is a username in white text. To the right of this is a shopping basket indicator. There is a a blue box around the basket icon with a username. On the top right of the image are several icons showing other collaborators

VIDEO LIBRARY

Concurrent Editing

Watch now →
Image with a gradient background. In the center of the background is an image of a person. There is green outlined text stretched across the center image. On the top left corner of the center image is a stacked dropdown menu.
Image with a gradient background. In the center of the background is an image of a person. There is green outlined text stretched across the center image. On the top left corner of the center image is a stacked dropdown menu.

FROM THE X TEAM

Sticky Gallery

Watch now →

Circular user avatar for Roee Kuperberg. In the center is a circular image of a man. Around the image is a blue circle. Below the image is dark gray text.
Circular user avatar for Florence Brown. In the center is a circular image of a woman. Around the image is an orange circle. Below the image is dark gray text.
Circular symbol to invite additional users. Gray circle outline with a thinner gray circular outline inside it. IN the center is a gray plus sign. Below the icon is darker gray text.

WEBINARS

Rethinking design team work

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.

▶

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

▶

Start lesson
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.

▶

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

▶

Watch video

FROM THE X TEAM

Wisdom from in-house designer, Matanya Dayfani.

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.

▶

Start lesson
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.

▶

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

▶

Start lesson
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.

▶

Start lesson
Search icon
ACADEMY HOME
Home icon
LESSONS & EXERCISES
Arrow down icon
All Lessons
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
All Videos
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
FROM THE X TEAM
CLASS WITH
External link icon
WEBINARS
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