Velocity Page: Drag & Drop Page Layouts & Content Editor WordPress Plugin
Velocity Page is a newly released WordPress plugin that allows you to build page layouts and edit the content of those pages through the frontend of your WordPress site.
By taking the admin dashboard and default WordPress page editor out of the equation, the developers have aimed to make creating page layouts and entering text and other elements a more user-friendly and intuitive experience.
In this post we will have a look at some of the features of this plugin, see what it can do, and get an idea of how easy it is to use to build custom page layouts with WordPress.
Using the Velocity Page Frontend Drag and Drop Page Builder
After installing the Velocity Page plugin and entering the license key to receive updates and get access to support, you can begin using this frontend page builder tool.
Velocity Page works with WordPress pages, so to use it you simply create a new page or open an existing page for editing, and then enable the plugin from the options panel on the page editor screen. Just in case you were wondering, this plugin can’t be used on WordPress posts.
Also, as you can see from the screenshot, any existing content on the page is ignored or hidden if Velocity Page is enabled. You also get the option to use your site’s current theme, or choose from one of the templates included with the plugin.
If you choose to use your site’s current theme, then all the styling and layout settings from that theme will be used for the page and its content. If you select one of the Velocity Page layouts then you get access to a full width layout with its own styling and formatting.
How to Begin Editing the Page: Rows and Columns
Once Velocity Page has been enabled for a page, the content of that page can only be edited from the frontend of your website by using Velocity Page.
When viewing the page through the frontend, logged in users see an ‘Edit’ button in the top right hand corner of the page, which when clicked enables the editing controls.
Like other page builder tools for WordPress, the layouts are based on the horizontal row and vertical columns system. Each time you add a new row, you can choose from a selection of column configurations for that row. With each page able to have multiple rows, each with multiple columns.
The editor gives you a quick way to see the options available for adding a new column structure to your row before making a decision. Although you can change the column layout that has been applied to a row by clicking on the ‘Change item type’ button, you can’t alter the columns’ widths.
Adding Items to the Page Layout
Then once you’ve added a row, with optional multiple columns, you can then add an item to the content areas or cells of that ‘table’.
With Velocity Page the items that are available to be added to your page include:
Any of these items, as well as anything else you add to a row or column on your layout can be moved around the page simply by dragging and dropping it, all from the frontend. The rows and columns can also be dragged around, making it very easy to adjust your layouts as you are building your page.
Editing text is also done in line with Velocity Page through the frontend. This is great as in some situations, you or the other contributors to your site no longer need to edit the pages from the WordPress admin area and use the backend page editor.
Editing Text In Line Through the Frontend
Entering or editing text is as simple as clicking on a layout cell and then starting to type. The text can also be formatted by highlighting it and using the text editing menu that is displayed.
From this menu you can do some basic formatting such as making the text bold, setting the alignment, inserting a link, or clearing any existing formatting. You don’t get the option to change the font or its colour, or set a paragraph style, such as a header, but you can insert a heading into a cell as a new item. By using the custom HTML item instead of just text, you could format the text yourself by adding CSS and HTML to it.
If you want to add an image to your page, then it’s just a case of adding the image item to a new cell and then picking an image to display.
There doesn’t seem to be a way to insert an image into a piece of text as you would with the regular WordPress page editor. You can work around this by inserting an image into a new cell and then dragging it into the text. Again you could also get around this by using the custom HTML item and then entering the HTML to insert the images and applying their styling.
Any items that have been added to the page can be picked up and moved around the cell they are in, or dragged to a new cell in another row or column. Other settings for the items can also be accessed such as its alignment in the cell, or applying a link, depending on the item type.
Using the Velocity Page Templates
The pricing option of Velocity Page I was testing currently comes with four landing page templates. The professional pricing plan gives you access to the premium velocity landing page templates.
Once you apply one of the templates to your page, and then open it for editing with Velocity Page through the frontend, you can see the layout and start making changes to it and adding your own content.
The four templates I had access to were all full width and height, taking up the whole of the browser window. This makes these templates ideal for creating landing pages and homepages.
Once one of the templates has been applied to a page, you can then begin editing the content in much the same way as you would when not using a template.
The Velocity Page plugin allows you to create and then edit those pages in WordPress through the frontend view, rather than via the page editor located in the WordPress backend admin area.
Any of the content that already exists on a page is unavailable once you enable Velocity Page for that page. Also, any content that is added to a page using Velocity Page isn’t available if you disable the tool for that page.
While you can add and edit text on the frontend of your site, using the in line editor, you don’t get access to the full functionality of the WordPress page editor, however you can insert the custom HTML item and then enter and format the text as you would when using the text view on the default WordPress page editor.
Hopefully you should now have a good idea of what you can do with Velocity Page and see how easy it is to use to create a new page layout in WordPress, all through the frontend, using a drag and drop in line editor.