WordPress basic editor

⭐ METHOD 1 — Create a Hero Section in Gutenberg (Block Editor)

This is the simplest and most universal method.

Step‑by‑step

1. Open your page in WordPress
2. Click Add Block
3. Choose Cover (this is WordPress’s built‑in hero block)
4. Upload your hero image OR choose a solid background color
5. Inside the Cover block, add:
   • Heading (H1)
   • Paragraph
   • Buttons
6. Set the Cover block height:
   • Click the block
   • Right sidebar → Dimensions
   • Set Min Height to 400–600px (hero height)
7. Center everything:
   • Block toolbar → Align center
   • Block toolbar → Content position → Center center
8. Add overlay if needed:
   • Cover block → Overlay → choose dark overlay at 40–60%
9. Save

Result:

A clean, modern hero section with text + button over an image or color background.

⭐ METHOD 2 — Create a Hero Section Using a Pattern (Twenty Twenty‑Four / modern themes)

Many themes include pre‑built hero patterns.

Steps

1. Edit the page
2. Click Patterns (left sidebar)
3. Search for:
   • “Hero”
   • “Banner”
   • “Cover”
   • “Large header”
4. Insert the pattern
5. Replace the text + image
6. Adjust padding to create hero height
7. Save

Result:

A professionally designed hero section with minimal effort.

⭐ METHOD 3 — Create a Hero Section in Elementor (drag‑and‑drop)

If you prefer Elementor, this is the most flexible method.

Steps

1. Edit page with Elementor
2. Add a Section
3. Set Height → Min Height → 500–700px
4. Set Content Position → Middle
5. Add a Background Image:
   • Style → Background → Classic → Upload
6. Add an Overlay:
   • Style → Background Overlay → Color → Black at 40–60%
7. Drag in:
   • Heading
   • Text Editor
   • Button
8. Center everything
9. Adjust padding (top/bottom 100–150px)
10. Save