YOOtheme Pro is a versatile and powerful theme and page builder for WordPress and Joomla. It comes with advanced settings, pre-built layouts, and ready-to-use elements such as buttons, headlines, and overlays. It’s built on top of the UIkit front-end framework. In this review, we will take a closer look at the WordPress version of the YOOtheme Pro theme.
You can install YOOtheme Pro as a regular WordPress theme, however the YOOtheme team also created a demo package if you want to get started faster. The latter adopts the look and feel of YOOtheme’s demo site, including the settings and sample content. The demo package can help you understand what the theme is capable of.
The first thing you will notice after installation is that YOOtheme Pro doesn’t add any distraction to your dashboard. If you have used premium themes before you know that authors tend to add extra menus, panels, top bar buttons, advertisements, follow and like requests, and stuff like that to your admin area. No such things happen here. You can perform all settings and customizations right from the Customizer, which is the way how the WordPress team wants users to interact with themes.
So, you can access all theme settings from the Customizer (Appearance > Customize menu), which is a pretty convenient and user-friendly solution. The Customizer comes with a couple of default settings such as Site Identity, Menus, Widgets that you will find at the top of YOOtheme Pro’s settings as well. Below the default settings, it adds four extra panels to your Customizer:
- Layout – Here, you can set up the layout of dynamic elements such as the header, footer, sidebar, blog posts, etc.
- Style – Here, you can define the style (typography, colors, borders, etc.) of page elements, including pre-made components such as accordions, alerts, icons, and lightboxes.
- Builder – Here, you can build the layout of static pages such as the About and Contact pages.
- Settings – Here, you can configure global settings such as lazy loading, Google Analytics, syntax highlighting, favicon, touch icons, etc.
As the WordPress Customizer shows changes real-time, you can see the effect of each setting immediately and can return to the previous version if you don’t like it.
The page builder is YOOtheme Pro’s most powerful functionality. Not only because it allows you to design your pages using a drag-and-drop interface, but it also comes with tons of pre-designed elements you can add to your pages. You can access the page builder from the Builder panel inside the Customizer.
Note that YOOtheme Pro’s page builder is only available for pages that already exist, so you need to create an empty page before you start building its design. It’s also important to know that the page builder is only available for static pages but not for blog posts, shops, and other dynamically generated content pages. You can edit the design of blog posts from the Layout > Blog and Layout > Posts menus inside the Customizer.
You can open the page builder on any static page by navigating to the page you want to edit and clicking the Customize top bar menu first, then the Builder panel. Below, you can see how the page builder belonging to my About page looks like:
As you can see above, you can drag and drop sections and elements, add new sections, and change the design of any element within the page builder. And, as I mentioned before, you can see the changes real-time, on the right side of the Customizer.
YOOtheme Pro comes with three libraries of pre-made design elements with which you can build web pages that look professional and consistent. You can add them to your pages right from the page builder. The three libraries are the Style Library, Layout Library, and Elements Library.
Although there isn’t any particular way to use YOOtheme Pro, I think the most straightforward way to build your page is to first choose a style from the Style Library, then create/modify the page layout using the Layout Library, finally add the rest of the elements you need from the Elements Library. Unless you want to build your site from the ground up, which is also a viable option with YOOtheme Pro.
1. Style Library
You can find the Style Library inside the Style panel of the Customizer. The Style Library allows you to change the style of your whole website with a single click. You need to click the dropdown list on top of the Style panel to open up the Style Library. You can use four filters so that you can find the style that best fits your needs. You can search for style names, backgrounds (black, colored, dark, light, etc.), colors (beige, red, purple, etc.), and types (flat, material, skeuomorphic) using the filters.
In fact, having access to so many pre-designed styles is similar to having access to several different themes. However, here, you can use the same page builder interface with all the styles and you can keep your pages, layouts, and custom elements when you switch to a new style.
2. Layout Library
The Layout Library contains whole page layouts you can apply to any static page. You can open it by clicking the Library button on top of the Builder panel. The Layout Library has two tabs. My Layouts contain the layouts you built previously using the Page Builder and Pro Layouts contain the pre-designed layouts created by the YOOtheme team.
The Layout Library has really cool filtering options as well. You can filter the layouts based on page type (e.g. About, Contact, FAQ pages), topic (e.g. artist, creative, food&drink, travel), and site type (e.g. blog, business, magazine, personal). The fourth filter allows you to pick the layouts belonging to the pre-designed styles of the Style Library. You can add your chosen layout to any page with just a single click.
3. Elements Library
The Elements Library includes pre-designed elements you can insert to wherever you want on your page. It provides you with frequently used website elements such as lists, sliders, popover, slideshows, and countdowns. You can add the same elements to different pages so that they will look consistent across your whole site.
The Elements Library is a bit hidden within the settings, so you won’t see it at once when you open up the Customizer. You can access it from the Builder menu. The Elements Library appears whenever you want to add a new element to the page by clicking the plus icon inside the page builder.
After you added a new element to your page, you can easily customize its design—without any coding. Just click the new element and the Customizer will open the belonging Settings panel.
Each panel has three tabs: Content, Settings, and Advanced that let you modify the content, design, and CSS settings of the element. As you can add a class name to each element, you can also easily reuse the elements you configured previously. Below, you can see how the settings of the Button element look like:
Besides the page builder and the design libraries of customizable pre-built elements, YOOtheme Pro provides you with many other features as well. It has eight widget areas, you can add breakpoints for mobile devices, create a mobile header with a menu toggle, adjust the colors of any element, and more.
As YOOtheme Pro built on top of the UIkit framework, developers can also customize programmatically each element using the related LESS variables. The online documentation is detailed and skimmable, I quickly found every piece of information I looked for while creating this review.
YOOtheme Pro is definitely a strong contender among premium WordPress themes. UIkit gives it a solid foundation, so you don’t have to worry about its coding quality. The page builder has an intuitive interface and many customizable elements that can be easily used by designers who don’t want to code.
What I liked the most about YOOtheme Pro is its non-intrusive, distraction-free interface. It was also nice that I could have done everything right from the Customizer, without having to switch to an external page builder, which is a quite user-friendly way of building WordPress pages.