Behind The Design Of Elementor

The start of a new year offers a great opportunity to share the journey we've been through over the last year, an incredible journey that included the birth of our page builder. In this rather long and in depth post I want to share with you the process, dilemmas, strategies and milestones of the last year, as well as the plans we have for next year.

Going back before 2016

To accurately recount our journey, we actually have to start two years back, when all the planning and development of Elementor started.

Like reinventing the pencil, changing the way people design with WordPress is not an easy task, and it took us quite a while, as well as quite a few versions, to get to the solution that suit our vision.

What had made it even more challenging was that our whole concept revolved around making an editor that would fill the needs of both developers and designers. These are two conflicting forces, each presenting views and values that are are very often conflicting.

I don't think we would have been able to end up with a final product, without the unique combination of two opposing co-founders. One playing the part of the designer (Yoni), the other of the developer (Ariel).

I call it "playing the part", because many times it had actually resembled a Roman play. Two rudimentary forces battling it out. Design VS Development.

It's only natural for you, as a user, to regard the final product as a whole, and not really ponder about the many struggles that went along into making it. It has always been an interest of mine to try and learn how products ended up being designed one way instead of the other. What was the thinking behind it. This is why I found this interview of Slack's founder so riveting.

I'd like to share four major dilemmas we had to face, and show how we eventually solved them. These had to do with personas, key product guidelines, UI and mobile.

One of the first drafts for Elementor

Personas

Back in 2015, we were running a WordPress theme company. We noticed that website builders like Wix and Squarespace included really superb website builders, that surpassed WordPress page builders in almost every aspect. This was strange, given that WordPress was the dominant CMS, with almost 60% market share.

We decided to build the ultimate page builder for WordPress, one that would cater to both developers and designers.

There was another persona in mind, even though it was not our main focus. This was the site owners, the clients that hired the designer and developer to build their website. Each persona was different in their design approach and behavior.

Designer - The designer is someone who loves to have as many controls as possible. Just look at Photoshop, it's more complex than a cockpit. Lots of icons, controls, windows. The designer wants to have a tool for every operation, but doesn't want to code at all. The much preferred method is to use a visual control, and never have to write a CSS line.

Developer - Hates controls. Prefers a clean interface. I think Reddit is a good example of the kind of interface developers love. The developer doesn't want controls that distract from coding. The developer thinks that regardless of the interface, if something needs to be done it can always be hardcoded.

Client / Novice - The clients don't want to code AND don't want too many confusing controls. The want the simplest of tools, to let them easily create their site (even though as most of you web designers know they can be very specific as to the end result they want to reach).

So, how would go about building a solution that would cater to at least two of these ever so different personas? Our answer was to handle it one decision at a time, and for each decision have an old fashion fight out. If the designer was more determined and strong willed, then the designer side won. If the developer's side was more resolute, his side wins. Each side has the right to veto a decision, if the issue seemed important enough.

This might not seem like the best managerial decision making process. It certainly can't be taught in business schools ("First lesson - make sure you have a designer and a developer as co-founders"). But for us I can think of no other way to make sure both personas end up loving the product, as they finally did.

Deciding on key areas that guided us

Apart from the personas, we had three key guidelines following our process:

  1. Fast frontend page editing
  2. An interface that was fun and easy to use
  3. The possibility to edit every small detail

These guidelines were important for our process, because they functioned as touchstones to which we could measure each feature and element added to the plugin.

Why did we choose these 3 guidelines and not others?

1. Fast frontend page editing.

The speed at which a product reacts to a user request has crucial importance for any user interface.

Think about going back to using a landline internet connection.
Think about going back to using one of the earliest version of a Samsung smartphone.

It's torture. Inconceivable.

elementor-draft-2015

Eran from Dapulse puts it wonderfully in a long post that deals specifically of the importance of a lightning speed interface:
10 Seconds load time gives the user the odd feeling that something’s wrong. It’s like you’re just waiting and waiting… 10 seconds feels like the app doesn’t work.

1 second and up, makes users go into a “mental context switch”. In other words — they start thinking about other stuff, like picking up shirts from the cleaners.

