How to Use Elementor Templates: A 101 Intro

It’s no marvel then, that Elementor has turn out to be the go-to web page builder available on the market. It not solely simplifies content material creation; the plugin additionally boasts some compelling extras. These options make for a extra nice and environment friendly consumer expertise.

Find Elementor templates and kits on Envato Elements.Find Elementor templates and kits on Envato Elements.Find Elementor templates and kits on Envato Elements.
Discover Elementor templates and kits on Envato Components.

Use Elementor Templates?

Among the many greatest bonuses is the inclusion of Elementor Templates. These are premade web page templates that you may import into your web site. From there, you may edit them to match your wants. Change textual content, colours, photos–even take away parts you don’t want. Nearly each facet might be tweaked.

Questioning methods to use Elementor templates? Immediately, we’ll present you how one can begin utilizing Elementor Templates in your WordPress web site. You will see how simple is the Elementor template edit course of. Let’s start!


Even the most effective WordPress web page builders require some effort to get issues good. Making a professional-looking format with engaging design parts is feasible–nevertheless it takes time.

Elementor templates deal with all of the time-consuming give you the results you want. With only a few clicks, you’ve every part you should create a wonderful webpage.

Elementor templates are available in a wide range of kinds and a few even embody built-in performance. Simply word that some might require the Elementor Professional plugin, versus the free model.

What’s extra, Elementor template “kits” have additionally come onto the scene not too long ago. Kits are a group of similarly-styled templates, all meant to go collectively throughout a web site. You will solely must work on the Elementor template edit. This implies a complete web site might be constructed quicker and simpler.

You too can get your challenge off to a operating begin, as free Elementor templates come bundled with the plugin (they’re obtainable with out the plugin too). As well as, there are a variety of free Elementor templates obtainable elsewhere on the internet.

Discover Elementor Templates on Envato Components 

When you learn to use Elementor Templates, get extra sources to your weEnvato Components offers you entry to an amazing collection of premium Elementor Template Kits. It’s simple to begin studying methods to use Elementor! Discover your favourite templates, obtain them and import them with the assistance of the free Template Kit – Import plugin.

Or, set up the free Envato Elements WordPress plugin to browse and import templates with out ever having to depart WordPress.

Envato Elements WordPress PluginEnvato Elements WordPress PluginEnvato Elements WordPress Plugin

With both technique, you’ll be capable to begin constructing your superb web site very quickly in any respect.

1. Set up and Activate Elementor

Elementor templates sound fairly superb, proper? The one technical requirement to get began is to put in and activate the free model of the Elementor web page builder plugin. As well as, you’ll want a free private account with Elementor–which we’ll get to later.

However first, let’s set up the plugin:

Set up and Activate Elementor Web page Builder

Studying methods to use Elementor is less complicated than you assume. Inside WordPress, go to Plugins > Add New.

Within the search bar, kind in Elementor Web page Builder. Click on the Set up Now button.

WordPress Add Plugins Screen - Elementor Page BuilderWordPress Add Plugins Screen - Elementor Page BuilderWordPress Add Plugins Screen - Elementor Page Builder
Studying methods to use Elementor is less complicated than you assume.

As soon as the plugin has been put in, click on on Activate.

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

2. Add an Elementor Template to Your Web page

For this step, you’ll want to decide on or create a WordPress web page the place you’d like so as to add an Elementor template. In our instance, we’ll create a brand new web page known as “About Us”.

Discover Your Web page

Navigate to your web page throughout the WordPress Dashboard by visiting Pages > All Pages. Subsequent, click on on the web page you need to edit.

Edit with Elementor

Contained in the editor, click on on the Edit with Elementor button on the higher left of the display screen to launch the web page builder.

Edit with Elementor buttonEdit with Elementor buttonEdit with Elementor button

tip

If you happen to’re utilizing the WordPress Basic Editor, the Edit with Elementor button will seem just under the web page title.

Enter the Elementor Template Library

As soon as contained in the Elementor web page builder, you’ll discover that there are a variety of settings. However for our functions, we’ll focus solely on the field in the course of the display screen.

The field, surrounded with a dashed border, incorporates two icons: a pink plus signal and a grey folder. Hover your cursor over the grey folder icon and also you’ll see a tooltip: Add Template.

Elementor Add Template ButtonElementor Add Template ButtonElementor Add Template Button

Click on on the icon to enter the Elementor Template Library.

Elementor Template LibraryElementor Template LibraryElementor Template Library

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

Import an Elementor Template From the Library

There are a variety of free Elementor templates to select from. As well as, customers of the Professional model of Elementor even have entry to a wide range of unique templates as nicely. And don’t neglect you may try the newest providing of Elementor Template Kits on Envato Elements.

Right here, I’ll present you methods to import a free Elementor templates straight from their library, in addition to methods to import a downloaded template .ZIP file.

The Elementor Template Library has a variety of decisions, so let’s slender it down a bit. By trying to find about, we’ll see simply the Elementor templates that apply to our web page.

Elementor Template Library Search ResultsElementor Template Library Search ResultsElementor Template Library Search Results
You may select free Elementor templates or go for premium.

Scrolling by way of the outcomes, we discover the right free Elementor templates for our wants. Clicking on it offers a more in-depth look.

Elementor Template Preview ScreenElementor Template Preview ScreenElementor Template Preview Screen

This appears to be an amazing match! To make use of it, click on on the inexperienced Insert button on the higher proper of the display screen.

Create a Free Elementor Account

At this level, you’ll be requested to join a free private account with Elementor. Observe their signup course of and, when you’ve confirmed your account, you may join it to your web site.

Connecting your new Elementor account to your web site will end the import course of. Now, your Elementor template shall be displayed in your web page.

Add an Elementor Template .ZIP File

