Upfront by WPMU DEV – First Impressions
- 12 Comments
Over the last two years, we’ve seen a whole heap of WordPress theme stores begin to focus almost all their energy on promoting and developing single flagship themes — with the most obvious example of this being perhaps Elegant Themes and their drag-and-drop page building WordPress theme Divi.
More traditionally however, rather than focus the majority of their energy into developing a single theme, WordPress theme companies have often created frameworks that are then used as parent themes for all of their other designs. About the best example of this more tried-and-tested approach is, of course, the Genesis framework from StudioPress.
Essentially a parent theme/framework for all of WPMU DEV’s new designs (examples of which include Fixer, Scribe, and Spirit), Upfront allows you to customize your websites using a newly-developed — and rather inspiring — drag-and-drop interface.
Let’s take a look at what Upfront has to offer.
Taking Upfront for a Spin:
I tested Upfront using WPMU DEV’s Spirit theme. After installing the theme, I clicked on the Customize link in the Appearance menu to take me to the Upfront visual editor. I was initially surprised that Upfront replaces the default WordPress customizer itself, however I do appreciate that the WordPress customizer is a little redundant if Upfront is activated.
The Upfront visual editor is very easy to use. On the left-hand side of the page, you’ll see options to add a new post, a new page, comments, and media.
Underneath you’ll notice sixteen content elements. These can be dragged and dropped into your website design, which is displayed to the right hand of the Upfront interface. Below that area you’ll find theme settings for typography and colors.
At the bottom of the left column are some useful undo and redo buttons, and an option to display gridlines over your design.
There is also an option that allows you to see how your website looks on mobile devices. It allows you to view your website in four resolutions: Mobile (315 pixels), Tablet (570 pixels), Big Tablet (810 pixels), and Default (1080 pixels). This is a welcomed addition to Upfront as WordPress users normally need to use a service such as BrowserStack in order to check how a website looks on different devices.
Page templates can also be modified via the layout button that is displayed at the top of the Upfront menu.
One of the main goals of a page builder is to simply the process of creating and styling pages and content. In this regard, Upfront seems to have gotten the balance just about right.
Established page building solutions such as Visual Composer offer over forty-five content elements. In contrast, Upfront only has sixteen, however the ability to add widgets to a page means that additional functionality can be added to Upfront by installing widget-enabled plugins.
The sixteen content elements are: Text, Image, Gallery, Map, Like Box, Tabs, YouTube, Widget, Login, Code, Contact, Accordion, Menu, Button, Posts, and Slider.
The process of adding new content elements and building a page certainly seems much quicker and more intuitive than many page building alternatives currently on the market — as you can see from the animation below, all you need to do is drag an element to your page and then begin editing it.
Once an element is on your page, you can delete it using the red cross icon or edit it using the green settings icon. The settings box is different for each element. Basic elements, such as buttons, only allow you to change a simple setting such as the size. However, elements such as sliders offer many more options.
What really surprised me here was the level of integration that Upfront offers. You can still create posts, create pages, and upload media, through the WordPress admin area. However, if you prefer, you can add content through the front-end of your website using Upfront. This allows you to see exactly how it will look when it is published.
Upfront makes it easy to style your text. All you have to do is select a piece of text and a styling box will appear. You can then do a number of things including transforming text into header tags, making text bold or italic, creating lists, placing text in a quote, and converting text to a link.
The text colour and the text background colour can both be changed via a colour picker. The current colors are displayed together with the default theme colours. A wide range of icons can also be inserted into your content area via the styling box.
One thing that became clear after using Upfront is that it does not take long to understand how the Upfront drag and drop interface works. Without doubt; it’s one of the most user-friendly drag-and-drop page building solutions available for WordPress I’ve seen to date!
When you step back and think about it, it makes sense for drag-and-drop page-building functionality to be built directly into a theme. The majority of page building solutions are WordPress plugins: meaning they need to be compatible with all types of WordPress themes. With Upfront however, WPMU DEV can ensure that every design they release is optimised for their page building interface.
In short: I’m really impressed with what Upfront can do. I particularly like the way Upfront handles rows and columns. Some page builders require you to pre-configure the number of columns in a particular row, using buttons such as 1/4, 3/8, 1/2, etc. With Upfront however, all you need to do is click the bottom right-hand corner of a content element and resize it. You can then drop in another content element in order to add an additional column. This feature helps speed up the process of creating pages and styling content.
WPMU DEV currently only has three WordPress themes that utilize Upfront. I can see more WordPress users choosing a WPMU Dev design once they have released more Upfront child themes though. Without doubt, WPMU Dev are heading in the right direction!
If you’d like to take Upfront for a test-drive yourself, be sure to check out their live demo — which includes a working demo of the main drag-and-drop interface — here.
For more info on Upfront, take a look at the official announcement post over on WPMU DEV.