Basic Hero Section

Clean and simple hero with centered content

This is the most basic hero configuration with centered text and a simple background.
Get Started Learn More

Copy This Code:

<?php get_template_part('template-parts/sections/hero', null, array(
    'headline' => 'Basic Hero Section',
    'subheadline' => 'Clean and simple hero with centered content',
    'content' => 'This is the most basic hero configuration with centered text and a simple background.',
    'layout' => 'centered',
    'theme' => 'light',
    'buttons' => array(
        array(
            'text' => 'Get Started',
            'href' => '#',
            'type' => 'link',
            'variant' => 'primary'
        ),
        array(
            'text' => 'Learn More',
            'href' => '#',
            'type' => 'link',
            'variant' => 'outline'
        )
    )
)); ?>

Left-Aligned Hero with Background

Professional layout with custom background

This hero uses left alignment and includes a background image with overlay for better text readability.
Explore Services

Copy This Code:

<?php get_template_part('template-parts/sections/hero', null, array(
    'headline' => 'Left-Aligned Hero with Background',
    'subheadline' => 'Professional layout with custom background',
    'content' => 'This hero uses left alignment and includes a background image with overlay for better text readability.',
    'layout' => 'left',
    'theme' => 'dark',
    'background_type' => 'gradient',
    'background_gradient_start' => '#1a365d',
    'background_gradient_end' => '#2d3748',
    'padding_y' => 'xl',
    'buttons' => array(
        array(
            'text' => 'Explore Services',
            'href' => '#',
            'type' => 'link',
            'variant' => 'primary'
        )
    )
)); ?>

Split Layout Hero

Text on one side, image on the other

Perfect for showcasing a product or service with accompanying visuals.
View Portfolio Contact Us

Copy This Code:

<?php get_template_part('template-parts/sections/hero', null, array(
    'headline' => 'Split Layout Hero',
    'subheadline' => 'Text on one side, image on the other',
    'content' => 'Perfect for showcasing a product or service with accompanying visuals.',
    'layout' => 'split',
    'theme' => 'light',
    'image' => 'https://via.placeholder.com/600x400',
    'image_position' => 'right',
    'buttons' => array(
        array(
            'text' => 'View Portfolio',
            'href' => '#',
            'type' => 'link',
            'variant' => 'primary'
        ),
        array(
            'text' => 'Contact Us',
            'href' => '#',
            'type' => 'link',
            'variant' => 'secondary'
        )
    )
)); ?>
New Feature

Centered Content Section

Perfect for announcements and focused messaging

This centered layout is ideal for important announcements, mission statements, or any content that needs focused attention. The text is automatically constrained to a comfortable reading width.
Learn More

Copy This Code:

<?php get_template_part('template-parts/sections/content', null, array(
    'headline' => 'Centered Content Section',
    'subheadline' => 'Perfect for announcements and focused messaging',
    'content' => 'This centered layout is ideal for important announcements, mission statements, or any content that needs focused attention. The text is automatically constrained to a comfortable reading width.',
    'layout' => 'centered',
    'theme' => 'light',
    'badge' => 'New Feature',
    'buttons' => array(
        array(
            'text' => 'Learn More',
            'href' => '#',
            'type' => 'link',
            'variant' => 'primary'
        )
    )
)); ?>

Two-Column Layout (Image Left)

Balanced content with visual support

This layout places the image on the left side and content on the right. It's perfect for introducing services, team members, or explaining complex concepts with visual aids.
Discover More

Copy This Code:

<?php get_template_part('template-parts/sections/content', null, array(
    'headline' => 'Two-Column Layout (Image Left)',
    'subheadline' => 'Balanced content with visual support',
    'content' => 'This layout places the image on the left side and content on the right. It\'s perfect for introducing services, team members, or explaining complex concepts with visual aids.',
    'layout' => 'left-image',
    'theme' => 'primary',
    'image' => 'https://via.placeholder.com/500x400',
    'image_style' => 'rounded',
    'buttons' => array(
        array(
            'text' => 'Discover More',
            'href' => '#',
            'type' => 'link',
            'variant' => 'light'
        )
    )
)); ?>

Grid Content Layout

Showcase multiple items or services

Use this grid layout to display multiple items, services, or features in an organized, visually appealing way.

