YOOtheme Pro - Joomla Extension

Guide to Setting Up and Using YOOtheme Pro in Joomla

In Joomla, YOOtheme Pro is best thought of not as a simple visual editor for a single page, but as a working environment for your theme, output templates, modules, menus, styles, media, and dynamic content. This guide walks through the practical path after installation: what to check in the admin panel, which panels to open first, how to build a page, where to use templates, how to connect a layout to Joomla articles, and how to tell whether the final result actually works for visitors.

This article does not repeat the product's short description. Instead, it shows how to use YOOtheme Pro on a real site: from safe preparation and initial setup to dynamic templates, module positions, menus, search, media, speed checks, and troubleshooting common issues. Special attention is paid to the parts of Joomla you do not want to break: articles, categories, menus, permissions, languages, modules, and cache.

If you have already worked with standard Joomla templates, the biggest shift is in the logic. In a classic template, a lot is handled through positions, overrides, and CSS. In YOOtheme Pro, part of that work moves into the Customizer and Page Builder, but the Joomla structure still matters. The best results come not from manually designing every page from scratch, but from clearly separating pages, templates, and dynamic content by purpose.

This guide includes a practical example: building a service page with a hero section, benefit blocks, a list of articles from a category, a contact module, and a responsiveness check. That kind of example works well for most Joomla sites, including corporate websites, service catalogs, educational projects, blogs, portfolios, and knowledge bases.

What This Extension Actually Solves on a Joomla Site

YOOtheme Pro combines three tasks that Joomla often handles with separate tools: theme styling, visual page building, and management of reusable output templates. This does not replace standard Joomla articles, categories, menus, modules, or custom fields. In fact, the product is at its strongest when the data stays in Joomla and YOOtheme Pro controls how that data is presented on the page.

On a simple site, the product helps you quickly build a homepage, service sections, landing pages, a footer, a header, image blocks, and article grids. On a more complex site, it becomes especially useful for templates: you can define the layout for an article, category, search results page, or contact page once, then pull real Joomla fields into that finished layout. In that setup, the editor updates the title, image, text, tags, or custom fields, while the design stays consistent.

The main practical idea is not to turn every page into its own hand-crafted island. It is better to split content into three levels from the start:

• Unique pages where composition matters: the homepage, landing pages, service pages, and promotional sections.
• Standard content where a consistent structure matters: articles, news posts, reviews, item detail pages, and knowledge base entries.
• Global site areas: the header, footer, top and bottom positions, sidebars, menus, search, and language switcher.

YOOtheme Pro works well when you need to give editors visual freedom without losing structure. A page is built from sections, rows, columns, and elements. Modules can be displayed through positions, and templates can pull data from articles, categories, tags, users, files, and other sources. That makes the product a strong fit for sites that need both design flexibility and a solid content structure.

There are limits, though. If a project is built around a large standalone component with its own complex interface, such as booking, a real estate catalog, or an online store, YOOtheme Pro does not replace that component's business logic. It can style the surrounding layout, display a module, build landing pages, and sometimes connect a dynamic source through integrations, but calculations, orders, filters, payments, and specialized access rules should remain inside the dedicated extension.

Who YOOtheme Pro Fits Best, and When Another Approach Makes More Sense

This product is especially useful for people who want to build Joomla sites faster without moving into a fully closed site builder. In Joomla, articles, categories, menus, modules, languages, and permissions still matter. YOOtheme Pro sits on top of that logic and adds a visual layer that makes sense to both editors and designers.

Good-fit scenarios

The extension works well for corporate websites, service sites, moderately complex catalogs, blogs, media sections, portfolios, educational projects, and knowledge bases. One of its strongest use cases is a site where editors create articles in Joomla and the administrator configures the display template once. In that case, there is no need to copy the layout into every article, and the visual presentation stays consistent.

YOOtheme Pro is also convenient for agencies and freelancers who need to build different types of pages for clients quickly. The advantage is not just drag and drop. What really matters is the combination of a layout library, styling, media manager, modules, menus, templates, and dynamic content in a single interface.

When the product may not be the best choice

