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.
Conclusion
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.
