Elementor is one of the most popular page builders for WordPress, offering a user-friendly interface, a wide range of design options, and the ability to create stunning websites without needing to write a single line of code. However, if you’re new to Elementor, you might find yourself overwhelmed by the terminology and the various elements that make up the page builder. In this guide, we’ll dive deep into the core components of Elementor: Sections, Columns, Widgets, and the new Container Structure. By the end, you’ll have a thorough understanding of how these elements work together to help you build beautiful, functional websites.
Introduction to Elementor
What is Elementor?
Elementor is a drag-and-drop page builder for WordPress that allows users to create custom layouts for their websites without needing to write code. It provides a visual interface where you can design pages in real-time, making it accessible to both beginners and experienced developers.
Why Use Elementor?
- Ease of Use: Elementor’s intuitive interface makes it easy for anyone to create professional-looking websites.
- Flexibility: With a wide range of widgets and design options, you can create virtually any type of layout.
- Responsive Design: Elementor ensures that your designs look great on all devices, from desktops to smartphones.
- Extensibility: Elementor supports third-party add-ons and custom widgets, allowing you to extend its functionality.
The Elementor Interface: A Quick Overview
When you open Elementor, you’ll see a live preview of your page on the right side and a panel of controls on the left. The left panel is where you’ll find the Elements (widgets), Settings, and Navigator. The Navigator is particularly useful for understanding the structure of your page, as it shows the hierarchy of sections, columns, and widgets.
Understanding Sections in Elementor
What is a Section?
A Section is the largest and most fundamental building block in Elementor. Think of it as a container that holds other elements, such as columns and widgets. Sections are used to define the overall structure of your page. You can have multiple sections on a single page, each with its own settings and layout.
How to Add a Section
To add a section, click on the “Add New Section” button in the Elementor editor. You’ll be prompted to choose a layout for your section, such as a single column, two columns, or more. Once you’ve selected a layout, the section will appear on your page, and you can start adding columns and widgets to it.
Section Settings and Customization
Each section comes with a variety of settings that allow you to customize its appearance and behavior. These settings include:
- Layout: Control the width of the section (full width or boxed) and the height (min height, fit to screen, etc.).
- Style: Customize the background (color, gradient, image, video), border, and typography.
- Advanced: Add custom CSS, margins, padding, and more.
Types of Sections: Full Width, Boxed, and More
- Full Width Sections: These sections span the entire width of the browser window, making them ideal for hero sections or sliders.
- Boxed Sections: These sections are constrained by a maximum width, which is useful for content that needs to be centered on the page.
- Stretched Sections: These sections are full width but also stretch to cover the entire height of the viewport.
Nesting Sections: Advanced Layouts
Elementor allows you to nest sections within sections, enabling you to create more complex layouts. For example, you could have a full-width section that contains a boxed section, which in turn contains multiple columns and widgets.
Understanding Columns in Elementor
What is a Column?
A Column is a sub-container within a section. Columns are used to divide sections into smaller, more manageable parts. Each section can have multiple columns, and each column can contain one or more widgets.
How to Add Columns to a Section
When you add a section, you’ll be prompted to choose a column layout. You can start with a predefined layout (e.g., two columns, three columns) or create a custom layout by dragging and dropping columns into the section.
Column Settings and Customization
Columns also come with their own set of settings, which include:
- Layout: Control the width of the column and its alignment within the section.
- Style: Customize the background, border, and typography.
- Advanced: Add custom CSS, margins, padding, and more.
Column Width and Responsiveness
One of the key features of Elementor is its responsive design capabilities. You can adjust the width of columns for different devices (desktop, tablet, mobile) to ensure that your layout looks great on all screen sizes.
Nesting Columns: Creating Complex Layouts
Just like sections, columns can be nested within other columns. This allows you to create highly complex and flexible layouts. For example, you could have a two-column layout where one of the columns is further divided into two sub-columns.
Understanding Widgets in Elementor
What is a Widget?
A Widget is the smallest building block in Elementor. Widgets are the elements that actually display content on your page, such as text, images, buttons, videos, and more. Elementor comes with a wide range of built-in widgets, and you can also add custom widgets through third-party add-ons.
How to Add Widgets to Columns
To add a widget, simply drag it from the Elements panel on the left and drop it into a column. Once the widget is added, you can customize its settings to control how it looks and behaves.
Widget Settings and Customization
Each widget comes with its own set of settings, which vary depending on the type of widget. Common settings include:
- Content: Control the text, images, links, and other content displayed by the widget.
- Style: Customize the appearance of the widget, including colors, typography, and spacing.
- Advanced: Add custom CSS, animations, and more.
Popular Widgets in Elementor
Some of the most popular widgets in Elementor include:
- Heading: Add and style headings (H1, H2, H3, etc.).
- Text Editor: Add and format text content.
- Image: Insert and style images.
- Button: Add customizable buttons with links.
- Video: Embed and style videos.
- Spacer: Add space between elements.
Custom Widgets and Third-Party Add-ons
Elementor’s functionality can be extended with custom widgets and third-party add-ons. These add-ons provide additional widgets and features, such as advanced sliders, forms, and more.
How Sections, Columns, and Widgets Work Together
The Hierarchy of Elements
In Elementor, the hierarchy of elements is as follows:
- Sections: The largest container, used to define the overall structure of the page.
- Columns: Sub-containers within sections, used to divide sections into smaller parts.
- Widgets: The smallest elements, used to display content within columns.
Building a Basic Layout
To build a basic layout, you would:
- Add a section to the page.
- Add columns to the section.
- Add widgets to the columns.
For example, you could create a hero section with a full-width background image, a two-column layout, and widgets for a heading, text, and a button.
Advanced Layouts: Combining Sections, Columns, and Widgets
For more advanced layouts, you can combine multiple sections, columns, and widgets. For example, you could create a landing page with:
- A full-width hero section with a background video and a call-to-action button.
- A boxed section with a three-column layout for features or services.
- Another full-width section with a testimonial slider.
Responsive Design: Ensuring Your Layout Looks Great on All Devices
Elementor makes it easy to create responsive designs. You can adjust the settings for sections, columns, and widgets to ensure that your layout looks great on desktops, tablets, and mobile devices.
Introducing the New Container Structure
What is the Container Structure?
In recent updates, Elementor introduced a new Container Structure as part of its Flexbox Container feature. This new structure is designed to provide more flexibility and control over your layouts, making it easier to create complex designs without relying on traditional sections and columns.
How Containers Differ from Sections and Columns
- Sections and Columns: In the traditional structure, sections are the largest containers, columns are sub-containers within sections, and widgets are placed inside columns.
- Containers: The new container structure replaces sections and columns with a single, flexible container element. Containers use CSS Flexbox, which allows for more advanced and responsive layouts.
Enabling and Disabling the Container Structure
To enable or disable the container structure:
- Go to Elementor > Settings in your WordPress dashboard.
- Under the Features tab, find the Flexbox Container option.
- Toggle the switch to enable or disable the container structure.
Note: Enabling the container structure will disable the traditional section and column structure. You will only be able to use containers for new designs.
Switching Between Legacy and Container Modes
If you have existing pages built with the traditional section and column structure, you can switch between Legacy Mode and Container Mode:
- Legacy Mode: This mode uses the traditional section and column structure.
- Container Mode: This mode uses the new container structure.
To switch modes:
- Open the page you want to edit in Elementor.
- Click on the Elementor Settings (gear icon) in the bottom-left corner.
- Under the Page Settings tab, find the Container option.
- Toggle the switch to enable or disable the container structure for that specific page.
Benefits of Using Containers
- Flexibility: Containers offer more flexibility in terms of layout and alignment, thanks to the use of CSS Flexbox.
- Responsive Design: Containers are inherently more responsive, making it easier to create designs that look great on all devices.
- Simplified Workflow: With containers, you no longer need to juggle between sections and columns, simplifying the design process.
Best Practices for Using Sections, Columns, and Widgets
Planning Your Layout
Before you start building your page, it’s a good idea to sketch out a rough layout. This will help you determine how many sections, columns, and widgets you’ll need.
Keeping Your Design Consistent
Consistency is key to creating a professional-looking website. Use consistent colors, fonts, and spacing throughout your design.
Optimizing for Performance
While Elementor is a powerful tool, it’s important to optimize your designs for performance. Avoid using too many widgets or large images, as these can slow down your site.
Avoiding Common Mistakes
Some common mistakes to avoid include:
- Overloading your page with too many elements.
- Using too many different fonts or colors.
- Ignoring responsive design.
Advanced Techniques and Tips
Using Templates to Save Time
Elementor allows you to save sections, columns, and widgets as templates. This can save you a lot of time if you’re building multiple pages with similar layouts.
Leveraging Global Widgets
Global widgets are widgets that can be reused across multiple pages. If you update a global widget, the changes will be reflected on all pages where the widget is used.
Custom CSS and JavaScript
For advanced users, Elementor allows you to add custom CSS and JavaScript to your designs. This can be useful for adding custom animations or interactions.
Integrating with Other Plugins and Tools
Elementor integrates with a wide range of other plugins and tools, such as WooCommerce, Yoast SEO, and more. This allows you to extend the functionality of your site even further.
Conclusion
Recap of Key Points
- Sections are the largest containers in Elementor and are used to define the overall structure of your page.
- Columns are sub-containers within sections and are used to divide sections into smaller parts.
- Widgets are the smallest elements and are used to display content within columns.
- Containers are a new, flexible alternative to sections and columns, offering more advanced layout options.
Final Thoughts on Using Elementor
Elementor is a powerful tool that makes it easy to create beautiful, functional websites. By understanding the difference between sections, columns, widgets, and the new container structure, you’ll be able to create more complex and flexible layouts. Whether you’re a beginner or an experienced developer, Elementor has something to offer everyone.