If the site has almost no custom design and only needs a standard blog with minimal changes, YOOtheme Pro may be more than you need. If the project requires deep development of a custom component, a complex external API integration, or unusual access-control logic, the product will not solve everything on its own either. In those cases, you can still keep it as the presentation layer, but you should not expect a visual builder to replace development work.

Another important factor is maintenance. If the team is not ready to follow clear rules about where to use Pages, Templates, Modules, and standard Joomla articles, the site quickly turns into a collection of similar hand-built pages. That is not a product flaw, it is a process problem. Before you begin, it is worth agreeing on which pages can be edited visually and which should live inside reusable templates.

Practical rule of thumb: if the same block needs to appear on dozens of pages, do not copy it by hand. Check whether the task can be handled with a template, module, position, section library, or dynamic source.

What to Check Before Installation and First Launch

Before installation, it is important to understand that YOOtheme Pro for Joomla is installed as a theme and is tightly connected to the template layer of the site. That means your review should cover not only extension compatibility, but also the current state of the site: the active template, user permissions, backups, PHP settings, cache, and content structure.

Create a backup and record the current template

Before replacing a theme or enabling a new template, create a backup of both the files and the database. This is a basic recommendation, but not just a formality. YOOtheme Pro can change the look of the site as soon as its template is assigned as the default, and users will notice that on a live site. If the site is already published, it is safer to test the product on a copy or in a separate template style assigned to only one menu item.

In Joomla, a template can be assigned not only globally, but also to specific menu items. Use that as a safety measure: first attach the new style to a test page, check the header, footer, modules, breadcrumbs, login form, search, and responsive behavior, and only then roll the changes out to the entire site.

Check the installation package

The official documentation warns separately that the demo site package cannot be installed into an existing Joomla site as if it were a regular theme. For an existing site, you need the YOOtheme Pro for Joomla theme ZIP file. The demo package is a full Joomla installation with demo content. If you mix up those files, the installation will either fail or send you down the wrong path.

Check PHP limits and file permissions

If installation or saving settings fails, the cause is often not the builder itself but server limits. ZIP upload requires sufficient upload and execution limits. Saving styles, cached images, and user files depends on proper directory and file permissions. In its official documentation, YOOtheme recommends a standard baseline for permission issues: directories should be readable and writable by the web server, but you do not need dangerous world-open permissions.

Do not start by editing code. First check whether standard Joomla extensions install correctly, whether files can be created in the images directory, whether cache clearing works, and whether the server is blocking writes to the template or media directories. If you do not have access to server settings, this part is better handled by your hosting provider or system administrator.

Limit access to the Customizer

YOOtheme Pro gives access to theme settings, layouts, and templates. That is not the same as ordinary text editing. The official documentation notes that access to the Customizer is tied to template editing permissions. On a live site, you should not leave that level of access open to every editor. Let content editors work with articles, and leave the visual structure to administrators or project managers.

Installation and the First Admin Check

At a high level, installation is similar to installing a Joomla template: upload the correct ZIP file, then assign the theme through template styles. But after installation, do not jump straight into building pages. It is better to follow a short validation path first. That helps catch issues before the site's appearance starts changing for visitors.

Quick post-installation route

1. Open the Joomla template list and make sure the theme appears among the available site templates.
2. Create or open a YOOtheme Pro template style, but do not assign it to the entire site right away if the project is already live.
3. Assign the style to a test menu item or a restricted page.
4. Open the YOOtheme entry in the admin panel and verify that the Customizer loads.
5. Change a harmless setting, such as a temporary style option or a test block, click Save, and confirm that the change is saved.
6. Open the public side of the site in a different browser or a private window and check whether unauthenticated visitors can see the change.

The last step is often skipped. As a result, the administrator sees the page in preview mode or with an authenticated session, while the visitor still sees the old cached version. With YOOtheme Pro, as with other visual tools, checking in a different browser is especially useful.

What to configure before building the first page

Before creating a full layout, open the Customizer and review the main panels: Layout, Style, Pages, Templates, Menu, Modules, and Settings. You do not have to change everything right away. The goal of the first session is to understand where the global settings live and where the actual Page Builder begins.

