Creating Reusable Templates

Learning Objectives

• Understand what templates are and why they matter.
• Create reusable templates for pages, sections, and global elements.
• Use Elementor Theme Builder for dynamic templates.
• Apply templates across multiple pages to ensure consistent layout.
• Update templates globally and manage template revisions.

What Are Templates?

A template is a pre-designed layout you can save and reuse across pages. Templates help you:

• Maintain consistent styling and structure.
• Speed up page creation.
• Apply global updates in one place.
• Reduce design errors and inconsistencies.

Types of Templates

• Page Templates: Full-page designs (e.g., service page layout).
• Section Templates: Reusable blocks such as hero, testimonials, FAQs, or CTAs.
• Theme Templates: Dynamic templates for headers, footers, blog posts, archives, and single pages.

Templates in WordPress (Without Elementor)

• Use Patterns and Reusable Blocks in the Block Editor.
• Create, save, and reuse common layouts for consistent structure.
• Update reusable blocks once to change them sitewide.

Creating a Reusable Block

1. Select a block or group of blocks.
2. Click the three-dot menu.
3. Choose Add to Reusable Blocks.
4. Give it a clear name (e.g., “Homepage CTA”).
5. Insert it anywhere using the block selector.

Creating Templates in Elementor

Elementor provides a powerful template library where you can save any design for reuse.

Saving a Section as a Template

1. Hover over the section you want to save.
2. Click the Section Handle icon.
3. Select Save as Template.
4. Name it clearly (e.g., “Features Section v1”).
5. Access it later via Templates → Saved Templates.

Saving an Entire Page

1. In Elementor, click the Green Arrow next to the Update button.
2. Choose Save as Template.
3. Name your page template (e.g., “Service Page Template”).

Inserting a Saved Template

1. Edit a page with Elementor.
2. Click the Folder Icon.
3. Choose from:
   • Your Templates
   • Elementor Template Library
4. Click Insert.

Using Elementor Theme Builder

Theme Builder lets you design dynamic templates used across your site.

Available Template Types

• Header (global navigation)
• Footer (global site links)
• Single Post template
• Single Page template
• Archive template
• 404 page
• Search results

Creating a Theme Template

1. Go to Templates → Theme Builder.
2. Select the template type to create.
3. Design your layout using dynamic widgets (post title, featured image, meta, etc.).
4. Click Publish.
5. Set Display Conditions:
   • Entire Site
   • Specific categories
   • Specific pages
   • Tags, authors, archives

Updating a Template Globally

Modify the saved template, click Update, and every page using that template updates instantly. This is how you create global consistency.

Template Naming Conventions

Clear names make templates easier to manage, especially as your library grows.

• Use versioning: Homepage Hero v1.
• Group by type: Service – Pricing Section.
• Avoid vague names like “Template 1”.

Recommended Workflow

1. Design reusable sections first (hero, features, CTA, testimonials).
2. Create page templates for repeatable layouts (service pages, landing pages).
3. Set global theme templates for headers, footers, and blog pages.
4. Use template insertion to build full pages quickly.
5. Update templates centrally when branding or layout changes.

Common Mistakes to Avoid

• Rebuilding the same section from scratch for every page.
• Using inconsistent spacing or font sizes.
• Failing to organize templates with clear names.
• Editing templates directly on pages instead of updating the master template.

Activity: Create a Reusable Section Template

1. Build a reusable CTA section with a headline, text, and button.
2. Save it as a section template (Elementor) or reusable block (Gutenberg).
3. Insert it into at least three pages.
4. Update the CTA wording in the template and verify it updates everywhere.

Deliverable: Submit screenshots showing the CTA section appearing on multiple pages.