Service One

Description of your first service or feature.
Learn More

Service Two

Description of your second service or feature.
Learn More

Service Three

Description of your third service or feature.
Learn More

Copy This Code:

<?php get_template_part('template-parts/sections/content', null, array(
    'headline' => 'Grid Content Layout',
    'subheadline' => 'Showcase multiple items or services',
    'content' => 'Use this grid layout to display multiple items, services, or features in an organized, visually appealing way.',
    'layout' => 'grid',
    'theme' => 'dark',
    'columns' => 3,
    'background_type' => 'gradient',
    'background_gradient_start' => '#2d3748',
    'background_gradient_end' => '#1a202c',
    'items' => array(
        array(
            'title' => 'Service One',
            'content' => 'Description of your first service or feature.',
            'icon' => 'fas fa-rocket',
            'link' => '#'
        ),
        array(
            'title' => 'Service Two',
            'content' => 'Description of your second service or feature.',
            'icon' => 'fas fa-star',
            'link' => '#'
        ),
        array(
            'title' => 'Service Three',
            'content' => 'Description of your third service or feature.',
            'icon' => 'fas fa-heart',
            'link' => '#'
        )
    )
)); ?>

Feature Showcase

Highlight your key features and benefits

Fast Performance

Mobile Responsive

SEO Optimized

Secure & Reliable

24/7 Support

Easy Integration

Copy This Code:

<?php get_template_part('template-parts/sections/features', null, array(
    'headline' => 'Feature Showcase',
    'subheadline' => 'Highlight your key features and benefits',
    'layout' => 'grid',
    'theme' => 'light',
    'columns' => 3,
    'features' => array(
        array(
            'title' => 'Fast Performance',
            'description' => 'Lightning-fast loading times and optimized performance.',
            'icon' => 'fas fa-bolt'
        ),
        array(
            'title' => 'Mobile Responsive',
            'description' => 'Looks great on all devices, from mobile to desktop.',
            'icon' => 'fas fa-mobile-alt'
        ),
        array(
            'title' => 'SEO Optimized',
            'description' => 'Built with search engine optimization in mind.',
            'icon' => 'fas fa-search'
        ),
        array(
            'title' => 'Secure & Reliable',
            'description' => 'Enterprise-grade security and 99.9% uptime.',
            'icon' => 'fas fa-shield-alt'
        ),
        array(
            'title' => '24/7 Support',
            'description' => 'Round-the-clock customer support when you need it.',
            'icon' => 'fas fa-headset'
        ),
        array(
            'title' => 'Easy Integration',
            'description' => 'Seamlessly integrates with your existing tools.',
            'icon' => 'fas fa-plug'
        )
    )
)); ?>

Alternating Feature Layout

Features with alternating image positions

Advanced Analytics

Team Collaboration

Automated Workflows

Copy This Code:

<?php get_template_part('template-parts/sections/features', null, array(
    'headline' => 'Alternating Feature Layout',
    'subheadline' => 'Features with alternating image positions',
    'layout' => 'alternating',
    'theme' => 'primary',
    'features' => array(
        array(
            'title' => 'Advanced Analytics',
            'description' => 'Get detailed insights into your performance with our comprehensive analytics dashboard.',
            'image' => 'https://via.placeholder.com/400x300',
            'position' => 'left'
        ),
        array(
            'title' => 'Team Collaboration',
            'description' => 'Work together seamlessly with built-in collaboration tools and real-time updates.',
            'image' => 'https://via.placeholder.com/400x300',
            'position' => 'right'
        ),
        array(
            'title' => 'Automated Workflows',
            'description' => 'Save time with intelligent automation that handles repetitive tasks for you.',
            'image' => 'https://via.placeholder.com/400x300',
            'position' => 'left'
        )
    )
)); ?>

Our Impact in Numbers

See the results we've achieved

0

Happy Customers

Satisfied clients worldwide

0

Uptime

Reliable service guarantee

0

Countries

Global presence

0

Support

Always here to help

Copy This Code:

