Introducing Fusion – a Flexible WordPress Page Builder

While the default WordPress editor is easy to use, it has limitations. It can cause frustration if you want to create flexible page layouts.

An alternative that can help is the five-star rated Fusion Page Builder plugin. With this plugin, you can create complex and responsive pages. Your pages may have a variety of different content types, as well as WordPress widgets.

In this blog post, I will walk you through how to use Fusion.

After you have installed and activated Fusion, you will find a new menu item under Settings. It is here that you can decide where to use the page builder.

By default, all pages and posts are selected and it enables bootstrap and a fluid grid. This final setting is very important if you want your page content to be responsive.

When adding a new page, you will be able to switch back to the default WordPress editor by clicking the Switch to Default Editor button:

The Fusion editor starts by presenting a full-width layout. The fluid grid is made up of twelve columns and you can choose to divide them as you wish.

The width controls – the vertical line – on each end of the 12/12 column allows you to reduce its width. So if you want to create two columns, you just move one divider in and then create a second column, like this:

Click on the three dots on the right of each column to manage the column’s layout with margins, padding, text alignment and background color.

Add more rows if you wish to have separate rows with a different number of columns in each. For instance, you can start with two columns of the same width, followed by a column split of 4/6 and then another full-width row:

Once you have set up the layout as you want it, save it as a template and then re-use it on other pages.

Within each column, add an ‘element’ that provides a block for whatever content you wish to present. By default, you have Add Rows, Text, Tabs, Code and Components.

Components are customised layouts you have created combining various rows and elements. These can then be reused across different pages.

Fusion offers varied other elements, but these are separate plugins. Initially, it feels a bit tedious to install all the plugins you want but it does prevent bloat with extra elements you don’t need or want.

Other elements available include:

• Gallery: a selection of layouts from full-width galleries, to galleries with thumbnails, to carousels
• Menu: insert a menu in stacked or inline formats
• Image: upload to Media and add an image
• Contact Form: add a Contact 7 form
• Button: insert a button linking to either internal or external content, eg: Sign up for our newsletter
• Blog: display a roll of all posts created on the site
• Map: embed a Google map
• Post Details: post title, author, post date, category, and tags
• Card: a set of information that can be reused and may contain fields for image, text, and a link pertaining to a single subject
• Sidebar: can contain a variety of WordPress widgets
• Divider: a divider that can be styled to suit your theme
• Tabs: a responsive way to present a large amount of information
• Video: embed YouTube, Vimeo, and other videos
• List: list items
• Copyright: add the year and copyright symbol
• Code: supports HTML, CSS, and some JavaScript code
• Comments: display a field for users to input comments.

I decided to install the Gallery, Divider, Image, Video and Map plugins.

With the Gallery element you can select one of the following layouts:

• Masthead
• Inline
• Carousel:

The Carousel option is a little confusing with its option of smart or hand-picked items, but this just means existing content or new content.

With the Video element you have the following three options:

• YouTube
• Vimeo
• Self-hosted:

The Text block provides a full editor with HTML and CSS control:

Quite quickly you can build up a page. If you change your mind about something you can drag and drop a column or elements to a different position, or expand/contract the size of a column.

I created a quick page with a gallery, text block and map. The desktop version automatically responded on mobile to stack the elements one below the other.

• Desktop:

• Mobile:

For production purposes, the ability to save layouts for reuse and duplicate elements makes page creation a lot quicker and more consistent.

Fusion has been tested on the most recent WordPress default themes, TwentySixteen, TwentyFifteen, and TwentyFourteen. On TwentySeventeen I had to remove the sidebar, but the fluid grid works well.

Fusion team also offers excellent documentation and is active on the support forum.

Conclusion

The Fusion plugin provides you great WordPress page building flexibility, even if you don’t know how to code. A great alternative to the current core editor.