Modul8 WordPress Theme with Elementor Pro

A modern WordPress theme designed for DevOps and technology companies, featuring full Elementor Pro compatibility and custom widgets.

Features

• Fully Responsive Design - Mobile-first approach with beautiful layouts
• Elementor Pro Compatible - Custom header, footer, and page templates
• Custom Elementor Widgets - Hero sections, service cards, stats counters, and more
• DevOps Focused Content - Pre-built sections for services, case studies, and testimonials
• Performance Optimized - Clean code and optimized assets
• SEO Ready - Structured data and semantic HTML
• Dark Theme - Modern dark design with orange accents

Installation

1. Upload Theme Files

   # Copy the wordpress-theme folder to your WordPress themes directory
   cp -r wordpress-theme /path/to/wordpress/wp-content/themes/modul8-theme

2. Activate Theme

   • Go to WordPress Admin → Appearance → Themes
   • Find "Modul8 Elementor Theme" and click "Activate"

3. Install Required Plugins

   • Elementor (Free version)
   • Elementor Pro (Recommended for full functionality)
   • Advanced Custom Fields (Optional)

4. Configure Theme

   • Go to Customizer → Modul8 Settings
   • Set your contact email and CTA button text
   • Upload your logo

Theme Structure

wordpress-theme/
├── assets/
│   ├── css/
│   │   ├── custom.css          # Main theme styles
│   │   └── widgets.css         # Elementor widget styles
│   └── js/
│       └── main.js             # Theme JavaScript
├── elementor-templates/
│   ├── elementor-extensions.php # Elementor integration
│   └── widgets/                # Custom Elementor widgets
│       ├── hero-section.php
│       ├── service-card.php
│       ├── case-study-card.php
│       ├── stats-counter.php
│       ├── trust-logos.php
│       └── contact-form.php
├── functions.php               # Theme functions
├── style.css                  # Main stylesheet
├── header.php                 # Header template
├── footer.php                 # Footer template
├── index.php                  # Homepage template
├── page-services.php          # Services page
├── page-blog.php             # Blog page
└── archive-case_study.php    # Case studies archive

Custom Post Types

The theme includes custom post types for:

• Services - Individual service offerings
• Case Studies - Client success stories

Custom Elementor Widgets

1. Modul8 Hero Section

• Customizable badge, title, and description
• Primary and secondary call-to-action buttons
• Trust logos display
• Background gradient with pattern overlay

2. Modul8 Service Card

• Icon with custom SVG support
• Title and description
• Feature list
• Call-to-action button

3. Modul8 Stats Counter

• Animated number counters
• Custom labels
• Hover effects

4. Modul8 Case Study Card

• Client logo display
• Project description
• Results showcase
• Link to full case study

5. Modul8 Trust Logos

• Client logo carousel
• Grayscale filter with hover effects
• Responsive grid layout

6. Modul8 Contact Form

• AJAX form submission
• Email integration
• Custom styling
• Validation and error handling

Page Templates

Homepage (index.php)

• Hero section with value propositions
• Services overview
• About section with stats
• Case studies preview
• Contact form

Services Page (page-services.php)

• Detailed service descriptions
• Process overview
• Feature comparisons
• Call-to-action sections

Case Studies (archive-case_study.php)

• Client success stories
• Performance metrics
• Technology stacks
• Results achieved

Blog Page (page-blog.php)

• Featured articles
• Category filtering
• Newsletter signup
• Related posts

Customization

Colors

The theme uses CSS custom properties for easy color customization:

:root {
  --primary: #ef6c35;        /* Orange accent */
  --secondary: #1e293b;      /* Dark blue */
  --background: #0f172a;     /* Dark background */
  --foreground: #f8fafc;     /* Light text */
  --muted-foreground: #94a3b8; /* Muted text */
}

Typography

Uses system fonts for performance:

--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

Responsive Breakpoints

• Mobile: 768px and below
• Tablet: 769px - 1024px
• Desktop: 1025px and above

Development

CSS Architecture

• CSS custom properties for theming
• Mobile-first responsive design
• Component-based styling
• Utility classes for common patterns

JavaScript Features

• Smooth scrolling navigation
• AJAX form handling
• Intersection Observer animations
• Mobile menu toggle
• Back-to-top functionality

Performance Optimizations

• Minified assets
• Lazy loading images
• Optimized fonts
• Compressed SVGs
• Efficient selectors

AJAX Functionality

Contact Form

// Form submission handled via AJAX
// Endpoint: wp_ajax_modul8_contact_form
// Security: WordPress nonce verification

Newsletter Signup

// Newsletter subscription
// Endpoint: wp_ajax_modul8_newsletter_signup
// Storage: WordPress options table

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

WordPress Requirements

• WordPress 5.0+
• PHP 7.4+
• MySQL 5.6+

Recommended Plugins

Essential

• Elementor - Page builder functionality
• Elementor Pro - Advanced widgets and templates

Optional

• Advanced Custom Fields - Additional custom fields
• Yoast SEO - Search engine optimization
• WP Rocket - Caching and performance

Support

For theme support and customization:

• Documentation: Available in theme files
• Updates: Manual updates required
• Compatibility: Tested with latest WordPress and Elementor versions

Changelog

Version 1.0.0

• Initial release
• Custom Elementor widgets
• Responsive design
• AJAX functionality
• Custom post types
• Performance optimizations

License

This theme is released under the GPL v2 or later license.

Credits

• Icons: Lucide React (https://lucide.dev)
• Fonts: System font stack
• Framework: WordPress + Elementor
• Design: Inspired by modern DevOps platforms