Edit using Fusion Builder in the Avada WordPress theme

Active 0 Reply 149 Views 2017-12-26 17:27:05 Technology

ThemeFusion have updated Avada to Version 5.0. This update separates the Fusion builder to an individual plugin, instead of being incorporated with the plugin Fusion Core. Fusion Builder has been completely redesigned, and is very different from earlier versions.

When you are asked to do upgrade Avada BACKUP your entire site, including the early Fusion Core plugin, and be prepared to spend some time reorganising your pages, as they do not move over seamlessly.

If you have already done the Avada 5.0 upgrade and your pages are broken, get your hands on an earlier release of Avada. Using FTP go to the wp-content/themes folder and backup the new version. Then rename it, and FTP the earlier version. You should get the neater version of your pages back.

This post is for Version 2.0.3 or earlier.

Using the Avada theme

If you have the Avada theme on your WordPress install it is possible to use Fusion Builder to build your posts and pages, which is quite different from a standard page update.

Fusion Builder is a plugin developed by ThemeFusion, the developers of Avada, that enables a responsive layout within the theme.

It can be a little confusing for first timers.

I’ve written some instructions to help you edit pages or posts, using Fusion Builder within the Avada WordPress theme.

Always back up before making changes

Never update WordPress core, themes or plugins without first doing a full backup of the plugins, themes, uploads and database.

At any time an update can cause something else to break, and you need to be able to easily revert back or debug. I would recommend doing major updates on a development site, so that you can test it first.

Activate Avada’s Fusion Builder

First activate Fusion Builder on the page or post, using the blue button above the edit content area.

Activate Fusion Page Builder

If your web designer has already set the pages up, they may have already clicked the button. It will change the look of your content editor, as below.

Fusion Builder Activation

Using Avada’s Fusion Builder you can build responsive web pages.

How to edit pages using Fusion Builder

Log to your WordPress back end.

Go the pages or post, using the tabs on the left hand site, and then edit.

The Fusion Builder box should be at the top of your page editing screen. The buttons at the top are labelled ‘Column Options’, ‘Builder Elements’, ‘Custom Templates’ and ‘Pre-Built Templates’.

We are going to ignore Custom Templates and Pre-Build Templates for this post.

Get started

Fusion Builder Column options

Choose a Column Option when you want to split your page into columns. This inserts a column structure to your page, in which you then put Builder Elements. Column sizes and numbers can be changed later.

Once you a Column Option that option appears in the white space, below the options. To build your page think like you were putting a puzzle together.

If you have added a column of 5 x 6ths on the left, the only other option that will fit on the right is 1 x 6th.

You can drag one column from the left of the page, to the right of the page.

Click the minus button on any one column option decreases the amount of columns that element will take. The plus button is the exact opposite.

Fusion Builder Elements

Builder Elements can be added without first choosing a Column Option. The elements will be inserted on one row that spans across the whole of your page. These can then be dragged inside a column, if needed.

There is an array of Builder Element options in Avada. Let’s start with text. Once you have added your columns, as above, you may like to add a text block to a column.

Just click the Builder Element button, find TEXT and then click and drag it to your column.

Hover over the element, then click the paint brush icon that appears top right to add or edit text.

All elements can be edited in using the same edit icon.

Fusion Builder Add Text

Change the text, or the medium within the element, then click SAVE, the box will close.

Once that window closes, click the blue UPDATE button to save your changes.

Editing Content Boxes within Avada

Content Boxes are found under Builder Elements. These are useful as they are really flexible.

Within the one element ‘Content Boxes’ there can be several ‘child boxes’, or ‘Items’, which can be added by scrolling to the very bottom of the Content Box screen.

The main Content Box screen changes options for all child boxes, unless the ‘child’ has it’s own style.

Go to the edit screen for your Content Box, using the paint brush icon.

The options within Content Box, are as follows:

Parent / Child Settings

“Parent Level” settings will control all box styles together. “Child Level” settings will control each box style individually.

Content Box Layout

Select the layout for the content box

Number of Columns

Set the number of columns per row.

Content Alignment

Works with “Classic Icon With Title” and “Classic Icon On Side” layout options.

Title Size

Controls the size of the title. Leave blank for theme option selection. In pixels ex: 18px.

Title Font Color

Controls the color of the title font. Leave blank for theme option selection. ex: #000

Body Font Color

Controls the color of the body font. Leave blank for theme option selection. ex: #000

Content Box Background Color