ūüćĀ  AUTUMN SALE Get 20% OFF everything using the AUTUMN2021 coupon code at checkout! Buy Now →

An Introduction To Elementor: What Is It & What Can It Do?

Written by Ben on in Tutorials 0 comments

You’ve probably heard of Elementor before unless, of course, you’ve been living under a rock! Today we’ll be taking a quick run through what Elementor is and what it can do.

So what is Elementor?

Elementor Website

You may have heard the term page builder when Elementor gets mentioned, and that’s 100% right. That’s exactly what it is, a plugin to help you build pages for your WordPress site, all via a drag and drop interface and all from the frontend.

Originating back in 2016, Elementor has been around for a few years now, with the sole aim of making web page creation easy for non-design folk.

The plugin has come on leaps and bounds over the last five years and boasts a vast amount of users, and spawning a whole heap of extensions/add-ons specifically for it.


Is Elementor Free or Premium?

Yes, it’s free, and yes, it’s premium; there are two different versions of Elementor. The free version is available on WordPress.org, and the premium version is available on the Elementor website.

The free version is perfectly acceptable, and you can do an awful lot with it. To get the most out of Elementor, you’ll need to go premium.¬†

If you’d like to view the differences between the pro version of Elementor and the free version, please look at the comparison here.


How Much Does An Elementor Premium License Cost?

Elementor Pricing

Elementor Pricing

Pricing for Elementor is available in three different versions:

  • Personal: $49.00 for a one site license.
  • Plus: $99.00 for three site licenses.
  • Expert: $199.00 for a thousand licenses.

Whether you have one website or multiple, you have options in pricing, and as they say,¬†it’s good to have options.¬†


The Elementor Interface

Sections in Elementor

As I mentioned earlier, the whole point of Elementor is to make things easier for creators. The interface achieves this by sorting everything into elements.

Let’s break it down so you can see how it all works.


Elementor The Basic Elements

Basic section in Elementor

You’ll notice from the above screenshot that all the elements are marked for your reference. Once you’ve discovered an element you’d like to use, you can drag and drop it to the editor screen. See below for an example:

Adding an element in Elementor

Each element has settings; for example, adding a heading will throw up some more options to make changes. See below:

options for elements

Elementor has more settings on offer using the tabbed approach, Style, here; you can adjust the text color, choose a font, add text-shadow, and more.

The Advanced tab deals with margin, padding, CSS classes, motion effects, background, border, positioning, and a whole host of other settings.

Remember this is just one element in the Basics section; there are ten others, all with unique options available.


Pro Elements In Elementor

Pro Elements in Elementor

While you can make a decent looking page with Elementor, the pro elements take things up a notch. The screenshot above is a little cut off in truth; 25 different pro elements are available for you to use.

Here are some of our top picks:

  • Posts, choose a layout for blog posts and change the layout, single column, two columns, and more. Include, exclude posts/pages by various criteria such as tag, category, order by date, add pagination. All topped off with the ability to change colors, fonts, add box-shadow, animate the element’s entrance, and more.
  • Portfolio, insert works you’ve completed, link to specific pages/posts, add a filter bar for users, adjust colors, and the number of portfolio posts to display.
  • Forms, create forms for visitors to get in touch with you. Build multi-step forms and hook them up to an email newsletter platform, or redirect them to a page of your choice; there’s plenty to get stuck into, along with styling options, motion effects, and everything you need to create stunning forms.
  • Table of contents, help readers by adding a TOC, make it sticky to scroll down the page, and change the look and feel.
  • Add a Countdown timer to a post/page, incredibly useful if you’re launching a new product.
  • Call to action, using this element, you can create stunning CTA’s to highlight other pages/posts on your site or entice users to purchase a product on your WooCommerce store.

We’ve only covered 6 out of the 25 elements available; by now, you should have an idea that the pro version of Elementor is worth a look.


General Elements

General Elementor Settings

General elements are available in the free version of Elementor, and here you can choose from a varied mix.

