Understanding how Base47's template system works
Templates in Base47 are complete HTML pages that get converted into WordPress shortcodes. Each template includes:
Each template follows this structure:
Template-Name/
├── index.html # Main template file
├── style.css # Template styles
├── script.js # Template JavaScript
├── theme.json # Template metadata
├── thumbnail.png # Preview image
└── assets/
├── images/ # Template images
├── fonts/ # Custom fonts
└── icons/ # Icon filesBase47 automatically scans for template folders and:
Each template gets a unique shortcode:
[base47_agency_homepage] # Agency homepage template
[base47_ecommerce_product] # E-commerce product page
[base47_restaurant_menu] # Restaurant menu templateProfessional business websites with hero sections, team pages, portfolios, and contact forms.
Online store layouts with product listings, detail pages, shopping cart, and checkout.
Food & dining websites with menu displays, galleries, reservations, and location maps.
Gym and wellness sites with class schedules, trainers, membership pricing, and sign-up forms.
Property websites with listings, agent profiles, property details, and search functionality.
Schools and courses with instructor profiles, course catalogs, and enrollment systems.
App landing pages with feature showcases, download links, and support sections.
Events and conferences with speaker profiles, schedules, and ticket purchasing.
Healthcare sites with service listings, doctor profiles, and appointment booking.
Canvas mode outputs pure HTML without your WordPress theme wrapper. Perfect for:
Method 1: URL Parameter
https://yoursite.com/page/?canvas=1Method 2: Shortcode Parameter
[base47_template canvas="true"]Method 3: Template Setting
Enable canvas mode by default in template settings.
Control which template sets are active:
Templates are organized by:
Edit templates directly in WordPress:
Add custom code to templates:
/* Custom CSS */
.my-custom-class {
color: #ff6b35;
font-weight: bold;
}// Custom JavaScript
document.addEventListener('DOMContentLoaded', function() {
console.log('Template loaded!');
});All templates include:
Templates use these responsive breakpoints:
Templates are optimized for speed:
Built-in caching system: