Introducing Elementor: The Page Builder That Will Change WordPress Design

We are excited to announce the first release of Elementor, a truly revolutionary live page builder for WordPress we've spent the last year developing.

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.

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". Click on the demos below to view them in full screen.

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?

About the Author

Ben Pines

Ben Pines is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.

102 Responses

  1. Looks amazing guys! Congrats on the new born baby 🙂 I’ve played with many builders, and yours is definitely the most comprehensive (and absolutely free). I’m sure it’s going to be a hit.

  2. Awesome project. Do you plan to offer the ability to save blocks or complete pages in a library for reuse on other pages? Or even using keyboard shortcuts.

    I would also like to know if you have any system to help translating. I offer to help with the translation into Spanish and Catalan. Thanks guys.

    1. First of all I’d like to congratulate you for deciding to go with Elementor. We do not have a migration tool yet, but this is a feature we are considering to add in the future. In the meantime, you can try to recreate the old designs. I am sure it won’t take you too long.

    1. Do you get an error message of some sort? What PHP version are you using? Please create a new ticket on the support forum and I’m sure it will be fixable. I can assure you it works fine on SSL (The Elementor site you are currently on is SSL enabled and uses Elementor, obviously).

  3. Hello,
    Congratulations. I just loved it. Its the Best Builder I have ever used. So much User-Friendly and no non-sense Features. Its good to see that you have not used Inline CSS anywhere and that is just awesome. Good Job.

    One the other hand, you can take care of these things also:
    a) There are too many DIVs
    b) Output that CSS junk into one separate CSS File (Just like Salient Theme)

    1. Thanks Amrit for the feedback. I will pass your suggestions along to our development team. We are already working on the CSS optimization. We welcome you to join our GitHub and contribute other valuable suggestions.

    1. Hi Eduardo. After you activate it, you should see a link “Edit with Elementor” on any page you create. Please contact our support forum if you are still having difficulty.

  4. Oh WOW! Just tried it and it’s freaking awesome. Super quick working pace, very intuitive and I love the font size sliders! This will go through the roof in no time!

  5. Hi
    my programmer implemented Elementor to our new web site on WP
    but I cant move the Elements widgets to the edited page , to create new things .
    also why cant I choose different fonts for the text
    Thanks
    Aizenman

  6. Hi,

    first of all, I wanted to thank you developers for this stunning piece of software.

    I’m just about to start my own web design company, and of course I am going to provide my clients with a page builder.

    It is very important for me to decide upfront what page builder to use for all future clients, so that I can put online a documentation and tutorial videos for all clients.

    How soon are you going to release the paid PRO version of elementor?

    Thank you very much for your answer in advance!

    1. Hi Joe,
      Good luck with your web design company. The pro version will be released in the next few months. If you have more elaborate questions about working with Elementor for your clients please send us an email to support [at] elementor.com

  7. Hi,

    I just heard about Elementor via and email and blog post from Graph Paper Press.

    It looks pretty good. I have a question.

    When using Elementor is the code output on the backend (that is what one sees in the WordPress editor) a bunch of shortcodes or html? In other words what happens to the content if one deactivates Elementor?

    Regards,
    Jake

  8. Hello,

    with the latest update the elementor doesn’t start, it stays searching. Any idea how to help me on that? I tried to reinstall but it doesn’t help

    greetz

    1. Please try to turn off all other plugin, and if it still doesn’t work try to switch to TwentySixteen. If these two steps are done and Elementor doesn’t load, send us more details to support at elementor dot com

    1. There shouldn’t be any issue with SSL and Elementor. This site is also SSL and uses Elementor. Please send more details to support at elementor dot com

  9. “The content area was not found in your page” is what it is telling me when i try to edit with elementor. Where do I imput the code to fix that?

  10. I am also have the same issues as Tera. I have turn-off the plugins, updated my theme as well as re-installed the Elementor Plugin. I have added the code to the “the_content_ code to my function and my template but I am still unable to get into the Elementor software and make correction or changes to my site.

    1. You need to set the page as the homepage. On the WP dashboard go to Settings > Reading and set the ‘Front page’ to the page you are editing.

  11. I too, am exploring Elementor’s open source builder. As a front-end + back end editor, which was my first requirement (as a designer, I hate being forced to build completely in the back end, jumping back to preview ever other minute). — problem is, I am getting conflicting advice on whether you can use it with ANY theme or plugin (which the Elementor site makes absolutely clear that you can). All but one Theme told me there would be conflicts with their Theme. Those that integrate Visual Composer tell me it can’t be uninstalled and were quite adamant that Elementor would NOT work with their Theme. This for me is big question before I can adopt the builder, which I would love to do. I would also be happy to start with a clean canvas and go with NO theme at all, IF there will be enough ready graphic paks and other elements I could readily add, but again the question of theme and plugin conflicts might apply to them as well. I’m a designer, not a coder… just trying to understand how this all works. — can anyone shed some light? …please help!

    1. Elementor works on all themes that are built with proper code standards, like Genesis themes. If you are working with a theme that already has a page builder, I would recommend turning the other page builder off, as two page builders working simultaneously is a common cause for errors.

      1. Hi Ben.

        I am trying to use Elementor in Genesis Home Page, but unfortunately , I am unable to do so. It says, ‘you must call ‘the_content’ in current template for Elementor to work. Could you please help me.

        Thank you.

  12. Loved it when I downloaded it-spent 3 months developing the website- BUT-BUT- When I updated I get a block saying, “Sorry content area was not found on your page.” Why did it work one on download and all of the sudden I can’tt access the pages?? There are some instructions on what to do-but no direction. I have posted several times on WordPress -with no reply-Sadly disappointed in service….

  13. hello
    I do love this SOOOOO much better than visual composer in MANY ways and soon all ways I am sure.
    Question i am making a woo e com page and using canvas theme or just store front.
    AS i enjoy a clean slate AND have tried larger high end retinal responsive theme but wide up a clean slate anyways

    I can see the builder with these thremes on pages BUT when i make a product page
    i do not see the builder anywhere

    WHAT is it ?
    is it the theme ? ( is there a better option ?
    or how do i see the builder

    1. The builder appears on every post type you set it for. On the WP dashboard, go to Elementor > Settings, and under ‘Post Types’, check all the post types you want Elementor to work on.

  14. I agree. I can’t even get started. I’m using the free theme Illdy which is supposedly the #1 used free theme. I installed the plug in for elementor and clicked on Edit with Elementor on my home page. Then I got a warning that says “You must call ‘the_content’ funtion in the current template, in order for elementor to work in this page.” I then clicked on Learn More and have no idea how to fix my problem.
    🙁

  15. I had it so that I had words in my Jumbotron on my pages (photo header that stretches across the top half of the page). Which is how that theme looks. But what I wanted to do was drag the words up a bit so I could see the most important part of my photo. And make it so that I could pick and choose which pages I wanted to have a Jumbotron. But the GeneratePress theme unfortunately made it so that the words aren’t in the photo anymore and I lost all the cool links at the footer of the page. The look of the Illdy theme is what I wanted but I wanted to be able to customize it. Hence why I thought elementor would be good. Maybe I can’t do everything I want with free themes and plug ins. Which sucks. :(. In any case, I really appreciate you responding. That was very nice of you. If you have any advice other than paying for a theme or plug in, I’d love to hear it.

  16. I activated the free plugin and it says: “Elementor requires PHP version 5.4+, plugin is currently NOT ACTIVE.” I’m not a techie person. What is PHP Version 5.4+ and how do I make sure I have this? I am using the Canvas theme. Thanks!

    1. This has to do with your hosting. contact your hosting provider and make sure the PHP version is updated, preferably to PHP 7

  17. this does not work with my theme them THE woo storefront ONLY works on the index and not shown an option for woo pages at all

    CAN anyone TELL me a good theme to use to make a woo store and elementor PLEASE

  18. THEN PLEASE show me how !!
    :][
    I do not want to use VC or any other page builder
    THIS IS THE BEST on the planet

    PLEASE take the time to show me how
    I can not get it been on it a week

  19. Hi Ben

    Started using Elementor on my GeneratePress theme (both on the free versions) in the last few days and published my first post edited with Elementor, yesterday. It was so so for me as I did not go through the instruction etc but even then, I was able to produce a commendable post (I think!).
    Anyway, for my second post I need to have tables. How do I use Elementor to create tables with several rows and columns. Can I insert any HTML code into one of these boxes so that I can insert Affiliate link photo or banner (small size)?

    Thanks Ben.

    1. I don’t understand the question. The page is made up of sections. If you set one long section to be a certain color then that will be the color of the page.

  20. Is it possible to overlay content on a video background with Elementor? For example, can we put text over top of the video, buttons, etc.?

  21. One question, can I define in my theme which element can be edited by elementor and which not? I have a finished theme and my client should only be possible to edit a certain section and not more. Thanks – this looks promising

  22. What i like most about Elementor is its intuitive , easy to use and designer oriented. Is there any plan to apply this (designer oriented approach ) to a Elementor theme framework? . It will be a game changer.

  23. How to choose between user own self hosted videos?
    I can make the embed youtube to run in the background.

Leave a Reply