There are 20 elements on offer here, from:

Image box, Icon Box, Star rating, Image carousel, Basic Gallery, Icon list, Counter, Progress Bar, Testimonial, Tabs, Accordion, Toggle, Social Icons, Alert, Add raw HTML, Menu Anchor, add a Sidebar and lastly Read More.

Each option has settings for more granular control over your aesthetic needs.


Elementor WooCommerce Elements

WooCommerce Elements in Elementor

Available in the pro version only, if you’re a WooCommerce store owner, you’ll love this. With 20 options to choose from, you can insert various elements in product pages, posts, or posts themselves.

Plenty to choose from here, such as:

  • Archive products, Archive Description
  • Products singular (or more if needs be)
  • WooCommerce Breadcrumbs
  • Custom Add To Cart
  • WooCommerce Pages
  • Product Categories
  • Menu Cart
  • Product Title, Product Images, Product Price
  • Add To Card
  • Product Rating, Product Stock, Product Meta
  • Short Description
  • Product Data Tabs, Additional Information
  • Related Products
  • Upsells

All of the above can help insert specific information into a post or page; if you plump for Elementor Pro, you can create your very own styled WooCommerce pages.


WordPress Elements In Elementor

WordPress Elements In Elementor

While the above should give you a taste of the pro version and the free version Elementor provides, there are a few more options you can choose from.

There are 18 standard options available here:

  • Pages, Calendar,¬†Archives
  • Audio,¬†Image,¬†Gallery,¬†Video
  • Meta,¬†Search, Text
  • Categories,¬†Recent Posts
  • Recent Comments
  • RSS,¬†Tag Cloud
  • Navigation,¬†Menu
  • Custom HTML

The only drawback to these elements is styling; as they’re not elements from Elementor, your options are limited.

It’s also worth noting that these elements can be theme/plugin dependent. For example, if you have a contact form plugin installed unless the plugin has it’s own Elementor options available, you won’t be able to change an awful lot in terms of look and feel.

These options would be down to the plugin itself offers, and they’re associated settings in the back end/options page.

All is not lost, if you’re comfortable with CSS, you can style these elements by hand by giving them a unique identifier, and you’ll need the pro license of Elementor to achieve this.


What Else Does Elementor Offer?

By now, you’ll realize that Elementor offers a stack of options; it’s not over though there’s more on offer. Next up, we’ll touch on templates.

Elementor templates

Clicking on the folder icon in the editor opens up a wealth of templates predesigned for your use, also know as the Elementor library:

Elementor Library

Plenty to choose from in the library; there are Blocks, Pages, and My Templates.

Blocks offer an array of insertable pre-made content, for example, subscription forms, calls to action, hero sections, headers, footers, and more.

The Pages tab throws up a collection of layouts to insert into a page of your choice.

If you’re happy with your page design and would like to save it as a template you can, the¬†My Templates¬†tab will house all of your new creations for easy reference.

There’s a lot more to Elementor than just being a page builder. The pro version offers more bang for your buck, so to speak.

Templates, while available in the free version, the pro versions allow you to set templates for archive pages, the 404 page, single posts, the header and footer, and search results page; if you have WooCommerce installed, there are options for that as well.

Using display conditions, you can show specific templates, pretty much anywhere on your site, as long as they fit, of course!

Elementor Pro also offers a handy popup builder, so if you’re looking to grab a visitor’s attention, then what better way than with a popup. Add an email subscription box, or advertise a product deal on your website; the choice is yours.


Why Are We Talking About Elementor?

Well, here at WPZOOM, we have some exciting news; we won’t go into too much detail right now, but as they say, watch this space.

We think you’re going to love what we have to offer.

Related Posts

Subscribe to the WPZOOM newsletter.

Join 50,000 people. Get our latest news & releases delivered to your inbox.

Leave a Reply

*

*

Join for free 10.000+ users who build awesome sites using Inspiro theme!



Also available on wordpress.org