Lesson 19: Templates, Saving, and Reusing Designs

Objectives

• Use Elementor's template library
• Save your own sections and pages as templates
• Import and export templates
• Work efficiently by reusing designs

What Are Templates?

Templates are pre-designed layouts you can insert into your pages. They save you from building everything from scratch.

Types of Templates:

Using the Elementor Template Library

Accessing the Library

1. Open a page in Elementor
2. Click the folder icon in the widget panel, or
3. Press Ctrl + Shift + L, or
4. Click the folder icon that appears in the middle of the canvas when adding a new section

Browsing Templates

The library has tabs:

• Pages — complete page designs
• Blocks (Sections) — individual section designs (hero, FAQ, features, etc.)
• My Templates — your saved templates

Inserting a Template

1. Browse and find a template you like
2. Click "Insert"
3. The template is added to your page
4. You can then customize all the content, colors, fonts, and images

Free vs Pro Templates

• Templates marked with a diamond icon require Elementor Pro
• Free templates are available without any upgrade
• Even free templates provide good starting points

Saving Your Own Templates

Saving a Section as Template

This is extremely useful — save a section you've designed well and reuse it across pages.

1. Right-click the section handle (blue tab at the top of the section)
2. Click "Save as Template"
3. Give it a descriptive name (e.g., "Hero Section - Dark Background" or "3-Column Services")
4. Click "Save"

Saving an Entire Page as Template

1. Click the hamburger menu (☰) → "Save as Template" (or the up arrow next to Update/Publish)
2. Give it a name (e.g., "Business Homepage Template")
3. Click "Save"

Using Your Saved Templates

1. Open the template library (Ctrl + Shift + L)
2. Go to the "My Templates" tab
3. Find your template
4. Click "Insert"
5. Customize the content for the new page

Organizing Templates

Naming Convention

Use a clear naming system:

[Type] - [Description] - [Variant]

Examples:
Hero - Image Background - Centered
Services - 3 Column Icons - Light BG
CTA - Full Width - Gradient
Testimonials - Slider - Dark
Footer - 4 Column - With Map

Building a Template Library

Over time, build a collection of reusable sections:

• Hero sections — 2-3 variations (image bg, solid color, video bg)
• Services/Features — 3-column icons, 4-column icons, with images
• About sections — image left, image right
• Testimonials — carousel, grid, single featured
• CTA sections — simple, with background image, with form
• FAQ — accordion style
• Contact — form + info layout

This becomes your personal design kit — building new pages takes minutes instead of hours.

Importing and Exporting Templates

Exporting Templates

Share templates between WordPress sites:

1. Go to Elementor → My Templates in wp-admin (or Templates → Saved Templates)
2. Find the template you want to export
3. Click "Export Template"
4. A .json file is downloaded

Importing Templates

1. Go to Elementor → My Templates
2. Click "Import Templates" at the top
3. Select the .json file
4. Click "Import Now"
5. The template appears in your library

Use Cases for Import/Export:

• Move designs between sites — develop locally, export to client's site
• Share with team members — distribute standardized designs
• Backup your designs — export all templates for safekeeping
• Use third-party templates — many sites offer free Elementor templates as JSON files

Template Kits and Starter Sites

Third-Party Template Sources

Several services provide free and premium Elementor template kits:

Using Starter Templates Plugin (with Astra theme)

1. Install the "Starter Templates" plugin
2. Choose Elementor as your page builder
3. Browse complete website templates
4. Click "Import Complete Site" or import individual pages
5. Customize the imported content

Warning: Importing a complete site will replace your existing content. Do this on a fresh site or make a backup first.

Template Workflow

Efficient Page Building Process:

1. Check your template library first — do you have a section that fits?
2. Check the Elementor library — is there a free template close to what you need?
3. Insert a template as a starting point
4. Customize the content (text, images, colors)
5. Adjust to match your global styles
6. Save new designs as templates for future use

When Building Multiple Similar Pages:

1. Build the first page completely
2. Save it as a page template
3. For similar pages, insert the template and swap out the content
4. Much faster than building from scratch each time

Example: Building 5 service pages (Web Design, SEO, Marketing, Branding, Support):

1. Design the first service page layout
2. Save it as "Service Page Template"
3. Create each new page → insert template → change the service-specific content

Exercises

1. Browse the template library: Press Ctrl + Shift + L and browse through available pages and blocks. Try inserting a free block template onto a test page.

2. Save a section template: Take your best section from the homepage and save it as a template. Give it a descriptive name.

3. Save a page template: Save your About page (or Homepage) as a complete page template.

4. Reuse a template: Create a new page, insert your saved section template, and modify the content.

5. Export and re-import: Export one of your templates as a JSON file. Delete it from your library. Re-import it to confirm the process works.

6. Build a template collection: Save at least 3 different section templates (hero, services, CTA) that you can mix and match for future pages.

Key Takeaways

• Templates save enormous time — don't build from scratch every time
• Save sections with right-click → Save as Template
• Save pages from the hamburger menu → Save as Template
• Use a clear naming convention for your templates
• Export/Import templates as JSON files to move between sites
• Build a personal template library over time — this is your design toolkit
• Check existing templates before building something new
• Third-party template kits can jumpstart new projects

Next Lesson: Lesson 20 - Responsive Design