0.5 load time — or anywhere between 300-1000 ms — makes users feel that it’s working. Nothing to write home about, but at least they’re engaged.

100-300 ms, feels OK. It feels like normal behaviour.

0-100 ms feels instant. This is where the magic happens. This is what we call the BOOM Effect.

To get lightning speed you have to have the right code infrastructure. You also have to make sure speed and performance are not sacrificed when adding or updating new features.

We knew that other page builders on WordPress were slow, and that by creating a page builder with no lag we would create the addiction effect discussed in the Dapulse post.

elementor-draft-panel

2. Easy to use interface

It's a real painstaking process to make a user interface friendly and easy to use. You sometimes realize you have to make a complete and significant change only after you've implemented a certain design and found out it just doesn't work.

This caused us to sometimes throw away weeks worth of work. It's quite possible that similar changes will be made in our interface in the future.

A friendly interface is always important, but for a frontend page builder this importance is even more crucial. This is a visual plugin, one that is used every day. For designers, they sometimes use it for hours every day, as their main designing tool.

This means that all elements in the plugin must have the most convenience and logic, so even after a short test drive the user understand how it works. The user should  also be able understand how a newly added widget works, because of the consistent build.

3. Designer oriented page builder

Have you seen the page that makes fun of Bootstrap? It touches on a serious drawback of Bootstrap: lack of customization.

When you get a page builder with default and limited set of widget settings, however finely crafted, it will produce designs that look very much the same.

This is a drawback we insisted on avoiding. We made every widget fully customizable, while still maintaining the previous friendly UI discussed above.

There is a fine balance we always had to juggle between full customization and user friendliness. We didn't want to create a confusing interface that resembles a cockpit. Again I return to the Photoshop interface example. There are endless controls and menus that just aren't a good fit for a browser based page builder.

On the other hand, we didn't want to go the way most page builders go, and have a limited preset settings that don't allow for a flexible and custom made design.

A great example is the button widget. You might think that it's no big deal, it's just a button. What special customization could you possibly have?

Let's take the sizing of the button. With Elementor, we've made sure you could not only control the spacing of the button, and increase the space between the text and the border, but could also set a different width for the top, bottom, right and left space. This enables you to create a wider array of buttons. Narrow, wide, rounded, spaced out etc.

The panel dilemma

The panel is the place that lists the different widgets, and also lets you tinker with their settings.

There are two main ways of placing the panel: As a floating window or as a docked panel attached to the left/right of the page. Each of these choices have advantages and disadvantages, and we spent a long time thinking which way suited us most.

elementor-draft-2

Going the floating panel way

A floating panel has the advantage that it doesn't hide the screen, or rather that it hides a different part of the screen, and can be easily dragged to reveal it. This display allows for the screen to be displayed through the full width of the page.

Going the docked panel way

The docked panel is much more easy to use. You get used to the panel being in a set place, and can learn to work fast because of the habit to always go to the left of the screen. It doesn't bother you in the content area, like the floating panel. It is always set apart. It is less limited in size.

The docked panel provided a content area which was 1,000 pixels wide. If you are using a small laptop, this means you are left with a very small content area. We finally decided to go with this option, because we researched and found out that our core target audience, designers and developers, used large screens that could manage this reduction in the content area size reduction.

For the users who did have a smaller screen, we added a scroll bar to the content area, so they could still get the real view of the entire width of the page.

A short time after we had launched, we made the panel responsive, so now it adjusts according to the user's screen resolution. We also added the option to widen and narrow the panel, making it more convenient when editing text for example. This actually makes the docked panel an even better choice.

Choosing the interface and editing options

Deciding on docking the panel in the left side of the screen was a major decision, but was just the first step in our long journey towards the final interface we ended up launching. An even more difficult decision concerned the whole editing concept.

Because we had already developed a  backend page builder in the past, we already had experience as to what it takes to build the architecture of the builder. Basically, you need to come up with an easy way to use one visual interface to edit 4 different layers: the widget itself, the row, column and section.