Alternatively, when you have downloaded a template from Envato Components, importing requires a number of additional steps.

First, you’ll need to set up and activate the free Template Package – Import plugin from Envato. Inside WordPress, go to Plugins > Add New.

Within the search bar, kind in Template Package – Import. Click on the Set up Now button.

WordPress Add Plugins Screen - Template Kit EditorWordPress Add Plugins Screen - Template Kit EditorWordPress Add Plugins Screen - Template Kit Editor

As soon as the plugin has been put in, click on on Activate.

Subsequent, you’ll must add your template to your web site through the Template Package – Import plugin.

Navigate over to Instruments > Template Package inside WordPress. Click on on the Add Template Package ZIP File space of the display screen.

Envato Installed Template Kits ScreenEnvato Installed Template Kits ScreenEnvato Installed Template Kits Screen

Discover the Elementor template package ZIP file in your gadget, then add it to your web site.

As soon as your Elementor template package has been efficiently put in, you’ll see an inventory of latest templates which are prepared to make use of.

Envato Template Kit After InstallationEnvato Template Kit After InstallationEnvato Template Kit After Installation

Along with your new Elementor template package in place, now you can begin including templates to your web page!

Go to the web page you want to edit and comply with the identical course of we talked about beforehand for enhancing with Elementor.

You’ll discover that the Elementor edit display screen has modified barely. Now, the Envato – Template Package Import plugin has added a inexperienced leaf icon. Hover your cursor over the icon and also you’ll see a tooltip: Envato Components.

Editor Envato Elements ButtonEditor Envato Elements ButtonEditor Envato Elements Button

Click on on the icon to open up your put in Template Kits.

Inside, you’ll see an inventory of the Elementor template kits you’ve put in in your web site. Click on on the package you need to use.

Installed Template Kits ScreenInstalled Template Kits ScreenInstalled Template Kits Screen

Lastly, insert the specified template into your web page.

Template Kit Listing ScreenTemplate Kit Listing ScreenTemplate Kit Listing Screen

Now, you’ve a wonderful new web page that’s prepared so that you can customise!

An Elementor Template Kit Imported into a PageAn Elementor Template Kit Imported into a PageAn Elementor Template Kit Imported into a Page

3. Customise the Elementor Template

It’s time to make this template your personal. The beauty of Elementor templates is that each component might be custom-made to your liking.

To get began, click on on a component you’d prefer to edit. From there, you may edit content material straight throughout the component itself. Or, to make model and format modifications, use the toolbar on the left facet of the display screen.

Change the Structure

We’re utilizing the default Twenty Twenty WordPress theme. And, when importing our template, I seen that the content material width isn’t what we’d prefer it to be. Fortunately, that is simple to vary with Elementor.

By clicking on the dotted Edit Part icon on the high of the template, we are able to allow a full-width format. Word that this course of will have to be repeated for every imported part of the web page.

Editing a Layout in ElementorEditing a Layout in ElementorEditing a Layout in Elementor

Modifying Colours

The pink background overlay within the part isn’t the most effective match for our theme. But it surely solely takes a number of clicks to vary that into one thing extra palatable.

Editing Colors in ElementorEditing Colors in ElementorEditing Colors in Elementor

Customise All of the Issues

There’s actually no restrict as to what you may customise with regards to Elementor templates. Clicking on a component permits you to edit the content material, look and format. You too can drag new parts onto your web page as nicely.

Editing Content in ElementorEditing Content in ElementorEditing Content in Elementor

Save Your Adjustments

When you’re proud of the outcomes of your work, click on on the inexperienced Replace button on the decrease left portion of the display screen. This may save your custom-built web page.

Suggestions for Utilizing Elementor Templates

1. Templates Can Be Tweaked to Match Your Web site

When trying to find Elementor templates, it’s possible you’ll be discouraged by a particular design component and even the colour scheme. To not fear! This stuff might be simply modified throughout the Elementor web page builder to raised match your web site.

2. Have to Design an Whole Web site? Use Template Kits

Consistency is among the keys to an amazing design. Elementor template kits provide an identical set of templates – good to be used all through your web site. Use them to immediately add a constant appear and feel. Try the newest providing of Elementor Template Kits on Envato Elements and obtain as many as you want together with your subscription.

Envato Elements Template KitsEnvato Elements Template KitsEnvato Elements Template Kits
Envato Components Template Kits

3. Enhance Your Present Web site

Elementor templates aren’t only for new web site tasks. The truth is, they will also be an efficient technique of spicing up present websites, too. Use templates so as to add compelling appears and options the place wanted. It’s a good way to convey new life to an older web site.

4. Use Elementor Blocks for Smaller Jobs

Generally, a full-page template could also be greater than you want. Elementor blocks are an amazing different. They’re smaller, particular person sections that can be utilized to boost your web page. And, they’re constructed proper into the Elementor Template Library.

5. Combine and Match Blocks to Construct Your Personal Customized Pages

So as to add a novel contact to your pages, strive using a number of Elementor blocks. They’ll make for nice web page sections, permitting you to create a pure separation of content material. You may combine, match and customise every one to suit your wants.

Create Customized Pages with Minimal Effort

The subsequent time you’re seeking to create a highly-custom web page to your WordPress web site, give Elementor templates a strive. They provide a simple manner add each magnificence and performance with only a few clicks.

And, with the power to edit each component, you may tweak an Elementor template to match your model. The tip end result shall be a web page that appears prefer it was {custom} constructed only for you.

Extra Elementor Tutorials and Sources

Are you simply studying methods to use Elementor? We now have a rising assortment of Elementor sources at Tuts+ and on the Envato blog; have a look!


Editorial Word: This submit has been up to date with contributions from Janila Castañeda. Janila is a workers author with Envato Tuts+.

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0