Building the Homepage: The Hero and Capabilities Grid in Elementor V4

Series: Building AwesomeWildStuff.com From Scratch  |  Post #3: The Elementor V4 homepage — hero and capabilities grid
Difficulty: Intermediate  |  Time: 60–90 minutes

From System to Screen

Post #2 — building the design system — was all setup and no payoff. We defined ten colors, picked two fonts, and ended with a site that looked exactly the same as when we started. Today that work starts paying for itself.

We’re building the top of the homepage: the hero section and the capabilities grid underneath it. By the end you’ll have the first screen a visitor sees, built entirely out of the design system we defined last time.

And I’m going to show you a mistake I made — one that had most of my homepage silently rendering in the wrong font for weeks without me noticing.

Part 1: How Editor V4 Thinks About Layout

If you’ve used Elementor before, forget sections and columns. Editor V4 replaces them with two building blocks:

• Flexbox containers — boxes that arrange their children in a row or a column, with control over gap, alignment, and wrapping.
• Div blocks — plain grouping boxes for holding things together.

Inside them go the atomic widgets: e-heading, e-paragraph, e-button, e-image. Each one does a single job, which makes them fast and predictable.

The whole hero is one flexbox container, set to a row, with two div blocks inside it: text on the left, logo on the right. That’s it. Understanding that shape makes the rest of this post straightforward.

Part 2: Building the Hero

Step 1: Open your homepage and click Edit with Elementor.

Step 2: Add a Flexbox container as the outermost element.

Step 3: Set its direction to row, give it a generous gap, and set align items to center so the text and logo sit level with each other.

Step 4: Give it a min-height so the hero holds its shape on tall screens, and padding so nothing touches the edges.

Step 5: Add two div blocks inside it. The first holds all the text. The second holds the logo.

The Text Stack

Inside the left div block, stacked vertically, are five things. Here are the exact values running on the live site:

Element	Font	Size	Color
Eyebrow line	Poppins 800	14px, 1.5px letter-spacing	Electric Cyan #00D9FF
Headline 1	Anton	48px	White #FFFFFF
Headline 2	Anton	48px	White #FFFFFF
Headline 3	Anton	48px	White #FFFFFF
Intro paragraph	Poppins 400	18px	Light Gray #D7D7D7

The eyebrow is the small cyan line above the headline: CUSTOM BUILDS • STEM LEARNING • MAKER MAGIC. Small, wide-tracked, and in the accent color, it tells a visitor what kind of business this is before they read anything else.

Why the Headline Is Three Separate Widgets

The headline reads:

MAKE COOL STUFF.
LEARN WILD THINGS.
BUILD SOMETHING AWESOME.

Those are three separate heading widgets, not one heading with line breaks. That’s deliberate. Three widgets means each line can be sized, colored, or animated independently later, and on mobile they stack naturally without fighting a hard-coded line break.

Line-height is set to 1.05em, which pulls the three lines tight together so they read as one block instead of three loose sentences. On a big display face like Anton, tight leading is what makes a headline look designed rather than typed.

Part 3: The Two Buttons

Below the paragraph sits a small flexbox container holding two buttons side by side:

• Start a Wild Project — solid Wild Orange #FF6A00 with white text. This is the action we actually want.
• Explore What We Make — dark background with Electric Cyan text. Present, but quieter.

One primary, one secondary. If both buttons shout, neither one does. The solid orange gets the click; the cyan one catches the visitor who isn’t ready yet.

Part 4: The Capabilities Grid

Under the hero is the section that answers “what do you actually do?” It’s a heading, a paragraph, and six tiles.

Step 1: Add a new flexbox container, direction column, for the whole section.

Step 2: Add a heading: ONE SHOP. TONS OF TOOLS. ENDLESS POSSIBILITIES. — Anton at 42px, white, centered.

Step 3: Add a short paragraph underneath explaining the range.

Step 4: Add a flexbox container set to wrap, and put six div blocks inside it. Each tile is a div block with a heading and a paragraph.

Step 5: Style the tiles once, then duplicate. Build the first tile completely, then right-click and duplicate it five times and change the text.

Tile Element	Font	Size	Color
Tile heading	Poppins 800	20px	Wild Orange #FF6A00
Tile description	Poppins 400	15px	Light Gray #D7D7D7

The six tiles are 3D Printing & Prototyping, Laser Engraving & Cutting, CNC Routing & Milling, Vinyl & Heat Press, STEM & Maker Learning, and Custom Product Design. Every one gets an orange heading and a plain description — no icons, no images, no borders competing for attention. On a dark background, orange text on its own is enough.

Part 5: Making It Work on Phones

More than half your visitors will see this on a phone, and a 48px headline in a row-direction container is not going to work there.

Elementor lets you override any style at a breakpoint. The site uses the defaults: 768px for tablet and 1025px for desktop.

Step 1: Click the responsive mode icon and switch to the mobile view.

Step 2: Select the hero container and change its direction from row to column, so the logo drops below the text instead of squeezing beside it.

Step 3: Select each headline and drop the font size from 48px to 32px.

Step 4: Set the text blocks to center aligned — left-aligned text in a narrow column looks accidental.

Step 5: Drop the intro paragraph from 18px to 16px and tighten the container padding.

Only the values you change get overridden. Everything else keeps inheriting from desktop, so you are making a handful of adjustments, not rebuilding the section.

Part 6: The Mistake I Made

Here’s the one that cost me. After publishing Post #2 — the entire post about defining global fonts — I went back and actually inspected my own homepage.

Everything below the hero was rendering in -apple-system. The visitor’s operating system font. Not Anton, not Poppins. On my Mac it looked like San Francisco. On a Windows machine it would have been Segoe UI. Around 170 elements on the page were affected.

The cause: atomic V4 widgets do not inherit the global typography defaults from Site Settings the way theme-rendered content does. If you never explicitly set a font on an e-heading, it falls back to the browser default — and because the browser default looks like a real font, nothing appears broken. It just looks slightly off, and you assume that’s how it always looked.

Worse: Anton was being downloaded from Google Fonts on every single page load and used absolutely nowhere. I was paying the bandwidth for a font I never applied.

The fix was to set the font explicitly on every heading and paragraph: Anton on anything 40px and up, Poppins on everything smaller. Defining a global font makes it available. It does not make it applied.

What We Built Today

• A hero section with an eyebrow, a three-line Anton headline, an intro paragraph, and two buttons
• A six-tile capabilities grid built once and duplicated five times
• Mobile overrides so the whole thing collapses gracefully on a phone
• A homepage that actually uses the fonts we defined in Post #2

Coming Up in Post #4

We finish the homepage — the shop preview, the learn section, and the closing call to action. Then we build the footer, which (I already checked) has the exact same system-font problem we just fixed up top.

Questions? Hit us up at le***********@**************ff.com.

Stay awesome. Stay wild. Keep making stuff.

— John O’Neill Sr.
Founder, AwesomeWildStuff | AWS Solutions LLC