Our ambitious plans continue for 2016, the next major step is coming near and the excitement is building, literally! Avada 5.0 includes something incredible that has been worked on for a very long time and plays a vital role in site creation. The brand new Fusion Builder.
We at ThemeFusion strive for simplicity in our product, yet at the same time have the continued goal of making Avada fully customizable from the ground up without having to be a web developer. A huge part of this relies on ThemeFusion’s proprietary page builder called Fusion Builder.
The Fusion Builder gives you a drag and drop, WYSIWYG visual editing experience. It makes it easy to create beautiful, unique web pages or posts.
Over the years we have had several feature, functionality and improvement requests for Fusion Builder from our 520,803+ user base.
To make Fusion Builder into the page builder that everyone requests, and the codebase our team envisions, we were required to be build it new from the ground up. This was a decision made back in 2015 and has been worked on by a portion of our team for a long time, and now the entire team is focusing on it to ensure it’s ready for our next major update, Avada 5.0.
We are extremely excited to bring you months and months of work that we feel has yielded the best page builder on the market!
When Fusion Builder releases with Avada 5.0, it will be its own separate plugin. First it will only be included with Avada only, but eventually it will be sold as its own stand alone product.
Please Note: While we are about to enter the beta phase, please note that some images you see below may change before the final release.
The New Fusion Builder
The new Fusion Builder was built with performance, ease of use, extendibility and modularity in mind. This is not only a page builder, it is going to serve as the backbone of many new products. Built with backbone.js, it is ridiculously fast, efficient and extremely fun to use.
Everything has been re-envisioned from top to bottom to ensure easy site building that is intuitive and extremely fast.
Oh and don’t worry, all of your previous pages and posts built with the current Fusion Builder will be converted over to the new Fusion Builder upon updating to Avada 5.0!
Read below for a portion of our favorite highlights and previews of what the new Fusion Builder will include. This is only a sample of what truly lies under the hood of Fusion Builder.
Entirely Re-Built Codebase From Top To Bottom
Fusion Builder has been completely re-built from the ground up. This includes the backend code to the all important user interface. While time consuming, this has allowed us to do whatever we want with it now, and into the future.
The speed at which it operates is a minimum 10x faster than its predecessor. One of the main goals for the codebase was to ensure it is built for speed, regardless of the overall page size.
The beneficial speed enhancements and squeaky clean codebase are highly important, but the user interface is what truly makes this into the best builder on the market. The user interface is the means by which you interact and use a digital product. It can make or break its success.
Our team has spent countless hours making sure every little detail of the user interface from the overall layout, to the controls, to the option editing is perfect.
And this is only the beginning.
The first version to release is purely a back-end builder because we know that our 520,803+ customers are diverse. Many customers want backend editing only, and many want front end editing. The good news is Fusion Builder will have both! The magical codebase that runs it was built in such a way that it’s ready for anything we throw at it.
A front end version of the new Fusion Builder is already in the design phase and will quickly be in development after Avada 5.0 is released. In addition, Fusion Builder will not only be for Avada users, it will eventually by available for any WordPress theme.
Intuitive User Interface
The problem with most page builders is that you do not get enough room to build the page by being forced to edit within a sidebar of options, or the interface is so complicated that it takes several clicks to do one simple thing, or it is just so bad it makes you want to scream and smash your computer screen.
User interfaces can make or break a product, and we spent a lot of time making sure we got ours right. Below is a quick preview of a basic layout with no content added but containers and columns. Please click to enlarge the image.
The first thing you will notice is that the new Fusion Builder looks fairly different from the old one, besides some similarities in column box controls. There is no longer a top control bar with columns / elements / pre built page tabs. While this may make some of you surprised and ask, “Why in the world did you do that?”. The answer is simple, it is no longer needed!
The new interface allows you to add anything, anywhere, anytime.
The new interface and process allows us to do things we simply could not do before. We take usability very seriously and have come up with a new system that we feel you will absolutely love.
We’ve even created a “start” page when building a new page or post that helps you get started. Below is an example of what you will see when starting a new page or post.
We’ve done a lot of research and worked tirelessly on the new user interface for Fusion Builder making sure every detail is perfected for usability. Most builders, including our current Fusion Builder require you to drag and drop elements from a static top bar. They also require extra clicks to do something that can be done with less.
The new Fusion Builder cuts through all these problems and provides a clean and simple interface that allows you to quickly build pages even if you’ve never used a page builder before.
The hard work has definitely paid off with an interface that allows you to add anything, anywhere at anytime while building your page.
The below screenshot shows you a quick glimpse into this process. It is a column box in the middle of an entire page layout. Yet you can quickly see that you can easily add a new element, entire container or set of columns anywhere you are at on the page. This is a major time saver and will change the way you view Fusion Builder.
The areas you see for + Container, + Column and + Elements are activation buttons that bring up modal windows for you to quickly select the item you wish to insert.
For example, when you click + Element you are presented with a popup window to choose any pre-built element or any custom element you have created (we will get into custom content later).
It’s important to note that the we are now calling full width containers only containers, however they still act as they always have. This was a simple name change we felt was needed. With the way the new Fusion Builder works, it is always necessary for content to go inside of a container.
The process of building a page is Containers > Columns > Elements … you add containers first, then inside of containers go columns and inside of columns go elements (shortcodes). This is the process for page building and the proper way to do it so it can be used with any theme in the future. The user interface is built in such a way that makes this process easy and fullproof!
This is just a taste of the new user interface and only shows you a glimpse of what can be done. You really only truly understand the benefits of it once you start to use it, and we are extremely excited for when that time comes.
Fusion Builder Library & Custom Content
One of our top feature requests over the past 2 years has been the ability to save your own custom content. The new Fusion Builder will not disappoint in this area. We’ve added an entire “Library” section that allows you to manage all types of saved content. As you can see below, the Library button is always visible in the main control bar that sits above all content.
When the Library button is clicked, it opens up a popup window that holds all various types of custom and pre-built content. The pre-built content is made up of our Avada demo pages (yes you can import individual pages from each demo which we will get into later!), the custom content is any content you save in your own layouts.
The Library function allows you to save any type of custom content such as entire page layouts, containers, columns or elements. Every item you see on the page has a save icon to click. Once the saved icon is clicked, you name it and it is added into the library.
Anything in the Library can be easily reused at anytime. Below is a screenshot of the Library window with custom containers we have saved.
As you can see, the Library is organized into various sections through a main tab control bar up top. This control bar is familiar and used throughout the new Fusion Builder for a consistent user experience.
Another important feature to note is when you save your own page template, we provide you with options to manage them by editing or deleting the template. That alone is a great feature, but we also provide options for how the template loads on the page.
Often times you may already have a page started but want to add a different custom template you have created to save time. Fusion Builder allows you to choose how the content is added to the page by giving you 3 options; Replace All Content, Insert Above Current Content and Insert Below Current Content. The below screenshot shows you these options.
The library is perfectly organized to match the overall functionality of the Fusion Builder. The process of how this works is exciting and truly changes how you will use Fusion Builder to create pages and posts.
This extremely important feature will give you tons of time back since you can save any type of content you build, and reuse it at anytime.
Sharing is Caring
With the amazing tools the new Fusion Builder offers, we believe content created with it should easily be able to be shared between customers, clients, etc. The Library saves all your custom content into corresponding sections, and we’ve built an import/export feature that allows you to export all of your saved content, and then import it in another installation.
Not only can you export the content, you can export each type of custom content individually. For example, if you only need to export your saved containers, you can export your saved containers and share that with someone else. Or if you wish, you can export everything at once.
Building custom content through containers, columns, elements or entire pages and being able to share that content with other users is a big advancement for all Fusion Builder customers. The possibilities are endless.
Main Control Bar Is Always Visible
We’ve mentioned the top control bar has had a drastic design change, there are no longer different tabbed sections with column, elements, etc to drag and drop onto the page.
The new control bar is much smaller, yet does so much more. Due to this change, the main control bar can be constantly fixed on the screen so it’s always visible no matter if you are at the top, middle or bottom of the page.
This allows you to always have the main controls to use directly in front of you which eliminates the need to scroll back up top to do an action. This is a major time saver.
The screenshot below shows this in action. Take a look on the right side for the browser scrollbar. This is a very large layout and the current location is halfway down the page, yet the main control bar sticks to the top of the screen so you can always access it.
The main control bar is special in what it allows you to do. First off the builder page is always active, but has controls to access the library, collapse all sections at once, add custom css to the page, save the entire page as a template, delete all content, and control history states. All of this is uniquely setup in one single bar that allows you to quickly use each feature.
History State Control
While we’re talking about the main control bar, one of the most useful features on it is the “History States” icon. In most builders, you can go back or forth in your history states one at a time with a back arrow or a forward arrow. The new Fusion Builder has one history button that shows you a dropdown list of your last 30 actions so you can quickly jump back several states with one click.
This addition allows you to not only go back in time, but leap back in time with a single click. the history state icon opens a dropdown box on hover and shows you the names of each action taken, so you can quickly and easily identify what state you need to return to. It’s awesome!
Custom CSS Per Page
A big request from our customer base has been to provide them with a way to insert custom CSS per page. Fusion Theme Options has a custom CSS field that will apply globally to every page or post, but the new Fusion Builder has a feature that allows you to apply CSS to a specific page only. Here is an example of what you will see.
The main control bar has an icon that toggles the entire css field up and down. Any CSS entered into this field will only apply to that one page. It is always accessible with the sticky control bar and when you save a page template, the CSS will be saved with it.
Since the CSS is saved with the page template, it will also be imported to new pages when you start from a custom page template. If the page already has custom CSS, then the new CSS is appended to the existing CSS when you load a custom template on it.
Import Any Page From Any Demo
Yes you read that correctly! The new Fusion Builder allows you to import any single page from any Avada demo with just a few clicks. We are often asked by our customer base something like this …
“How do I use the Travel demo, but with the Cafe demo Contact us page?”.
Well, now you can very easily! Everything is saved and managed in the Fusion Builder Library, and for Avada users this also means single pages from all Avada demos.
Simply open the Library window and select the Demo tab, find the demo you want from the dropdown menu, and you will be presented with a full list of each page that demo contains. Find the page you want and click the load button … voila! Below shows you an example of the demo section in the Library window.
This is a very cool feature and makes it easy to mix and match any Avada demo layouts.
If you want the full demo with all the pages, posts, fusion theme options, fusion page options, widgets, post types, etc (everything!) you will need to import the full demo from our Avada > Demos section. However, if you only need a single page from any of the demos, Fusion Builder is the way to go.
It is important to note that when you import a single page from a demo through the Fusion Builder, it gives you the page layout, page template from the page attributes box, fusion page options and image placeholders for the images.
This is done for technical and usability reasons. For example, Fusion Theme Options cannot import for a single page or those options would be applied to your entire site and override your current theme options.
The purpose of the single demo page import is to get the layout structure, along with page template and Fusion page Options. The purpose of importing a full demo from Avada > Demos is to get everything.
Did someone say “nested columns”? Yes that’s right, we did. Nested columns have been a big request from the designers who use Avada. Nested columns allow you to insert more columns inside of other columns.
While that may not seem important, it opens up an entirely new world of design opportunities for page creation. For example, you can now have a 1/3 column on the left, a 2/3 column on the right that has a nested set of columns inside. This allows you to produce layouts like what you see below.
Notice how the 1/3 column on the left goes the full height of the several columns on the right. And the columns on the right have one main 2/3 column at the top, then a set of 1/3 columns below. The possibilities with nested columns are virtually endless. By the way, that design example above is from a new Avada demo that is being created.
To access the nested columns, click the + Element button inside of any column, the popup window will display. At the top are 3 tabs; Elements (these are our pre-built shortcodes), Library Elements (these are your custom saved elements), and Nested Columns. The nested columns tab also shows a set of pre-built column combinations to save you time. Below is a screenshot for how they look inside the new Fusion Builder.
More Incredible Features That Make This The Best Page Builder
We are only highlighting a few of the major features, but wanted to also give you a glimpse into many of the other amazing features that we’ve built into the new Fusion Builder.
Containers can now be custom named. Simply click on the name “Containers” and you can start typing a new name directly on the page. This allows you to easily identify what that section is, which is very helpful on large pages with several containers. Each container can also be collapsed with a single click. This is extremely useful for saving screen real estate.
The collapse option paired with custom container naming saves a lot of time and keeps everything organized and clean. Oh, and the main control bar offers an option to “collapse all” containers on a single page at one time. This is extremely useful for reorganizing page content. Collapse all sections on the page, then simply drag and drop different containers into your desired place. Boom!
Column resizing is no longer done with a + and – icon, just like history states, column resizing has a popup box that allows you to choose any size column we offer with a single click. There is no longer a need to click the + button several times to make a 1/6 column into a 1/1 column. Major time saver.
Elements that contain child elements, for example Tabs, have an entirley new user interface that is much easier to use. Each child element can now be reorganized into position via drag and drop. For example, if you have a tab element on your page and it contains 3 different tab sections, you can now easily drag and drop all 3 into your desired order.
And each child element is custom named based off the content you enter, so it’s very easy to know which child element it is. This new feature applies to any element that offers child items (tabs, content boxes, toggles, checklist, counter circles & boxes, etc.)
In addition, we now offer full sets of pre-built column combinations when adding both containers and columns to the page, including nested columns. Avada allows for up to 6 columns, so the pre-built column combinations are a big time saver when building your page. Simply click + Container or + Column buttons and you are presented with pre-built column combinations and your custom saved combinations to quickly insert with a single click.
The new Fusion Builder comes with a set of global options that allow you to enable or disable any element. If you are not using the toggle element, simply disable it and it is gone. These global options also hold the import and export feature for all your custom content.
Lastly a huge request has been to allow Fusion Builder to be used on custom post types. In the global settings area, you can easily enable or disable Fusion Builder for any registered post type. Each post type will get a check box to click so you can quickly manage if the Fusion Builder is used on them or not.
There are many more things that make the new Fusion Builder simply amazing, and we are extremely excited to bring this new product to our Avada customers first, then to the rest of the theme market.
Future Plans for Fusion Builder
Fusion Builder 1.0 is simply the beginning of an amazing product that is going to continue and get better and better. One of our main goals was to create it in such a way that it’s modular and extendible.
There will be entire sets of add ons that you can use with Fusion Builder. We are already working with 3rd party developers to start and build an add on library. While this may take time, and only come to fruition once Fusion Builder is released as a stand alone product, the benefit for what this will do for our customers is simply amazing.
Any developer who wishes to take part in the major Avada ecosystem will now be able to by creating new add ons for the Fusion Builder. The possibilities are endless.
Future plans for Fusion Builder are solidified. The initial release is for our Avada customers, but that is only the beginning and our team is thrilled and extremely excited about continued development of this product.
Avada 4.0 brought us the new Fusion Theme Options Panel with a user interface that our customers love and saves a lot of time while building a site. Avada 5.0 that includes the new Fusion Builder shines in this area as well and makes everything easier, faster and more efficient.
We’re very excited to be bringing you the new Fusion Builder, it contains months and months of development, blood sweat and tears. But the new Fusion Builder is not all, Avada 5.0 includes several other features and improvements that make your life easier. And this truly is only the beginning.
Please note, the current version is Avada 5.9.1