← All sessionsHomeSearch
LWP Elementor Pro Mastery·1 - Introduction & the basics of Elementor·0:50:57

Section 1: Orientation — What Elementor Really Is (and What It Sits On)

Reno Instructor and course author — Living With Pixels. Sets the course's thesis in section 1: Elementor's drag-and-drop marketing is misleading, and working smart means dynamic content and global settings on top of a properly understood WordPress.

Session map

HOW IT FITS TOGETHERWORKING STANCEThe stack under Elementorfiles → hosting → WordPress → domainWhy Elementor existsthe theme's content box, taken overStatic vs dynamicthe distinction the whole course runs onThe pricing landmineEssential no longer carries the course'…
How it fits togetherWorking stance
click a node — its card pops up (drag it anywhere, × to close)
Concept

The map reads left to right — how it fits together flow into working stance, then into practice. Click any node to open that idea here; every timestamp jumps into the recording.

The short version

  1. The section's one big correction: 'Elementor isn't all drag and drop' — dragging your whole site together makes it slow and unmaintainable; the professional path is dynamic content loaded from one place and used in many.
  2. The mental model built across two lessons: a website is just files; WordPress is the management layer on those files; hosting stores them; the domain merely points at them; themes styled the old blogging web, and Elementor's real move was taking over the theme's content box — Pro's 'theme builder' is honestly a theme OVERRIDER.
  3. The course's setup method: copy the prepared Figma design, choose a real hosting path (Hostinger/SiteGround — never wordpress.com, not Elementor's own hosting yet), verify your Pro plan is Advanced or higher, join the Discord/support surfaces, and switch on the new editor UI.
  4. One commercial landmine flagged honestly: Elementor changed pricing mid-course — the Essential plan now lacks custom fields, custom post types, custom CSS and WooCommerce features the course depends on.

The concepts

01

Static vs dynamic: the distinction the whole course runs on

The testimonials on the demo homepage can't be clicked as layers — because they aren't ON the page at all.

Static content is saved on the page itself ('our clients' typed into a heading). Dynamic content is 'everything that is loaded in from somewhere else': images live in the media library, blog posts in the posts tab, testimonials in a custom tab — and pages merely display them. Even the image widget is dynamic in disguise: the picker opens WordPress's media library, not an Elementor store. One design shown twice (testimonials on the homepage AND a testimonials page) makes the payoff concrete: save once, use everywhere.

Worked example · from the session

The demo site tour: header/footer shared across pages, blog title+body living in the post record and rendered by one template, the testimonials loop grid pulling from a custom testimonials tab.

Why it matters

This is the course's economic argument in miniature — 'work smart so that you can make more money with your web design business.'

People get this wrong

Elementor pages contain their content.

Well-built pages mostly REFERENCE content — media library, posts, custom tabs — and re-render when the source changes.

Dragging and dropping your whole website would be a very stupid way to build your website. First of all, it will make your website slow. And second of all, it will be so hard to edit.
Dynamic is everything that is loaded in from somewhere else.
I want you guys to work smart so that you can make more money with your web design business.
For your projects

["Your KB's registries are this pattern: one source, many renderings — same reason his testimonials aren't pasted twice."]

Go deeper

In one line: Static content is stored on the page that shows it; dynamic content is stored once elsewhere (media library, posts, custom post types) and rendered wherever needed. Professional Elementor work maximizes the dynamic share via templates, loop grids and global settings.

'Dynamic is everything that is loaded in from somewhere else' (l1424320 02:02)

Images are always dynamic — the media library holds them; pages reference them (l1424320 02:02)

One blog template renders every post; 'a new page per blog post... would not be really smart' (l1424320 02:02)

The homepage testimonials are a loop grid over a custom tab — unclickable as layers by design (l1424320 04:04)

Try it now

On any Elementor page you own, click every element and sort each into static or dynamic. The dynamic count is a maturity score.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Why can't the testimonial cards be edited directly on the homepage?

They're rendered by a loop grid from the testimonials custom post tab — the content lives there, not on the page; edit the source, every placement updates.

02

The stack under Elementor: files → hosting → WordPress → domain

