Landing Page Tutorial

Building a Landing Page

Create a conversion-focused landing page using WBcom Essential blocks. This tutorial covers hero sections, feature grids, testimonials, and call-to-action sections.

What You’ll Build

A complete landing page with:

  1. Hero section with animated text
  2. Feature highlights with icon boxes
  3. Testimonials carousel
  4. Pricing table comparison
  5. Final call-to-action

Time required: 30-45 minutes

Before You Start

You’ll need:

  • WordPress 6.0+
  • WBcom Essential activated
  • A page to work with (Pages → Add New)

Section 1: Hero Section

Option A: Slider Hero (Gutenberg)

  • Add a Slider block
  • Add 2-3 slides with:
  • Background image
  • Heading text
  • Button link
  • Settings to adjust:
  • Slide height: 80vh
  • Autoplay: On (5 seconds)
  • Transition: Fade
  • Navigation: Dots only

Option B: Text Rotator Hero (Gutenberg)

Create a dynamic headline that cycles through words:

  1. Add a Group block for the hero container
  2. Inside, add a Text Rotator block
  3. Configure:
  4. Before text: “We help businesses”
  5. Rotating words: “grow”, “scale”, “succeed”
  6. After text: “online”
  7. Animation: Type effect
  8. Add a Buttons block below for CTAs

Option C: Elementor Hero

  • Add a Section with full-width layout
  • Add the Slider widget
  • Configure slides with:
  • Background image
  • Heading, subheading, button
  • Overlay for text readability

Section 2: Feature Highlights

Using Icon Boxes (Gutenberg)

  • Add a Columns block (3 columns)
  • In each column, add an Icon Box block
  • Configure each:
  • Icon: Choose relevant icon
  • Title: Feature name
  • Description: 2-3 sentences
  • Link: Optional learn more link
  • Style settings:
  • Icon position: Top
  • Alignment: Center
  • Enable Theme Colors for consistency

Using Flip Boxes (More Interactive)

  1. Add a Columns block (3 columns)
  2. In each column, add a Flip Box block
  3. Configure:
  4. Front: Icon and title
  5. Back: Full description and button
  6. Flip direction: Horizontal
  7. This creates an interactive experience where users hover to see more

Elementor Alternative

  1. Add a Section with 3 columns
  2. Use the Flip Box widget in each
  3. Configure front (teaser) and back (details) for each feature

Section 3: Social Proof

Testimonial Carousel (Gutenberg)

  1. Add a Testimonial Carousel block
  2. Add 4-6 testimonials:
  3. Quote text (2-3 sentences)
  4. Author name
  5. Role/Company
  6. Avatar (optional)
  7. Star rating
  8. Carousel settings:
  9. Slides per view: 3 (desktop), 1 (mobile)
  10. Autoplay: On (6 seconds)
  11. Show navigation: Yes
  12. Enable Theme Colors

Single Featured Testimonial

For a hero testimonial:

  1. Add a Testimonial block
  2. Configure:
  3. Quote: Your best customer quote
  4. Author and role
  5. Large avatar
  6. 5-star rating
  7. Center alignment works well here

Counter Stats Section

Add credibility numbers:

  • Add a Columns block (4 columns)
  • In each, add a Counter block
  • Configure each:
  • End number: Your stat (1000+, 98%, etc.)
  • Prefix/Suffix: $, +, %
  • Title below: “Happy Customers”, etc.
  • Animation duration: 2000ms

Example counters:

  • “500+” with “Projects Completed”
  • “98%” with “Client Satisfaction”
  • “15+” with “Years Experience”
  • “24/7” with “Support Available”

Section 4: Pricing Tables

Pricing Table Comparison (Gutenberg)

  1. Add a Columns block (3 columns)
  2. In each column, add a Pricing Table block
  3. Configure each plan:

Basic Plan:

  • Title: “Starter”
  • Price: $29
  • Period: /month
  • Features: 5-7 items with checkmarks
  • Button: “Get Started”

Popular Plan:

  • Title: “Professional”
  • Price: $79
  • Period: /month
  • Features: 8-10 items
  • Button: “Get Started”
  • Enable “Featured” ribbon

Enterprise Plan:

  • Title: “Enterprise”
  • Price: $199
  • Period: /month
  • Features: All features
  • Button: “Contact Sales”
  1. Style the middle column to stand out (larger, highlighted)

Elementor Alternative

  1. Add a Section with 3 columns
  2. Use the Pricing Table widget in each
  3. Configure similarly, using Elementor’s styling controls

Section 5: Final CTA

CTA Box (Gutenberg)

  • Add a CTA Box block
  • Configure:
  • Heading: “Ready to Get Started?”
  • Description: “Join thousands of satisfied customers…”
  • Button text: “Start Free Trial”
  • Button link: Your signup page
  • Style settings:
  • Background color: Your primary color
  • Text color: White
  • Full-width layout

With Countdown (Urgency)

Add urgency with a limited-time offer:

  1. Add a Group block
  2. Inside, add:
  3. Heading: “Special Launch Offer”
  4. Countdown block: Set to your deadline
  5. CTA Box: With your offer details
  6. This creates urgency that drives conversions

Complete Page Structure

[Full-width Hero]
├── Slider or Text Rotator
├── Headline + Subheadline
└── CTA Buttons

[Feature Highlights]
├── Section Heading
└── 3 Icon Boxes or Flip Boxes

[Social Proof]
├── Section Heading
├── Counter Stats (4 columns)
└── Testimonial Carousel

[Pricing]
├── Section Heading
└── 3 Pricing Tables

[Final CTA]
├── CTA Box with Button
└── Optional: Countdown Timer

Mobile Optimization

Check Responsive Settings

  1. Preview your page in mobile view
  2. Adjust column layouts:
  3. 3 columns → 1 column on mobile
  4. 4 columns → 2 columns on tablet, 1 on mobile
  5. Check text sizes are readable
  6. Verify buttons are tappable (minimum 44px height)

Carousel Settings for Mobile

  • Reduce slides per view
  • Enable touch/swipe
  • Make navigation dots larger
  • Consider disabling autoplay on mobile

Tips for High Conversion

Above the Fold

  • Clear headline explaining value
  • Single, prominent CTA button
  • Social proof element (testimonial or stat)

Trust Signals

  • Customer logos
  • Security badges
  • Testimonials with real names and photos
  • Statistics (customers, projects, years)

Clear CTAs

  • Use contrasting colors for buttons
  • Action-oriented text (“Get Started” not “Submit”)
  • Multiple CTAs throughout the page
  • Same CTA repeated in hero and footer

Page Speed

  • Optimize all images before uploading
  • Limit carousel items to 6-8
  • Use lazy loading where available
  • Test with Google PageSpeed Insights

Next Steps

Last updated: January 26, 2026