Training / Building with Elementor / Lesson 1 of 9

Containers explained

Everything on an Elementor page sits inside a box called a container. Once you see the boxes, the way pages are built makes sense.

You'll learn

How Elementor arranges things in boxes, and how to change a background image

Takes

About 5 minutes

You'll need

A page open in Elementor

Watch: “Introduction to Containers”, an official video from Elementor. It shows the same job on their own demo site, so your screen may look a little different. The written steps below are the ones to follow.

1

See the boxes

Move your mouse over the page. A box appears around each group of items, with a small handle of six dots at the top. That box is a container.

2

Select a container

Click the six dots. The container’s settings open on the left. If it’s hard to click, select it from Structure instead.

3

Understand direction

A container lines its contents up in a row, side by side, or a column, one above the other. You’ll find this under Layout, then Direction.

4

Boxes inside boxes

A row of three columns is one container with three smaller containers inside it. That’s how most layouts are made.

5

Change a background image

Select the container, open the Style tab and look under Background. Click the image shown there to swap it, the same way you’d change any photo.

Common mistakes

I can't select the container, only what's inside it.

Use Structure and click the container’s line in the list.

I changed the direction and everything jumbled.

Press Ctrl + Z or Cmd + Z. Direction rearranges everything in that box.

Text is hard to read over my new background.

Choose a darker or plainer photo, or ask us to add a tint over it.

Still stuck?

Tell us which page it’s on and what you’re trying to do. We can talk you through it or make the change for you.