Elegant Theme

Overview

Elegant is a premium theme for the Larapen CMS platform designed with editorial aesthetics in mind. It combines refined typography, magazine-inspired grid layouts, and a sophisticated gold-and-charcoal color palette to give your website a polished, high-end feel.

With its distinctive dual-header system, 42 reusable sections, and full support for all 20 Larapen add-on page types, Elegant is the ideal choice for businesses, professionals, and brands that want to project sophistication and authority.

Key Features

• Editorial Typography: Poppins headings paired with Source Sans Pro body text create a refined, readable hierarchy that feels premium.
• Magazine Grid Layouts: Content is arranged in sophisticated, asymmetric grids inspired by high-end editorial design.
• 42 Reusable Sections: The largest section library, allowing you to mix and match sections to build fully custom page layouts.
• Sophisticated Dark Mode: A carefully crafted dark mode with deep navy tones (#1a1a2e) that preserves the elegant feel.
• Dual-Header System: A distinctive two-tier header with a utility bar and main navigation, totaling 112px of thoughtfully designed header real estate.
• Full Add-on Support: Ready-made page templates for all 20 Larapen add-ons, including Blog, Shop, Portfolio, Events, Forum, and more.

Design Details

Typography

The theme ships with two carefully chosen Google Fonts that create an editorial hierarchy:

• Poppins: Used for all headings, navigation, labels, and buttons. Classic and elegant with geometric precision.
• Source Sans Pro: Used for body text, paragraphs, and longer content. Highly readable with refined proportions.

Both fonts can be changed in Theme Settings. Any Google Font is supported, and the CSS variable system ensures the new fonts are applied consistently across all templates and sections.

Color Palette

All theme colors are defined as CSS custom properties prefixed with --el-. When you change colors in Theme Settings, the CSS variables are updated automatically across the entire site.

Customization

The Elegant theme is designed to be customizable without touching code. Adjust colors, fonts, and layout behavior directly from the admin panel's Appearance → Theme Settings page.

• Container width: Default 1320px wide layout
• Header style: Dual-header enabled by default (can be reduced to single-tier)
• Footer column layout: Up to 4 columns with dynamic menu groups
• Dark mode toggle: Enable, disable, or set to auto
• Shadow intensity: Default 0.08 opacity for subtle depth

Dual-Header System

One of the Elegant theme's signature features is its two-tier header, which creates a refined, editorial feel while providing ample space for navigation and utility links.

• Top Bar (~40px): Contact information, language switcher, social links, and login/register links. Dark background with subtle text.
• Main Navigation (~72px): Logo, primary menu links, and optional CTA button. White background with a gold bottom accent line.
• Mobile Behavior: Top bar hides on scroll. Main navigation becomes a hamburger menu with an elegant off-canvas slide panel.
• Sticky Mode: On scroll, the main navigation sticks to the top with a subtle shadow, while the top bar scrolls away.

You can disable the top bar in Theme Settings to use a single-tier header. The main navigation will expand slightly, and the total header height will reduce from 112px to approximately 72px.

Page Templates

Elegant includes 20 page templates covering every core feature and add-on. Each template follows the editorial design language with magazine-inspired layouts.

Content Sections

Sections are the building blocks of the Elegant theme. Each section is a self-contained, reusable component that can be added to any page through the Sectioned page template. With 42 sections, Elegant has the most comprehensive library of any Larapen theme.

Sections include: Hero Banner, Hero Slider, Hero Video, About, About Extended, Services, Services Grid, Features, Features Alternating, Portfolio Grid, Portfolio Masonry, Gallery, Testimonials, Testimonials Carousel, Team, Team Detailed, Pricing, Pricing Comparison, FAQ, FAQ Categorized, Contact, Contact Map, Blog Latest, Blog Featured, Newsletter, Call to Action, CTA Banner, Stats Counter, Stats Visual, Timeline, Process Steps, Partners Logo, Partners Carousel, Content Block, Content Columns, Divider, Spacer, Map Full Width, Video Embed, Image Banner, Accordion, and Tabs.

Footer

The Elegant theme uses a clean footer that maintains the editorial feel, supporting up to 4 columns populated by menu groups from the admin panel. It features a brand section with logo, description, and social media links, a bottom bar with copyright and legal links, and optional newsletter integration when the Newsletter add-on is active.

Dark Mode

Elegant's dark mode goes beyond simply inverting colors. It uses a deep navy palette with layered tones that create depth and maintain readability. Gold accents pop beautifully against the dark background.

• Deep navy tones: #1a1a2e (base), #141428 (darker), #222240 (lighter surface)
• Respects Bootstrap's data-bs-theme="dark" attribute
• User preference toggle in the header, remembered via localStorage
• Respects OS-level prefers-color-scheme preference
• All 42 sections adapt to dark mode
• Images and media retain proper contrast

Dark mode can be enabled, disabled, or set to "auto" (follow OS preference) from Theme Settings. You can also choose to show or hide the toggle switch from users. The dark mode only affects the public-facing front-end; the admin panel has its own independent dark mode setting.

Responsive Design

Every page template, section, and component is built mobile-first using Bootstrap 5.3.8's responsive grid. The dual-header transforms into an elegant off-canvas mobile menu, and all magazine grids gracefully stack on smaller screens.