A Beginner’s Guide To Elementor’s Page Layout

Share this post or save it for later!

Now that you’ve followed this tutorial to install the Elementor plugin on your WordPress website, it’s time to learn about Elementor’s page layout structure.

Note: I highly recommend Elementor Pro, however, Elementor Pro is not required to follow along with this tutorial. Follow along even if you only have the free version.

Accessing the Elementor Editor

To get started, we’re going to navigate to our WordPress dashboard and go to Pages > All Pages.

Anytime you see that big blue Edit with Elementor button, you’ll be redirected to what’s called the Elementor Editor.

The Elementor Editor refers to the entire editing screen including the Panel that you see on the left side of the screen and the Preview which is on the right side of the screen.

The Panel

Think of the preview screen like an artist’s canvas. As you drag and drop new widgets onto your page (or your Elementor canvas) you’ll get a real-time preview of what the page will look like before you hit publish.

The Preview

The Elementor panel, on the other hand, gives you access to drag-and-drop widgets, standard settings, and global settings. These widgets and settings are like an artist’s paintbrush, watercolors, and charcoal. They are the tools that you’ll use every time you want to customize any part of your page.

Before you start using the tools and adding them to your “canvas”, if you will, you need to understand the building blocks.

Related: The Ultimate Elementor Review For Bloggers – Pros, Cons & FAQs

3 building blocks you need to for every page layout

Elementor page layouts are built using three things: sections, columns, and widgets which all have their own set of controls.

Sections, Columns & Widgets

The section gives your page its primary structure.

As you hover over a section, you’ll see a light blue tab. When you click on the grid icon in the middle of that tab, you’ll notice a blue border frames the entire section.

Each section can have one or more columns. In the following example, you’ll notice there are two columns – one on the left and one on the right.

Each column can have its own content, styles, margins, backgrounds, and more.

Additionally, you can drag-and-drop widgets to sections or to columns to get the design and functionality that you desire.

Using the Navigator to Understand Elementor’s Page Layout

To help you understand the page layout a little better, click on the layers icon located in the black settings bar at the bottom of the panel.

This will pull up the navigator window on the right-hand side. In this window, you can see that there are a bunch of sections stacked on top of one another.

If you click on the little carrot icon, it will expand to show you the additional columns, and widgets that are nested within the section.

As you click on an element on the navigator panel, the preview screen will jump to that section, column, or widget on the page and highlight the element.

Page layout from a blank page

Next, let’s create a new page and start with a blank slate.

On any blank page, you can choose either the pink plus button or the gray folder icon. If you click on the pink plus icon, it will allow you to add a section. Before you can start building, you’ll need to choose from one of the prebuilt column structures.

For this example, we’ll use a single-column structure. Then within that column, you can add widgets to your page by going up to the grid icon in the top right corner, and dragging and dropping them in.

Here, I’ve added a heading, text block, and button. Again, you can see that there’s a section with a column and three widget elements within that column.

Accessing your section, column, and widget settings

Next, let’s talk about how you can actually edit each of these elements.

Editing a section

In order to edit a section, you can hover over it and you will see this blue box frame the entire border.

• If you click the plus icon, you can add a section above it.
• If you click the six dots in the middle, that will give you access to the layout, style, and advanced controls.
• If you click on the X, you can remove this section, which will eliminate all of the columns in the widgets that are nested within the section.

Meet right-click

If you want to duplicate, paste, or delete a section, you can always right-click the six dots in the middle, and choose whichever action you desire.

• Choosing edit will bring up style control settings
• Choosing duplicate will clone the section below
• To copy the section, you can choose copy > go to a new page > click the plus icon > right-click again > choose paste.
• If you want to copy a section’s style settings, you can choose copy on the one you want to keep, then go to the section you want to style and choose paste style.
• Choosing save as template will allow you to insert the section onto other pages on your website without using the copy and pasting function.

Editing a column

When you hover over a column, you’re going to see a dark gray column icon in the top left side.

If you click that icon, you can access the layout, the style, and the advanced controls here as well.

Again, you can also use those same right-click controls to edit, duplicate, copy, paste and save as template.

Editing a widget

When it comes to editing a widget, on the other hand, you are going to hover over it and you will see a pencil icon.

You can click on that pencil icon, and then you have three controls over here. You have content, style, and advanced controls, and again, you can right-click to access those same controls as well.

Moving sections, columns, and widgets on your page

You can also use the drag-and-drop system to move any section, column, or widget on your page. For instance, if you want to move the first section down to the fourth, you can click the section, drag it down, and drop it in.

You can also use the navigator tool to move it up and down without having to see it visually on the page.

The entire system is pretty intuitive. It’s drag-and-drop and very simple to use.

Again, anytime you want to access controls you either click on the pencil, you click on the column, or you click on the section controls, and you have everything over here in this panel available for you to edit.

How to access the template library

The last thing I want to show you regarding page layout is the Elementor template library.

If you choose the gray folder icon, next to the pink plus icon, you will pull up the template library.

The template library includes:

• Blocks – these are essentially sections filled with columns and widgets
• Pages – these are full-page layout designs
• My Templates – these are sections or page designs that you’ve imported or saved.

If you want to insert a template into your page design, you’d choose insert, and it will automatically import directly into your page.

That’s a wrap

I hope you now have a clear understanding of how Elementor’s page layout works. You’ll use sections, columns, and widgets often so it’s important to know how to use these building blocks within the page builder.

There’s still a lot more to cover in the beginner’s Elementor Essentials series, so join me in the next post, and I’ll show you everything you need to know about leveraging the Elementor panel.

Share this post or save it for later!