Elementor Theme Builder: The Easiest Way To Make a Custom WordPress Theme

I’ve expressed my love for Elementor in the past. Simply put, Elementor is the best way for non-programmers to build stunning WordPress websites in practically no time, without coding.

While I use and recommend the Pro version, I am constantly surprised by how much anyone can accomplish with the free version of Elementor. The site-building lesson I linked to at the top of this post works just fine with the free version; the only limitation is importing some premium designs.

While the Elementor standard version’s value is undeniable, there’s one excellent reason to upgrade to Elementor Pro (affiliate link); it’s the Theme Builder feature.

A Secret Weapon For Non-Programmers

I consider the Theme Builder to be Elementor Pro’s secret weapon. Theme Builder empowers anyone to build a custom WordPress theme without design experience or coding skills.

I call Theme Builder a “secret” because many Elementor users tend to jump in and start designing pages without a lot of planning or forethought. Honestly, that approach makes perfect sense, given how easy it is to get started with Elementor.

Unfortunately, that kind of ad hoc approach to using Elementor can lead to design and layout inconsistencies across your site. It’s also much harder to maintain and expand sites built in this manner.

With the Theme Builder, you start by creating the foundation of your site first — the theme. Making a custom theme is quite different from simply building a collection of nice-looking pages and calling them a website.

Elementor Theme Builder
The new Elementor Theme Builder interface makes it easy to create and manage custom theme templates.

Start by designing your site’s header and footer. You then control where those elements appear through the Theme Builder’s display conditions. It’s easy to set these elements to appear sitewide or on a specific page or group of pages.

Beyond headers and footers, you use the Theme Builder to create custom templates for everything on your site, including posts, pages, archives, and custom post types.

The templates you create then combine with your header and footer to make complete pages. Together these parts make up your custom theme.

New in Elementor 3.0: The Elementor Design System

Elementor Design System - Global Color Settings

While Theme Builder is an empowering tool in its own right, the new Elementor Design System takes it to the next level.

The Design System allows you to maintain visual consistency across your site by providing a centralized location to specify and manage the colors and fonts used throughout your site.

Once you’ve established your design preference, you’ll move on to the Site Settings. That’s where you assign your global colors and fonts to layout and design elements, including header levels, form elements, buttons, and Lightbox settings.

To make things even easier, you’ll find your Design System preferences available as presets throughout the Elementor interface. Anytime you create (or import) a new template, you can easily assign your preferred colors and fonts by picking from a list of your global settings.

Want to change your theme’s color scheme completely? No problem. Just update the colors you’ve defined in your design settings and watch those changes flow through to your entire website. No CSS coding is required.

Does Elementor Work With Gutenberg?

Gutenberg is the latest WordPress content editor. As Gutenberg continues to evolve, it’s moving into the territory traditionally occupied by plugins like Elementor. Many have wondered if Gutenberg will one day replace Elementor. It will probably catch up eventually, but for now, Elementor has a huge head start on Gutenberg. Elementor is simply more mature and feature-rich, at this point.

I don’t see Elementor vs. Gutenberg as an either/or question. Instead, I see Elementor and Gutenberg as two tools that work well together when used properly.

In my next post, I’ll get into more detail about using Gutenberg effectively with Elementor (and vice versa). For now, I’ll say that the key is to use Elementor Theme Builder to design your theme, then use Gutenberg to author most of your post and page content. Doing so will ensure that your WordPress website remains forward compatible.

If you’d like to learn more about the Elementor Theme Builder, I’ve just launched a new two-hour course that provides step-by-step instructions on creating a custom theme. The course is part of our all-access WordPress training and coaching program.

Course: Theme Building With Elementor Pro

  • Lesson 1: Intro To Theme Building With Elementor Pro
  • Lesson 2: Elementor Pro Basics
  • Lesson 3: Meet The Starter Site
  • Lesson 4: The Design System Settings
  • Lesson 5: Theme Builder Site Settings
  • Lesson 6: Intro To The Elementor Pro Theme Builder
  • Lesson 7: Create A Header
  • Lesson 8: Create A Footer
  • Lesson 9: Create A Page Template
  • Lesson 10: Create A Post Template
  • Lesson 11: Create An Archive Template
  • Lesson 12: Create The Home Page
  • Lesson 13: Change The Home Page Header
  • Lesson 14: Using Gutenberg & Elementor Pro Together