Theme Settings

Manage theme settings, customize the style and build your page layouts all in one interface.

The first thing you see after opening YOOtheme Pro is an interface split into a sidebar on the left and a real-time preview on the right. The sidebar offers a navigation across the different setting panels of YOOtheme Pro.

Joomla YOOtheme Pro


The YOOtheme Pro settings are grouped into different panels. From the overview in the sidebar you can navigate inside each panel and into its sub-panels. There is a Back button to navigate up one level and the Close button to exit YOOtheme Pro.

All settings that apply to the website in general are theme settings. If one of those is changed, the live preview on the right updates, and a Save button appears at the top of the sidebar. As soon as you hit this button, all theme settings are saved and published.

Sidebar Panel Navigation

Note The content created with the YOOtheme Pro page builder has its own respective Save button and is not saved together with the theme settings. Learn more about it in the Page Builder documentation.

Panel Overview

Here is a short overview of all YOOtheme Pro setting panels and their content. There are also short video tutorial available, which will walk you through each panel.

Panel Description Video Tutorial
Layout This panel includes all layout related settings for the site & logo, header & navbar, mobile, module positions, blog & posts as well as the footer builder. Show
Style This panel contains the style customizer. Show
Builder This panel allows you to layout your pages with the page builder. Show
Menu Manage menus and their items quickly. Show
Modules Manage modules and their settings quickly. Show
Settings This panel includes global site options, custom code and 3rd party API tokens. Show

Responsive Testing Tools

Responsive testing tools can be found at the bottom of the sidebar. Use the device icons to check how your site will look on different device sizes.

Responsive Testing Tools

Show/Hide Sidebar

Close and open the sidebar by clicking the arrow icon to the left of the responsive testing tools. This is useful if you are using a smaller screen and want to check how your site will look on the full screen.

Show/Hide Sidebar

Adjust Sidebar Width

Adjust the width of the sidebar by dragging the icon to the right. This is useful if you are writing code or a lot of text in a textarea field.

Adjust Sidebar

YOOtheme Pro