In Settings, it is worth checking the favicon, custom CSS, scripts, Consent Manager, external services, advanced settings, the system check, and the About section. Do not add third-party scripts unless you truly need them. If the site operates in a jurisdiction where cookie consent and external service controls matter, configure Consent Manager, script categories, and the consent settings link first.

Why saving a layout and saving the theme are different actions

In YOOtheme Pro, you need to distinguish between saving a page layout and saving global theme settings. In Page Builder, changing a layout shows save or discard controls for the layout itself. In the Customizer, changing the theme also requires saving. If you changed a page section but did not save the layout, the change will be lost. If you configured the header, style, or theme settings but closed the Customizer without saving, the global change will not be applied.

Result check: after the initial setup, open the page as a guest, clear Joomla cache if needed, and compare the result with the preview in the Customizer. If the view is different, do not keep building until you understand why.

Pages, Templates, and Dynamic Content Without Manual Copying

One of the key features of YOOtheme Pro is the distinction between an individual page and a template. An individual page is useful when the structure is unique. A template is needed when the same layout should apply to many articles, categories, search results, or other page types. Dynamic content is what connects those layouts to real Joomla data.

When to use Pages

The Pages panel is intended for individual page and article layouts. In Joomla, YOOtheme documentation distinguishes pages as uncategorized articles and posts as articles inside categories. That does not mean categorized articles cannot be opened in the builder. But for high-volume content, it is usually better not to create an individual layout for every single entry without a clear reason.

Use an individual layout for the homepage, service pages, event pages, promotional sections, team pages, or other complex informational blocks. Wherever each page needs to be unique, a visual layout makes sense. But if you publish news, articles, documentation, or item records, think about using a Template instead.

When to use Templates

YOOtheme Pro templates let you build a shared layout for page types. For example, you can create a template for a single article, a category page, search results, or a contact page. Inside the template, you place elements and then connect fields through dynamic content: title, image, text, author, tags, custom fields, and related sources.

This approach gives you two major advantages. First, the editor continues working with familiar Joomla fields. Second, design changes happen centrally. If you need to change the appearance of all knowledge base articles next month, you edit one template instead of dozens of pages.

How Dynamic Content works

Dynamic Content in YOOtheme Pro allows builder elements to pull data from a source. That source may be tied to the current page, a separate query, files, the site, a user, or a parent layout node. For elements with multiple items, such as Grid, Gallery, Slideshow, or List, the source can multiply the output: one card in the layout becomes a list of cards on the public page.

This is where mistakes are easy to make: you select a source but do not map the fields. For example, you add a Grid, choose a list of articles, but leave the demo text in the card title. In preview, everything looks like a layout, but Joomla data is not actually being used. The correct sequence is to choose the source, map the fields, check dynamic content status, open the public page, and confirm that the cards change when the Joomla articles change.

Validation chain for a dynamic block

1. Create or choose a Joomla category with several articles.
2. Make sure the articles contain the title, intro image, or custom fields you want to display.
3. In the builder, add an element that supports multiple items, such as Grid.
4. In Advanced, select Dynamic Content and the article source.
5. Map Title, Image, Content, Link, or other fields to the corresponding Joomla fields.
6. Save the layout and change one article in Joomla.
7. Check whether the output changed on the public side of the site.

If the block does not change, the problem is usually in one of three places: the wrong source is selected, the field is not mapped, or the page is showing an old cached version. In some cases, a selected custom field type may not be available as the expected source. If that happens, check the integration documentation for that field or use standard Joomla fields instead.

Joomla custom fields as the foundation of a structured site

For more complex sites, it is better to plan custom fields in advance. For example, a service catalog might use fields such as turnaround time, work format, starting price without a fixed promise, icon, short outcome, and form link. A knowledge base might use difficulty level, product, issue type, and estimated reading time. YOOtheme Pro can display those fields in a template, while the editor fills them out in Joomla without doing manual layout work.

This approach also makes the site more portable. Even if you change the visual layer someday, the articles and fields themselves remain in Joomla. That is an important difference from pages where all meaning is locked inside the builder layout alone.

Modules, Positions, Menus, and the Site Header

On a Joomla site, the areas around the main content matter just as much as the page itself. YOOtheme Pro integrates with Joomla Module Manager and provides a set of positions: toolbar, logo, navbar, header, dialog, mobile positions, sidebar, top, bottom, and builder positions. This becomes especially important on sites with a language switcher, search, navigation menus, contact forms, promo panels, and different mobile-specific areas.

How not to lose Joomla's module logic

In YOOtheme Pro, you can edit a module from the Modules panel without leaving the standard module manager. That is convenient, but it does not override Joomla rules: a module can be assigned to specific menu items, have its own access level and language, and be unpublished. If a module appears in the admin area but not on the site, do not rush to blame the builder. First check the module assignment, language, access level, position, and whether it is actually being rendered.

YOOtheme documentation points out separately that the sidebar position is not rendered on pages built with Page Builder, because the builder is designed for full-width sections. On that type of page, it is better to build the sidebar inside the layout or use a Position element. That is a common trap for people coming from classic Joomla templates.

Builder Module and builder-1 to builder-6 positions

Builder Module is useful when you need to create a complex block in a module position, such as a promo bar above the main content, an expanded footer, a form block at the bottom of the page, or a set of cards in the top position. The builder-1 to builder-6 positions are intended to be rendered through the Position element in Page Builder and do not automatically appear wherever you want in the theme.

A practical rule is this: if a block should live in a specific theme position and be assigned through Joomla, make it a module. If the block is part of a unique page layout, place it directly in the builder. If the block needs to be both reusable and manageable, use a module or a library of layout sections.

Menus, dropdowns, and mega menus

YOOtheme Pro lets you configure header, navbar, dialog, offcanvas, modal, and dropdown behavior. On large sites, mega menus and dropbars can be helpful, but they should be used carefully. An oversized menu can hurt navigation, overload the mobile view, and dilute your internal linking. A mega menu works best when the user genuinely needs to choose among groups of sections, such as service categories, a catalog, training, documentation, or support.

For the top menu level, YOOtheme Pro allows you to create dropdowns and mega menus through the builder. But that does not mean every page belongs there. A good menu answers the visitor's question about where to go next. A bad menu turns the header into a map of the entire database.

Mini checklist for menus

• Main sections should be understandable without opening a dropdown.
• The mobile menu should be checked separately, not treated as an automatic extension of the desktop version.
• On a multilingual site, the language switcher is best displayed through an appropriate Joomla module or a supported YOOtheme workflow.
• Search, cart, social links, and the login form should sit in the positions where users expect to find them.

Style, Media, and Performance: Settings You Should Not Skip

The visual result in YOOtheme Pro depends on more than Page Builder alone. A large part of the overall system lives in the Style Customizer, Files & Images, and Settings. This is where you control colors, fonts, UIkit components, images, responsive output, next-gen formats, lazy loading, custom CSS, system assets, cache, and external services.

Style Customizer: start with global variables, then fine-tune individual elements

The Style Customizer is built around UIkit. That means many buttons, cards, spacing values, headings, and components are connected to one another. If you start by tweaking each button one by one, the style quickly becomes inconsistent. It is better to begin with global colors, typography, and base sizing, then review buttons, cards, navigation, forms, and inverse backgrounds.

Use the UI component preview mode when you need to understand how the style behaves beyond the current page. This matters especially before launch: the current page may look fine, while forms, tables, cards, or dropdowns may end up with poor contrast.

Media: size, focal point, and cached images

YOOtheme Pro can automatically resize images and generate responsive image sets. But automation does not fix a poor source image. Upload images with enough size headroom, set Width and Height where it matters to avoid layout shifts, use Focal Point for cropping, and check how the image looks at different widths.

YOOtheme cached images are stored in a separate folder under media. If the site keeps showing an old image after you replace it, check Joomla cache, browser cache, your CDN if you use one, and the YOOtheme image cache. Do not delete random directories. Start with the built-in cache clearing tools in settings, and only move on to manual regeneration if you know exactly which files you are affecting.

Next-gen Images and Image URLs

The next-gen image setting can help reduce page weight, but it depends on server capabilities. The documentation states that AVIF is generated only with a suitable PHP version and AVIF support in GD. If the server does not meet those conditions, that does not mean YOOtheme Pro is broken. Check System Check, PHP modules, and the actual file output.

The Image URLs option helps preserve the same image URLs before and after cached files are generated, which is useful with page caching. If you enable aggressive caching or a CDN, test not only speed but also whether images update correctly after content changes.

Custom CSS without risking updates

For a small adjustment to a specific element, you can use the CSS field in that element's Advanced settings. YOOtheme documentation shows a special selector, .el-element, along with element-part selectors such as .el-title, .el-content, and .el-image. That is safer than writing broad CSS against random classes that could affect the entire site.

For example, if you want to highlight a warning block slightly inside one specific section, you can apply the change only to that element:

/* CSS inside Advanced -> CSS for the specific element */
.el-element {
  border-left: 4px solid #f2b705;
  padding-left: 18px;
}

.el-title {
  font-weight: 700;
}

Check a change like this on desktop and mobile, then save the layout and open the page as a guest. Rolling it back is simple: remove the CSS from the element field and save the layout. For global changes, it is better to use Custom CSS in settings or a child theme, especially if the change needs to survive updates and apply across many pages.

Practical Example: A Service Page with Dynamic Articles

Let us walk through a scenario that clearly shows what YOOtheme Pro does in Joomla: building a service page where the hero section and benefits are assembled manually, while the useful-articles block is pulled in from a Joomla category. That way, the editor can add new articles to the category and they will appear on the page automatically, without manually copying cards.

Goal

The objective is to create a page where the visitor immediately understands the service, sees the benefits, can move to related articles, and can submit an inquiry through a module. At the same time, the article block should update through a Joomla category, not through manual layout editing.

Preparation

Before building, create a test menu item, an article category, several published articles, and a form module or contact block. Fill in the article titles, intro images, and short intro text. If you use custom fields, populate them for at least two articles so you can test different states.

Steps in YOOtheme Pro

1. Open the Customizer and go to Pages, then select the test page.
2. Create a new layout and add a hero section with a heading, short text, button, and image.
3. Add a benefits section with three or four columns. Do not overload it with long text, this is a visual guide, not documentation.
4. Add a Grid for useful articles. In the Advanced settings, enable Dynamic Content and select the article source from the target category.
5. Map the card fields: title, image, intro text, or article link.
6. Add a Position element or form module where the visitor would naturally be ready to submit a request.
7. Save the layout, then edit one article in Joomla and check whether the card updates on the page.

Result check

Check the page in three modes: authenticated administrator, guest in another browser, and mobile width. Make sure the button points to the correct anchor or page, the images are not stretched, the Grid is not showing demo text, and the form module is accessible to guests if it is meant to be public.

If fewer cards appear than expected, check article publication status, category, language, access level, and the Dynamic Content source. If the form does not appear, check the module assignment, position, permissions, and whether the module renders outside YOOtheme.

A detail that often saves time

Do not mix everything into one section. The hero block, benefits, dynamic articles, and the form all follow different logic. If the dynamic block disappears because the category is empty, the rest of the page should still remain clean. That is where cascading collapse of empty elements and proper section separation helps.

Live Search, System Pages, and Result States

Live Search in YOOtheme Pro is a good example of a feature where visual configuration depends on standard Joomla logic. Search can show results in real time, but the results themselves depend on how Joomla Smart Search is configured, which articles are indexed, which filters are selected, and how the results template is built.

What to configure in Joomla

First make sure Smart Search works as a normal site feature: articles are indexed, search finds the expected pages, and filters are not excluding important content. YOOtheme documentation notes that Joomla may search for exact words by default. If you want results to appear as the user types, check the Word Match setting in Smart Search so the search behavior matches a live-search workflow.

What to configure in YOOtheme Pro

In YOOtheme Pro, you need to choose the search location in the header or mobile header, then create a Live Search template in Templates. This template works like the builder, but without sections. Results can be displayed through the Items page source and elements such as Grid. It is important to configure the states: before a query is entered, with results, and with no results.

A good live search does more than show a list. It tells the user what is happening. Before input, you can show a short hint. When results exist, display cards or links. When nothing is found, show a clear message and a path to the full search page or popular sections. If the site is multilingual, also verify the language of results and menus.

How to test search

• Enter an exact word from the title of a published article and check whether the result appears.
• Enter part of a word and confirm that the behavior matches your Smart Search settings.
• Enter a query with no results and make sure the template does not show an empty grid or demo text.
• Check the mobile header, because the live search template is used for both desktop and mobile scenarios.

Multilingual Sites, Permissions, and Editorial Workflows

On multilingual Joomla sites, YOOtheme Pro requires discipline. Joomla supports languages, articles, menus, and modules out of the box, but visual layout fields are not always translated the same way standard article text is. Because of that, it is better to plan translation after the layout is stable, not while the initial draft build is still in progress.

Multilingual pages and modules

The official documentation recommends saving the layout to the library, creating a separate page for each language, and importing the layout for translation. That is convenient, but it also means later layout changes have to be synchronized across languages manually unless you use a separate solution such as Falang. The same principle applies to modules: you create separate module versions and assign them to the needed language and position.

For multilingual menus, YOOtheme documentation specifically notes that menu positions are not the best universal mechanism. In practice, it is better to use Joomla Menu modules and publish them in positions such as navbar, dialog, navbar-mobile, dialog-mobile, or other suitable locations.

Editor permissions

Not every editor who can change text should also have access to theme settings. If someone is responsible for articles, let them work with articles, categories, custom fields, and media. If someone is responsible for presentation, they can be given builder access, but with rules: do not change global styles without approval, do not create individual layouts where a template should be used, and do not add third-party scripts without review.

Article versions as a safety net

YOOtheme Pro stores the layout inside the article, so standard Joomla versioning can be useful when rolling back changes. Before making major edits to a page, check whether article version storage is enabled. It does not replace a full site backup, but it can help restore a previous page version after an incorrect save.

Checking the Result Before Publishing

After configuring a page or template, do not stop at the visual preview. YOOtheme Pro has multiple layers, and each one can fail differently: the layout is saved but the public page is cached, the template is built but fields are not mapped, the module is published but not assigned to the menu, or the image looks fine on desktop but is cropped badly on mobile.

Verification checklist

• Open the page as a guest in another browser and compare it with the preview.
• Check desktop, tablet, and mobile widths using both device preview and a real browser.
• Edit a test Joomla article and confirm that the dynamic block updates.
• Clear Joomla cache if the public view does not match the saved layout.
• Check Dynamic Content status: a red indicator usually points to a source or field problem.
• Test empty states: a category with no articles, a missing image, a hidden module, or a user without access.
• Check accessibility: text contrast, keyboard focus, meaningful image alt text, and clear links.
• Check speed: image weight, lazy loading, next-gen formats, and unnecessary external scripts.

For SEO, what matters is not the presence of a builder, but the final page structure. Use meaningful headings, do not hide all text inside images, add internal links, and check canonical settings and indexability through standard Joomla tools and search engine tools. YOOtheme Pro can help with semantic HTML and a clean layout, but it does not replace content work.

Quick summary: a page is not truly finished when you click Save, but when you have checked the guest view, mobile version, dynamic data, modules, cache, and empty states.

How to Build an Editorial Process That Keeps the Site Stable

YOOtheme Pro has a trait that is both helpful and risky. It makes visual page building so accessible that an administrator can quickly create dozens of different layouts. That is convenient for a small site. On a project that will live for several years, the same approach without rules leads to inconsistent pages, lost blocks, uneven spacing, and difficult maintenance. That is why, before doing serious work, it helps to agree not only on design, but also on the editorial system.

Split responsibilities between Joomla and the builder

Joomla should store the core entities: articles, categories, tags, users, menus, modules, languages, and custom fields. YOOtheme Pro should handle the visual output of those entities, reusable layouts, page composition, and styling. If an editor needs to add a new knowledge base article, they should not copy an old layout and rewrite the text inside the builder. They should create an article, fill in the fields, select the category, and let the template display it in the correct format.

This separation is especially useful for sites with service catalogs, portfolios, teams, events, testimonials, guides, or directories. For example, if each service has fields such as "who it is for," "outcome," "timeline," "frequently asked questions," and "related articles," that data is better stored in custom fields and categories. The builder then stops being a place where text is stored and becomes a display layer that presents the data in a clean structure.

Create a library of reusable sections

