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

Vicky Borges

Product & Design Advisor

,

September 11, 2022

Side by Side Design

Follow along with product & design advisor Vicky Borges as she explains 3 different strategies for placing elements next to each other in side by side designs.

How to create side by side designs.

Before you get started.

In this example, we’ll explore 3 different strategies for creating side by side designs.  To follow along, open up the template in the editor.

Part 1: Container and grid

  1. From the Add panel, add a container and attach to the section

  2. From the Inspector panel remove the container color

  3. Add a 2x1 grid to the container

  4. Drag the buttons to the container

  5. From the Inspector panel, reposition the buttons

  6. Still in the Inspector panel, under grid settings, remove row height, set to max content and add gaps of 20px

  7. Reposition the container to bottom center of section

  8. Select the container and buttons using shift, then select Stack from the floating action bar

  9. Set spacing to 60px

Part 2: Grid and docking

  1. Add a 2x2 grid with columns set as 1fr each and rows as min and max

  2. From the Add panel, under Assets, add text to first cell, center align it and dock to left side and set docking as 60 px

  3. Again from Assets, add the stack to bottom 2 cells

  4. Set top docking and dock to right side with a 20% margin

Part 3: Layouter

  1. From the Add panel, drag in a Layouter to the section

  2. From the Inspector panel, align the Layouter to the center and change its width to 80%

  3. Change the Layouter display type to bricks, add gaps

  4. Set alignment to center

  5. Select 1st item, then in Inspector panel set width 100% and remove the background color

  6. From Assets, add title and center it, then remove other items

  7. Remove color background, add a grid & a horizontal gap of 10 px to create space

  8. From Assets, add vector art and text

  9. Align all the elements to left and top

  10. Change both columns’ sizing to max content, remove min height, set row to max content

  11. Duplicate the items 3 times, then replace vector art and text for each item

How to create side by side designs.
Before you get started.
Part 1: Container and grid
Part 2: Grid and docking
Part 3: Layouter
Round image of the author with a thin blue line around the image

Vicky Borges

Product & Design Advisor

I’m a Product and Design Advisor at Editor X. I have a Bachelor’s Degree in Graphic Design from PUC-RIO and I’m passionate about conceptual design, arts and photography. During my free time I enjoy surfing at Prainha and cooking up an authentic Brazilian barbecue for friends and family.

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

See all results ▶