A website, opened honestly, is 'just a bunch of folders which contains code' — everything else exists to make those folders livable.

The four-layer model, drawn as one overview: the site IS files; hosting is the company keeping those files online 24/7 at an ugly machine address; WordPress — free, the world's biggest CMS — is the management layer that turns raw folders into media/posts/pages/plugins menus; the domain is a purchased name pointing at the hosting. Hosting bills monthly, domains yearly, and they can live at different companies.

The practical bonus is subdomains: included free by the hundred on recommended hosts, they're his standard mechanism for client builds-in-progress (main domain stays live, transfer when done) and permanent portfolio demos — 'these are all folders inside of my hosting.'

Worked example · from the session

His own hosting shown: the WordPress install folder beside self-made subdomain folders (a 2022 site rebuild, course example sites) — each subdomain literally a directory in the package he already pays for.

Why it matters

Every later decision — hosting choice, plugin installs, theme overrides — reads differently once the file-level truth is visible.

People get this wrong

wordpress.com is where you get WordPress.

WordPress is free software installed on any hosting; wordpress.com is one company's expensive, plugin-limited hosting of it — his explicit do-not-buy.

The stack under Elementor Files the site is files Hosting where files live WordPress the machine Theme its content box Elementor takes the box over Session 1: know the layers before you style them — every later fix lives at one of these
Files, hosting, WordPress, the theme content box, and the takeover
For 45 euros per month, you will get WooCommerce, but that plugin is free.
For your projects

["The files-first framing is a good primer for HUDDLE's own hosting decisions."]

Go deeper

In one line: Websites are files; hosting stores and serves them (monthly); WordPress is the free CMS layer over them; domains are yearly-paid pointers. Subdomains — free folders under a paid domain — are the standard vehicle for staging builds and portfolio demos.

'It's just a bunch of folders which contains code... we need a content management system in order to read this' (l1424321 00:00)

Hosting vs domain separated precisely — different billing cycles, separable vendors (l1424321 02:00–04:01)

Subdomains: 100 free on the shown package; client-dev and portfolio as the two uses (l1424321 08:02)

Media, posts, pages, custom tabs, menus, settings — the WordPress furniture tour that later sections build on (l1424321 10:02)

Try it now

Find your host's subdomain feature and count the allowance you're already paying for — then claim one as a permanent sandbox.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

What exactly are you paying for monthly, and what yearly?

Monthly: hosting (file storage + serving). Yearly: the domain name that points at it. WordPress itself costs nothing.

03

Why Elementor exists: the theme's content box, taken over

The 'theme builder' in Elementor Pro doesn't build themes — 'it's more like a theme user.'

The history that explains the architecture: WordPress began as blogging freedom (posts + comments); themes dressed the blog like a party costume; pages were one dumb content box you could barely style; plugins multiplied to fill gaps and became a mess of mismatched menus. Elementor's move: take over that content box with drag-and-drop widgets (free version), then — for the parts still owned by the theme (header, footer, post templates) — ship its own minimal theme and let Pro's 'theme builder' OVERRIDE those parts with the same editor. Demonstrated live by switching Twenty Twenty-Three → Astra → a third theme and watching header/footer transform while page content survives.

Worked example · from the session

The sample page walked through three eras: raw theme box → an image awkwardly inserted the old way → Elementor takeover with widgets → full-width template deleting theme styling → Pro theme builder claiming header/footer/single-post.

Why it matters

Knowing which layer owns what (theme vs Elementor free vs Pro) is what makes later template work comprehensible instead of magical.

People get this wrong

Elementor replaces WordPress and its themes.

It rides them — free occupies the content box, Pro overrides theme parts through WordPress's own theme system. 'We still need WordPress so much.'

The theme builder doesn't actually build the theme — it's more like a theme user.
For your projects

['Maps cleanly onto the Lovable/TanStack discussion: page builders everywhere sit ON a rendering substrate, and knowing the boundary is the debugging skill.']

Go deeper

In one line: Elementor free takes over the page content box with widgets; Elementor Pro adds a theme-overriding layer (header, footer, single-post and archive templates) plus extra widgets, saved templates and popups — using WordPress's theme machinery rather than replacing it.

