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

Sebi Vidret

Product Marketing Manager

,

Dec 28, 2021

Split Section.

Follow Product Marketing Manager Sebi Vidret's step-by-step guide on how to create a split section using grid, and how to adjust the design for each breakpoint.

How to create a split section using grid.

Part 1.

1. Apply a 2X1 grid to a blank section.

2. Add a container to the left column and stretch it by clicking on the “Stretch” button. The container will serve as the background of that column.

3. Apply a color to the container.

4. Add the content to the left column by dragging it to the container. You can add different elements or use a design asset, if you’ve created it. In this design example, we see a paragraph with a text scale property and a button that have been stacked.

5. Align the stack to the middle. Then, dock it to the left as well as the right and set the margins from the left & right.

6. Add an image to the right column and stretch it to fill the entire cell. If the image has a different ratio then the actual column, you can simply adjust the focal point.

7. Add another element to the right column, over the added image. Dock it to the left and the bottom of the container. Apply a margin of 50px from the bottom. All the other margins should be set to 0%.

8. To set the section height to be dependent on it’s relevant content, in this case the stack—remove the min height of the section by setting it to ‘None’ from the inspector panel. Also, remember to edit the section grid and set the row height to auto.

9. To add space between the content and it’s parent, set margins to the top and bottom of the stack.

Part 2.

10. Select the tablet breakpoint.

11. Adjust the grid of the section to 1X2—in order to become 2 rows instead of 2 columns.

12. To rearrange the content in each row, you can use the grid area in the inspector panel, or simply drag it.

13. To place the container with the text on the second row, click on the container and change the row to start on 2 and to end on 3.

14. To place the picture on the first row, click on it and change the row to start on 1 and end on 2, using the grid area in the inspector panel. If you placed an element on top of the image, as done in this design, then you will need to change it’s grid area as well.

15. To make sure that the image on the top row isn’t too small, edit the section grid and set the first row to a min of 400px. In order to maintain the image ratio as the screen scales—set the max height property of the row to 50vw.


Note: the grid layout applied to the tablet breakpoint will automatically cascade to appear the same on mobile.

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

Sebi Vidret

Product Marketing Manager

I am an Editor X Product Marketing Manager, focused on the planning & execution of the Editor X education initiatives. Being obsessed with website development, I built my first site at 13 years old. Now I teach these skill to other aspiring creators. When I'm not designing on Editor X, you can find me making asado, playing soccer, and drinking mate with friends.

Did you find this lesson helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

VIDEO LIBRARY

Title

Description

Watch Now

LESSONS & EXERCISES

Title

Description

Start Lesson

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
Code & Dev
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.