top of page

Design & Layouting

Containers.

A container is a layouting tool that helps you structure the content on your site. You can attach elements to a container like text, images and grids.

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

{Section Title}

{Section Description}

Intro

Anchor
Anchor
Anchor
Anchor
Anchor
Anchor
Anchor

TRY IT YOURSELF

Exercise on containers.

Open Academy X from desktop to complete this exercise.

01

Resize a section with a container inside. Use the drag handles to resize the canvas. Notice that the container width resizes as a percentage of the section across different breakpoints.

02

Attach elements. Drag an image into the container to attach it. Now do the same with some title text and a button.

03

Move a container. Select the container and drag it anywhere on the page.

04

Stretch to fill. Select the image and click the Stretch icon in the top right.

Open advanced exercise on the editor →

{No.}

{Exercise Description}

Open Academy X from desktop to complete this exercise.

Did you find this resource helpful?

Thank you for your feedback!

Next lessons.

Blue background with the outline of a box in the middle of it. The box has alternating shaded blue lines, there is a white icon in the middle of the box. This shows stack.

DESIGN & LAYOUTING

Stack

Learn how to use stack to control the vertical relationship between elements.

Blue background showing a layouter in the middle of it.

DESIGN & LAYOUTING

Layouter

Get to know the Editor X Layouter, built on flexbox technology.

Clickable thumbnail image for lesson about the slides Layouter

DESIGN & LAYOUTING

Slides Layouter

Learn how to lay out your content as slides using a Layouter set to the slides display type.

Blue background with a Repeater layout over it. There is a white icon in the middle.

DESIGN & LAYOUTING

Repeater

Discover how to display content in a multi-box, flex layout with uniform styling.

Related learning resources.

Thumbnail indicating overflow. Orange background showing 2.5 boxes of different shading. There is a white icon in the middle of it.

LESSONS & EXERCISES

Overflow

Control what happens when elements overflow their parent containers.

Green background showing sections. The left side is a shade lighter than the right side. There is an icon in the middle of the background.

LESSONS & EXERCISES

Sections

Learn how to work with sections—the building blocks of your site.

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

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

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 ▶
ACADEMY MENU ▶
Search icon
bottom of page