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

Matanya Dayfani

Technical Design Lead

,

August 6, 2020

Wisdom from an 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.

Think responsively.

The fact is that you don’t know which device is being used when someone visits your site—so right from the start you should be thinking about the behavior of elements on different screens. You want to ensure your finished creation looks great at all breakpoints.

Cascading.

When you style an element at one breakpoint, changes cascade down to all the smaller breakpoints. If you adjust the position or design of an element at a smaller breakpoint, the connection at larger breakpoints is broken. This means that larger breakpoints won’t be affected by your changes—but they'll still cascade down to all smaller breakpoints.


Note: If you take an element out of its container at one breakpoint, this affects the hierarchy of the site and therefore affects all breakpoints—both large and small.

Docking.

Editor X has a smart docking system. This means that when you drag an element into a container, it docks it to the closest edge. You can also change the docking manually from the Inspector panel. Docking is not only responsible for the placement of an element within its container, but also for how the element behaves at different screen sizes. For example, when you dock an element to the top left of a container, the position of that element will always be relative to the top left of that container. If you dock an element to the left and right of a container, the element becomes fluid, so as the container’s width changes the element's width will too.

Master the grid.

Grid is a sophisticated CSS tool, offering you tons of ways to build creative layouts. From my experience, in most cases a grid is the perfect solution for any design. You can place elements precisely in their own grid cells and dock them to different grid lines. This helps create responsive relationships between them. You can apply a grid to any section or container and you can also redefine the grid layout at any breakpoint.

Work with stack.

Stack is a great solution for creating a vertical connection between 2 or more elements. It keeps elements at a set distance from each other, and functions across all breakpoints to prevent overlap. You can stack together any kind of element. Using margins in the Inspector panel, you can control the distances between the stack elements.

Get Repeater power.

Repeater is an amazing tool that can be used to create a uniformly styled, multi-box layout. With the Repeater, you can change the order of the boxes, rearrange their layout at each breakpoint, add a horizontal or vertical scroll and more. You can also connect your Repeater to a database to display tons of content that you update regularly from your site dashboard.

Head to the layers panel.

A website is made up of many elements and sometimes it’s difficult to find the element you are looking for—the more complex your site, the more layers you'll have. The Layers panel is a simple and fast way to view the order of all the elements you have on the site and select the one you need. You can always change the default name of an element to make it easier for you to find.


Accessibility: Checking that the order of the elements in the DOM is the same as the natural flow of the site is part of the process for making your site accessible. By looking at the Layers panel, you can see if the elements are in the right order. To rearrange, simply drag an element in the Layers panel to its correct position.

Use the Theme Manager.

Using the Theme Manager can save you a lot of time and make your job much easier. Find it in the creation bar next to the pages icon. You can predefine the styles for headings and paragraphs, and create a custom color palette for each site. Changes you make in the Theme Manager will affect all the elements currently using that theme.

Learn from the best.

Join our webinars to see our experts presenting live site building demos and feature focused deep dives to really help you learn the platform inside out. You can also submit questions that will be answered live.

Stuck? Ask for help.

It's always fun to learn something new but it can be challenging. If you have a problem or you don’t understand something, we have many resources that can help.


Join our forum to connect with our community of designers. Share questions and contribute answers, use their knowledge and experience. You can also connect with in-house designers, like me. We’re also active in the forum.


For direct help, you can send us your questions via Help in the topbar of the editor.


Continue to check out the rest of Academy X where you’ll find tons more info about everything I talked about here. There are how-to videos, lessons & exercises and more to help you understand everything in a simple and clear way.


You can also reach the team directly at hi@editorx.com.

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

Matanya Dayfani

Technical Design Lead

I'm a web designer and front-end developer and I build the Editor X pages. I studied visual communication at Ashkelon College and web development through online courses. My passion is to build things, of any kind. I love watching MotoGP, NFL and Messi. I love listening to indie music and my favorite band is Kings of Leon.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

Blue background with a darker blue box over it, there is an white icon in the middle of the box. This shows docking & margins.

LESSONS & EXERCISES

Docking & Margins

Explore Editor X’s smart docking system.

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.

Thumbnail for design libraries. Pink background with 2 shaded rectangles in the middle. On the top is a small symbol of an open book.

LESSONS & EXERCISES

Design Libraries

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

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 with a step by step walkthrough.

Ready to start creating?

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.