Building Pages with Elementor Containers

Building Pages with Elementor Containers
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 21/12/2023

Building Pages with Elementor Containers

Crafting a visually appealing and well-organised website requires more than just placing elements on a page. Building Pages with Elementor Containers is key to unlocking your design by mastering the art of page structure through effective container usage.

In this guide, we’ll delve into the importance of containers and how to leverage them to create a cohesive and engaging web page.

What are Elementor Containers?

Historically, Elementor used Sections and Columns to layout a web page. With the introduction of Containers, web designers can layout pages with the least amount of code possible. This results in faster loading of pages and a better user experience and SEO score.

Containers hold or “contain” your Widgets and allow you to organise them sequentially from either left to right, top to bottom or vice versa.

Recommended Reading: What are Elementor Widgets?

Adding a Container

There are two ways to build a page with Elementor Containers:

  1. Add a container from the Elementor side panel
    A good option if you want to add a container inside another container
  2. Add a container by clicking the “+” symbol in the centre of the page
    This option works best if you are adding an entirely new section to your page

Once the container is added, there will be some options:

  • Top to bottom widget ordering
  • Left to right widget ordering
  • Multiple containers ordered in varying ways

The choices don’t really matter too much as you can always add more containers from the Elementor side panel and reorder their direction independently.

Ordering Widget Direction in a Container

Select the container and the Elementor side panel will change to display the Container settings. Under the Layout tab, there is an Items subheading. Here is where you can change the direction and layout of the containers widgets.

Recommended Reading: How to Use the Button Widget in Elementor

Container Direction

Against the Direction setting under Layout, there are 4 arrows indicating the direction widgets will be ordered:

  • Arrow pointing right will order widgets left to right
  • Arrow pointing down will order widgets top to bottom
  • Arrow pointing left will order widgets right to left
  • Arrow pointing up will order widgets bottom to top

Try adding widgets to the container and changing the Direction arrows. You can also add a container inside another one, this is called nesting. All nested containers can have their Direction and widget layout customises.

Widget Layout & Alignment

Under Direction, there are additional options that change the position of all of the widgets nested in the container:

  • Justify Content groups and position widgets along the y-axis (top to bottom)
  • Align Items positions widgets along the x-axis (left to right)
  • Gaps sets the rule on how much padding there is between elements along the x and y-axis.

Recommended Reading: How to use margin and padding

Web Hosting

From £19.95 /mo