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
Later this week Envato Elements will be launching a brand new 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.
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.
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.
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.
Click on the icon to enter the 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.
Scrolling through the results, we find the perfect free Elementor template for our needs. Clicking on it provides a closer look.
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.
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.
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.
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.
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.
Finally, insert the desired template into your page.
Now, you have a beautiful new page that’s ready for you to customize!
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 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.
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.
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 (to be launched this Thursday) and download as many as you like with your subscription.
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
WordPressHow to Build a WordPress Website With Elementor
WordPressHow to Customize Your WordPress Website With Elementor
WordPressHow to Create Awesome Popups in WordPress with Elementor Pro
WordPressVisual Composer Website Builder vs. Elementor; From a Developer’s Perspective
No comments:
Post a Comment