Best practices from a technical designer

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.