Overview
The Creative theme is a bold, asymmetric theme designed for freelancers, agencies, and creative professionals who want to stand out. Packed with parallax effects, advanced scroll animations, and a fearless use of color, it breaks free from rigid grid layouts to create dynamic visual flow across every page.
With 42 pre-built sections, 20+ page templates, and full add-on support, the Creative theme delivers a striking visual identity while remaining fully customizable from the admin panel.
Key Features
- Asymmetric Layouts: Bold, offset layouts that draw the eye and create dynamic visual flow across every page.
- Parallax Depth: Multi-layered parallax effects where backgrounds, images, and content move at different speeds as you scroll.
- Bold Typography: Space Grotesk headings paired with Plus Jakarta Sans body text, featuring oversized titles and tight letter-spacing.
- Full Dark Mode: A fully designed dark mode with deep backgrounds (#1e1e2e), adjusted contrast ratios, and color shifts for comfortable night viewing.
- 42 Sections: Pre-built section templates for hero banners, features, pricing, testimonials, portfolios, CTAs, and more.
- Add-on Ready: Full template support for Blog, Shop, Portfolio, FAQ, Careers, Events, Forum, and more.
- Scroll Animations: Content elements animate into view using IntersectionObserver for efficient, battery-friendly detection.
- Sticky Header: Fixed navigation with backdrop blur effect and off-canvas mobile menu.
Design Details
Typography
Two carefully paired Google Fonts create the Creative identity:
- Space Grotesk: Geometric, modern sans-serif for headings. Bold weight with tight letter-spacing creates visual impact.
- Plus Jakarta Sans: Friendly, readable sans-serif for body text. Smooth curves balance the geometric headings.
- Base font size: 16px with a 1.7 line-height for comfortable reading.
The heading and body fonts can be changed in Theme Settings. Any Google Font is supported.
Color Palette
| Color | Hex Code | Usage |
|---|---|---|
| Primary (Bold Orange) | #ff6b35 |
Primary brand color for buttons, links, and accents |
| Secondary (Deep Blue) | #004e89 |
Secondary elements and contrasting sections |
| Accent (Dark Navy) | #1a1a2e |
Accent color for depth and contrast |
| Primary Light | #ff8c5a |
Lighter variant for hover states and highlights |
| Dark Background | #1e1e2e |
Dark mode background |
Customization
Every aspect of the Creative theme can be tailored through the admin panel under Appearance → Theme Settings. No coding is required.
| Setting | Default Value | Description |
|---|---|---|
| Primary color | #ff6b35 | Primary brand color (Bold Orange) |
| Secondary color | #004e89 | Secondary color (Deep Blue) |
| Accent color | #1a1a2e | Accent color (Dark Navy) |
| Heading font | Space Grotesk | Google Font for headings |
| Body font | Plus Jakarta Sans | Google Font for body text |
| Layout style | Wide (1250px) | Wide or boxed layout |
| Header style | Sticky | Sticky or static header |
| Dark mode | Enabled | Enable dark mode support |
| Parallax | Enabled | Enable parallax effects |
| Animations | Enabled | Enable scroll animations |
| Back to top | Enabled | Show back-to-top button |
Page Templates
Every page type has a dedicated template designed with the Creative visual language. Core templates (Home, Page, Contact, Portfolio, Account) are always available. Add-on templates (Blog, Shop, Events, etc.) appear automatically when the corresponding add-on is installed and activated.
Available templates include: Home (Sectioned), Page, Contact, Portfolio, FAQ, Team, Pricing, Partners, Account, Blog, Shop, Booking, Careers, Events, Forum, Classified, Glossary, Help Center, Licenses, Envato, and Quote Request.
Content Sections
Build pages by combining any of the 42 section blocks. Each section is a self-contained design unit you can mix, match, and reorder. Pages using the "Sectioned" template can include as many section blocks as needed, and each section loads its own styles only when used.
Sections span multiple categories including heroes, about/intro, features, services, portfolio, testimonials, pricing, team, partners, stats, timeline, FAQ, CTAs, contact, newsletter, gallery, maps, video, blog and shop previews, events, careers, booking, forum, layout utilities, and unique Creative sections like Parallax Image and Scroll Marquee.
Parallax & Animations
The Creative theme features subtle, purposeful motion design that adds depth and energy:
- fadeInUp: Elements rise from below with a fade — the signature entrance animation.
- scaleIn: Elements grow from center with a spring-like ease, used for icons and buttons.
- slideInLeft: Horizontal entrance from left, used for asymmetric layout elements.
- rotateIn: Rotation with scale for playful entrances on decorative elements.
Parallax effects use CSS transforms and requestAnimationFrame for smooth 60fps performance with no external libraries. Scroll animations use IntersectionObserver with cubic-bezier easing for natural, physics-based motion.
The theme respects the "prefers-reduced-motion" browser setting automatically. You can also toggle animations and parallax off in Theme Settings for a simpler, static presentation.
Header & Footer
Sticky Header
The navigation bar stays fixed at the top of the viewport as visitors scroll, using a semi-transparent background with a backdrop blur effect. It supports dropdown menus up to 2 levels deep, off-canvas mobile navigation, and an integrated language switcher.
Multi-Column Footer
A substantial footer area with multiple configurable columns supports dynamic menus, newsletter subscription, social media icon links, copyright and legal links, and a back-to-top button. Set up your menus under Admin → Menus.
Dark Mode
The Creative theme includes a complete dark mode design with deep navy backgrounds (#1e1e2e), cards using subtle transparency (rgba white at 4%), white text at varying opacities for headings, body, and muted text, and ultra-subtle borders. The bold orange primary color remains vibrant, providing warm contrast against cool dark backgrounds.
Dark mode activates automatically based on system preferences or can be toggled via the header switch.
Responsive Design
The Creative theme is built mobile-first with responsive layouts. The sticky header converts to a hamburger menu, grids stack vertically, and touch gestures are supported for carousels and sliders. The theme targets WCAG AA compliance with proper color contrast, semantic HTML, ARIA labels, and full keyboard navigation support.
Add-on Support
When you install and activate a Larapen add-on, the Creative theme automatically provides matching page templates and section blocks. Supported add-ons include Blog, Shop, Portfolio, Events, FAQ, Team, Pricing, Booking, Careers, Forum, Glossary, Help Center, Classified, Partners, and Licenses.
If you install an add-on that Creative does not yet have a custom template for, the add-on will still work using its own default views as a fallback.