{"slug":"elementor-pro-setup","title":"Elementor Pro Setup and Global Design System","tags":["elementor","page-builder","design-system","theme-builder"],"agent_summary":"Global colors, fonts, Theme Builder template hierarchy, performance settings, and responsive breakpoints for Elementor Pro.","trigger_phrases":["elementor setup","elementor global colors","elementor theme builder","elementor pro configuration","elementor fonts"],"runnable":false,"markdown":"\nConfigure Elementor Pro's global design system before building any pages. Changing globals later cascades across all templates.\n\n## Global Colors (set in Elementor > Site Settings)\n\nDefine these slots — substitute brand values:\n\n| Slot | Purpose | Example |\n|------|---------|---------|\n| Primary | Main brand color | #2563eb |\n| Secondary | Dark variant | #1e40af |\n| Text | Body text | #1f2937 |\n| Accent | CTA highlights | #f59e0b |\n| Background | Page background | #ffffff |\n\n## Global Fonts\n\n| Slot | Usage | Recommended |\n|------|-------|------------|\n| Primary | Headings | Inter or brand font |\n| Secondary | Body text | Inter |\n\nHeading scale: H1 48px/700, H2 36px/700, H3 24px/600, H4 20px/600. Body 16px/400.\n\n## Theme Builder Template Hierarchy\n\nBuild templates in this order:\n\n```\n1. Header (site-wide display condition)\n2. Footer (site-wide display condition)\n3. Single Post template\n4. Single Page template\n5. Archive template\n6. 404 page\n7. WooCommerce templates (if applicable)\n```\n\nEach template requires a display condition. \"Entire Site\" applies globally. More specific conditions override general ones.\n\n## Performance Settings (Elementor > Settings > Advanced)\n\n| Setting | Value |\n|---------|-------|\n| CSS Print Method | External File |\n| Improved Asset Loading | Enabled |\n| Font Display | Swap |\n| Google Fonts | Disabled (use local fonts) |\n| Font Awesome | Load only used icons |\n\n## Responsive Breakpoints\n\n| Device | Width | Notes |\n|--------|-------|-------|\n| Desktop | > 1024px | Default |\n| Tablet | 768–1024px | iPad, landscape phones |\n| Mobile | < 768px | Smartphones |\n\nSet padding, font size, and column behavior per breakpoint. Stack columns on mobile. Never use fixed pixel widths — use percentages.\n\n## Troubleshooting Quick Reference\n\n| Issue | Fix |\n|-------|-----|\n| Styles not loading | Elementor > Tools > Regenerate CSS |\n| Editor not loading | Increase PHP `memory_limit` to 256M, disable other page builders |\n| Mobile layout broken | Check responsive settings per widget, not just section |\n| Slow page speed | Disable Google Fonts, reduce animations, limit background images |\n\n## Template Kit Import (57 Premium Kits)\n\nKits 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.\n","html":"

Configure Elementor Pro's global design system before building any pages. Changing globals later cascades across all templates.

\n

Global Colors (set in Elementor > Site Settings)

\n

Define these slots — substitute brand values:

\n

| Slot | Purpose | Example |\n|------|---------|---------|\n| Primary | Main brand color | #2563eb |\n| Secondary | Dark variant | #1e40af |\n| Text | Body text | #1f2937 |\n| Accent | CTA highlights | #f59e0b |\n| Background | Page background | #ffffff |

\n

Global Fonts

\n

| Slot | Usage | Recommended |\n|------|-------|------------|\n| Primary | Headings | Inter or brand font |\n| Secondary | Body text | Inter |

\n

Heading scale: H1 48px/700, H2 36px/700, H3 24px/600, H4 20px/600. Body 16px/400.

\n

Theme Builder Template Hierarchy

\n

Build templates in this order:

\n
1. Header (site-wide display condition)\n2. Footer (site-wide display condition)\n3. Single Post template\n4. Single Page template\n5. Archive template\n6. 404 page\n7. WooCommerce templates (if applicable)\n
\n

Each template requires a display condition. \"Entire Site\" applies globally. More specific conditions override general ones.

\n

Performance Settings (Elementor > Settings > Advanced)

\n

| Setting | Value |\n|---------|-------|\n| CSS Print Method | External File |\n| Improved Asset Loading | Enabled |\n| Font Display | Swap |\n| Google Fonts | Disabled (use local fonts) |\n| Font Awesome | Load only used icons |

\n

Responsive Breakpoints

\n

| Device | Width | Notes |\n|--------|-------|-------|\n| Desktop | > 1024px | Default |\n| Tablet | 768–1024px | iPad, landscape phones |\n| Mobile | < 768px | Smartphones |

\n

Set padding, font size, and column behavior per breakpoint. Stack columns on mobile. Never use fixed pixel widths — use percentages.

\n

Troubleshooting Quick Reference

\n

| Issue | Fix |\n|-------|-----|\n| Styles not loading | Elementor > Tools > Regenerate CSS |\n| Editor not loading | Increase PHP memory_limit to 256M, disable other page builders |\n| Mobile layout broken | Check responsive settings per widget, not just section |\n| Slow page speed | Disable Google Fonts, reduce animations, limit background images |

\n

Template Kit Import (57 Premium Kits)

\n

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.

\n"}