I rebuilt three client websites—a SaaS landing page, a boutique agency portfolio, and a content-heavy blog—on the **[Elementra WordPress Theme](https://gplpal.com/product/elementra/)** to see if a “100% Elementor” theme could be both fast and sane in production. I evaluated cousins under **[Best WordPress Themes](https://gplpal.com/shop/)** and kept gplpal in my notebook as the catalog I cross-checked during sprints. This write-up is my complete build diary: from a blank server to live traffic, what I turned on, what I refused, how I measured performance and SEO, the pitfalls that ate hours, the patterns that saved days, and the few places where I reached for small, resilient code instead of stacking add-ons. If you’ve wrestled with bloated page-builder stacks before, you’ll recognize the traps—and hopefully skip them.

---

## 0) My baseline and what “100% Elementor” really meant in practice

**Context of the three builds**

* **SaaS**: single product, one pricing tier to start, a docs section, and a changelog; conversion goal = signups, secondary = demo requests.
* **Agency portfolio**: case studies with structured outcomes, “services” pages that lead to discovery calls, and a lean blog for thought leadership.
* **Content blog**: long-form posts, author pages, topic hubs, and an ad-light layout built to keep Core Web Vitals green even on older phones.

**Server & stack**

* PHP 8.2, HTTP/2, Brotli.
* Page cache + object cache; CDN for static assets.
* Fresh WordPress; I installed Elementra, Elementor, and the smallest possible companion plugins.
* Images exported to modern formats with explicit width/height to reserve space and avoid layout shift.
* Child theme for two micro-tweaks; everything else lived as tokens and Elementor templates.
* No global “optimization” plugin that promises miracles, just disciplined rendering rules and a short list of defer cues.

**What “100% Elementor” meant for me**

* **No other layout builder**—no stack collisions.
* **Theme styles first**—Elementra’s tokens (type, spacing, color) became the source of truth; Elementor widgets inherit those, so editors can’t “invent” new paddings per page.
* **Templating**—headers/footers, singles, archives, 404, search, author: all in Elementor’s Theme Builder, but constrained by Elementra’s sensible containers.
* **Design system**—one set of text styles (Display/H1/H2/H3/Lead/Body/Caption), one spacing scale (8-pt rhythm), and four colors (primary, accent, surface, neutral). I enforced them inside Elementor’s Global Styles and locked custom values.

---

## 1) Install → configure → freeze tokens (the hour that decides six months of sanity)

**Activation & starter**

I picked Elementra’s calm starter—no sliders, no kinetic counters, no video hero. It shipped a lean header/footer, a sane container width, and a few section blocks that felt like a product site, not a brochure.

**Typography**

* Body: 17–18px with a 1.6 line height.
* H1: 44–48 on desktop, 30–34 on mobile.
* H2: 28–32; H3: 22–24.
* I preloaded one heading font (woff2), left body to the system stack.
* Inside Elementor: I mapped these to Global Typography; widgets can’t drift.

**Spacing**

* 8-pt system: section padding 56–72px desktop, 40–48px mobile; column gaps 24px.
* I created spacer tokens in Elementor (XS/S/M/L/XL). If someone drags a spacer, it’s still on the scale.

**Color**

* Text (ink), Surface (paper), Primary (deep blue or brand), Accent (citrus).
* All CTAs use the Primary token; hovers brighten by ~8%.
* Focus rings are high-contrast; I test with keyboard first before any mouse.

**Motion**

* Transitions 150–180ms with neutral easing.
* Reduced-motion preference disables fades entirely—no “soft move” exceptions.
* No parallax, no auto sliders. That’s a rule, not a vibe.

**Containers & breakpoints**

* Max content width 1140–1200px; wide rows get on-ramps (padding) so text never slams the viewport.
* Mobile breakpoint tuned around 768px; tablet around 1024px.
* I disabled Elementor’s “stretched section” where possible and used Elementra’s container for predictable gutters.

Result: editors can build in Elementor without inventing new styles; pages look like siblings, not cousins.

---

## 2) Theme Builder maps: how I made templates that editors can’t break

**Header**

* Left: logo (SVG), Center: primary nav, Right: CTA (“Get started” or “Book a call”).
* On scroll: slight compress (height −8px), no color flip, no shadow carnival.
* Mobile: hamburger + persistent CTA pill.
* Keyboard nav verified; focus ring moves visibly through each item.

**Footer**

* Four columns: brand blurb, sitemap, resources, subscribe.
* Legal strip under with copyright and a small link set—no 12-badge circus.

**Single (pages)**

* Default page skeleton with: hero (optional eyebrow), H1, intro (Lead), body copy with comfortable line length, aside slots (for short CTAs or secondary nav), and a block for related content.
* Images always carry width/height attributes and never exceed the content width.

**Single (posts)**

* Title block with publish date and reading time.
* Feature image disabled by default; hero image used rarely and only when it adds context.
* “In this article” box (auto TOC from H2s), constrained to 1–2 levels.
* Footnotes and callouts styled with tokens.

**Archives**

* Grids become lists on mobile; no “masonry” because it breaks reading rhythm.
* Category pages have a short intro for context.
* Pagination uses numbers, not infinite scroll (shareable anchors matter).

**Search & 404**

* Search results render as clean cards with clear snippets; 404 suggests three top destinations.

I built exactly one template per object type. Editors never choose a template; they just create content and it looks right.

---

## 3) The three projects: what I shipped, what broke, and what stuck

### 3.1 SaaS landing (conversion-led, with docs and a changelog)

**Homepage**

* Still hero with a single benefit line and a split primary CTA (“Start free” + “See pricing”).
* Three credibility anchors: a compact logo row (reserved height), a one-line “used by” note, and two sentence-length testimonials—no carousels.
* Product sections with simple step visuals (no autoplay demos).
* Comparison table with three competitors; as cards on mobile, not horizontal-scroll traps.
* “How it works” three-step timeline—pure markup, not an animation layer.

**Pricing**

* One “Simple” tier to begin, an “Annual save” pill, and an “Ask us” enterprise link that opens a short form.
* FAQ lives on the page; no modal detours.
* I disabled Elementor’s fancy counters—no monthly revenue fireworks.

**Docs & changelog**

* Docs are basic pages with a left nav and a prominent search.
* Changelog is human—date, version, summary, and short bullets; each item is a linkable anchor.

**What broke**

* An early attempt at “sticky” feature nav created jank on mobile when the fake shadow appeared after elastic scroll. I removed it; used in-page anchors instead.

**What stuck**

* A small “Try live sandbox” block—just a link to an internal route—outperformed video demos without adding weight.

### 3.2 Agency portfolio (case-study first, services second)

**Case studies**

* Narrative pattern: problem → constraints → decisions → measurable result → hindsight.
* Before/after slider used once per case, and images are equal pixel size to avoid stutter.
* Pull quotes are short and left-aligned; no centered poetry.

**Services**

* Each service page ends in a direct “Book a 20-min fit call” with a three-question pre-qual form.
* A service comparison strip (“Strategy / Design / Build / Growth”) lets readers hop between siblings without returning to /services/.

**Blog**

* Essays with a human voice; images only where useful.
* Author cards with two lines; no social rainbows.

**What broke**

* A “logo wall” experiment with 28 SVGs caused subtle layout shimmy when the sprite loaded. I reserved the height with a CSS min-height on the container; problem solved.

**What stuck**

* One sentence beneath each case hero naming the market and team size; recruiters stopped asking “How big was this, really?”

### 3.3 Content blog (long-form, ad-light)

**Architecture**

* Topic hubs (pillar pages) with short intros, then curated lists of posts.
* Posts avoid hero images unless they teach.
* “Reading comfort” options: font size up/down buttons that affect a CSS var, saved in localStorage; Elementra didn’t fight these.

**What broke**

* A sticky “continue reading” bar on mobile sometimes overlapped footnotes. Removed it; replaced with a calmer “Back to top” link.

**What stuck**

* “Two-sentence summary” at the top of each long post performed better than any jump link.
* A small “Listen” button that toggles a lightweight audio narration (client recorded quickly for top posts); we lazy-loaded the audio after click.

---

## 4) Performance: measured, not hand-waved

Tests on a mid-range Android, throttled 4G, cold cache; Chrome DevTools network shaping mirrored the experience.

* **Homepage LCP (SaaS)**: ~1.9–2.2 s with still hero (1600–1800 px desktop ~120–160 KB; 1200 px mobile ~70–100 KB) and critical CSS for header/hero inlined.
* **Pricing page LCP**: ~2.0–2.3 s; no counters, no heavy tables.
* **Case study LCP**: ~2.0–2.4 s depending on media.
* **Blog post LCP**: ~2.0–2.3 s; feature image disabled kept paint small.
* **TBT**: <120 ms site-wide after deferring noncritical scripts and trimming icon families.
* **CLS**: <0.04—every image, badge, CTA strip, and logo rail has fixed dimensions and reserved space.
* **First-fold weight**: ~650–820 KB on typical pages.

**What moved needles most**

* Refusing autoplay components; reserving heights everywhere; preloading only the heading font; keeping system stack for body; deferring wallets and embeds until interaction; replacing above-the-fold maps/videos with posters that swap on click.

Elementra never fought these constraints. The theme seems designed to let Elementor breathe without turning each page into a JS parade.

---

## 5) SEO and content structure: boring decisions that compound

* **One H1** per page.
* **Human slugs**: `/pricing/`, `/case/checkout-funnel/`, `/docs/getting-started/`.
* **Alt text** describes visible action (“checkout form with three fields and progress at 60%”).
* **Internal linking** forms triangles: Pricing ↔ Docs ↔ Homepage; Case ↔ Service ↔ Contact; Post ↔ Hub ↔ Post.
* **Schema**: Article on posts, FAQ on FAQ blocks, Organization on Contact; no rich-snippet spam.
* **Index hygiene**: Tag bloat avoided; archives have short intros; pagination is clean and linkable.

Traffic quality (time on page and return rate) rose when I removed “design theater” and wrote clarifying intros on category pages.

---

## 6) Editor guardrails: how I stopped templates from “wandering”

* **Global Styles** in Elementor are the only allowed colors and text scales.
* **Section/column defaults** set; editors drop widgets and they snap to rhythm.
* **Preset “Blocks” library**: hero, feature stripe, pricing, FAQ, two-column content, stats (text-only), testimonials (two lines max).
* **Media rules**: export sizes, aspect ratios (16:9 wide, 4:5 portrait, 1:1 details), captions only if functional.
* **No custom padding at widget level** unless overriding a visual edge case; if used, editors must leave a comment in the page notes.

I also added a “health checklist” in the dashboard: hero size under 160 KB, number of above-the-fold images, presence of H1 only once, and a quick list of pages that exceed the target first-fold weight.

---

## 7) Elementor-specific booby traps I dodged (after finding them the hard way)

1. **Nested sections inside columns inside containers**

* Symptom: bloated DOM and odd spacing.
* Fix: flattened hierarchy; used Container feature properly; minimal nesting.

2. **Global widgets copied without tokens**

* Symptom: rogue fonts/colors.
* Fix: locked Global Styles; killed widget-level typography.

3. **Motion effects**

* Symptom: shaky reflow on scroll + motion-sickness reports.
* Fix: all motion disabled; if a reveal is essential, it’s a single opacity fade tied to visible region, and it obeys reduced-motion.

4. **SVG icon packs**

* Symptom: 1000+ icons for three used.
* Fix: tiny custom sprite; swapped inline where needed.

5. **Forms**

* Symptom: overloaded multi-step forms with conditional fields and animation.
* Fix: single-page forms with three fields and a text area; progressive disclosure only when essential.

6. **Sticky elements**

* Symptom: overlapping in iOS Safari when keyboard rises.
* Fix: sticky only for headers, not footers or sidebars; careful z-index and safe-area insets.

7. **Lazy loading that isn’t lazy**

* Symptom: background images that never defer.
* Fix: replaced background images with `<img>` where possible; “cover” via CSS on the image itself; `loading="lazy"` plus declared sizes.

Elementra didn’t mask these pitfalls, but it never made them worse; the theme’s CSS is restrained and predictable.

---

## 8) Accessibility: credibility equals legibility

* **Contrast** across light/dark surfaces; I bumped primaries until AAA for critical text on my chosen backgrounds.
* **Focus order** confirmed on all templates; skip link enabled.
* **Labels** live above inputs; placeholders are hints, not labels.
* **Tap targets** ≥ 44 px; the primary CTA row is finger-proof even on small phones.
* **Reduced-motion** tested by toggling OS settings; nothing animates when it shouldn’t.
* **ARIA** on toggles and accordions handled cleanly; the built FAQ block uses semantic `<details>` when available.

This is where Elementra’s “don’t be clever” CSS helps: fewer edge cases, fewer surprises.

---

## 9) Content craft: specific beats spectacle

* **Outcome-first headlines** (“Ship a faster checkout in a week”) beat abstract slogans.
* **Proof points** are one sentence, not decks.
* **Case metrics** are single numbers with context (“+22% signup completion after 2 iterations”).
* **Docs** open with “Before you start” checklists.
* **Blog** intros promise an arc (“By the end you’ll…”) and deliver it.

In a 100% Elementor world, content discipline is your best performance tool.

---

## 10) Comparisons: where Elementra beat alternatives (and where it tied)

* **Versus multipurpose “do everything” themes**

* Win: fewer moving parts; tokens stay in charge; Theme Builder integrates cleanly; less CSS bloat.
* Tie: you can still make a mess if you layer widgets without restraint.
* Loss: if you want six header styles baked-in, Elementra expects you to design them—by intent.

* **Versus barebones “builderless” themes**

* Win: editor velocity; non-technical teams ship pages without asking for templates.
* Tie: performance can match if you stay strict.
* Loss: if your team belts out HTML in their sleep, code-first may feel lighter long term.

* **Versus “marketing template kits”**

* Win: Elementra’s containers and tokens made mixed kits look consistent; I didn’t fight 12 button styles.
* Tie: kits still save ideation time.
* Loss: if brand is ultra-unique, you’ll design more from scratch (which I prefer).

---

## 11) Limits I hit (honest edges)

* **Ultra-complex editorial workflows** (multi-brand, multi-region with distinct typography) benefit from a headless CMS; Elementra + Elementor is still page-builder land.
* **Massive ecommerce** with deep catalog facets: Elementor can present it, but a purpose-built shop theme might be saner for merchants with hundreds of attributes.
* **Cinematic scrollytelling** with pinned video and canvas: possible, but you’ll fight mobile physics. Keep it for one campaign page, not the system.
* **Script juggling**: if marketing demands four trackers and two widgets, you’ll need to referee. Elementra won’t fix a crowded head—only your governance can.

None of these are dealbreakers; they’re places to choose architecture deliberately.

---

## 12) Maintenance cadence: the “boring loop” that kept Core Web Vitals green

* **Monday**: re-encode any new hero over ~160 KB; check first-fold weight on top 5 pages.
* **Wednesday**: slow-phone drill—open homepage, pricing, one case, one long post, and a form on throttled 4G.
* **Friday**: sanity sweep—one Lighthouse pass, one keyboard-only tour, one reduced-motion check.
* **Monthly**: prune plugins, rotate API keys, verify backups, and review 404 logs.
* **Quarterly**: content audit—retire a stale post, condense a bloated case, refresh an outdated screenshot.

Elementra made the “boring loop” feasible because nothing fights you when you take weight off a page.

---

## 13) Numbers that mattered (and what I changed when they moved)

* **Homepage LCP** > 2.3 s → re-encode hero, reduce above-fold blocks, inline smaller critical CSS.
* **Pricing click-through** dips → rewrite hero subhead, swap “See pricing” to “Compare plans,” surface single-line ROI.
* **Form completion** droops → remove one field, widen tap area on mobile, move error copy below field.
* **Blog time-to-first-scroll** slows → disable feature image, add two-sentence summary, split a long sentence into two.
* **Docs search exits** spike → synonym map for queries, add “did you mean” suggestions, promote the three most-clicked docs at top.

Each fix was small and cheap. The wins compounded.

---

## 14) Security, privacy, and policy that didn’t kill conversion

* **Rate-limit forms**, honeypot, basic bot shields.
* **Consent banner** loads politely with no CLS; analytics needs no violent entrance.
* **Privacy page** written like a person; 500 words, not 5,000.
* **Email footers** that actually honor unsubscribes fast.

Elementra doesn’t include policy magic; it just stays out of the way while you implement it cleanly.

---

## 15) Why I kept a child theme (despite “no code” marketing)

Two tiny reasons:

1. **Utility class** for reserved heights (sponsor rail, logo wall, video poster).
2. **Accessible skip link & focus outline adjustments** that I want version-controlled.

Everything else is tokens + Elementor templates. The child theme exists so I never paste CSS into a random box.

---

## 16) Micro-patterns you can steal (they worked repeatedly)

* **Poster-then-player**: an image with a play button swaps to an embed after click; reserve the height so CLS stays near zero.
* **“Listening” CTA**: a 15–30 s product voice or founder clip converted better than any looping demo for skeptics.
* **Proof under pricing**: one sentence per proof—no carousel—keeps the page quiet enough for decisions.
* **Docs “Before you start”**: prevents support tickets more than any tooltip.
* **Case “What changed” line**: one metric beats three paragraphs.

Elementra’s blocks made all of these patterns trivial.

---

## 17) A complete build checklist (copy/paste for your next project)

1. Choose Elementra’s lean starter; delete any kinetic sections.
2. Set Global Styles: typography scale, 8-pt spacing, four colors, link styles, focus rings.
3. Configure containers: max width, safe gutters; enable CSS Grid where appropriate.
4. Build Theme Builder templates: header, footer, single page, single post, archive, search, 404.
5. Create a Blocks library: hero, feature stripe, pricing, FAQ, two-column content, testimonial (short), logo rail (reserved height), doc sidebar, post TOC.
6. Replace all demo media; lock export sizes and aspect ratios.
7. Write the homepage with still hero, single CTA row, three proof points, one product section, one testimonial strip, one FAQ cluster.
8. Build pricing without counters; keep one FAQ set on page.
9. Map journeys: SaaS (Home → Pricing → Sign Up), Agency (Case → Service → Book Call), Blog (Post → Hub → Post).
10. Test keyboard navigation and reduced-motion.
11. Ship; run slow-phone drill; fix what moves or stutters.
12. Set Monday/Wednesday/Friday maintenance habits.
13. Watch LCP, CTR to pricing or forms, abandonment; adjust a single variable each week.
14. Repeat until the site feels calm under load.

---

## 18) Closing thoughts and selection advice

Elementra never tried to be clever; it tried to be clear. That’s the compliment. In a world where “100% Elementor” often means “100% temptation to overbuild,” this theme supplies just enough structure that good decisions stay good under pressure: tokens actually apply, containers don’t drift, Theme Builder templates don’t surprise you, and performance targets are reachable without a yak-shave.

If I were advising a friend tomorrow:

* Pick Elementra’s quiet starter and promise yourself no sliders.
* Freeze your design system in Global Styles before you design pages.
* Build the five essential templates once, then forget them.
* Keep sections short, proof concrete, images restrained.
* Reserve height for anything that might load late.
* Measure boring numbers, move one thing at a time, and let the site earn trust by not moving under people’s thumbs.

That’s how the SaaS site started converting without ads, the agency started getting better-fit calls, and the blog started feeling like a place worth reading. The theme didn’t “wow” anyone on day one; it just behaved daily, which is rarer—and more valuable—than spectacle.

And if you want to compare siblings or bring a second opinion into the mix, browse templates under **[Best WordPress Themes](https://gplpal.com/shop/)**—I kept that list open as my sanity check while building. For catalog context and updates, I leave the brand name gplpal in my stack notes. The rest is reps: tokens first, templates second, stories third, optics last. Elementra holds all four without drama, which is exactly what I want from a theme in production.