Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Elementor
Webdesign

How to Use Elementor Templates: A 101 Intro

by
Difficulty:BeginnerLength:MediumLanguages:

There’s a reason why so many people have turned to WordPress page builder plugins: they can make building even the most complex page layouts and features a relative breeze.

It’s no wonder then, that Elementor has become the go-to page builder on the market. It not only simplifies content creation; the plugin also boasts some compelling extras. These features make for a more pleasant and efficient user experience.

Among the biggest bonuses is the inclusion of Elementor Templates; premade page templates that you can import into your website. From there, you can edit them to match your needs. Change text, colors, images–even remove elements you don’t need. Virtually every aspect can be tweaked.

Today, we’ll show you how you can start using Elementor Templates on your WordPress website. Let’s begin!

What Are the Benefits of Elementor Templates?

Even the best WordPress page builders require some effort to get things just right. Creating a professional-looking layout with attractive design elements is possible–but it takes time.

Elementor templates take care of all the time-consuming work for you. With just a few clicks, you have everything you need to create a beautiful webpage.

Templates come in a variety of styles and some even include built-in functionality. Just note that some may require the Elementor Pro plugin, as opposed to the free version.

What’s more, Elementor template “kits” have also come onto the scene recently. Kits are a collection of similarly-styled templates, all meant to go together across a website. This means an entire site can be built faster and easier.

You can also get your project off to a running start, as free Elementor templates come bundled with the plugin (they’re available without the plugin too). In addition, there are a number of free and commercial templates available elsewhere on the web.

Find Elementor Templates on Envato Elements 

Envato Elements gives you access to a great selection of premium Elementor Template Kits. It’s easy to get started! Find your favorite templates, download them and import them with the help of the free Template Kit - Import plugin.

Or, install the free Envato Elements WordPress plugin to browse and import templates without ever having to leave WordPress.

With either method, you’ll be able to start building your amazing website in no time at all.

Envato Elements WordPress Plugin

1. Install and Activate Elementor

Elementor templates sound pretty amazing, right? The only technical requirement to get started is to install and activate the free version of the Elementor page builder plugin. In addition, you’ll need a free personal account with Elementor–which we’ll get to later.

But first, let’s install the plugin:

Install and Activate Elementor Page Builder

Inside WordPress, visit Plugins > Add New.

In the search bar, type in Elementor Page Builder. Click the Install Now button.

WordPress Add Plugins Screen - Elementor Page Builder

Once the plugin has been installed, click on Activate.

You’re all set! Now, it’s time to put Elementor templates to work.

2. Add an Elementor Template to Your Page

For this step, you’ll need to choose or create a WordPress page where you’d like to add an Elementor template. In our example, we’ll create a new page called “About Us”.

Find Your Page

Navigate to your page within the WordPress Dashboard by visiting Pages > All Pages. Next, click on the page you want to edit.

Edit with Elementor

Inside the editor, click on the Edit with Elementor button on the upper left of the screen to launch the page builder.

Edit with Elementor button

Hint: If you’re using the WordPress Classic Editor, the Edit with Elementor button will appear just below the page title.

Enter the Elementor Template Library

Once inside the Elementor page builder, you’ll notice that there are a lot of settings. But for our purposes, we’ll focus solely on the box in the middle of the screen.

The box, surrounded with a dashed border, contains two icons: a pink plus sign and a gray folder. Hover your cursor over the gray folder icon and you’ll see a tooltip: Add Template.

Elementor Add Template Button

Click on the icon to enter the Elementor Template Library.

Elementor Template Library

Now, we’ve opened up a world of design possibilities.

Import an Elementor Template From the Library

There are a number of free Elementor templates to choose from. In addition, users of the Pro version of Elementor also have access to a variety of exclusive templates as well. And don’t forget you can check out the latest offering of Elementor Template Kits on Envato Elements.

Here, I’ll show you how to import a free Elementor template directly from their library, as well as how to import a downloaded template .ZIP file.

The Elementor Template Library has a lot of choices, so let’s narrow it down a bit. By searching for about, we’ll see just the Elementor templates that apply to our page.

Elementor Template Library Search Results

Scrolling through the results, we find the perfect free Elementor template for our needs. Clicking on it provides a closer look.

Elementor Template Preview Screen

This looks to be a great fit! To use it, click on the green Insert button on the upper right of the screen.

Create a Free Elementor Account

At this point, you’ll be asked to sign up for a free personal account with Elementor. Follow their signup process and, once you’ve confirmed your account, you can connect it to your website.

