12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right Updated on February 2nd, 2017 • in WORDPRESS WEB DESIGN GUIDES • by Karol K - 18 Comments

12 Things We Need to See From WordPress Page Builders in 2017 + Who Already Gets It Right Updated on February 2nd, 2017 • in WORDPRESS WEB DESIGN GUIDES • by Karol K - 18 Comments This is a guest post by Ann Taylor. A question “Do you like WordPress page builders?” is somewhat similar to what if Dumbledore asked “Do you love Harry Potter?” If you are Hermione, you answer is yes. If you are the Dark Lord… Well, you get the idea. It’s the same with so renowned WordPress drag-and-drop page builders – whether you like them or not generally depends on who you are. Do you know a lot of developers who praise the builders? Apart from those who create them, of course. But on the other side of the barricade, many designers and users seem to agree with Hermione’s answer, though it’s still a very controversial matter. 12 things we need to see from #WordPress page builders in 2017 + who already gets it right CLICK TO TWEET 12 Things We Need to See From WordPress Page Builders in 2017 What developers generally think about WordPress page builders “Drag-and-drop page builder here, drag-and-drop page builder there. It looks like my coffee and soup will be drag-and-drop soon as well. Go home, page builders!” “This builder left such a code mess I had to take pills to relax while working with it.” “Why do all my clients buy themes from ThemeForest? How on earth should I support their themes bundled with those painful builders?” “All what builders can give you is excessive styles, lack of creativity, and ugly pages. Hello, it’s 2017!” “Oh, users want a kitchen sink with that builder.” But users (and some designers) don’t agree with them, though “A full-blown page builder! I’m ready to create something exceptional.” “Oh my, 50 content modules? How to say my tech guy I don’t need his help anymore…” “At last. I can be involved in my own project with minimum budget.” “I can do it myself!” All joking aside, WordPress page builders really pose some problems to the WordPress space. On the other hand, they help users (bloggers, designers, various agencies) perform many difficult customization tasks with less efforts and money. Here are some of the main issues: Complex shortcode nature of almost all WordPress page builders makes it easy to create content poorly optimized for search engines. Moreover, some plugins still make user’s content unavailable if the plugin is deactivated. Many plugins are poorly coded so it’s difficult to debug or simplify the code. Plus, there are many compatibility issues with other plugins and WordPress core. A toolkit not powerful enough, not enough customization freedom. In the wrong hands, a builder becomes a tool for creating ugly pages, which only spoil a website. Builders are not a choice for constructing multi-page huge websites or massive directories. But why are they so popular? Yes, they still can yield tremendous benefits: Builders are much cheaper (often even free) than hiring a professional designer or developer. They let non-techies create unique custom pages without learning the basics of coding and help staying involved in their own projects. Builders eliminate a need to install multiple extra plugins. For many agencies, they are a great time and resources saver in making small tweaks for site pages. While there are so many page builder haters, new market players constantly appear and work at their fullest. The demand for WordPress page builders is rising. Best-in-class representatives compete with brand new builders making users unsure which plugin is “the best” for their needs. Gina Deaton, one of the speakers at WordCamp Boston in July, 2016, made one great point comparing WordPress page builders: each site is different and each case is different. It’s what’s important to remember for users who shuffle from positive to negative feedback on builders trying to find out “the truth”. It’s better to start with a free trial or install a free version (if available) of the builder to give it a test-drive. It’s necessary if you want to get your own impressions and experience. From Gina's presentation From Gina’s presentation To help both sides (fans and holdouts of builders) get rid of this benefits-drawbacks headache, let’s try to put together a list of the main criteria for a professional WordPress page builder. It should also come in handy for developers who just think of joining the game. Apart from my own experience, this list is based on multiple reviews of WordPress influencers, forum discussions, opinions of developers, designers and, of course, users. Best-practice criteria for professional drag-and-drop WordPress page builders 1. Frontend editing interface Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor It’s hard to describe emotions of a user who gets a chance to get rid of in-vacuum editing that a standard WordPress editor offers. It’s simply happiness. Frontend editing aims to significantly save user’s time and nerves increasing a happy UX. frontend editing It’s a commonsense and important criterion – providing users with a real WYSIWYG experience of editing content on the frontend, you increase their productivity and overall work efficiency. In some way, frontend editing even helps users build less amateurish pages – as immediately noticed visual inaccuracies are edited faster and easier. Simply tears of joy for chronic procrastinators. Frontend editing helps build less amateurish pages – as visual flaws are edited faster and easier CLICK TO TWEET Fortunately, mostly all WordPress page builders are supplied with this feature (and many of them went frontend only in 2016). However, not every builder comes with a highly intuitive UI – some are overloaded with tabs, buttons, icons creating a mess and making it harder for users to get started. 2. Straightforward and intuitive interface 5 Beaver Builder 4 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor It looks like a very obvious thing – the user should understand how to do any desirable edits even after the first launch of the builder, without reading tons of documentation. The vast majority of people in need of such builders are intermediate WordPress users or complete beginners, so it should be clear and easy for both where to get started. However, as it’s stated in a post on WPTavern, WordPress newbies feel really lost even with performing basic tasks. That’s why an ergonomic user interface is one of the most crucial points for providing a happy UX. It’s mainly defined by a clutter-free layout, which is not overloaded with too distracting icons, buttons or whatever. You don’t want to lose prospects already at a trial period, do you? intuitive interface There are quite a lot of WordPress page builders that meet this requirement. For example, Visual Composer, one of the first builders on the market, is said to be highly intuitive thanks to a proper front-end editing interface, clear categorization of content elements and ease of use. Another user-friendly minimalist interface provides Thrive Content Builder as it literally comes with a so desirable WYSIWYG experience and no need to switch between tabs, content modules, to constantly refresh the page, etc. That’s exactly the same thing MotoPress Page Builder does – offering a clutter-free layout, it lets you edit content elements in a WYSIWYG editor on the frontend dragging and dropping the elements around. Read also: MotoPress Content Editor vs Visual Composer vs SiteOrigin Page Builder vs Beaver Builder vs Live Composer 3. Content retention after deactivation Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor If the plugin is deactivated or deleted, a user should not lose a piece of content and, moreover, this content should be easily edited with a standard WordPress editor. If the plugin crashed for some reason, the content should still be there. Now the situation with many builders is quite the opposite: deleted plugin – deleted content or shortcode mess left – time lost. This issue is widely referred as a “plugin lock-in effect” and it should be avoided. Unfortunately, anti lock-in effect is far from standard yet and many plugins don’t support it or halfly do. content retention This is a very important matter of responsibility for the product and a crucial criterion for a professional and reliable WordPress drag-and-drop page builder. Because isn’t it crazy to make users rely on one unsafe plugin only? This is also a kind of measure that should help elevate developers’ standard for business as it simplifies life of users and other developers. For example, BeaverBuilder will save your main content if the plugin is deactivated, but some additional modules like contact form, testimonial block, slider won’t be available. MotoPress Page Builder also offers this safety – when you deactivate the plugin and switch to default WordPress editor, all your content is saved in a simplified version with all text, images, charts, etc. Tailor Page Builder is also a great example of content retention feature – these guys offer a basic lightweight set of tools and a great option to save all you created. If you build your site with Elementor and then deactivate it, your content will still remain as well. With Page Builder Sandwich you won’t also lose your content and will be able to continue updating the page easily via a default WordPress editor. Among other popular WordPress page builders that fail to fully meet this criterion are Thrive Builder (however, the guys promise they are working on it), Visual Composer, Fusion Builder, Themify Builder. 4. Speed and performance Relates to the speed of editing process. 5 Beaver Builder 5 SiteOrigin 5 Elementor 4 MotoPress 4 Visual Composer 4 Thrive Editor Though SEO is a multi-step process, where everything is predominantly determined by hosting, image and video optimization, etc., poorly coded plugins can significantly decrease an overall website speed, in result, have a bad effect on site rankings. That’s already clear even for WordPress newbies. Moreover, the vast majority of builders are shortcode-based and their parsing is a highly processor-intensive operation. Complex layouts with tons of content can take much more time to render pixels to screen; the more complicated styles, the more time is taken for painting them. For WordPress page builders, the measure of speed comes with 2 aspects: Firstly, the speed of editing process (inside the builder): how fast the builder is loading, how fast the content modules are loaded and added, and sometimes, how fast the user loses patience staring at a preloader. Secondly, how long it takes to load the site page created with the builder. While the first aspect is more about providing a happy user experience, the second one is a significant SEO factor. The backend of the builder should be loaded maximum quickly and at least the basics of page speed rules and recommendations should be taken into account. For example, one useful strategy is performed by the developers of Elementor page builder: to speed up the loading time of content created with the builder, CSS generated by Elementor are saved to external minified CSS files, therefore CSS markup is processed much faster. A great way to lighten the source code and load the page faster. There are too many external factors that can worsen a website SEO. The page builder as a major plugin of many websites that use it should not be one of them. To understand which builder is really good at speed (loading live site pages), all of them should be tested in terms of a particular project or in the same testing environment and conditions. 5. Well-coded plugin Taking into account that builders oftentimes take a role of main content keepers, nobody wants to have a buggy overloaded plugin to host their content. Nobody wants to have a site that takes forever to load because of one plugin. That’s why an “extremely well-coded” plugin is becoming something vendors emphasis in their advertising more often. And this is what users pay attention to, even without being able to properly check whether it’s true. Still, many WordPress page builders produce a heavy markup or non-semantic code that is impossible to debug and takes much more time to load the page. Very often, this is an outcome of a super “can do everything” plugin. Ultimately, there is a room for working on valid code markup, improving caching system for rendering CSS and JavaScript, eliminating nested elements in the code, etc. It’s all about improving the user experience and SEO after all. To recap, as well as it’s significant to leverage coding standards for page builder plugins, builder creators may invest more time in educating users providing real examples on what they mean by a “well-coded product”. Or they can invite to discuss some critical topics and start some behind the scene talks. 6. Ready-to-use design layouts Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor It’s preferable to offer a couple of pre-built skins for particular needs – Services, About us, calls-to-action, or even niche-oriented designs like Gym classes, Dentist, Travel, etc. For people that don’t use a premium WordPress theme with dozens of ready-to-use niche templates included, such an option in a builder is a huge benefit. The work is done faster and there are fewer chances to create something ugly. prebuilt layouts Today, SiteOrigin Builder comes with numerous built-in thematic page layouts, BeaverBuilder offers approx 30 helpful layouts, Visual Composer is also templates-rich, Divi Builder provides a good choice of customizable layouts. Thrive Content Builder also offers one of the richest collection of multipurpose ready-to-use templates. Alternatively, there can be a variety of “bare” layouts that also help eliminate a need to build complex layouts manually (e.g. Conductor and MotoPress builders work this way so far). 7. Compatibility In order to be compatible with the latest WordPress core versions, the plugins should be regularly updated and continually improved. Backward compatibility should be also provided on the highest level. compatibility issues Redundant shortcodes can cause tough compatibility issues with many other plugins in use. Compatibility with major WordPress plugins is also highly preferable. The higher commitment to the high-standard product development, the higher user trust is. 8. Theme-agnostic plugin 5 Beaver Builder 5 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor Or, transiting to user’s language, the plugin works with any theme. Namely, minimum buggy and maximum in harmony with the theme regardless of the theme used. Most WordPress page builders work quite good with different themes, but there is no universal builder. theme agnostic Some builder creators even go an extra mile to better fit this criterion: for example, the MotoPress guys developed a specific plugin to be fully compatible with Zerif Pro native theme styles, Elementor’s developers added compatibility with Zerif Pro and other popular themes, etc. Page builders like Divi or Fusion that became standalone ones also have to be more theme agnostic: while Divi showed a better potential of proper working with different themes, Fusion is still the best choice for its native Avada theme (however, it looks like the guys are working on making it fully theme agnostic). 9. Mobile-friendly, cross-browser compatible 5 Beaver Builder 5 SiteOrigin 5 Elementor 5 MotoPress 5 Visual Composer 5 Thrive Editor The time of “mobile-first theme” isn’t going anywhere. Pages that customers create with builders can look good on their screens, but there is no QA staff who can click on each button, check out portrait and landscape orientation for each device powered by iOS and Android, test it in each browser, etc. mobile friendly However, some of the builders come with built-in emulators to help users check right in the admin area how their pages look on different screens – a great direction to follow for others. Now, mostly all WordPress page builders are responsive thanks to usage of relative elements positioning. However, there is room for improvements as mobile technologies grow rapidly. 10. Extensions Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor A builder with tons of default options is good, but many developers and users are now aiming to fewer options that make a plugin more lightweight and user-friendly. Fewer people are chasing for a feature-rich monster, that is why “dozens of content modules” point did not get into the list. Alternatively, users wish to get more freedom in styling the objects without a need to add custom CSS. A powerful styling toolkit inside the builder can make you much more competitive. Clients are now more happy when their personal complex demands are met. So, extensions for a variety of needs and business niches are a great organic way to lure more prospects and make your product more professional. In the WordPress space, it’s also a very common pricing model that includes a free core (plugin itself) and paid addons. Additionally, shortcode-based plugins should be easily extensible with other shortcodes. 11. Pixel-perfect designs pixel perfect Since designers are a huge part of the target audience, pixel-perfect design is probably one of the most desirable option for them. Ensuring sharp and clean look of web pages should be a standard for builders. Nailing pixel-perfect interfaces is a great contribution to creating more profitable brand-building in comparison with muddy unclear designs. 12. Support Of course, a fast-acting support team at your back is usually a domain of premium WordPress page builders. Free ones may not give enough support attention. But in any case, a detailed documentation, forums and at least minimum human interaction should be expected. As for premium solutions, good support is essential, and probably just as much as the quality of the product itself. Conclusions Beaver Builder SiteOrigin Elementor MotoPress Visual Composer Thrive Editor Frontend editing Straightforward and intuitive interface 5 4 5 5 5 5 Content retention after deactivation Speed of the editing process 5 5 5 4 4 4 Ready-to-use design layouts Theme-agnostic plugin 5 5 5 5 5 5 Mobile-friendly 5 5 5 5 5 5 Extensions VISIT VISIT VISIT VISIT VISIT VISIT That’s one small move among others towards some standardization of builders development. It can help users understand possible obstacles with builders and inspire providers to improve their products and, consequently, the entire WordPress ecosystem. While board games like Cubetto that “teach kids programming before they read” are going to rise up a new generation of tech-savvy people soon, today many users still find it hard to understand the basics of the WordPress logic. That’s why builder creators should try to educate their users not only on how to work with the plugin, but how to leverage their use to maximum advantage, share best practices of builders usage, show examples of how to create really attractive pages, etc. “Your site, your way” is the main WordPress motto for 2017 implying that users want to be more independent in terms of website customization. In the State of the Word, Matt Mullenweg placed great emphasis on the plans to architect the new WordPress editing experience. Many developers admit that they use WordPress page builders to give their clients more customization freedom. Projects that were complete builder holdouts, now experiment with them, stating that they help save tons of time for the dev team. Even these few facts make clear that importance of WordPress page builders is not a myth. And of course, page builder creators should start thinking about more cool product improvements today. Do you think that your plugin already meets all these criteria? Or, maybe you have one more important point to add to the list? It’s time to make your contribution. 12 things we need to see from #WordPress page builders in 2017 + who already gets it right CLICK TO TWEET About the author: Ann Taylor is a WordPress, open source, and folk music fan. Find her @mainoxa tweeting about all this and whatnot. 17 Comments Codeinwp blog Login 1 Recommend Share Sort by Best Avatar Join the discussion… − Avatar Matt • 3 days ago Lol. Frontend editing certainly is the hot trend right now. There isn't a builder in existence that has a good enough Frontend building UI / UX that doesn't get in the way of itself. That hasn't stopped everyone from trying to be the next MS FrontPage though. Beaver Builder probably has the edge over all the FE Builders but no FE builder can yet approximate the power equivalence of the built-in core functionality offered to backend plugins. Backend editors still do it better because they don't have to build out their own UI because everything is already provided by WP on the backend. Some backend plugins just ignore WP backend conventions anyway which it's own kind of wrong. WordPress already provides a standard UI on the backend that can be followed if plugins are willing to leverage it. There's no equivalent on the frontend yet. Clients are are already trained on the backend and appreciate not having to learn what amounts to a proprietary interface for now. The Customizer is a cute attempt insofar, and BB has had to invent so much on it's own UI since the WP frontend experience can't match the backend one yet. BB's own upcoming UI refresh will continue to improve on their take but that's all it is. Good on them though and others for blazing their own trail. Maybe someday they'll be an official frontend standard that's not as unpowered as the customizer. Eventually the standard CPT, taxonomy, term, etc interfaces might soon be brought to the frontend but not yet. For now, I use my own custom built backend builder solution that has never been confined to content editing and is theme agnostic while I wait for the frontend builders to catch up. There is no better WYSIWYG that of a second monitor that instantly auto refreshes the frontend of a backend builder when makes use of the features that users already are familiar with and know how to use. Too many plugins interact and extend the backend right now to ignore. Nothing compares to these at the moment. 2 • Reply•Share › Avatar Ann Taylor Matt • 2 days ago Hey Matt, thanks a lot for digging deeper. You're right, frontend experience can't match the backend one. But the vast majority of users are happy with frontend editing, they are looking for this feature when choosing a builder. And while there is no standard yet, we should try to improve what we have. As for "how", we really need more insights) 1 • Reply•Share › Avatar Matt Ann Taylor • 2 days ago Agreed. That's why I can't completely knock what the current crop of FE builders are doing. Pioneering is hard. I feel those that like FE builders don't want to get to know WordPress (better). They would prefer to use WordPress as little as possible. That's fine. It allows them to get what they want done faster. They get really good with a particular FE builder and when it's time to move on, much of their skills may not be transferrable. It's certainly a great choice for WP newbies or even designers who can't code. Many are unsure whether WP even will be fit a particular purpose on the outset. I have known several that thought that certain front end builders were WordPress and they didn't like it so they decided that WP was for them at all. That is until I showed them differently and changed their minds. So, I choose to only teach the backend because if you switched backend builders or even other plugins that integrate nicely, much (if not more) of what you have learned / spent your time working with the backend still applies. The backend is WordPress more than anything until that changes. To me, as far as theme builders go Divi has always demonstrated what not to do and that has more to do with their design choices than use of shortcodes. Shortcodes are inherently evil but can certainly be abused or used for wicked purposes. The latest Fusion Builder is possibly the nicest backend UI / UX I have seen to date. I can't help but admire it. Too bad it only comes bundled with it's theme. They say they will release a standalone version this year and that may well be a sight to see. 1 • Reply•Share › Avatar Emily Williams • 2 days ago Ann, thank you for including MotoPress Page Builder to your review! 'Pre-built layouts' option is one of the awesome features which will be released in the next plugin version. 1 • Reply•Share › Avatar Robby McCullough • 3 days ago Thanks for the Beaver Builder mention and review. We really appreciate it! We're working hard on an update to our interface and user experience. Once it's released, Beaver Builder is going to be faster and (hopefully) much more intuitive! :) • Reply•Share › Avatar Ann Taylor Robby McCullough • 2 days ago Hi Robby, thanks for the updates! We expect to see more improvements. • Reply•Share › Avatar Drew Hudgins • 3 days ago I sure am having a good time with Elementor. I really tried to give Divi a shot. I will say, it is very beautiful. I feels like a lot of websites out there -- that they were engineered by a very talented and creative designer. But I wasn't looking to dive into a learning curve of "now what color was this kind of row again?" I got a Udemy course, gobbled up only about 50% of it -- just to have someone guide me into the Elementor (and GeneratePress combo) setup. And I love it. The folks behind Elementor really seem to be pushing the envelop too, always announcing new widgets and functions to their users. I also have good things to say about Visual Composer. It came with the package for a few themes, however I'm not as familiar with it as a front-end builder (that wasn't available to me with the particular theme I had, at least not yet) • Reply•Share › Avatar Ann Taylor Drew Hudgins • 2 days ago Hey Drew! This is exactly what we mean by "each case is different". Visual Composer is cool for users who want to get tons of different options and yes, it provides quite user-friendly frontend editing; Elementor is a really advanced tool for designers, etc. Everything depends on your needs and expectations. • Reply•Share › Avatar Luke Cavanagh • 3 days ago Elementor seems to be killing it in the marketplace of page builders. It has a solid UI and is always adding new features. • Reply•Share › Avatar Ann Taylor Luke Cavanagh • 2 days ago yep, they entered the market with an impressive marketing campaign, but fortunately, the product is mostly as good as advertised. • Reply•Share › Avatar rngordon Ann Taylor • 20 hours ago Doesn't sound like much of a resounding endorsement. • Reply•Share › Avatar Tom Marino • 3 days ago I guess I can see why you didn't include Divi in the main comparison, I didn't have much of any problem using it with another theme. The community that's evolved around it and the number of add on resources, many free, is what puts it over the top for me. I suppose you could consider that more theme related as well. A very nice piece nonetheless, Karol.. • Reply•Share › Avatar Luke Cavanagh Tom Marino • 3 days ago Divi is a bloated mess, the front-end visual editor has issues, it uses shortcodes as well. • Reply•Share › Avatar Michele Luke Cavanagh • 3 days ago Yes, there's a lot wrong, but they do have pretty granular user permissions control. I'd like to see some of the stronger contenders implement something similar. • Reply•Share › Avatar Luke Cavanagh Michele • 3 days ago I like the UI of Divi and how it works for the builder. • Reply•Share › Avatar Tom Marino Luke Cavanagh • 3 days ago That mattered when I used any of the supposedly best hosting options. Then I moved to a host that actually provides service and my page load is more than acceptable. • Reply•Share › Avatar Luke Cavanagh Tom Marino • 3 days ago Divi style.css is 700kb. • Reply•Share › ALSO ON CODEINWP BLOG 10+ Best Free Photography WordPress Themes 4 comments 5 months ago Avatar Sonal Sinha — Thanks for including 2 of the themes from SKT. Means a lot. Transparency Report #21 – The Good, the Bad, and the … Illegal? 3 comments 3 months ago Avatar Miguel — Great post Ionut! Thanks for sharing all this useful information, congratulations for Dev7 and best of luck with the sales at Themeforest! ManageWP vs Jetpack Manage vs InfiniteWP vs MainWP vs iThemes Sync – WordPress Management Tools Compared 18 comments 4 months ago Avatar billracine — I've used iThemes Sync and it worked, but I was not overly impressed with the UI. But it did what it promised. I've also been using ManageWP back before Orion was released and worked with the Beta. … Transparency Report #19 – Our Most Popular Free Theme (Zerif Lite) Suspended From WordPress.org 22 comments 5 months ago Avatar Ionut Neagu — Hey David,Thanks for your comment and for being a customer, I hope you are happy with Zerif Pro :).As for your suggestion, the problem is that we were not offered a solution to migrate custom … Powered by Disqus Subscribe Add Disqus to your site Privacy