Ananta Code Academy
 Continue to Day 19
MODULE 02 · CONTENT & DESIGN

Page Builders: Elementor Basics

The block editor from Day 9 is great for content, but page builders give you pixel-level control over layout without touching code. Today you'll build a landing page section with Elementor.

Day 18 of 30 Beginner ~18 min
01 · OVERVIEW

Page Builder vs Block Editor

Elementor is a plugin that replaces the standard editing screen with a drag-and-drop, live-preview canvas. Where Gutenberg blocks stack vertically down a page, Elementor gives you full control over columns, spacing, and positioning within each section.

Neither tool is strictly better — Gutenberg is faster for straightforward content pages, while a page builder shines on landing pages and highly custom layouts. Most sites end up using both for different pages.

02 · THE THREE BUILDING BLOCKS

Sections, Columns, and Widgets

Every Elementor layout is built from the same three nested pieces, regardless of how complex the final page looks.

ELEMENT WHAT IT DOES
Section

A full-width horizontal band on the page — the outermost container everything else lives inside.
Column

A vertical division inside a section — split one section into two or three columns for side-by-side content.
Widget

The actual content — headings, images, buttons, forms — dragged into a column from the widget panel.
THINK OF IT AS

Sections are rows, columns are the cells inside each row, and widgets are what you place inside each cell.

03 · THE ELEMENTOR INTERFACE

Panel, Canvas, and Navigator

elementor-layout.txt 
// The three parts of the editing screen
Left panel    // widgets to drag, plus settings for whatever's selected
Center canvas // the live, editable preview of your actual page
Navigator     // a tree view of every section, column, and widget
04 · BUILDING A SIMPLE SECTION

From Blank Canvas to Hero Section

  • Click "Edit with Elementor" on a page to open the builder.
  • Add a new section and choose a two-column structure.
  • Drag a Heading widget into the left column and type your headline.
  • Drag an Image widget into the right column and select an image.
  • Adjust padding under the section's Advanced tab so content isn't cramped.
  • Click Publish once the live preview looks right.
    • 05 · RESPONSIVE EDITING

    Desktop-First vs Checking Every Size

    DESKTOP-ONLY Building only on a wide monitor often leaves columns squeezed or text overlapping once viewed on a phone.
    CHECK ALL THREE VIEWS Elementor's device switcher lets you preview and adjust desktop, tablet, and mobile independently before publishing.
    06 · PERFORMANCE CONSIDERATIONS

    Things That Slow a Builder-Made Page Down

    WATCH FOR THESE
    TOO MANY SECTIONS Dozens of nested sections and columns add real page weight — consolidate where you can.
    UNOPTIMIZED IMAGES Large, uncompressed images inside widgets are one of the most common causes of slow pages.
    EXTRA WIDGET PACKS Third-party widget add-ons you're not actively using still load extra code on every page.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    Sections, columns, widgetsEvery Elementor layout is built from these three nested pieces.

    2

    Live preview editingChanges appear directly on the actual page, not a separate form.

    3

    Build flowAdd section → choose columns → drag widgets → adjust spacing → publish.

    4

    Always check responsive viewsDesktop-only editing often breaks on tablet or mobile.

    5

    Watch page weightExcess sections, unoptimized images, and unused widget packs slow pages down.

    08 · TRY IT

    Try It Yourself

    EXERCISE

    Build a three-column section with an icon, heading, and short paragraph in each column — a common "features" layout. Check it on all three device views before publishing.

    09 · TODAY'S PRACTICE

    Build a Landing Page Hero

    HANDS-ON EXERCISE

    Putting the section-column-widget model to work

    By the end of today, your capstone site should have one Elementor-built section that didn't exist before.

    1. Create a new section with a two-column layout.
    2. Add a headline, short paragraph, and button widget to one column.
    3. Add an image widget to the other column.
    4. Check and adjust the layout on tablet and mobile views.
    5. Publish and reload the live page to confirm it renders correctly.
    10 · RECAP

    Recap

    SECTIONS

    Full-width horizontal bands that hold everything else.

    COLUMNS

    Vertical splits inside a section for side-by-side content.

    WIDGETS

    The actual content, dragged into columns from the panel.

    RESPONSIVE CHECK

    Always preview desktop, tablet, and mobile before publishing.

    11 · SUMMARY

    Key Takeaways

    • Elementor layouts are built from three nested pieces: sections, columns, and widgets.
    • Editing happens live on the actual page rather than in a separate admin form.
    • Always check your layout across desktop, tablet, and mobile before publishing.
    • Too many sections, large images, and unused widget packs are the biggest performance risks.
    • Use Elementor for highly custom layouts and the block editor for straightforward content pages.
    Course Overview