Using Sections, Columns, and Widgets

Elementor Layout Overview

Every Elementor page is built on a three-part hierarchy:

1. Sections – the largest container, spanning full width.
2. Columns – vertical dividers within a section.
3. Widgets – the actual content elements placed inside columns.

Each level has its own settings for layout, design, and responsive behavior.

Understanding Sections

A section is the foundation of your layout. It forms a horizontal block that can contain one or more columns.

What You Can Control in a Section

• Content width (boxed or full width)
• Background color or image
• Padding and margin
• Section height (fit to screen, min height, default)
• Motion effects
• Responsive visibility

When to Use a New Section

• New design blocks (hero sections, features, testimonials)
• Different background color or image
• When spacing rules need to change
• When content needs clean separation

Understanding Columns

Columns create vertical structure inside your sections. They help arrange widgets side-by-side.

Column Settings

• Width (percentage-based)
• Vertical alignment
• Responsive stacking options
• Backgrounds (Pro)
• Padding and margin

Common Uses

• Two-column layouts (text + image)
• Three-column features
• Sidebars or callout areas
• Layouts that need symmetry or balance

Understanding Widgets

Widgets are the content elements you place inside columns. They include text, images, buttons, videos, icons, and more.

Common Widgets

• Heading
• Text Editor
• Image
• Button
• Spacer
• Icon
• Divider

Widget Settings

• Content – main text, image, or settings
• Style – colors, fonts, backgrounds
• Advanced – spacing, motion effects, custom positioning

How to Add Sections, Columns & Widgets

Adding a Section

1. Click the + icon in the canvas.
2. Select your preferred column structure.

Adding Columns

• Right-click a section → Add New Column.
• Drag a column’s width using the column handle.

Adding Widgets

1. Open the left panel.
2. Drag any widget onto a column.
3. Edit the widget directly in the canvas.

Styling Sections, Columns & Widgets

Section Styling Examples

• Large background image for hero sections
• Full-width color backgrounds
• Top/bottom padding for spacious layouts

Column Styling Examples

• Extra padding around text blocks
• Vertical alignment for centered content

Widget Styling Examples

• Heading font sizes
• Button colors and hover effects
• Image shadows or border radius

Responsive Structure Tips

Your structure should adapt cleanly to tablets and mobile devices. Elementor helps you adjust layouts per device.

Key Tips

• Columns stack vertically on mobile by default.
• Use device-specific padding for compact mobile layouts.
• Use “Reverse Columns” for better mobile flow.
• Avoid too many nested columns—they break mobile layouts easily.

Activity: Build a Three-Section Layout

Open a blank page in Elementor and complete the following tasks:

1. Create a hero section with:
   • Full-width background color or image
   • A heading widget
   • A button widget
2. Create a two-column section with:
   • Text in the left column
   • An image in the right column
3. Create a three-column features section with:
   • Icon widget
   • Heading widget
   • Text widget
4. Adjust padding for each section.
5. Check the layout on mobile and tablet views.

Assignment: Upload a screenshot of your completed three-section layout.

Best Practices for Sections, Columns & Widgets

• Use Sections to group major content areas.
• Use Columns for logical, side-by-side elements.
• Use Widgets for all visible content elements.
• Keep spacing consistent across sections.
• Limit column nesting—it slows down the site.
• Always preview mobile layouts before publishing.
• Name items in the Navigator to stay organized.