<?php get_template_part('template-parts/sections/stats', null, array(
    'headline' => 'Our Impact in Numbers',
    'subheadline' => 'See the results we\'ve achieved',
    'theme' => 'dark',
    'layout' => 'horizontal',
    'background_type' => 'gradient',
    'background_gradient_start' => '#1a365d',
    'background_gradient_end' => '#2c5282',
    'stats' => array(
        array(
            'number' => '10,000+',
            'label' => 'Happy Customers',
            'description' => 'Satisfied clients worldwide'
        ),
        array(
            'number' => '99.9%',
            'label' => 'Uptime',
            'description' => 'Reliable service guarantee'
        ),
        array(
            'number' => '50+',
            'label' => 'Countries',
            'description' => 'Global presence'
        ),
        array(
            'number' => '24/7',
            'label' => 'Support',
            'description' => 'Always here to help'
        )
    )
)); ?>

Ready to Get Started?

Join thousands of satisfied customers today

Start Free Trial Contact Sales

Copy This Code:

<?php get_template_part('template-parts/sections/cta', null, array(
    'headline' => 'Ready to Get Started?',
    'subheadline' => 'Join thousands of satisfied customers today',
    'theme' => 'primary',
    'layout' => 'centered',
    'buttons' => array(
        array(
            'text' => 'Start Free Trial',
            'href' => '#',
            'type' => 'link',
            'variant' => 'light'
        ),
        array(
            'text' => 'Contact Sales',
            'href' => '#',
            'type' => 'link',
            'variant' => 'outline-light'
        )
    )
)); ?>

Transform Your Business Today

See how our solution can help you grow

Don't let your competition get ahead. Our proven platform has helped thousands of businesses achieve their goals.
Schedule Demo

Copy This Code:

<?php get_template_part('template-parts/sections/cta', null, array(
    'headline' => 'Transform Your Business Today',
    'subheadline' => 'See how our solution can help you grow',
    'content' => 'Don\'t let your competition get ahead. Our proven platform has helped thousands of businesses achieve their goals.',
    'theme' => 'light',
    'layout' => 'split',
    'image' => 'https://via.placeholder.com/500x400',
    'image_position' => 'right',
    'buttons' => array(
        array(
            'text' => 'Schedule Demo',
            'href' => '#',
            'type' => 'link',
            'variant' => 'primary'
        )
    )
)); ?>

Stay Updated

Get the latest news and updates delivered to your inbox

Copy This Code:

<?php get_template_part('template-parts/sections/cta', null, array(
    'headline' => 'Stay Updated',
    'subheadline' => 'Get the latest news and updates delivered to your inbox',
    'theme' => 'secondary',
    'layout' => 'newsletter',
    'background_type' => 'gradient',
    'background_gradient_start' => '#667eea',
    'background_gradient_end' => '#764ba2',
    'form_action' => '#',
    'form_method' => 'post',
    'buttons' => array(
        array(
            'text' => 'Subscribe Now',
            'type' => 'submit',
            'variant' => 'light'
        )
    )
)); ?>

Quick Reference Guide

Available Themes

  • 'light' - Light background with dark text
  • 'dark' - Dark background with light text
  • 'primary' - Primary brand color background
  • 'secondary' - Secondary brand color background

Layout Options

Hero Sections:

  • 'centered' - Centered content
  • 'left' - Left-aligned content
  • 'split' - Text and image side-by-side

Content Sections:

  • 'centered' - Centered content
  • 'left-image' - Image left, content right
  • 'right-image' - Content left, image right
  • 'grid' - Grid of items
  • 'stats' - Statistics display

Features Sections:

  • 'grid' - Grid layout
  • 'alternating' - Alternating image/text rows

CTA Sections:

  • 'centered' - Centered content
  • 'split' - Text and image/form side-by-side
  • 'newsletter' - Newsletter signup form

Background Options

  • 'background_type' => 'color' + 'background_color' => '#hex'
  • 'background_type' => 'gradient' + start/end colors
  • 'background_type' => 'image' + 'background_image' => 'url'

Button Variants

  • 'primary' - Primary button style
  • 'secondary' - Secondary button style
  • 'outline' - Outlined button
  • 'outline-light' - Light outlined button
  • 'light' - Light button
  • 'ghost' - Ghost/transparent button

Spacing Options

  • 'padding_y' => 'sm' - Small padding
  • 'padding_y' => 'md' - Medium padding (default)
  • 'padding_y' => 'lg' - Large padding
  • 'padding_y' => 'xl' - Extra large padding