We’ve put all our knowledge and expertise of our team into building a whole different and never before seen WordPress page builder. Elementor is a true game changer in the page builder landscape, and it includes some unique features we’d like to explain about in this post.

These include a much stronger code base, faster drag and drop, complete control over the page layout, and incredible flexibility regarding widget styling. Get this – all these options are available on the free, open source and GPL Elementor plugin.

Play Video

There’s so much to share about this truly wondrous plugin. What started as an ambitious vision, is finally coming to life.

We set out to make Elementor better in the features we believed matter most for designers: control over the layout, control over styling, abundance of widgets, performance and code optimization, responsive design capabilities and compatibilities with other themes and plugins.

It’s time to share our excitement with you, and explain what sets Elementor apart from any other design solution or page builder for WordPress. It’s a 7 part post, so grab a seat, and read on as we go deeper into the features of Elementor.

01. A Taste of Designing With Elementor

Before we get started, we want to share with you some designs made by our founder and chief designer, Yoni Luxenberg. It was done with no coding, no photoshop work (outside images), no written CSS. Just Elementor. Yoni stated “I’ve been designing websites for 10 years, even though it’s my own product, I was surprised how much faster I could design with its live edit”. 

template-app
template-fashion
template-ny

02. Frontend Live Page Design

drag and drop

There have been various attempts in the past to create a WordPress page builder that works on the frontend – allowing you to edit page elements while viewing the live site. Elementor is the first to make it work. No lags, no confusing widgets, no need to switch to preview mode, no long learning curve. Every design element is changed on real time and live.

03. Control Over Layout

A great design starts with the structure of the page. Controlling the various page elements, the gaps between widgets, their width, height and positioning, can truly make or break a design. Elementor gives you a lot more control over these settings than ever possible on a live page builder for WordPress. Because it’s a live builder, it’s much easier to decide whether the different structure settings are exactly set to your liking.

Elementor layout

Section width

Elementor’s page sections make up the basic architecture of the page, and allow you to reach a level of design reserved until now for high budget custom designed websites.

Resize columns

Tinkering with the size of the columns has never been easier. Grab one of the corners and drag it until the column layout is just right.

resize columns
Elementor columns gap

Column gap

Change the gaps between columns in order to let your design breathe. By changing the gaps at once, you can visually decide which one has the best fit.

Content positioning

Position the column to the top, center or bottom of a section, or stretch it out to the whole section. You can also position the content within the column in the same manner.

Elementor strach columns
pading-margin

Unique padding & margin

Set padding & margin on sections, columns & widgets, using px, EM or %. Our dynamic size setting lets you get more control over the display on various screens, mobile or otherwise.

04. Control Over Styling

Page Builder for WordPress panel
Elementor lets you customize styling for every widget you place on the page, as well as for rows and columns. This styling control includes adjustments of fonts, colors, background and spacing. Want to change the opacity of a button? You can do that with a simple drag of a controler.
fonts

Typography

Play around with over 600 fonts. With Elementor you get a variety of typography controls that can be used for every widget and section of the page. Experiment with different letter spacing, line height, font weight, text transform (uppercase and lowerspace), italics and more.

colors

Color

Elementor lets you enjoy your customized palette and use it for every page you create. This makes it easy to maintain a consistent design and brand identity. You can also choose any color you can think of, by using our color picker or by pasting the hex code. For every color, you are able to manipulate the opacity and choose semi transparent colors.

bg

Backgrounds & borders

Backgrounds are one of the best ways to reach outstanding and interesting page designs. With Elementor, you can set image or color backgrounds for each section and column.

You can also set video backgrounds, and choose between your own self hosted videos, or embed youtube to run in the background.

Set borders and border radius, to properly frame your content.

pixel

Spacing

There are two different levels of spacing possibilities for widgets:

  1. Spacing between the widget and other widgets in the column. Control the margin and padding of every widget. Top, down, left and right can each be set individually.
  2.  Spacing between elements inside the widget. The counter widget, for example, lets you change the distance between the text and the counter number.
icon

Font awesome icons

Choose from over 400 unique icons and customize them to fit your style. Use Icons to make your page more visually appealing.

05. All The Widgets You Need

With Elementor you get the complete package of widgets, for free. No other page builder for WordPress has ever offered such a wide array of widgets for free. These widgets include expected widgets like text, heading and image boxes, and more advanced widgets like video backgrounds, toggle and accordion, google maps and many more.

06. Any Theme, Any Plugin, Any Page

Compatibility starts with well crafted code architecture. We’ve made Elementor as unobtrusive and optimized as possible, so it not only works fast but does not conflict with other themes and plugins.
themes

Themes

Elementor works on any theme, so you can use your favorite theme design, and customize the page design faster than ever using Elementor. The great advantage of using Elementor to build your pages, is that they stay with you even if you decide to buy a different theme, or if you create your own custom theme.
plugins

Plugins

Elementor has complete compatibility with plugins like Woocommerce, WPML and Yoast, so you not only avoid conflicts, but are able to drag and drop shortcodes from different plugins you’re already using.

posts

Post types

Don’t settle for designing only pages and posts. Elementor lets you design any custom post type you may be using, like landing pages, homepages, posts, portfolios or products.

07. Developer Page Builder for WordPress

We are releasing Elementor as open source and GPL, and a large part of the reason we are doing so is to utilize the power of the WordPress developers community, in order to enhance Elementor even further. We want developers from all over the world to contribute to Elementor and help make it the ultimate plugin for web designers. Following are some other features that make Elementor developer friendly.

php7

Clean code & smart code architecture

This feature is usually disregarded by most users, but in fact it is the most important feature in Elementor. The well crafted code architecture is what sets Elementor apart and allows for other features like instant drag and drop and compatibility with other plugins and themes.
github

GitHub project

Released as open source and GPL, Elementor gives WordPress developers the chance to extend and improve it.

seo

Seo optimized

This directly relates to what we mentioned previously concerning clean code. Elementor is based on the most recommended coding standards, making your pages SEO optimized out of the box. The resulting page designed with Elementor will also have a fast load time, a crucial factor for SEO.

css

Custom CSS

Even though the style settings should be enough to create any desired design, you can still set custom CSS within every widget.

Even More Page Builder Developments

We are working hard on improving and adding new features to Elementor, so you can expect to see even more capabilities released in the next few months. You are invited to communicate with us and tell us which feature you’d like to see next. Your feedback and ideas matter. We will take them into account when deciding on the next features to add.

If you’ve read so far, it’s time to stop with the theory, and go on with the practice. Download Elementor from the WordPress plugin page, and start creating the first of many page designs with Elementor.

Oh, and one last thing. Did you like the design of this post? It has been entirely built with Elementor.

What are you waiting for?

Download Now