Connecting your new Elementor account to your website will finish the import process. Now, your Elementor template will be displayed on your page.

Upload an Elementor Template .ZIP File

Alternatively, if you have downloaded a template from Envato Elements, importing requires a few extra steps.

First, you’ll want to install and activate the free Template Kit - Import plugin from Envato. Inside WordPress, visit Plugins > Add New.

In the search bar, type in Template Kit - Import. Click the Install Now button.

WordPress Add Plugins Screen - Template Kit Editor

Once the plugin has been installed, click on Activate.

Next, you’ll need to upload your template to your website via the Template Kit - Import plugin.

Navigate over to Tools > Template Kit inside WordPress. Click on the Upload Template Kit ZIP File area of the screen.

Envato Installed Template Kits Screen

Find the Elementor template kit ZIP file on your device, then upload it to your website.

Once your Elementor template kit has been successfully installed, you’ll see a listing of new templates that are ready to use.

Envato Template Kit After Installation

With your new Elementor template kit in place, you can now start adding templates to your page!

Visit the page you wish to edit and follow the same process we mentioned previously for editing with Elementor.

You’ll notice that the Elementor edit screen has changed slightly. Now, the Envato - Template Kit Import plugin has added a green leaf icon. Hover your cursor over the icon and you’ll see a tooltip: Envato Elements.

Editor Envato Elements Button

Click on the icon to open up your installed Template Kits.

Inside, you’ll see a listing of the Elementor template kits you have installed on your website. Click on the kit you want to use.

Installed Template Kits Screen

Finally, insert the desired template into your page.

Template Kit Listing Screen

Now, you have a beautiful new page that’s ready for you to customize!

An Elementor Template Kit Imported into a Page

3. Customize the Elementor Template

It’s time to make this template your own. The great thing about Elementor templates is that every element can be customized to your liking.

To get started, click on an element you’d like to edit. From there, you can edit content directly within the element itself. Or, to make style and layout changes, use the toolbar on the left side of the screen.

Change the Layout

We’re using the default Twenty Twenty WordPress theme. And, when importing our template, I noticed that the content width isn’t what we’d like it to be. Luckily, this is easy to change with Elementor.

By clicking on the dotted Edit Section icon at the top of the template, we can enable a full-width layout. Note that this process will need to be repeated for each imported section of the page.

Editing a Layout in Elementor

Editing Colors

The pink background overlay in the section isn’t the best fit for our theme. But it only takes a few clicks to change that into something more palatable.

Editing Colors in Elementor

Customize All the Things

There’s really no limit as to what you can customize when it comes to Elementor templates. Clicking on an element allows you to edit the content, look and layout. You can also drag new elements onto your page as well.

Editing Content in Elementor

Save Your Changes

Once you’re happy with the results of your work, click on the green Update button on the lower left portion of the screen. This will save your custom-built page.

Tips for Using Elementor Templates

1. Templates Can Be Tweaked to Match Your Website

When searching for Elementor templates, you may be discouraged by a specific design element or even the color scheme. Not to worry! These items can be easily changed within the Elementor page builder to better match your website.

2. Need to Design an Entire Website? Use Template Kits

Consistency is one of the keys to a great design. Elementor template kits offer a matching set of templates – perfect for use throughout your website. Use them to instantly add a consistent look and feel. Check out the latest offering of Elementor Template Kits on Envato Elements and download as many as you like with your subscription.

Envato Elements Template Kits
Envato Elements Template Kits

3. Improve Your Existing Website

Elementor templates aren’t just for new website projects. In fact, they can also be an effective means of spicing up existing sites, too. Use templates to add compelling looks and features where needed. It’s a great way to bring new life to an older website.

4. Use Elementor Blocks for Smaller Jobs

Sometimes, a full-page template may be more than you need. Elementor blocks are a great alternative. They are smaller, individual sections that can be used to spice up your page. And, they’re built right into the Elementor Template Library.

5. Mix and Match Blocks to Build Your Own Custom Pages

To add a unique touch to your pages, try utilizing multiple Elementor blocks. They can make for great page sections, allowing you to create a natural separation of content. You can mix, match and customize each one to fit your needs.

Create Custom Pages with Minimal Effort

The next time you’re looking to create a highly-custom page for your WordPress website, give Elementor templates a try. They offer an easy way add both beauty and functionality with just a few clicks.

And, with the ability to edit each and every element, you can tweak an Elementor template to match your style. The end result will be a page that looks like it was custom built just for you.

More Elementor Tutorials and Resources

We have a growing collection of Elementor resources at Tuts+ and on the Envato blog; take a look!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.