In Page Builder, you can save sections and layouts to the library. Use that not as a warehouse of attractive blocks, but as an editorial standard. For example, the site may have a standard format for a service hero block, benefits block, "what's included" block, related articles block, form block, and warning block. When those sections are prepared in advance, the editor does not have to reinvent the visual style every time.

For each section, it helps to leave a short rule in the name: where it should be used, which fields can be changed, and what should not be touched. For example, a section named "Service hero - with CTA" might be used only on service pages, while "Article related grid - dynamic" should pull data from a category rather than contain manual cards. Even if the section names remain in English inside the interface, the internal process can still be documented separately for the team.

Define which pages can be edited manually

Not every page should live the same way. The homepage, promo pages, campaign pages, and complex landing pages can be individual layouts. Standard articles, news posts, directory entries, and catalog items are better handled through Templates. The footer, top bars, signup forms, language switchers, and reusable banners are better managed through Modules or Builder Module.

A good team rule: if one page repeats more than half of another page's structure, check Templates, the section library, or Dynamic Content first. An individual layout should be used only where a truly unique composition is required.

Plan empty states in advance

Dynamic blocks look great when data exists. But the site should remain clean even when a field is empty, a module is hidden, a category temporarily has no articles, or a user lacks access. YOOtheme Pro supports collapsing empty elements and dynamic conditions, but the administrator still needs to think through that scenario ahead of time.

For example, if an article has no image, the card should not display a broken-looking visual block. If a service has no related articles yet, the Grid section should collapse or show a clear fallback block. If live search finds nothing, the visitor should not see an empty grid, but a message such as "Nothing found" along with a path to the full search or site sections.

How to test changes before handing the system over to editors

Before giving editors a finished system, create several test articles: one fully populated, one without an image, one without a custom field, one hidden from guests, and one in another language if the site is multilingual. Then open the template and see what happens to the layout. That is far better than testing only with a perfect article.

Editors should also receive a simple guide: which fields are required, what image sizes are needed, which categories control output on pages, where to review the published result, and who to contact if the builder shows a red Dynamic Content status. A guide like that saves more time than a long training session covering every product feature.

When to use a child theme

A child theme is needed when a change must survive updates and goes beyond configuring a single element. That might include a custom CSS file, a local font, a template file override, or a custom builder element. A one-time adjustment to a card on a single page does not require a child theme. For a long-term style system used across the site, it is safer than scattered CSS fragments in different places.

YOOtheme documentation describes a straightforward approach: create a child folder next to the main theme, then select it in the Advanced settings. For CSS, you can use the custom.css file, and for JavaScript, custom.js. But only put there what truly belongs to the project-level setup. The less global code you add, the easier the site is to update and troubleshoot.

Common YOOtheme Pro Issues and Troubleshooting

Problems with YOOtheme Pro often look like builder errors, but the real cause may be Joomla permissions, caching, module assignments, server limits, dynamic sources, or third-party integrations. The best way to troubleshoot is from simple to complex: first check the guest view, then cache, then data sources, then permissions, and only after that look for extension conflicts.

Changes are visible to the administrator, but not to guests

Symptom: the page looks updated in the Customizer or in an authenticated browser, but another browser or a regular visitor still sees the old version.

Possible causes: Joomla cache, browser cache, CDN, a cached image version, an unsaved layout, or unsaved global theme settings.

What to check: whether the layout was saved, whether theme settings were saved, whether the correct template style is assigned, whether you are opening the same page, and whether Joomla cache was cleared. If page cache or a CDN is enabled, temporarily exclude the test page or clear the external cache.

How to fix it: save the changes, clear Joomla cache through System and Maintenance, and check the page in a private window. If the problem affects only images, clear the YOOtheme image cache through Advanced settings or wait for regeneration on the next request.

When to roll back: if clearing cache causes broken blocks to appear on the public page, restore the previous layout version or template style and investigate the changes on a copy of the site.

The builder does not open or does not save settings

Symptom: the Customizer freezes, the builder page does not open, saving ends with an error, or settings are not applied.

Possible causes: PHP server limits, file permission issues, an extension conflict, an expired Joomla session, security blocking, or invalid custom CSS/Less.

