Overview
The Default theme is a clean, modern, and professional theme included free with every Larapen CMS installation. It is designed for portfolios, business sites, and landing pages, offering a balanced layout with wide 1250px containers, generous whitespace, and subtle animations. The neutral design adapts to any industry through simple color and font changes.
This theme is ideal for freelancers, agencies, small businesses, and anyone who wants a trustworthy, polished online presence without purchasing an additional theme.
Key Features
- 42 drag-and-drop content sections for building rich, unique pages
- 20+ page templates covering core pages and all supported add-ons
- Full dark mode support with automatic detection and manual toggle
- Fully responsive and mobile-first design
- WCAG AA accessibility compliance
- Multi-language ready with locale-based URL routing
- Blog, shop, and all add-on support with dedicated templates
- SEO optimized structure
- Custom CSS and JavaScript injection from the admin panel
- Google Fonts integration with customizable pairings
Design Details
Typography
The Default theme uses two carefully paired Google Fonts:
- DM Sans for headings (weight 600) — a clean, geometric sans-serif that conveys professionalism.
- Inter for body text (16px base) — a highly readable sans-serif optimized for screens.
Color Palette
| Color | Hex Code | Usage |
|---|---|---|
| Primary | #2563eb |
Buttons, links, and primary accents |
| Secondary | #1e40af |
Hover states and secondary elements |
| Accent | #f59e0b |
Highlights and decorative touches |
| Text | #1e293b |
Main body text |
| Background | #f8fafc |
Page background |
Customization
All customization is done through the admin panel under Appearance → Theme Settings. No coding is required. Changes are saved to the database and take effect immediately.
- Colors: Change the primary, secondary, accent, and text colors using color pickers. The entire site updates automatically through CSS variables.
- Fonts: Choose any Google Font for headings and body text. Adjust the base font size to match your preference.
- Layout: Switch between layout styles and set custom container widths. The default is a wide 1250px container.
- Header: Customize background color, text color, logo height, button colors, border, background image, and text shadow.
- Footer: Configure the 4-column layout, background color, background image, title and text colors, link colors, and top border style.
- Advanced: Inject custom CSS and JavaScript directly from the admin panel for small tweaks without touching theme files.
Page Templates
| Template | Purpose | Source |
|---|---|---|
| Sectioned | Mix and match from 42 section templates to build any page layout | Core |
| Page | Standard static page with title, content, and featured image | Core |
| Contact | Contact page with a form, map integration, and contact details | Core |
| Portfolio | Grid showcase of your work with categories and filtering | Core |
| Account | User account dashboard and profile management | Core |
| FAQ | Frequently asked questions with expandable accordion sections | FAQ Add-on |
| Team | Team member profiles with photos, roles, and social links | Team Add-on |
| Partners | Logo grid of partners, clients, or sponsors | Partners Add-on |
| Pricing | Pricing tables with feature comparison and plan highlights | Pricing Add-on |
| Blog | Blog listing, single posts, categories, and tags | Blog Add-on |
| Shop | Product catalog, product detail, cart, and checkout flow | Shop Add-on |
| Booking | Appointment or reservation booking interface | Booking Add-on |
| Events | Events listing with dates, locations, and registration | Events Add-on |
| Careers | Job listing board with application forms | Careers Add-on |
| Forum | Community discussion boards with topics and replies | Forum Add-on |
| Classified | Classified ad listings with categories and search | Classified Add-on |
| Glossary | A-to-Z glossary with search and alphabetical navigation | Glossary Add-on |
| Help Center | Knowledge base with categories and article search | Help Center Add-on |
| Licenses | Software license information and management | Licenses Add-on |
| Quote Request | Custom quote request form for services | Quote Add-on |
| Envato | Envato marketplace integration showcase | Envato Add-on |
Add-on page templates only appear when the corresponding add-on is installed and activated. Core templates are always available.
Content Sections
The Default theme includes 42 drag-and-drop sections that let you build rich, unique pages without writing a single line of code. When creating or editing a page, choose the Sectioned page template to add, reorder, and configure individual sections.
Section categories include:
- Page Title Sections: Title Simple, Title Banner, Title Overlay, Title Animated, Title Split
- Hero & Call-to-Action: Hero, Banner, CTA, Buttons, Countdown
- Content & Text: Rich Text, Text Content, Image & Text, About, Steps, Timeline, Accordion, Tabs, FAQ
- Media & Visual: Gallery, Carousel, Video, Before & After, Embed, Map, Divider
- Data & Features: Features, Cards Grid, Metrics, Pricing Table, Testimonials, Team, Downloads
- Forms & Engagement: Contact Form, Newsletter, Newsletter Form
- Add-on Previews: Portfolio, Blog Preview, Products Preview, Events Preview, Listings Preview, Careers Preview
Header & Footer
Header
The header features a default static style with scroll detection, adding a .scrolled class when the user scrolls down.
Options include adjustable height, solid color or image background, customizable text color, button styling, logo height, optional text shadow,
and a configurable bottom border.
Footer
The footer uses a 4-column layout with dynamic menu groups. Options include solid color or image background, customizable title, text, and link colors, and a configurable top border. Footer menus are managed through the Menus section in the admin panel.
Dark Mode
The Default theme supports a complete dark mode experience:
- Automatic detection: The theme respects the visitor's system preference. If their device is set to dark mode, the site automatically matches.
- Manual toggle: A mode toggle in the header lets visitors switch between light and dark modes. Their choice is remembered across visits via
localStorage. - Admin controls: Choose the default mode (light or dark), or allow visitors to toggle between them. Configuration is available in Theme Settings.
Responsive Design
The Default theme is fully responsive and designed mobile-first. It looks great on phones, tablets, laptops, and desktops of any size. The header adapts to smaller screens, and all layouts gracefully reflow for optimal viewing on every device.