History: posts/comments are default because WordPress began as self-publishing freedom (l1424322 00:00)

Themes = the costume; the live three-theme switch shows exactly their jurisdiction (l1424322 02:01)

'Elementor took over the content box' — the free version's whole trick (l1424322 06:04)

'The theme builder doesn't actually build the theme, it's more like a theme user' — overriding built-in theme parts (l1424322 08:04)

Pro's other goods: widget library replacing single-purpose plugins, saved templates (pricing table saved once, used on two pages), popups (l1424322 10:06)

Try it now

On a test install, switch themes twice and note precisely what changes — that residue is the part only Pro's theme builder can claim.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

After building pages with Elementor free, you switch themes and the header changes but pages don't. Why?

Free only owns the content box; the header still belongs to the theme — claiming it requires Pro's theme builder override.

04

The pricing landmine: Essential no longer carries the course's features

'An episode that I really didn't want to make but I have to' — Elementor changed pricing after the course was recorded.

Mid-course, Elementor restricted the Essential plan: custom CSS, WooCommerce features, and — the big one — dynamic content with custom fields and custom post types now require the Advanced plan or higher. Since the entire next chapter (and the course's working philosophy) is dynamic content, Essential buyers literally cannot follow along. His disclosure is blunt: he didn't know when recording started, he isn't happy, and 'at least the advanced plan' is the honest requirement — with the observation that anyone selling websites needs multi-site licenses anyway (his agency recommendation: the 25-site tier)."

Worked example · from the session

The pricing page walked live: Essential's exclusions read out one by one against the course's syllabus.

Why it matters

It's the section's only hard purchase gate — and a model of honest course maintenance (the mic-only format exists precisely so episodes like this can be recorded the day something changes).

People get this wrong

Any Elementor Pro license unlocks the course.

Tiering changed after recording: Essential lacks the course's core features; Advanced is the floor.

This is a course, not Elementor support.
For your projects

['When citing course steps on your sites, re-verify plan gates against current Elementor pricing — flagged in freshnessNotes.']

Go deeper

In one line: Post-recording, Elementor's Essential plan excludes custom CSS, WooCommerce features, and custom-field/custom-post-type dynamic content; the course requires Advanced or higher, with the 25-site tier recommended for small agencies.

Essential exclusions named: custom CSS, e-commerce features, custom fields/CPT dynamic content (l1424323 00:01)

'You at least need the advanced plan to follow all of the features in the course' (l1424323 02:03)

Agency guidance from the setup lesson: the 25-website Pro package for most small agencies (l1424318 02:00)

Framed as vendor decision, not course upsell — 'I don't know why they made this move. I'm not happy with it.' (l1424323 02:03)

Try it now

Before the dynamic-content chapter: confirm your plan tier shows custom-field support; if Essential, budget the upgrade now rather than mid-chapter.

▶ Watch this taught:

Check yourself

Answer from memory first — the recall attempt is what makes it stick. Then reveal.

Which specific capability makes Essential a dead end for this course?

Dynamic content with custom fields and custom post types — the subject of the entire next chapter and the heart of the work-smart method.

Every concept, three clicks deep

The same concepts as a quick reference: the closed row is the glance, open is the study card, and every timestamp jumps into the recording.

01Static vs dynamic: the distinction the whole course runs onStatic content is stored on the page that shows it;

Static content is stored on the page that shows it; dynamic content is stored once elsewhere (media library, posts, custom post types) and rendered wherever needed. Professional Elementor work maximizes the dynamic share via templates, loop grids and global settings.

'Dynamic is everything that is loaded in from somewhere else' (l1424320 02:02)

Images are always dynamic — the media library holds them; pages reference them (l1424320 02:02)

One blog template renders every post; 'a new page per blog post... would not be really smart' (l1424320 02:02)

The homepage testimonials are a loop grid over a custom tab — unclickable as layers by design (l1424320 04:04)

02The stack under Elementor: files → hosting → WordPress → domainWebsites are files;

Websites are files; hosting stores and serves them (monthly); WordPress is the free CMS layer over them; domains are yearly-paid pointers. Subdomains — free folders under a paid domain — are the standard vehicle for staging builds and portfolio demos.

'It's just a bunch of folders which contains code... we need a content management system in order to read this' (l1424321 00:00)

Hosting vs domain separated precisely — different billing cycles, separable vendors (l1424321 02:00–04:01)

Subdomains: 100 free on the shown package; client-dev and portfolio as the two uses (l1424321 08:02)

Media, posts, pages, custom tabs, menus, settings — the WordPress furniture tour that later sections build on (l1424321 10:02)

03Why Elementor exists: the theme's content box, taken overElementor free takes over the page content box with widgets;

Elementor free takes over the page content box with widgets; Elementor Pro adds a theme-overriding layer (header, footer, single-post and archive templates) plus extra widgets, saved templates and popups — using WordPress's theme machinery rather than replacing it.

History: posts/comments are default because WordPress began as self-publishing freedom (l1424322 00:00)

Themes = the costume; the live three-theme switch shows exactly their jurisdiction (l1424322 02:01)

'Elementor took over the content box' — the free version's whole trick (l1424322 06:04)

'The theme builder doesn't actually build the theme, it's more like a theme user' — overriding built-in theme parts (l1424322 08:04)

Pro's other goods: widget library replacing single-purpose plugins, saved templates (pricing table saved once, used on two pages), popups (l1424322 10:06)

04The pricing landmine: Essential no longer carries the course's featuresPost-recording, Elementor's Essential plan excludes custom CSS, WooCommerce features, and custom-field/cust…

Post-recording, Elementor's Essential plan excludes custom CSS, WooCommerce features, and custom-field/custom-post-type dynamic content; the course requires Advanced or higher, with the 25-site tier recommended for small agencies.

Essential exclusions named: custom CSS, e-commerce features, custom fields/CPT dynamic content (l1424323 00:01)

'You at least need the advanced plan to follow all of the features in the course' (l1424323 02:03)

Agency guidance from the setup lesson: the 25-website Pro package for most small agencies (l1424318 02:00)

Framed as vendor decision, not course upsell — 'I don't know why they made this move. I'm not happy with it.' (l1424323 02:03)

Tools referenced

ToolCoverageMomentContext
ElementordemonstratedFree-vs-Pro boundary, content-box takeover, theme builder, new/old editor UI
WordPressdemonstratedCMS anatomy, media/posts/pages/menus/settings tour, theme switching
FigmademonstratedFree tier; course design distributed as a copyable file
DiscorddemonstratedCourse community, replacing the harder-to-organize Facebook group
AstrademonstratedTheme-switch demo subject
Hostinger / SiteGroundexplainedThe two recommended hosts; subdomain feature is load-bearing
wordpress.comexplainedExplicit do-not-buy: expensive, plugin-limited
Elementor HostingexplainedNot recommended yet: cost + page-builder lock-in
Local (LocalWP)mentionedFree offline WordPress development
InstaWPmentionedTemporary throwaway WordPress installs
WooCommercementionedThe free plugin wordpress.com resells at €45/mo

Action items

Resources mentioned

Resources
  • docCourse Figma design file (copy link below the lesson)
  • doclivingwithpixels.com/software — software recommendations + affiliate links (Figma, Elementor, Hostinger 10% code, SiteGround)
  • docCourse Discord invite (below the lesson)
  • docTerms list page (site glossary of course jargon)
  • docTroubleshooting Elementor page
  • doccourses@livingwithpixels.com — account/payment support
  • docelementor.com/help — vendor help center and support
  • docElementor pricing page (plan-tier verification)
  • docHis Hostinger setup series (promised, link below)

Extraction notes

This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

Transcript corrections applied

The transcript saysThe trainer actually means
verpress dot comwordpress.com
livewithpixels / living web pixels / testing with pixels dot comlivingwithpixels.com
Dave will probably not allow itthey will probably not allow it (Elementor hosting lock-in)
20 23 (theme)Twenty Twenty-Three (WordPress default theme)
blogusthird demo theme name as heard — verify spelling
Elemental hosting / Elemental of courseElementor hosting / Elementor
decode / the decodethe code (file view)
instalinstall

True on recording day — verify before relying