Now that you’ve learned how to open a page for editing, it’s time to pull back the curtain and understand how your page is actually structured behind the scenes.
🎯 What You’ll Learn
-
How Elementor structures your page
-
What containers are
-
The difference between containers and elements
-
Why it’s important to edit containers carefully
🖥️ The Backend View: First Things First
When you open any page in Elementor, you’re seeing the backend layout—the skeleton of your website.
Hover your mouse and you’ll notice pink/purple outlines. These show you the boundaries of containers and elements. Think of them like building blocks.
🧩 Meet the Structure Panel
To make sense of all the content:
-
Look for the “Structure” panel (usually on the left).
-
If it’s not visible, click the small icon that looks like a stack of rectangles.
-
You can dock it to the right or float it freely by dragging it.
🧠 Pro Tip: Drag the “Structure” panel by its title bar—where it says “Structure”—not from inside.
📦 What Are Containers?
Your website is organized into containers. These can:
-
Hold other containers (nested)
-
Contain rows, columns, or full sections
-
Be expanded/collapsed in the Structure panel
Think of containers like shelves. They organize how things are laid out—either in a single line or side by side.
🪄 Inside a Container
When you expand a container, you’ll see:
-
Other containers
-
Elements like images, buttons, text, or icons
For example:
-
A Header Container may have two columns:
-
Column 1: Holds your logo (image element)
-
Column 2: Holds a navigation menu and social media icons
-
🔧 Elements vs. Containers
| Containers | Elements |
|---|---|
| Structure your layout | Contain actual content |
| Can hold other containers or elements | Examples: images, text, buttons |
| Can be styled (background, padding, etc.) | Can also be styled, but for content display |
⚠️ A Word of Caution
While you can edit containers, it’s best to:
-
Avoid changing the layout unless you know what you’re doing
-
Focus instead on editing the content inside (the elements)
-
Leave structural design to your web designer
Messing with container layouts can easily break the page design!
✅ Summary: How It All Works Together
-
Elementor pages are built with containers (rows/columns)
-
Each container holds elements like images or text
-
You use the Structure panel to navigate and understand the layout
-
Most of your edits will be to elements, not containers