This poses a lot of UI questions, like: when a user clicks on a box to drag it, what exactly is to be dragged? The widget, row, column or section?

In all our interface versions one thing was clear. We wanted the user to only have one single frame to deal with. Photoshop was the inspiration here. You choose a layer and can edit and make changes only to that single layer. No fidgeting and moving the mouse in an effort to "catch" the right frame to edit. We actually went along and built over 100 interface versions, before finally deciding on our unique solution.

The drag and drop was also under debate. Another option is to have a plus sign that opens a menu with all the controls. This saves you a lot of screen real estate, but is less visually convenient.

Here is the current interface architecture

elementor-ui-sketchYou only see one layer at a time

The default is the widget. You have two buttons to the top left of the box that give you control over the column and the section. The row control is available by adding another column widget.

Having one layer has its pros and cons, and we are currently considering other options, so this may well change in the future.

The left panel is always divided into content, style and advanced settings
This consistency makes the whole process of learning to use Elementor much easier.

The three distinctions are used mainly to simplify the interface, and prevent the "cockpit" feeling of bewilderment when faced with too many controls.

We've used the same methodology to de-confuse each of the three tabs, and created more divisions by dividing the tabs sections or dividers. This is especially useful for the more advanced widgets that have more intricate settings like the Forms and Posts widgets.

elementor-page-builder

Improved workflow
As mentioned, we went back and forth through various versions, and sometimes decided to throw away hundreds of hours of work. Apart from the basic three guidelines I mentioned, there is a flow that we've searched for. A speed of design and an intuitive feeling as if everything is within reach. For the first months our focus was on improving the workflow for the single page. Lately we started to move towards improving a wider extent of the designer's workflow, such as how they manage sections that appear across the website from one place.

Mobile Editing

From the very early planning stages it was clear to us that Elementor had to deliver an outstanding solution for mobile. Responsive design has transitioned from being a trendy buzz word to a practical everyday task for every web designer. Today between 50-60 percent of all internet surfing is done on mobile.

The '100% responsive' label you get with your theme is nice, but isn't nearly enough for proper web design. Surfing with a mobile device poses many challenges, and this is why we created a list of features we call Mobile Editing. This includes many options to customize parameters, like font-size, text alignment and margins, and set them differently per device.

When we considered the UI management of mobile editing we had two options. One was to add a forth tab to each element (besides the current Style, Content and Advanced) that will present the mobile settings. The advantage of this solution is having one place where all mobile settings are set.

elementor-mobile-editing

The downside of this is that you don't really need the control over 100% of the settings, so going with this solution would force you to constantly zigzag between the different tabs just to design for mobile.

We finally decided to go with another solution, and today Elementor displays mobile buttons alongside each parameter. You can click on the mobile button and set different settings for mobile, and when you do, the editor automatically goes to mobile mode so you can see the result live.

Our plans for 2017

I'm proud of what we accomplished in 2016, and how we managed to further develop Elementor in the latter part of the year.

For 2017, with twice the development crew, and the infrastructure and bug fixes stages behind us, we look forward to achieve a lot more than before.

Open source and extendable plugin

Since our launch I kept stressing the fact that Elementor is designed to be extended by developers. Because we haven't released an API for such a long time, I think developers started pondering if this message was true. "OK, Elementor is free and open source, but where the %$# is your API?"

Now, I'm glad to say we finally released the first version of our API docs, explaining just how to build extensions that extend the functionality of Elementor.

If you're a developer, we invite you to thoroughly read the documents, and think of new ways to add further functionality to Elementor.

Even before releasing the API docs, we have seen experienced developers releasing addons. Notable mentions are Elementor Templater by Zulfikar, Elementor Addon Elements by Anand Upadhyay and WPPlugins.io by Rami Yushuvaev.

Keep enhancing the free and pro plugins

When we came out with Elementor Pro some people were concerned about whether we were planning to further develop the free plugin. One of our key goals for 2017 is to drastically increase the amount of users that choose Elementor as their page builder. We have a big feature release coming in the following weeks that we believe will help do that.

