September 11, 2023

Learn the Basics – Elementor Container Settings Overview

Play Video

New to Elementor? Let’s explore the Elementor container settings together with this tutorial. Check out the available settings and kickstart your design journey. By the end, you’ll be well on your way to mastering Elementor.

1. Introduction to Elementor Container Settings

Starting with Elementor containers is as easy as clicking the plus icon from the top bar. This action opens up the widget menu, giving you two options:

  • Drag in a container for a default layout.
  • Click the plus icon in the canvas to specify your container structure.

2. Structuring Your Container

Choosing the right structure is pivotal:

  • You have a variety of container structures at your disposal.
  • Decide between aligning your content vertically into one column or horizontally.
  • To add content, such as an image, simply click on a widget or drag it into the container. For this guide, we’re using a square image.

3. Adjusting Image and Widget Dimensions

Getting your dimensions right is crucial:

  • Set your image size. For beginners, using percent or pixels, like 150 pixels, is recommended.
  • In a vertical container, the widget occupies the entire width of the column. This behavior is evident when you duplicate the widget.
  • For a horizontal layout, switch the direction to row. This mode respects the image width.

4. Exploring the Horizontal Row Direction

Horizontal layouts offer a different dynamic:

  • The row direction considers the image width.
  • Adjust the widget spacing using the justify content settings. You have options like start, center, end, and space between to play with.

5. Container Content Width and Min Height

Understanding boundaries:

  • The default content width is boxed, meaning the content is confined to a specified width. But you can change this to full width.
  • Adjust the width to see how the container and its content react.
  • Containers can have a minimum height, ensuring they maintain a certain stature regardless of their content.

6. Custom Settings for Individual Widgets

Tailoring your design:

  • Individual widgets can be aligned from the advanced tab.
  • You can also nest containers, placing one inside another, and customize their individual settings.

7. Embracing Responsive Layouts with Elementor Containers

Adapting to different screens:

  • Adjust settings to ensure your design is mobile-friendly.
  • Elementor containers offer a high degree of flexibility, making it easy to craft responsive layouts.


You now should have gotten a solid grasp of the basics of Elementor containers. As you experiment, start with simpler layouts and gradually challenge yourself with more complex designs.

Required Resources

Elementor Logo
Free Options
Credit to Elementor
Elementor's YouTube channel is a rich source of practical knowledge for web creators. It offers tutorials, feature introductions, and expert advice.
Learn the Basics – Elementor Container Settings Overview
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.