Site & Logo

Choose a logo and customize the overall layout of the site.

The Logo is the brand identity of a website. By default, it is always displayed on the top left of each page. This can be changed by choosing a different header layout.

The following settings can be found in the Layout → Site panel of YOOtheme Pro.

Logo Text

Type in the Logo Text that will be used in case no Logo Image from your media library has been picked.

Logo Text

Logo Image

Upload your logo in the SVG file format for best quality on all screens. Alternatively, you can use PNG or JPG in a high resolution so that the logo looks sharp on all displays.

Set the width and height of your logo. Learn more how to resize and crop images in the Files and Images documentation.

WordPress Logo Image

Upload an Inverse Logo with inversed color, e.g. white, for better visibility on dark backgrounds. It will be displayed automatically if needed. Usually, the default logo is black on a transparent background, and the inverse logo is white on a transparent background. This way, a high contrast version of the logo, both on dark and light backgrounds in the theme, can be displayed.

WordPress Inverse Logo Setting

Note An example of where the inverse logo is used is a transparent navbar overlapping the first section of a website that has a dark background.

Select an optional Mobile Logo for the mobile header. It will replace the default logo on smaller screens. It's recommended to upload a simplified logo that leaves out unnecessary details to fit best on mobile devices.

WordPress Mobile Logo Setting


By default, the website expands to the Full Width of the browser window. This includes the background of all sections on your pages. But you can also choose a Boxed Page layout which will wrap all of your page content into a boxed container. By default, the background of the boxed page layout will show a solid color or gradient which depends on your chosen style.

Layout Setting Full Width

Boxed Page Layout

There are some additional settings for the boxed page layout.

Setting Description
Alignment Expand the content of the toolbar to the full width of the window.
Padding Center the toolbar so the toolbar-left and toolbar-right areas appear in the middle of the page.
Select Image Upload an image that will be displayed as a background of your page.

Layout Setting Boxed Page


The toolbar is only displayed when the toolbar-left or toolbar-right areas have anything to display on the current page. For example, social icons or the search might be configured to show in the toolbar. By default, the content of the toolbar is constrained to the default container width.

Setting Description
Full Width Expand the content of the toolbar to the full width of the window.
Center Center the toolbar so the toolbar-left and toolbar-right areas appear in the middle of the page.

Toolbar Setting

Note You can publish additional widgets in the toolbar areas.

Breadcrumbs are a navigational element for hierarchical page structures. By default, they are hidden. If Display the breadcrumb navigation is enabled, they will show up above the main content of a page, for example when looking at the Blog view.

Breadcrumbs Setting

This is a shortcut that publishes breadcrumbs on this position. You can also publish a breadcrumbs widget on any available widget area.

Note This setting won't display the breadcrumbs on static pages created with the YOOtheme Pro page builder. Instead, use the WordPress widget element to publish the breadcrumbs.

YOOtheme Pro