Plugin reliability

Recently there has been a lot of polls in the Elementor group asking why people chose to move from other page builders to Elementor. Time and time again, people mention the fast response to issues, as well as the plugin reliability. They feel confident that when they update another plugin Elementor is less likely to raise issues, and even if it does, they rely on our fast response.

I consider this is feedback as amazing, especially considering this year was the first life cycle of the plugin, whereas some of the alternatives have been around for years. We plan on preserving the same kind of reliability and support for Elementor and Elementor Pro in the future.

Elementor - not just a page builder

We regard Elementor as more than just a page builder, but as an advanced visual editor that in the future will extend to cover countless more capabilities on WordPress, other than the simple editing of a page. With our Embed Anywhere and Global Widget we have started to explore these options, and we will continue to develop them, with the help of the developers community.

Designer Workflow improvements

In the last year we released the template library and the global widget, two major features that drastically improve the workflow of the designer. With the template library, users can save their designs, then import and reuse them on other websites, so they don't have to design each website from scratch. With the global widget, users can place a widget to multiple areas on the site, and edit them all instantly from one place.

The thought behind both features came from analyzing the day to day workflow of the web-designer, and thinking of ways to speed up repeating tasks with technology. We plan to keep this focus, and add more features that make website building easier.

Further improvements in the UI

In this article I went into much details as to how we ended up with our UI and editor. This doesn't mean we regard it as perfect. In fact, we plan to add more UI improvements, making Elementor even more easy to use.

Conclusion

If you've read so far (this is a rather long article), it probably means you are a dedicated Elementor user. I want to give you a promise, from me and the rest of the team at Elementor, that we will continue to do all in our powers to deliver the best page builder we can. Your support is what allows us to continue and work on Elementor, and I want to send you my utmost appreciation for it.

Wishing you a happy new year!

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.

32 Responses

  1. WOW! How detailed can you get than this?

    Thank you for a very insightful and detailed write up on your journey – shows how well organised you all are as a team and transparent with the product.

    Appreciate the mention on Elementor Templater – look out for more addons coming soon. 2017 is going to be the Elementor year indeed 🙂

  2. 👏🏾👏🏾👏🏾 Well written! Really nothing more to say other than I look forward to EMP enhancements into 2017, while mastering what is already a surperb product!

  3. 👏🏾👏🏾👏🏾 Well written! Really nothing more to say other than I look forward to EMP enhancements into 2017, while mastering what is already a surperb product!

  4. Thanks for this article. Interesting to read about the development and why you made certain choices. I wish you all the best in further development.
    Best regards

  5. This is a product that was long overdue and will make life easier for a lot of web developers. Looking forward to giving it a try soon….

  6. Thanks for such great support, an amazing page builder experience and now sharing how it all came together. Happy New year!

  7. Nice write-up ✍,, Ben! As we say in Baseball Playing Countries, you covered all the bases in the writeup and cover all the bases in the product. Well done. 👏 Namaste 🙏🏼

  8. Hi Ben,

    Can I use Elementor for e-commerce site ? Ex. Woo Commerce plugin etc.

    If so any Woo commerce site you know of that is build with Elementor , you can give the link?

    Thank you
    Nick

  9. Very interesting article on the making of Elementor. Good to see how carefully you are thinking through each aspect of this advanced visual editor. Particularly the dynamic between having advanced features and also keeping the UI user friendly. Not easy to achieve, but your doing a good job of it. Thank you for the hard work and have a great New Year.

  10. Thanks for this great article and an even better plugin. The future of Elementor is ahead of us and together with the API and the future of Elementor we will all benefit from the development of this great Page Builder.

    I just showed my clients Elementor Pro and my new plugin for the same and they were so happy that they can create both content for ordinary users and now also content for different roles.

    I am looking forward to see the progress of Elementor and to continue our work with the Magic Content plugin for Elementor.

  11. Hi, thanks for an amazing tool! I´ve been trying to come in direct contact with one of you guys via mail forms but sill no luck. Is it possible to contact any of you via skype etc.?

Leave a Reply