Using The Fusion Builder Live Wireframe

05/08/2019

A very useful new feature in the new Fusion builder live Editor is making the wireframe editor also accessible while editing on the front end. If at any point in your editing process, you want to see the wireframe and/or temporarily edit using the back-end editor while still being in the front-end editor, you are in luck. Watch the video, or read on to see how this feature works…

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

How To Access The Wireframe

When you are in the Fusion Builder Live Editor, you will see the Wireframe Toggle icon in the Toolbar at the top of the page. It is the third one on the right-hand side, as seen in the image below. Click on this to view the wireframe, in place of the live content. Just note that headers, footers, and sliders, etc will remain in live view, as these are not created in the page builder.

Avada Live - Toggle Wireframe

Using The Wireframe

Apart from being useful to orient yourself, as you transition from back-end to front-end editing, you can also edit your page in this hybrid mode, just as you would with the back-end editor, but just from within the front-end interface. You can do everything you can in the back-end editor, from creating, moving and naming containers, through to full editing of their contents. It truly is the best of both worlds.

Editing Elements Using The Wireframe

Once you have the wireframe open, editing an element opens the Element Options panel in the Sidebar. This panel has identical contents as when you are editing elements in the back-end. Simply make your changes you can save your changes to the page at any time by clicking the Save Button at the top right on the Toolbar.

Avada Live - Editing in the Wireframe

To exit the wireframe view, just click on the wireframe icon once more, and you will be returned to the standard workspace in the Fusion Builder Live Editor.