When adding content to your WordPress website, it can be hard to determine what it is going to look like at the ‘front end’ of your website. This is because the WordPress editor is placed at the ‘back end’ of the website: the administrative part. However, in the past few years, more and more front-end editors for WordPress have been developed. You use these to edit the front end of your WordPress website directly, so you immediately see the end result. In this article, we will discuss eight front-end editors for WordPress.
Visual composer is one of the most commonly used WordPress content builders. This plugin works like building blocks with all sorts of elements that you can drag into your content: images, video, sliders, headers, text, widgets, etc. Also, with this plugin you can divide your content into several columns.
A year ago, the option to make these adjustments on the front end was added to the plugin. When clicking on an element, the editor opens in a popup on your screen. When you’ve finished making changes, you click on ‘Save changes’ and you will see immediately what it is
going to look like in the website. The advantage of this plugin, is that you can keep using the Visual Composer back-end editor that you are used to. However, you won’t immediately see what the changes you made are going to look like; you first have to click on ‘Save changes’.
Personally, we think the Visual Composer is only so-so. On one side, it can be a powerful means to set up a professional website, without any programming. On the other side, we’ve noticed that the Visual Composer is often too complicated for the average user. You have to invest some time in order to become good at it. Also, the Visual Composer has been developed so much in the past, that older versions cannot just be updated. Consequently, websites don’t update the plugin, leading to all sorts of security risks. So, we only recommend this plugin to professional users and experienced amateurs.
A rather new initiative is Envato’s Layers. This plugin aligns the front-end editor with the ‘adjust theme’ functionality that is included standardly in a WordPress website. On the left side of your WordPress website a menu will appear where you can make all adjustments to your website. The changes you make will be implemented directly on your site. When testing this functionality, it was sometimes hard to find the desired adjustments in the left-side menu. So, it doesn’t seem to be fully self-explanatory, but that may be a question of getting used to.
A strong feature of LayersWP is that changes you make are immediately visible while you’re typing. On the downside, standard themes don’t work with LayersWP, so you need special LayersWP themes. So, the plugin is free, but you still have to purchase a WordPress theme. ThemeForest already offers a special category of LayersWP-themes, but the question is whether theme developers really feel like making many more. So, we’ll just have to wait and see if this initiative is really going to be a success.
A few months ago, the makers of Aesop Storytelling introduced the front-end editor Editus, that looks very attractive with its minimalistic interface. There are a few buttons for dragging text, images and other elements onto your page at the bottom of your WordPress website. It all works pretty intuitive, especially because after dragging the element of text, you type directly on the page. So, with every letter you type, you immediately see what it’s going to look like.
Editus is the most user-friendly front-end editor that we have encountered so far. It has the advantage that it works in most existing WordPress themes. Sadly, Editus does not offer as many elements as other front-end editors. For example, there’s no option to divide elements into various columns. So Editus is very practical for storytelling and writing blogs/news reports, but not so much for creating more complex pages.
The Live Composer is an attractive competitor to the Visual Composer and focusses – even more than its rival – on the front end. At the bottom of your website there’s a large blue bar from which you can drag all kinds of elements onto your website, e.g. text, images, video and sliders. Later you can divide these elements into columns. There are several WordPress themes (including Jade) that include the Live Composer as a standard.
Compared to the Visual Composer, the Live Composer offers more text elements that you can edit directly on your WordPress website (such as titles), but then when editing content in, say,
text blocks you do this in a popup. However, a large disadvantage is that with the Live Composer you can only edit your pages at the front end; there is no back-end editor.
The Frontend Builder is the least attractive plugin of the payed front-end plugins, but it is the cheapest one. With this plugin, you have a narrow bar on both the left-hand and the right-hand side of your WordPress website. With the left sidebar, you divide your page into columns, so you can add texts, images, video’s, etc. With the right sidebar, you can edit each element, e.g. by entering text, changing font size, changing color or uploading images.
The Frontend Builder offers the possibility to immediately see what your content is going to look like on different screen sizes, such as tablets and phones. Only it makes it harder to later edit the page at the back end. You can still see the texts and images of your page on the back end, but you can no longer change or edit columns. So, if you have created a page with the Frontend Builder, you’ll have to keep editing at the front end.
The free plugin WP Front-end Editor is on a list with plugins that might be integrated into WordPress in the future. The plugin is still in the developmental phase, so you might come across some unexpected problems on your own
WordPress website. With the WP Front-end Editor, you see a button called ‘Edit’ at the bottom of each page, if you’re signed in. When you click on it, you can edit the title and the text, as if it were a Word-document. When starting a new paragraph by clicking enter, you can either continue typing or enter an image or page mark.
The plugin does not work as intuitively as Lasso and offers a bit less possibilities, but it is a very nice, basic front-end editor for editing a text or title. Because you immediately see what it is going to look like, you can easily make a few quick changes. On the downside, the plugin is still at an instable stage, so some themes might cause unexpected problems. This definitely is a plugin that we should keep our eyes on.
The Front-end Editor has many similarities with the WP Front-end Editor, but the most obvious difference is that the ‘Edit’ button is not always on the screen. Only when you move your mouse over a title or text field you want to edit, then the ‘Edit’ button will appear next to the content field. When you click on it, you can immediately start editing the corresponding text on the page. Also, you can determine the font size and place headings between paragraphs.
A great advantage of this working method is that your page, after editing a text field, immediately looks the way it is visible to the public. Also, you can place images in your text. But sadly, you can’t use the WordPress media library for this, which is a real disadvantage of this plugin. So, you have to manually paste the image URL; not very user-friendly. This plugin looks suitable for basic websites when you’re not working with a content editor/page builder.
The WP Quick FrontEnd Editor plugin offers more or less the same functionalities as the Front-end Editor. After you have activated the plugin, the ‘Enable WP Quick Front Editor’ button appears in the black toolbar at the top of your website. When you click on it, lines appear on your page, around the editable text areas. Then you can click on the text and edit it. The editor interface looks a bit different than a standard text-editor you’re so used to finding in WordPress.
A strong feature of this plugin is, that you can also add images to your text from your own WordPress media library. While you’re editing text, you cannot see yet what your page is going to look like to visitors, which is a disadvantage.
When publishing text-oriented articles on your WordPress website Editus is by far the best plugin to use. This plugin is very user-friendly and it shows you what your content will look like while typing. Unfortunately, Editus doesn't have a very attractive price model, so the best free alternative would be WP Front-end editor. However, Wp Front-end editor is still under heavy development.
Are you not that text-oriented and would you like more flexibility building your webpages, for example columns and media-elements? Than Visual Composer ($ 33, front-end ánd back-end) or Live Composer ($ 28, front-end only) are real recommendations. Keep in mind it will take you some time to get to know all the features these composers offer.
The free alternative LayersWP isn't really free because it's only useful when you also purchase the special LayersWP-theme.
To sum up, the more flexible editors are still not always able to immediately show what your page will look like on the front-end. All things considered, text-oriented front-end editors are better at their disposal.