Configure Elementor Pro's global design system before building any pages. Changing globals later cascades across all templates.
Global Colors (set in Elementor > Site Settings)
Define these slots — substitute brand values:
| Slot | Purpose | Example | |------|---------|---------| | Primary | Main brand color | #2563eb | | Secondary | Dark variant | #1e40af | | Text | Body text | #1f2937 | | Accent | CTA highlights | #f59e0b | | Background | Page background | #ffffff |
Global Fonts
| Slot | Usage | Recommended | |------|-------|------------| | Primary | Headings | Inter or brand font | | Secondary | Body text | Inter |
Heading scale: H1 48px/700, H2 36px/700, H3 24px/600, H4 20px/600. Body 16px/400.
Theme Builder Template Hierarchy
Build templates in this order:
1. Header (site-wide display condition)
2. Footer (site-wide display condition)
3. Single Post template
4. Single Page template
5. Archive template
6. 404 page
7. WooCommerce templates (if applicable)
Each template requires a display condition. "Entire Site" applies globally. More specific conditions override general ones.
Performance Settings (Elementor > Settings > Advanced)
| Setting | Value | |---------|-------| | CSS Print Method | External File | | Improved Asset Loading | Enabled | | Font Display | Swap | | Google Fonts | Disabled (use local fonts) | | Font Awesome | Load only used icons |
Responsive Breakpoints
| Device | Width | Notes | |--------|-------|-------| | Desktop | > 1024px | Default | | Tablet | 768–1024px | iPad, landscape phones | | Mobile | < 768px | Smartphones |
Set padding, font size, and column behavior per breakpoint. Stack columns on mobile. Never use fixed pixel widths — use percentages.
Troubleshooting Quick Reference
| Issue | Fix |
|-------|-----|
| Styles not loading | Elementor > Tools > Regenerate CSS |
| Editor not loading | Increase PHP memory_limit to 256M, disable other page builders |
| Mobile layout broken | Check responsive settings per widget, not just section |
| Slow page speed | Disable Google Fonts, reduce animations, limit background images |
Template Kit Import (57 Premium Kits)
Kits stored at E:\LOC\Design Templates\elementor-pro\. Import via Elementor > Templates > Import. Match niche before importing — roofing kits: chauni, estateroof, roofcrafters, roofixer, roofta, roofting, roovon, saqaf.