How PageBuilder Tools have become essential in web development
The combination of no-coding-required UI/UX PageBuilding features plus comparative operational ease of use has made WordPress.org [but curiously not WordPress.com] the best Web design environment for a broad range of business and IT systems.
As a result WordPress has risen to a leading Market Share position of 58.8% among CMS systems in use Worldwide. In response, the other two leading CMS, Drupal and Joomla, have unveiled their own PageBuilders. Drupal has a theme, Glazed ,with PageBuilding capabilities [similar to the Xtheme, The7 and Divi 3 WordPress themes also with builtin PageBuilders]. Likewise Joomla has 4-5 PageBuilders but like the newest, Quix, all are backend PageBuilders lacking WYSIWYG frontend interactive design.
Finally 3rd party tools like hosted Website Builders such as WIX, Weebly and SquareSpace have seen a spike in their growth over the past 3-5 years with outstanding frontend PageBuilders. With improvements in SaaS operational support, these Website Builders have become serious small to medium-size business systems.
WordPress Frontend PageBuilders allow users to edit directly their pages and posts by pointing and clicking on the elements they want to edit and then modifying that element while instantly seeing the results. In addition users can add a wide selection of UI widgets to precise points on a page/post:
So creating or changing the design and layout of your website has become doable by a much wider range of users. In fact frontend, WYSIWYG design is one of the eight essential features of the top WordPress PageBuilders:
- Works with any WordPress theme;
- Delivers mobile responsive pages which look good on desktop, tablet and mobile phone;
- Frontend, WYSIWYG interactive design of all pages and posts;
- Unlimited adding of rows split into 1 to 6 columns for tabular layouts;
- Use of prebuilt templates to add a complete page or sections of a page;
- Ability to save and create your own templates for later reuse;
- Having unlimited Undo/Redo capability to tryout different design options immediately;
- Having CSS styling options associated with every module for immediate formating control.
Of course each PageBuilder competes on the variety of modules supplied for adding such features as sliders, galleries, popups, special menus, tabs, accordions, forms, Post portfolios, and about 10-12 addedUI widgets and features. And that is what this post is about – what improvements have been made in PageBuilder supported features . In the past year, there have arrived many very good WordPress PageBuilders. But this review looks at 4 of the newest and most promising wider PageBuilding trends.
Promising New PageBuilders
WordPress Interactive Design/Development Environs provide developers with some of the best tools for creating outstanding UI-User Interface/UX-User Experiences on the Web. There are now over two dozen WordPress.org PageBuilders[ but curiously, none yet for WordPress.com users]. The result is three major trends:
- Development time for websites with sophisticated User Interfaces has decreased;
- There is now intense competition among the PageBuilder vendors to bring new and unique features to their tools where ease of use and WYSIWYG, “No-coding-required” functionality is the top target;
- Users can already see new PageBuilders delivering on that promise.
These are important trends in Website design and development
What is New and Improved in PageBuilders
The last 5-7 years has proved the value of the WordPress design strategy – “no coding required”. But one of the earliest protagonists for this design method has been HTML website development tool Xara Web Designer Pro . Xara uses drag and drop operations; integration of vector, bitmap image editing and web design; plus its ability to generate compelling animated, single page applications:
So despite Xara’s lack of a database connection for blogging and other sophisticated data tasks, I constantly stay up with Xara Web Designer Pro to keep track of the likely UI/UX improvements on the CMS scene. For example, WIX Website Builder is using the Xara-like drag and position for text blocks and images anywhere on a WIX page. As well WIX supports basic drag-to-resize operations for both images and content blocks – again an oldy but goody Xara feature. Finally, the range of automated image/vector manipulation and editing features of Xara are slowly popping up in WordPress PageBuilder and Website Builder Tools.
These new directions are so compelling we will be featuring a non-WordPress PageBuilder, WIX. specifically for the GUI UI/UX enhancements it has brought to the Web design table. So now we look at 3 new PageBuilders and their key features.
SiteOrigin PageBuilder
I can hear in my mind many readers objections: “Now wait a second, Site Origin PageBuilder has been on the WordPress PageBuilder market for at least 5 years. What’s new here?” Here is what is new:
With the help of five 3rdparty add-on providers, SiteOrigin now has 96 add-on widgets. Yes some of the widgets are duplicated; but there are also some real gems added to the base SiteOrigins Widget Bundle:
Livemesh Widgets has Livemesh Odometers and Livemesh Grids
LRW Widgets Bundle has LRW Word Rotator and LRW Layout Slider
Netbase Widgets has Netbase Icon Widget and Netbase FAQ Widget
Widgets for SiteOrigin has Inked Portfolio and Inked Pricing Tables
Ultimate Addons for SiteOrigin has Ingenious Toggle and Ingenious Service Box
Ultimate Shortcode has over 4 dozen shortcodes which are available to SiteOrigin PageBuilder
Best of all, like SiteOrigin PageBuilder itself, these add-ons are free and can be found in the WordPress.org plugins directory.
In addition, SiteOrigin has some “old” features that many of the 24 and counting WordPress PageBuilders have yet to implement:
1)Both backend and frontend PageBuilding which works well for any user;
2)History list of all revisions for any specific page or post. This is vital for sophisticated undo/redo operations;
3)Upload existing Page or Post contents into SO PageBuilder; revert to WP Visual Editor with fair fidelity and all PB shortcodes removed.
So indeed what is “old” is new with SiteOrigin PageBuilder. So much so that the latest new and free WordPress PageBuilder, Elementor, has copied not a few SiteOrigin PageBuilder features.
Elementor Post & PageBuilder
As can be seen in the screenshot, Elementor provides drag and drop layout of both pages and posts. Drag an element into a column and it is fitted in on top of that column. Drag a column by its icon to change its position either vertically or horizontally. Drag the horizontal edge of a column to make it wider or thinner while neighbouring columns contract or expand to fit within the row/section space Click on the section or column tab in the upper left corner to see an expanded menu which allows users to duplicate or delete the column.
Now here is what is different about Elementor – all of these actions are completed rapidly in contrast to other PageBuilders like Beaver Builder or Thrive where some actions have a significant 3-8 second delay depending on the CPU power in your machine. So speed of operation is a distinguishing feature of Elementor.
But also as mentioned, Elementor borrows feature ideas from SiteOrigins PageBuilder. Elementor has a revision history for each page and post edited with Elementor. Designers can step back several stages in the revisions and with a simple click restore the page to an earlier state of change. In addition, like SiteOrigins, Elementor makes available all of the WordPress Widgets and any 3rd party Widgets to be used anywhere on a page or post. Elementor ensures that the Widget is resized to fit optimally inside the container used. This is very convenient so that Twitter and Facebook Widget feeds can be upsized or Cyclone slider and Nextgen Gallery Widgets can be fit anywhere on a post or page.
In all Elementor has 30 base elements/widgets plus 6 premium addons plus all the WordPress Widgets available for GUI design. My two favorites are the Image Carousel and the Flip Card elements. However, two aspects of using Elementor are hard to get used to. First, given the point and click editing of text blocks in most other PageBuilders; in Elementor, text for editing is done in the sidebar, similar to old fashioned development tools like Microsoft Visual Studio or Java’s Eclipse. The second Elementor quirk is that new sections or rows can only be added at the bottom of a page or post and then moved up by drag and drop action.
Elementor has template system with 48 free and premium templates:
The 17 premium templates vary in cost and layout/styling. Elementor users can save rows or sections to create their own templates. This is one of my favorite methods of saving and reusing sections of Elementor code.
In sum, Elementor brings to WordPress PageBuilding another excellent free tool. But again like SiteOrigins, Elementor is just beginning to offer a set of premium templates and elements/widgets in the market place. Right now Elementor along with SiteOrigins belongs in the elite top 5-6 WordPress PageBuilders. But given the close competition among WordPress PageBuilders, staying in the top 5 will be an open race.
WIX Website Builder
Hey whats up again? WIX is not even WordPress, has been on the market for at least 10 years, and has reputed Mobile Responsive and SEO problems. Why is it being included here?? Well because like Xara Web Designer, WIX Website Builder is a major innovator in “no coding required” Web Design and PageBuilding.
For a small example, like Xara, WIX offers during uploading of an image the ability to edit that image in the excellent Aviary online image editor – given that 1/3 of web images are Dirty Dogs, this is a most helpful tool. More broadly, WIX uses some of the key Web design innovations of Xara – like the ability to position an image or edit block anywhere on a page with some point and click resizing capabilities [ but not matching the full range of tools available in Xara]. But Xara does not have an underlying database, nor a free/low cost hosting service, nor the broad range of special widgets or add on apps] available in WIX like the Restaurant/Spa Reservations or Individual and Group Bookings or Shoutout automated email bulletins.
Website Builders like WIX are taking advantage of the operational benefits of SaaS to offer their customers greater security and latest update control, meeting occasional peak computing demands at low cost, sophisticated protection against hack attacks, plus a range of SEO and performance enhancing services. With this strong operational base, Website Builders have endeavoured to make Website design and development open to a much broader set of customers with better PageBuilding tools. WIX leads in this Website Building category.
The Wix lead in Website Building extends across all Web tools including the very best WordPress PageBuilders. There are two features that give WIX the lead in website development right now – the WIX 2 prong template choosing process and the Wix PageBuilder. Lets first consider the 2 prong template processs.
Wix has two processes for choosing a template. The first is the classic template chooser step:
WIX 500++ templates is more than its major competitors like Weebly and SquareSpace but only a fraction of the over 5000 free and premium themes available to WordPress users.
But WIX has a major gotcha with its templates. A WIX template is not nearly as flexible as a WordPress theme. In the latter case it is comparatively easy to change WordPress themes – I have dones so 2-3 times for clients with new needs. In contrast, a WIX template is much more difficult to change – a lot of transfer work is required to do so.
So Wix has developed the WIX ADI – Artificial Design Intelligence process to quiz and then build a customized website template for you. The key is the series of query screens that WIX ADI uses to get a template design closer to your needs:
[cycloneslider id=”wixadi”]
Now after going through the template design process you can still modify and change the resulting template by:
- adding new sections to the template or deleting existing one
- adding a new page to the template and making changes to its initial design
- changing the overall styling, color palette and font choices for the whole template
- making some changes to the sections on individual pages
- but using the more powerful Wix Editor then freezes the ADI template design; all further changes to the template must be done only in the Wix Editor.
Thus the WIX ADI provides not only a remarkably good first draft for your website template but also provides extensive template customizing options.
WIX WebPage Editor
The second advantage that WIX has is its WebPage Editor. This tools works a lot like Xara’s Web Designer. Users can add strips or rows just like traditional PageBuilders. But even more compelling is the ability to drag and drop any of over a dozen design widgets anywhere on a page. Then users can resize and position them and customize the widgets final settings:
Here is the WIX WebPage Editor in action positioning a Photo Editor element by interactive positioning and resizing the image. This is editing that Elementor does bits of and then Xara Web Designer can do fairly well. But all the other Website Builders like Weebly, Jimdo, SquareSpace cannot match. this capability. Neither can the top 5 WordPress PageBuilders.
However, WIX has a second major gotcha with its WebPage Editor:
WIX, unlike all the other Website Builders and WordPress Page Builders is unable to deliver unlimited mobile responsive designs. So for example, Weebly or Elementor will automatically shrink and realign page content to fit the viewport reported by the browser – whether that is a huge monitor or midsize tablet or a tiny mobile phone screen. WIX at this time can only handle the mobile phone layout and for a restricted range of mobile phone sizes. Here is what the WIX page looks like when displayed in iPad landscape mode:
Mobile responsiveness is a major problem for WIX websites. it is so easy to go outside the safety lines in a Wix Layout. More disconcerting is that resizing a browser window containing a WIX website can trip off a defective viewing experience.
Finally, WIX has a third gotcha – the cost of its Apps or plugins. WIX has over 250 Apps or plugins that like WordPress are easy to add and use in its WebPage Editor. Now 250 apps/plugins out does most of WebSite Builders like Weebly, SqareSpace and Jimdo but is a small fraction of the 45,000 plugins available from WordPress. But WIX has borrowed the WordPress plugin search capability offering a good search mechanism for its apps:
The problem with Wix apps is twofold. First , more than half are premium which you must pay for. Many of the free apps are lite versions – to get full functionality users must buy the premium version. Second, the pricing model for WIX apps is the annual payment model. Typically, WIX apps cost between $60/year and $480/year. These prices are distinctly on the high side in comparison to WordPress premium plugin costs.
Despite these gotchas, WIX is a major player in the Website Building marketplace. In the past few years WIX has distinctly improved its eCommerce capabilities, added better customer support and addressed many SEO issues. I have 7 year old Wix websites that still work while Wix provides the old editor for maintaining these older websites. As well the Wix two pronged approach to website creation with the opportunity to use the WIXADI is a ground breaking innovation. Thus, when Wix solves its mobile responsive WebPage Building problems it will have hands down the best tools for Web UI/UX Design. So this party will certainly be paying close attention to how well WIX advances in the coming year ahead.
Summary
PageBuilders prosper because they do two things very well: First, they do eliminate much of the need to do coding in Web Development. Instead of full stack [and expensive] web development most PageBuilder users will do quite well with zero stack coding skills. Yes, HTML and CSS understanding can only help users doing PageBuilding and web design/development in general. But the bottomline is that PageBuilders make Web Design and Development available to a much broader set of users.
Second, PageBuilders allow faster trial and error development making zeroing in on the “right design” faster and easier. Yes, there has been the inevitable reaction against PageBuilder tools. But much of this rant is a tempest in a teapot as the best PageBuilders a)had already addressed the issues cited and b)are targeting broader solutions that bypass the problems in general. But Chris Lema has spoken tellingly in his own rebuttal post on the worth of PageBuilders:
“[their worth is] simple. They offer customers a solution for personalization that mass-produced themes can’t offer, while at a lower price than working with a professional web developer and web designer.” Amen. Today using one of the top 5 WordPress Page Builder plugins is essential for developing and maintaining a website. Ditto for PageBuilders offered by the other CMS systems and Website Builders.