Expert tips.

Discover exclusive resources created by our in-house team of designers, developers, SEO specialists and more.

Beige background with an photo of a man in a small circle in the center.

Sticky Scrolling Elements Over a Video

Follow along with product & design advisor Vicky Borges to create a design with a sticky scroll effect over a video.

Features:

Sticky position, VideoBox

Round image of the author with a thin blue line around the image

May 9, 2022

Vicky Borges, Product & Design Advisor

A crypto wallet website with a dark background and bright green text. Under the headline is an image of a phone app demonstrating a cryptocurrency transaction.
Beige background with an photo of a man in a small circle in the center.

Scale Text

Check out Ido’s guide on what scale text is and how it’s used on Editor X.

Features:

Scale text, Breakpoints

Ido Hershkovits profile picture

Mar 30, 2022

Ido Hershkovits, Technical Designer

Blue background with the editor open showing a website. There are white headphones on a black background with white text. In the bottom right corner there is a blue box.
Beige background with an photo of a man in a small circle in the center.

Bricks Layouter and Max Content

Follow Yanay’s guide to create a layout that wraps and scales responsively according to the content inside. This design is created using a bricks Layouter and max content.

Features:

Layouter, Max Content

Round image of the author with a thin blue line around the image

Feb 21, 2022

Yanay Nir, Product Designer

Image of a layout in the editor made up of text, emojis and buttons. The layout has a blue box around it to indicate that the Layouter is selected and all the elements are inside it
Beige background with an photo of a man in a small circle in the center.

Proportionally Scaling Design

Check out Ido's explanation of how to create a proportionally scaling design.

Ido Hershkovits profile picture

Feb 17, 2022

Ido Hershkovits, Technical Designer

Thumbnail of a website design in Editor X with a light beige background, three images and some text that is selected.
Beige background with an photo of a man in a small circle in the center.

Client Workflow Tools

Sebi shares an in-depth workflow on Editor X that helps creators and their clients work together more effectively.

Features:

Live comments, Roles and permissions, Concurrent editing

Round image of the author with a thin blue line around the image

Feb 13, 2022

Sebi Vidret, Product Marketing Manager

An image on Editor X with comments from two people working on the site
Beige background with an photo of a man in a small circle in the center.

Sliding navigation

Check out Jonathan’s in-depth tutorial on how to create a sliding navigation menu using Velo.

Features:

Grid, Margins, Velo

Jonathan Tsodikovitch profile image

Feb 6, 2022

Jonathan Tsodikovitch, Product Manager

Thumbnail image showing the design used for the sliding navigation tutorial. The design has a dark background with the text that says sliding navigation. There is a transparent video to the right of the text.
Beige background with an photo of a man in a small circle in the center.

Scroll Snap Effect

Learn to create a scroll snap effect using a Layouter with Vicky’s step-by-step tutorial.

Features:

Layouter, Pinned position

Round image of the author with a thin blue line around the image

Jan 24, 2022

Vicky Borges, Product & Design Advisor

Image of an example website page with a grayscale background behind white text and a white button with black text.
Beige background with an photo of a man in a small circle in the center.

Sticky Position & Animations

Learn to create a unique effect as the user scrolls down using a combination of sticky position and animations with Yanay’s step-by-step tutorial.

Features:

Sticky position, Animations, Containers, Grid

Round image of the author with a thin blue line around the image

Jan 6, 2022

Yanay Nir, Product Designer

Thumbnail of a basic section built in Editor X that is split into three columns with black and white shapes of a circle, triangle and square.
Beige background with an photo of a man in a small circle in the center.

Split Section

Follow Sebi’s tutorial to learn how to create a split section with grid and adjust it for each breakpoint.

Features:

Grid, Breakpoints, Text Scale

Round image of the author with a thin blue line around the image

Dec 28, 2021

Sebi Vidret, Product Marketing Manager

Thumbnail for split position lesson showing a website split in two halves with a large CTA on the bottom of the left half and a menu across the top.
Beige background with an photo of a man in a small circle in the center.

Infinite Auto Scroll

Learn how to create an infinite, automatic horizontal scroll animation using Velo.

Features:

Jonathan Tsodikovitch profile image

Dec 14, 2021

Jonathan Tsodikovitch, Product Manager

Beige background with an photo of a man in a small circle in the center.

Cascading Rule

Explore how design and layout changes affect each breakpoint with Ido’s in-depth explanation of the cascading rule.

Features:

Ido Hershkovits profile picture

November 25, 2021

Ido Hershkovits, Technical Designer

Beige background with an photo of a man in a small circle in the center.

Sticky Scroll

Check out Anastasia's how-to guide for creating an scroll effect using sticky position.

Features:

Sticky Position, CSS Grid, Scroll Effects, Margins

Round image of the author with a thin blue line around the image

Dec 20, 2020

Anastasia Logacheva, Technical Designer

Beige background with an photo of a woman in a small circle in the center.
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
Code & Dev
Arrow down icon
Collaboration
Arrow down icon
VIDEO TUTORIALS
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.