Elementor – complete guide (sections, widgets, theme builder, pop-up)

Elementor is the #1 page builder for WordPress - used on 18 million websites in the world. At websky-studio.pl/ we base 80% of our projects on it, because it gives the best performance-to-speed ratioI'll show you everything you need to know—from the first section to the theme builder and pop-ups.

In short

• Elementor is a visual page builder - you design by dragging elements, no coding required.
• Free version sufficient for 60% of projects. Pro ($99/year) unlocks theme builder, pop-ups, forms, motiv builder.
• Elementor generates a lot of HTML and CSS — if poorly optimized, it can slow down the site. This can be managed.
• The most common mistake: building everything from default widgets instead of using your own CSS.

Elementor Architecture - 4 Levels of Nesting

Each page in Elementor has 4 levels:

1. Section — fullwidth or container (limited to 1200 px)
2. Column — within sections, 1–6 columns per row
3. Widget — atomic element (heading, button, image, icon)
4. Attributes — typography, margins, animations per widget

Since version 3.16 there is also Container — an alternative to sections, lighter and more flexible (Flexbox). We recommend using Containers, not Sections.

Getting Started - Installation and Configuration

1. Installation

Plugins → Add New → "Elementor" → Install → Activate. Once activated, "Elementor" appears in the WordPress menu.

2. Configuration

Elementor → Settings:
– Editor: enable "Containers" (new, better option)
– Performance: enable "CSS Optimization", "Improved Asset Loading"
– Experiments: enable "Inline Font Icons" (fewer requests)
– Turn off: Google Fonts (better host fonts locally)

3. Choosing a theme

Elementor works with every theme, but some are specially optimized for it:

• Hello Elementor (official from Elementor) - the lightest, clean canvas
• Astra — popular, light, lots of ready-made templates
• GeneratePress — very light, premium modules

Do not use heavy themes like BeTheme, Avada, Newspaper - they generate unnecessary CSS and conflict with Elementor.

The most important widgets in the free version

Heading

Typography, colors, spacing. Remember the correct HTML level — H1 once per page, H2 for sections, H3 for subsections.

Text Editor

WYSIWYG for content. Allows you to insert shortcodes and HTML. Separate into paragraphs instead of a single block—easier for SEO.

Image

Zawsze ustaw alt (atrybut alternatywny dla SEO i dostępności). Włącz lazy loading. Format WebP instead of JPG/PNG (Elementor 3.5+ supports natively).

Button

Page CTA Rules: contrasting color, min. 44 × 44 px (Apple Human Interface), action text ("Get offer", not "Click here").

Icon List

Icon-based lists. Perfect for USP, benefits, and product features.

Image Box

A card with an image + title + description + CTA. The most commonly used element in the "What We Do" / "Services" sections.

Elementor Pro - What You Get for $99/Year

Theme Builder

Pro's most important feature. Allows you to design in Elementor:

• Header (heading for the entire website)
• Footer
• Single post template (blog entry template)
• Single page template
• Archive (category, tag, author)
• 404 page
• Search results

Without Theme Builder, you have to write these templates in PHP/theme. With Theme Builder, it's visual, no code.

Pop-Up Builder

Pop-up creator. Triggers: time on page, scroll percentage, exit intent, click. Applications: newsletter, promotion, GDPR consent, lead magnet.

Forms

Better than Contact Form 7. Drag&drop, conditional logic, integrations with Mailchimp, ActiveCampaign, GetResponse, Zapier.

WooCommerce Builder

Custom templates for product, category, cart, and checkout pages. Essential for Elementor stores.

Custom CSS

The free version doesn't have this. In Pro, you add CSS per element/section/page. Crucial for custom projects.

Motion Effects

Animations for scroll, parallax, mouse track. Be careful — Animations break INP (Interaction to Next Paint). Use sparingly.

Pop-up Best Practices

5 Types of Pop-Ups That Work

1. Exit intent — Shows when a user is about to leave the page. CTR 4–8%.
2. Time-based — after 30 seconds on page. CTR 2–4%.
3. Scroll-based — after scrolling 50% of the page. CTR 3–5%.
4. Click-based — after clicking the "Get Offer" button. Conversion rate 15–25%.
5. Cookie consent — GDPR compliance, a first for the user.

What NOT to do

❌ Pop-up immediately after entry - drives people away
❌ Pop-up without close button (X) - you lose customers
❌ Mobile pop-up blocking all content - Google penalizes for "intrusive interstitials"
❌ Newsletter pop-up for a user who has already signed up - cookie tracking leaks

Elementor Pop-Up Builder Setup

1. Templates → Pop-Ups → Add New
2. Choose a template (or start from scratch)
3. Display Conditions: Where to show (whole page/category)
4. Triggers: when to show (time, scroll, exit)
5. Advanced Rules: for whom (once a day, logged in)
6. Publish → copies the shortcode to be inserted

Responsive design in Elementor

Elementor has 3 breakpoints by default:

• Desktop — > 1024 px
• Tablet — 768–1024 px
• Mobile — < 768 px

Pro allows you to add 5 additional breakpoints (mobile portrait, tablet landscape, large desktop).

7 Rules of Responsiveness in Elementor

1. Design from desktop to mobile (or vice versa - mobile first), but always test on every breakpoint
2. Hide on Mobile for unnecessary elements (decorative dividers, large images)
3. Smaller fonts on mobile — H1 from 56 px → 32 px, H2 from 40 px → 24 px
4. Fewer columns on mobile — 4 columns → 2 (stack)
5. Full-width buttons on mobile — easier to click
6. Less section padding on mobile — desktop 100 px → mobile 40 px
7. Test for real — not only on a laptop, but on a real phone

7 Elementor Mistakes That Are Hurting Your SEO

1. Too many section nesting

Section → Inner section → Inner section → columns → widget = terribly heavy HTML. Limit: max 2 levels of nesting.

2. Using the default "Image" instead of uploading an optimized one

Elementor doesn't compress images. Upload already-optimized WebP (ShortPixel) images at the correct size.

3. Google Fonts loaded by Elementor

Every page loads Google Fonts from fonts.googleapis.com - extra request. Host fonts locally (plugin OMGF).

4. Enabled "Animation" on each element

Each animation = JS library load. If animations on 50 elements = 50× CPU work. Limit: 5 animations per page.

5. Everything Elementor widget instead of HTML/Shortcode

The number of tabs in Elementor, accordion, sliders — that's extra JS. Sometimes simple HTML in an "HTML" widget is lighter.

6. Excessive motion effects

Parallax, mouse tracking, sticky elements—they break INP and CLS. Use selectively.

7. Lack of CSS optimization

In Elementor → Performance, enable "CSS Optimization" i "Inline Font Icons" — automatically reduces CSS size by 30–50%.

Elementor or Gutenberg?

In 2026, Gutenberg caught up with Elementor in many features (Full Site Editing, Patterns). The choice depends on:

Application: For custom projects with a strong design focus, use Elementor. For blogs/publishers, use Gutenberg.

What's next

Getting Started with Elementor? 7-Day Plan:

1. Day 1–2: Install, go through the tutorial in Elementor → Settings
2. Day 3: Rebuild 1 simple page (e.g. "Contact")
3. Day 4: Build a home page with ready-made templates → Library
4. Day 5: Configure Theme Builder (if Pro)
5. Day 6: Create 1 pop-up (newsletter)
6. Day 7: Full Responsive + PageSpeed Test

Elementor is our default stack — in the basic package of business card pages from PLN 500 you get full custom design in Elementor. Check out our projects.