A Section Template exists to let you reuse a self-contained layout block that you can drop into any page, in any order, without affecting the rest of the page.
Think of it as a content module, not a page.
1. What a Section Template Is
A Section Template is:
- A partial layout, not a full page
- Designed to be inserted into other pages
- Made of:
- One section or container
- Any number of widgets inside it
- Editable after insertion (unless global)
In plain terms:
“This is a thing I’ll want to use again.”
2. What a Section Template Is NOT
A Section Template is not:
- ❌ A page
- ❌ A theme template
- ❌ A site-wide layout
- ❌ A place for navigation or footers
- ❌ Something that controls page width globally
If you use it for those things, Elementor will fight you.
3. Why Section Templates Exist (The Real Reason)
Elementor introduced section templates so you could:
- Avoid rebuilding the same layout
- Maintain consistency across pages
- Work modularly instead of page-by-page
This is component-based design, just not called that.
4. The Correct Use Cases (This Is the Gold)
Best Uses for Section Templates
| Use Case | Why It Fits |
|---|---|
| Hero sections | Same structure, different text |
| Tutorial headers | Consistent intro layout |
| Feature grids | Repeatable visual pattern |
| Lesson objectives | Same format every lesson |
| Call-to-action blocks | Consistency + speed |
| Code example layouts | Repeated styling |
If you can say “I’ll need this again”, it should be a section template.
5. How Section Templates Fit Your “Blank Page” Strategy
Your plan:
Blank page + header/footer + drag-in objects
Section Templates ARE the objects.
Workflow:
- Page loads with header/footer only
- You insert:
- Tutorial Header (section template)
- Lesson Content (section template)
- CTA (section template)
- You reorder them visually
The page becomes an assembly, not a design task.
6. Containers vs Sections (Important Nuance)
Elementor now prefers Containers (Flexbox), but the idea is identical.
| Old Term | New Term |
|---|---|
| Section | Container |
| Inner Section | Nested Container |
You’ll still see “Section Template” in the UI, but:
- Build them using containers
- Think “component,” not “section”
7. Self-Containment Rule (Critical)
A good Section Template:
- Sets its own:
- Padding
- Background
- Width constraints
- Does not depend on:
- What comes before it
- What comes after it
Bad Pattern
“This needs spacing from the previous section.”
Good Pattern
“This looks correct no matter where it’s dropped.”
8. Global vs Normal Section Templates
Normal Section Template
- Unique per page
- Safe default
- Best for most content
Global Section Template
- Syncs everywhere
- Dangerous if misused
Use Global only when:
- Legal text
- Repeated warnings
- Membership notices
- Identical CTAs that must never drift
9. Real-World Analogy
Think of your site like a workshop:
- Theme = the building
- Header/Footer = permanent fixtures
- Pages = empty workbenches
- Section Templates = tools you grab as needed
You don’t bolt tools permanently to the bench.
10. One-Sentence Rule to Remember
If it’s reusable, self-contained, and belongs in the middle of a page — it’s a section template.
Additional Topics to Cover:
- Designing the first 5 must-have section templates
- Converting an existing page into modular templates
- When to use Global styles instead
Choosing the Right Page Layout to Work With Templates in Elementor
1. Why Page Layout Matters
In Elementor, the page layout determines the canvas:
- What shows before you insert templates
- How header, footer, and sidebars behave
- How templates stack and display visually
If you pick the wrong layout, your templates may:
- Appear too narrow or too wide
- Lose spacing control
- Conflict with header/footer
So, picking the right page layout is the first step.
2. Elementor Page Layout Options
When editing a page:
- Click the ⚙️ Settings (gear icon) in the bottom-left
- Look for Page Layout
You’ll see these options (names can vary slightly by theme):
| Layout | Description | When to Use |
|---|---|---|
| Default | Uses your theme’s header, footer, and content width | Best when you want header/footer + blank content for templates |
| Elementor Canvas | Completely blank — no header, footer, sidebars | Best for landing pages or micro-sites |
| Elementor Full Width | Keeps theme header/footer but removes sidebars; stretches content | Good for full-width template sections |
| Theme-specific layouts | Provided by the theme | Can conflict with Elementor’s modular templates |
3. Recommended Layout for Template Work
For your workflow (header + footer + drop-in templates):
✅ Use Default layout
Why:
- Keeps header and footer consistent via Theme Builder
- Leaves body content blank for section/container templates
- Ensures your templates respect the theme’s width and styles
❌ Avoid Canvas if you want your site-wide header/footer.
- Canvas is truly empty and ignores everything else.
- Only use Canvas if the page is a standalone landing page or microsite.
4. Tips for Template-Friendly Pages
Create a “Blank Content” Page Template in Elementor (Optional)
Some themes allow you to save a page template with no extra blocks.
Every new page can start with that blank template.
Set Content Width in Theme Customizer
Even with the Default layout, check your theme’s content width.
Your section templates may need adjustments if the content area is too narrow or wide.
Use Elementor’s Structure Settings
Click on Section > Layout for each template to ensure width =
Full WidthorBoxedbased on your design.This prevents templates from appearing “squished” inside the content area.
Stack Templates Vertically
Each template should handle its own padding/margin, so pages remain modular.
5. Mental Model
Pick the layout first, then insert templates, then adjust spacing.
✅ Summary:
Use Default layout if you want header/footer + modular templates.
Use Canvas only for standalone pages.
Ensure section templates handle their own spacing and width.
Avoid theme layouts that include sidebars if your templates are full-width.
If you want, I can draw a diagram showing how page layouts, headers/footers, and templates all fit together visually, which really helps when planning a modular site.