What to check: System Check in YOOtheme Pro, the Joomla error log, the hosting provider's PHP error log, permissions on the template and media directories, and whether a regular Joomla extension can be installed. If the issue appeared after a CSS or Less change, return to the modified Style Customizer component and reset the problematic value.

How to fix it: increase upload and execution limits through hosting, correct permissions, log out and back into Joomla, and temporarily disable the suspected extension on a test copy. Do not edit the Joomla core or YOOtheme Pro files directly.

The dynamic block shows demo text or empty output

Symptom: placeholders appear instead of Joomla articles, cards are empty, or fewer items appear than expected.

Possible causes: no source selected, fields not mapped, a single source selected instead of a multiple source, unpublished articles, the wrong category, language, or access level, or a custom field unsupported by the required integration.

What to check: the Dynamic Content source, mapping for each field, builder status icons, article publication, guest access, page language, and filters. For Grid, Gallery, and Slideshow, check Dynamic Content settings both at the element level and the items level.

How to fix it: reselect the source, remap Title, Content, Image, and Link, simplify the query to one category, and test the output with two sample articles. If the problem is tied to a custom field, check that field's documentation or replace it with a standard Joomla field.

The module is published, but it does not appear on the page

Symptom: the module exists in Joomla Module Manager and in the Modules panel, but it does not show on the public page.

Possible causes: the wrong position, a module assignment that does not include the current menu item, a different language, access level, empty module output, or the sidebar position on a page built with Page Builder.

What to check: the position, Menu Assignment, language, Access, publication status, and whether the module actually renders in a standard template or on a test page. If the page is built with the builder, keep the sidebar behavior in mind and use a Position element when output is needed inside the layout.

How to fix it: assign the module to the correct menu item, switch to a supported position, check language and access, insert a Position element into the builder, or use Builder Module for a more complex block.

Live Search shows the wrong results or nothing at all

Symptom: search opens, but the results are empty, appear too late, or show the wrong articles.

Possible causes: Smart Search has not indexed the content, word match is not configured for search-as-you-type behavior, the Live Search template is missing the Items source, or display conditions are hiding the required block.

What to check: standard Joomla search, the Smart Search index, the search filter in YOOtheme settings, the Live Search template, the No Search, Results, and No Results states, and the mobile header variant.

How to fix it: reindex content, configure Smart Search, simplify the Live Search template to a single Grid with an Items source, then add conditions and separate states one by one.

After styling changes, the view breaks or the Customizer reports a Less error

Symptom: some CSS does not apply, the Style Customizer shows an error, or certain components behave unpredictably.

Possible causes: an invalid variable value, a typo such as the wrong unit, special characters in Less, or a conflict in global CSS.

What to check: the most recently changed Style Customizer components, gray indicators for modified values, custom CSS, and the child theme's custom.css.

How to fix it: reset the specific changed value through its indicator in the Style Customizer, then run Recompile Style. If the issue appeared after manual CSS, temporarily remove the fragment and add rules back one at a time.

Helpful Video on Working with Page Builder

For a visual introduction to the interface, the official YOOtheme video on Page Builder for Joomla is useful. It helps answer questions such as "how to use YOOtheme Pro," "where sections, rows, and elements are located," and "how the builder logic is structured." The video does not replace this guide, but it does help you understand the interface and workflow more quickly.

Start by watching the overall Page Builder workflow, then come back to the sections on dynamic content, modules, and result validation. That makes it easier not to mix up unique pages, templates, and Joomla positions.

When YOOtheme Pro Is the Right Choice

YOOtheme Pro is a strong fit for Joomla projects that need a manageable visual layer, where pages, templates, dynamic content, modules, menus, header, footer, style, and media all need to work together. The product is especially powerful when articles and custom fields stay in Joomla, while the builder handles clear and repeatable presentation.

Before implementation, it is worth checking the installation package, backup status, access permissions, server limits, cache, System Check, and the guest view. After setup, do not stop at preview mode: test real articles, empty states, the mobile version, multilingual elements, modules, and load speed. That validation is what separates a clean working site from a beautiful draft inside the admin panel.

If the product fits your project after that workflow, you can move to the download section and download the ZIP package for safe testing on a site copy or a test template style. Start with one page, then move on to templates, and only assign the new visual layer to important sections after verification.