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
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.
{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.
DESIGN & LAYOUTING
Stack
Learn how to use stack to control the vertical relationship between elements.
DESIGN & LAYOUTING
Layouter
Get to know the Editor X Layouter, built on flexbox technology.
DESIGN & LAYOUTING
Slides Layouter
Learn how to lay out your content as slides using a Layouter set to the slides display type.
DESIGN & LAYOUTING
Repeater
Discover how to display content in a multi-box, flex layout with uniform styling.
Related learning resources.
LESSONS & EXERCISES
Overflow
Control what happens when elements overflow their parent containers.
▶
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.
▶
LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶
Ready to start creating?
Top searches
People are searching for
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 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.
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.