Layout essentials: Columns

Use the stacking, alignment, and size properties within columns and inner columns to get your layouts to appear and respond how you want them to when the screen size changes.

Cancel Apply

rate limit

Code not recognized.

About this course

In this course we're going to learn about some key structural elements that will be useful to understand when building layouts for your sites. 

Understanding the role of Columns and Inner Columns will help you get your site to look the way you want it to. 

We'll also walk through how to manipulate the assets we've provided so you can become comfortable with sizing and alignment techniques. 

At the end of this course, you'll be able to:

  • Modify content stacking direction and alignment when working with columns
  • Use the size, alignment, and wrapping capabilities in the Design panel to achieve the desired layout within the canvas
  • Identify when an inner column is needed within a column
  • Practice manipulating images, text, and other elements to create a new hero section in our carpentry site 

Joining us in the middle?

This course is a part of a path. It contains lessons at the beginning and then a hands-on activity to practice that skill in the editor. If you are jumping into this course and want to complete the activity, please complete the first course or the following tasks before starting this course:

 

For a better experience, you should have:

Curriculum1 hour course

  • Columns and Inner columns overview
  • Key concepts
  • Controlling content stacking direction
  • Aligning elements within columns
  • Wrapping column contents
  • Example: Building a section
  • Practice (carpentry site)
  • What you'll customize: the Hero section
  • → Your turn: Hero section instructions
  • Wrap up
  • Checkpoint
  • On to the next course

About this course

In this course we're going to learn about some key structural elements that will be useful to understand when building layouts for your sites. 

Understanding the role of Columns and Inner Columns will help you get your site to look the way you want it to. 

We'll also walk through how to manipulate the assets we've provided so you can become comfortable with sizing and alignment techniques. 

At the end of this course, you'll be able to:

  • Modify content stacking direction and alignment when working with columns
  • Use the size, alignment, and wrapping capabilities in the Design panel to achieve the desired layout within the canvas
  • Identify when an inner column is needed within a column
  • Practice manipulating images, text, and other elements to create a new hero section in our carpentry site 

Joining us in the middle?

This course is a part of a path. It contains lessons at the beginning and then a hands-on activity to practice that skill in the editor. If you are jumping into this course and want to complete the activity, please complete the first course or the following tasks before starting this course:

 

For a better experience, you should have:

Curriculum1 hour course

  • Columns and Inner columns overview
  • Key concepts
  • Controlling content stacking direction
  • Aligning elements within columns
  • Wrapping column contents
  • Example: Building a section
  • Practice (carpentry site)
  • What you'll customize: the Hero section
  • → Your turn: Hero section instructions
  • Wrap up
  • Checkpoint
  • On to the next course