YOOtheme Pro Website Builder – Create websites in no time

Today we want to introduce you to our groundbreaking new website builder. It will be the most important tool when it comes to website creation and will have a huge impact on the way you work as a web designer.

The new website builder splits the screen into a sidebar on the left and a real-time preview on the right with the actual website. It contains all the tools to manage the complete look and layout of your website. The concept is similar to the Warp 7 style customizer that many of you are familiar with, though it is much more powerful with all theme functionalities available in one place. It is a complete website builder that allows you to modify theme settings, pick logos and the site's favicon, build entire layouts and change your theme's appearance.

The little things

The website builder offers countless tools to make your life as a web designer easier. For example, you can play around with the theme settings, customize your website the way you want and see all modifications immediately in the preview on the right hand side. No more switching tabs and hitting the refresh button. Changes will only go live after pressing "Save" in the sidebar.

Settings you are currently modifying, e.g. layout sections, modules, style components and page elements, will be highlighted inside the preview, so you can see what you are customizing.

You can change the size of the preview window by simply clicking device buttons, so that you can easily check the responsive behavior of your site. The device size will remain activated while browsing through the different theme option panels.

Even CMS settings, like the module and menu managers, can be modified through the website builder. This is great, because you don't have to leave the theme administration and navigate somewhere else in the CMS.

The panels in detail

The website builder is separated into different panels, that you can hop back and forth between, without having to hit the "Save" button. This makes for a less cluttered and more intuitive workspace. The main sections are Layout, Style, Builder, Menus, Modules and Settings.

Layout

This section allows you to determine the general layout of your site. For example, you can pick your website's logo and switch between a fullwidth and a boxed page layout. Try out different header layouts and adjust the settings of the main navigation, search and dropdowns. Also, the mobile header is completely customizable. There are settings for the top, bottom and sidebar module sections available, like background images and the responsive behavior of the modules. Last but not least, there is a very powerful footer builder which works the same way as our new page builder.

Style

Here you can customize colors, fonts, margins and all other style related properties of your website. It is a full style customizer for our UIkit CSS framework. Each component has its own settings panel which makes the structure clear and easy to use. When hovering a component in the navigation, the real-time preview highlights elements that are using that component. And vice versa, if you hover an element in the preview, a tooltip will show you what style components are being used. We also integrated a developer mode, which loads a preview of the specific style component you are modifying. You will love the new interface.

Menus

The Menus panel allows you to manage menus and directly edit their items without leaving the website builder. Also, the days are gone when you had to publish a menu module in a designated position. Just pick the menu that you want to appear in the header navbar and on mobile devices.

Modules

Similar to Menus, the Modules panel lets you edit items without leaving the website builder. Modules will also be highlighted in the preview when you hover them in the sidebar list.

Settings

In this section you can set global options for your site. You can pick the favicon of your site and set system preferences. And the best thing, you can add custom CSS/LESS and JavaScript in designated fields, so that there is basically no need to touch theme files.

Builder

The page builder is the greatest innovation in our new framework. It allows you to create the layouts of sophisticated pages in a beautiful drag and drop interface. This advanced builder is the most powerful tool we are introducing, as we will highlight in the next blog post.

Faster than ever

Flexible layout settings, a powerful page builder and a new style customizer — these innovations will save you hours of work and allow you to build a new website in no time.

In our upcoming post we will go more into detail about our new page builder, which we are most excited about. So stay tuned while we draw steadily nearer to the release day.