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:
Hero section with animated text Feature highlights with icon boxes Testimonials carousel Pricing table comparison 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:
Add a Group block for the hero container Inside, add a Text Rotator block Configure: Before text: “We help businesses” Rotating words: “grow”, “scale”, “succeed” After text: “online” Animation: Type effect 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)
Add a Columns block (3 columns) In each column, add a Flip Box block Configure: Front: Icon and title Back: Full description and button Flip direction: Horizontal This creates an interactive experience where users hover to see more
Elementor Alternative
Add a Section with 3 columns Use the Flip Box widget in each Configure front (teaser) and back (details) for each feature
Section 3: Social Proof
Testimonial Carousel (Gutenberg)
Add a Testimonial Carousel block Add 4-6 testimonials: Quote text (2-3 sentences) Author name Role/Company Avatar (optional) Star rating Carousel settings: Slides per view: 3 (desktop), 1 (mobile) Autoplay: On (6 seconds) Show navigation: Yes Enable Theme Colors
Single Featured Testimonial
For a hero testimonial:
Add a Testimonial block Configure: Quote: Your best customer quote Author and role Large avatar 5-star rating 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)
Add a Columns block (3 columns) In each column, add a Pricing Table block 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”
Style the middle column to stand out (larger, highlighted)
Elementor Alternative
Add a Section with 3 columns Use the Pricing Table widget in each 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:
Add a Group block Inside, add: Heading: “Special Launch Offer” Countdown block: Set to your deadline CTA Box: With your offer details 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
Preview your page in mobile view Adjust column layouts: 3 columns → 1 column on mobile 4 columns → 2 columns on tablet, 1 on mobile Check text sizes are readable 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
Building a Community Site - Member directories and groups Setting Up an Online Store - Product showcases and cart Block Reference - All block settings