Using Elementor’s Theme Builder

Learning Objectives

• Understand what Elementor’s Theme Builder is and how it works.
• Create and customize global headers and footers.
• Build dynamic templates for blog posts, archives, and pages.
• Use display conditions to control where templates are applied.
• Use dynamic content (featured image, post title, author box, etc.).

What Is Elementor’s Theme Builder?

Theme Builder replaces your theme’s default templates with fully customizable designs built in Elementor. You can visually design:

• Header
• Footer
• Single Post (blog post template)
• Single Page (default page layout)
• Archive pages (category, tag, author archives)
• Search Results page
• 404 Page

This gives you complete control over your site’s structure and presentation.

How to Access Theme Builder

1. In WordPress, go to Templates → Theme Builder.
2. You’ll see a dashboard showing all available template types.
3. Click Add New to start creating a new template.

Building a Header Template

Steps

1. Go to Templates → Theme Builder → Header.
2. Click Add New.
3. Choose a starter template or create from scratch.
4. Add a Container or Section with:
   • Logo widget
   • Nav Menu widget
   • Button widget (CTA)
5. Use Flexbox to align items horizontally.
6. Set responsive visibility for the mobile menu.
7. Click Publish.
8. Set display condition: Entire Site.

Tips

• Use a sticky header for better navigation.
• Hide desktop menu on mobile and show the hamburger menu instead.

Building a Footer Template

1. Go to Theme Builder → Footer.
2. Click Add New.
3. Create a 2–4 column layout.
4. Add elements such as:
   • Logo + short description
   • Footer menu
   • Contact details
   • Social icons
   • Legal links
5. Add a lower bar with copyright text.
6. Publish → Display Conditions → Entire Site.

Tips

• Use a darker background for contrast.
• Ensure columns collapse neatly on mobile.

Creating a Single Post Template

This controls how your blog posts are displayed sitewide.

Steps

1. Go to Theme Builder → Single Post.
2. Add a title using the Post Title widget.
3. Add the Featured Image widget.
4. Add Post Content widget—this displays the core text from the editor.
5. Add extras:
   • Author Box
   • Post Navigation
   • Related Posts
   • Comments
6. Publish → Display Conditions → All Posts.

Tips

• Use dynamic elements so content updates automatically for each post.
• Maintain wide spacing and readable typography.

Creating Archive Templates

These templates control the layout for categories, tags, and other listing pages.

Steps

1. Go to Theme Builder → Archive.
2. Design the layout using widgets like:
   • Archive Title
   • Archive Description
   • Posts widget (grid or list)
3. Publish → Display Conditions → All Archives or specific categories.

Building a Custom 404 Page Template

A custom 404 page helps guide lost visitors back to the right content.

Ideas for a Useful 404 Page

• Short message (“This page could not be found.”)
• Search bar
• Home button
• Links to popular pages or categories

Steps

1. Go to Theme Builder → Single → 404.
2. Create a simple, branded layout.
3. Publish → Display Conditions → 404 Page.

Using Dynamic Content

Dynamic content automatically fills in information based on the current page or post.

• Post Title
• Featured Image
• Author Name
• Date
• Post Excerpt
• Custom Fields (ACF)

This is essential when building templates for blogs or custom post types.

Setting Display Conditions

Display conditions determine where your template is applied.

Common Options

• Entire Site (full coverage)
• All Posts or All Pages
• Specific Categories
• Specific Pages
• Tags, authors, archives
• Exclude rules (e.g., exclude homepage)

Multiple conditions can be stacked to create flexible rules.

Recommended Workflow

1. Create your header and footer first.
2. Build dynamic templates for posts and archives.
3. Create reusable sections and page templates.
4. Apply display conditions to control layout across your site.
5. Test every template on desktop, tablet, and mobile.

Common Mistakes to Avoid

• Applying a template to the wrong part of the site.
• Overusing templates when a simple page is enough.
• Forgetting mobile layouts inside Theme Builder.
• Mixing inconsistent spacing and typography.
• Leaving out key elements like the “Post Content” widget.

Activity: Build a Single Post Template

1. Create a new Single Post Template in Theme Builder.
2. Add Post Title, Featured Image, Post Content, Author Box, and Comments.
3. Publish with condition: All Posts.
4. Visit a blog post to confirm the template is applied.

Deliverable: Submit screenshots of your Single Post Template layout and a live blog post using it.