YOOtheme Yard - Joomla Template

A Guide to Setting Up and Using YOOtheme Yard in Practice

YOOtheme Yard is not a standalone "ready-made website" that you can simply enable and forget about. It is a Joomla template built on YOOtheme Pro, so its strengths really show after a careful installation, the right demo strategy, style tuning, menu and module position setup, and a final check of how everything works on the live front end.

This guide explains how to approach Yard as a practical starter kit for an architecture firm, interior design studio, real estate developer, property agency, or project portfolio site. It does not repeat the short product description from the listing page. Instead, it shows what to verify before installation, how not to confuse the standard template package with the demo package, where to find the key YOOtheme Pro settings, and how to tell when the site is actually ready for real content.

Special attention is given to the areas where Joomla site owners most often run into trouble: assigning template styles to menu items, displaying modules in positions, adapting demo structure to real content, working with images, localization, editor permissions, and diagnosing situations where the final site does not match the demo.

Where Yard Is Especially Useful and Where It May Be the Wrong Fit

The official product page positions Yard for Home & Living websites: real estate, interiors, architecture, projects, team pages, and contact pages. That is an important reference point. This template does more than just change the Joomla header and colors. It sets the editorial rhythm of the site: large project photography, restrained navigation, project cards, case study pages, team sections, and a filterable portfolio.

YOOtheme Yard works especially well when a site needs to build trust through visual proof. For an architecture studio, that might mean completed projects and the people behind them. For a developer, it could be residential complexes, floor plans, and contact forms. For an interior design firm, it might be a curated body of work, a process page, and dedicated case studies. For a real estate agency, it can serve as a property showcase, a structured project catalog, and a polished presentation of the office.

The core practical idea: do not try to force Yard into being a generic corporate template for any niche. Its composition, photography, dark contrast blocks, subtle accent colors, and generous white space work best when project imagery matters more than long-form text.

Who this template is a good fit for

• A site owner who wants a strong visual starting point without designing everything from scratch.
• A webmaster who already understands Joomla and wants to assemble the site structure from ready-made pages, then adapt it to real content.
• An agency building sites for architecture, real estate, interiors, construction, or service portfolios.
• An editorial team that needs to present projects in a consistent style without breaking the visual system every time a new case study is added.

When it makes more sense to choose something else

Yard may be overkill if you need an almost empty technical template with no page builder, a strict product catalog, a complex member area, a site with many user roles, or a project whose entire visual identity must be designed from the ground up. YOOtheme Pro is flexible, but that flexibility requires discipline: you need to keep styles, sections, media, module assignments, and access permissions under control.

If the team is not ready to work with a visual builder and prefers the classic "Joomla article plus output template" workflow, decide early which pages will be built in Builder and which will remain standard content items. Otherwise, a few months later the site can turn into a mix of repetitive demo blocks, random modules, and manual tweaks that are hard to maintain.

What the Sources Actually Confirm About YOOtheme Yard

Before configuration, it is important to separate facts about Yard itself from the broader capabilities of YOOtheme Pro. The official Yard product page confirms that the template is built on YOOtheme Pro, designed for the Home & Living niche, includes ready-made pages, styles, and an image set, and that the Joomla demo package is delivered as a full Joomla installation with YOOtheme Pro and demo content. It also states that the Yard Joomla demo package does not rely on third-party plugins.

The official YOOtheme blog explains Yard's visual logic in more detail: a refined business style, two base colors with small bright accents, decorative patterns, a Projects portfolio with a Masonry Grid and filter, and pages such as Home, Projects, Case Study, Residences, About, People, Person, and Contact. These details matter not as marketing copy, but as the basis for structuring a practical real-world website.

The YOOtheme Pro documentation for Joomla explains how the template works inside the CMS: the Customizer opens from the Joomla admin panel, and settings are divided into Layout, Style, Pages, Templates, Menu, Modules, and Settings. Separate documentation pages confirm installation methods, demo packages, template styles, modules and positions, the page builder, fonts, images, languages, child themes, and common installation issues.

Practical takeaway: it is better to verify exact numbers, pricing, and versions against the current product page and changelog before installation, and to build your working site plan around stable mechanisms like the demo package, Builder, styles, modules, template styles, language overrides, and a child theme for safe customizations.

What not to carry into public-facing content without verification

Third-party listings sometimes mention versions, compatibility, license types, and expanded lists of supported components. That information can become outdated faster than the template itself, so it should be used carefully in a guide. If you need to make a technical decision, check the official YOOtheme Pro changelog, Joomla requirements, and your hosting requirements, not just the description on a catalog page.

Preparation Before Installation: Do Not Start With the Download Button

The most common mistake with Joomla templates built on page builders is installing the archive on a live site and then trying to figure out why the demo does not look like the screenshot. Yard has two different workflows: installing the YOOtheme Pro theme package on an existing site, or deploying the demo package as a complete Joomla installation with demo content. These scenarios should not be mixed.

Choose your installation scenario

If you already have a working site with content, menus, languages, and modules, it is safer to install the template into the existing Joomla site and then load the required layout pages from the YOOtheme Pro library. This preserves your site structure instead of replacing the whole installation. If you are starting a new project, the demo package is more convenient: it shows how the pages, styles, and images are put together and gives you a ready-made reference structure to learn from.

The demo package is not a regular extension meant to be installed on top of an existing site. It must be deployed as a full Joomla installation. If you upload that archive into the extension installer of an existing site, the result will be incorrect or unpredictable.

Check whether the site is technically ready

• Compare the YOOtheme Pro and Joomla requirements with your hosting environment: PHP, the GD extension, upload limits, and memory limits.
• Make sure you have a backup of both files and the database before replacing the template or importing demo structure.
• Check permissions for the directories where Joomla and YOOtheme Pro will save CSS, image cache, media, and settings.
• Decide who should have access to Builder and template settings. Do not grant template editing rights to all content editors unless there is a real need.
• Prepare real project photography in advance. Yard is built around large images, and weak visuals will immediately reduce the template's impact.

Map out the future site

Before installation, write down the future menu items: home, projects, an individual project page, services, team, contacts, and possibly a blog or news section. Then map them to Yard's ready-made layout pages. You do not need to transfer every demo page. For example, if you do not have dedicated staff profile pages, do not create them just to resemble the demo. It is better to keep the structure shorter and fill it with real material.

At this stage, it also helps to decide which pages will be managed through the YOOtheme Pro Builder and which will remain regular Joomla content using site-wide templates. Builder works well for visually driven landing pages. For large flows of articles, news, or knowledge-base content, Joomla articles with separate output templates are often the better choice.

Installation and the First Joomla Check

Installing Yard depends on the package you choose. The YOOtheme Pro theme package is installed into an existing site, while the demo package is deployed as a new Joomla installation. After installation, do not go straight to colors and images. First confirm that Joomla sees the template, Builder opens correctly, settings can be saved, and the public-facing site does not show errors.

Installing into an existing site

1. Back up the site and database.
2. Open the Joomla admin extension installer and upload the YOOtheme Pro theme package intended for Joomla.
3. After installation, go to the list of template styles and set the YOOtheme style as default only after testing it on a dedicated menu item or a copy of the site.
4. Open the YOOtheme item in the admin panel and confirm that the Customizer launches, the settings panel appears on the left, and the live preview loads on the right.
5. Save a small change, such as a test site title or favicon setting, then undo it or restore the previous value.

If the change does not save, do not continue with configuration. First check file permissions, hosting limits, and error messages. YOOtheme Pro stores some data and generated files in the file system, so permission issues may show up not during installation itself, but when you try to save settings.

Deploying the demo package

The demo package is convenient for a new site or a staging environment. It must be unpacked into the web server directory and installed through the standard Joomla setup process. After that, you get a site where Yard's structure is already visible: pages, images, modules, and styles are linked together.

This kind of staging site is useful even if you already have a live site. Open the demo alongside your working Joomla installation and use it as a training reference: which sections appear on the homepage, how the project pages are structured, how the portfolio filtering works, where the contact information lives, and how the team section is presented. Then transfer only the solutions that actually fit your project instead of copying the entire demo site.

Initial checks after enabling it

• Open the homepage on the public front end and make sure there is no blank screen, no PHP warnings, and no broken layout.
• Check a page that is not built with Builder, such as a standard Joomla article, to see how the template renders system content.
• Open the Customizer and verify the Save, Cancel, and device preview controls.
• Create a test menu item and assign it a separate template style to confirm that the binding works.
• Clear the Joomla cache and any external site cache if optimization is enabled, then reopen the page in a private browser window.

The YOOtheme Pro Panel: Where to Go After Installation

The Customizer is Yard's working hub. It does not replace the entire Joomla admin panel, but it brings together appearance settings, Builder, menus, modules, page templates, and YOOtheme Pro system options. After installation, do not move through it mechanically from top to bottom. Go through it based on the actual needs of the site.

The Layout section: the site's structural framework

Start with Layout, because this is where the framework is defined: site and logo, header, navigation, mobile header, top and bottom positions, sidebar, blog, article, and footer. This matters especially for Yard, because the demo looks clean precisely because the header, large sections, and white space function as one system.

Do not start by fine-tuning fonts if the site still has no clear decision on where the logo goes, where the menu goes, whether a top toolbar is needed, which modules should appear in the header, and how the footer will differ across language versions. First the structure, then the styling.

The Style section: Yard's visual character

Yard officially includes several style variations. Choosing one changes the overall mood of the site: lighter, higher contrast, a different accent, or a darker presentation. Choose the style based not on personal taste, but on your photography and content. If your projects are bright and full of white interiors, an overly dark variation may pull too much attention. If your photos are rich and high-contrast, a light base can keep the page from feeling overloaded.

After selecting a style, do not check only the homepage. Open a project page, the team page, the contact page, a standard Joomla article, and the mobile preview. Sometimes a style looks great in a hero block but becomes harder to read in cards or forms. Verifying contrast and readability matters more than matching the demo exactly.

The Pages and Templates sections: two different layers

Pages is for individual pages and landing page layouts. It is a good place to build the homepage, a service page, a contact page, or a project presentation. Templates controls the shared output for page types such as single article, category blog, search, contact, and other Joomla system pages. Do not confuse these layers.

If you build every article manually as a separate Builder page, the editor gets flexibility, but the site becomes harder to maintain. If you use Templates for repeating content types, the visual output stays more consistent. For Yard, a good compromise is this: build the homepage, projects, and major commercial pages as Builder pages, while news, knowledge-base content, and standard articles are rendered through Joomla templates.

Settings: service-level items that are best configured once

In Settings, check the favicon, CSS, scripts, consent manager, external services, advanced settings, and system information. Do not add scripts unless they are truly needed. If you need analytics code or a map, use the built-in mechanism and account for the consent manager so that external services are not loaded before the user has given consent.

Yard's Visual Style: How to Preserve the Architectural Feel Instead of Breaking the Demo

Yard is recognizable for its strict grid, large architectural imagery, dark contrast panels, subtle accent color, and careful use of white space. Visual issues usually happen not because the template is weak, but because the real content breaks that rhythm: overly long headlines, random photography, inconsistent card proportions, mismatched colors, and buttons with no hierarchy.

Work from the photography, not from the button color

For an architecture or interior design site, photography sets the tone. Before making detailed adjustments, prepare 8 to 12 strong images in a consistent style: exteriors, interiors, details, team shots, office images, and urban context. Then check how they look in the hero area, project cards, and sliders. If the images are inconsistent, no palette will save the page.

YOOtheme Pro supports images, automatic sizing, responsive images, WebP/AVIF, lazy loading, and focal points. That is especially useful for Yard: a vertical team portrait, a horizontal facade image, and a square project card all require different cropping. Check the focal point so that an important part of a building or a face in the team section is not cropped out.

Choosing a style variation

The official style variations provide a fast starting point. But once you choose one, do not immediately change everything at once: the color, font, spacing, buttons, cards, and background. First switch the style, save it, open the key pages, and make a list of the real problems: text is hard to read, the accent does not fit the brand, cards feel too heavy, or the background clashes with the images. Only then should you adjust individual settings.

If the site is being built for a client, keep the original style as a control point or create a separate template style for experimentation. That lets you show two options without damaging the working version.

Fonts and localization

The Yard demo uses English typography and short copy. In Russian, headings are usually longer. Before launch, check whether line breaks are breaking the cards, buttons, menu, or mobile header. YOOtheme Pro includes global typography settings for body text, large headings, small headings, buttons, and utility text. Do not use too many different fonts. For a Russian-language site, one readable base typeface and one accent level usually work better than mixing several decorative options.

Quick check: if a project title looks fine across two lines but breaks the card at three, limit the title length or rethink the card structure. Do not try to fix it only by shrinking the font across the whole site.

Template Styles, Menus, and Different Page Variations

Template styles in Joomla let you use different template settings for different menu items. In the YOOtheme Pro documentation, this mechanism is described as a way to duplicate a style, open it in the Website Builder, and assign it to the required menu items. For Yard, this is one of the most useful tools, because an architecture site rarely consists of one uniform page type.

When you need a separate template style

A separate style is useful when one group of pages should look different while still staying within the Yard visual system. For example, the homepage may use a large visual hero and a bolder accent, while project pages may need a calmer background, a stricter grid, and fewer decorative blocks. Contacts may use a simplified header and a separate footer, while the case study section may need denser navigation.

Do not create a template style for every small tweak. If the change affects only one block on a page, it is usually better handled in Builder. A template style is most useful when the header behavior, global style, module set, layout positions, or assignment to a group of menu items changes.

A practical assignment workflow

1. Open the list of template styles in Joomla.
2. Duplicate the base YOOtheme style instead of editing the original unless you really need to.
3. Rename the copy in a meaningful way, for example Yard - Projects or Yard - Landing.
4. Open the copy through the Website Builder and make only the changes you actually need.
5. On the menu assignment tab, choose the menu items where this style should apply.
6. Check the public-facing page, clear the cache, and open the page in a private browser window.

If the style does not apply, check more than just the template style itself. In Joomla, the result can depend on the selected menu item, page type, active language, and cache state. Sometimes a user opens a direct article URL and sees a different menu item context than expected. The most reliable test is always through the real menu item, otherwise the style assignment may behave differently from what you checked in the admin panel.

The menu as part of the design

In Yard, the top menu is visually light. It works well with short items such as Home, Projects, Residences, About, People, and Contact. In Russian, menu labels may become longer: "Projects," "Residences," "About the Studio," "Team," "Contacts." Make sure the menu does not overcrowd the header. If there are too many items, split the navigation: keep some in the main menu, move some to the footer, and route others into a Services or Projects page.

Modules and Positions: How Not to Lose the Header, Footer, and Side Blocks

In Joomla, many site elements exist as modules: menus, language switchers, search, contacts, social links, and content blocks in the header and footer. YOOtheme Pro integrates Joomla's Module Manager into its own panel, displays positions, and lets you edit modules alongside the live preview. For Yard, this is critical: the demo's visual clarity falls apart quickly if modules are assigned incorrectly or appear on the wrong pages.

Key positions worth understanding

The YOOtheme Pro documentation describes positions such as toolbar-left, toolbar-right, logo, navbar, header, dialog, their mobile equivalents, sidebar, top, bottom, and builder-1 through builder-6. You do not have to use all of them. What matters is understanding the logic: header positions handle navigation and utility elements, top and bottom render sections around the main content, and builder positions are meant to be used through the Position element inside Builder.

If a module does not appear, do not jump straight to editing code. First check the position, publication status, menu assignment, language, access permissions, cache, and whether the current page is built entirely in Builder. YOOtheme Pro has one important behavior here: the sidebar position is not rendered on pages built with Builder, because those pages may use their own full-width sections. For those cases, use the Position element inside the layout.

How module positions work in practice for Yard

• navbar - the main menu, short navigation, and possibly a link to projects or contacts.
• dialog - an auxiliary menu if you want to hide secondary links in a dropbar, offcanvas, or modal window.
• top - a promo section above the content or a dedicated block for a page that is not built in Builder.
• bottom - a contact call to action, a repeated form, an office map, or a related projects block.
• builder-1 through builder-6 - precise module output inside a Builder layout when you need to insert a Joomla module into a specific part of the page.

Multilingual sites and modules

For multilingual sites, YOOtheme Pro recommends taking menu and footer behavior into account. Pages and modules should be duplicated and assigned by language, and the language switcher can be integrated into the menu. This matters for Yard because of its compact header: the language switcher should not break the navigation or push out the most important menu items.

If the footer builder is not a good fit for a multilingual setup, use builder modules in the bottom position. This is not a workaround trick, but a normal Joomla approach to language-specific module versions. It lets you use different footers for different languages instead of storing every translation inside one global block.

Project Pages, Portfolio, and Case Study Cards

Projects are Yard's central use case. The official blog describes Projects as a gallery with a Masonry Grid and a filter, while individual case studies are presented as pages where the project can be shown in more detail. On a real site, that needs to become a repeatable editorial process: what data is collected for each project, which images are required, how the user filters the portfolio, and how the editor reviews a new project card.

What to prepare for each project

• A short title that does not break the card and still makes sense in a menu or filter.
• A project category: private home, office, interior, residential complex, renovation, or another meaningful grouping.
• A main image in good resolution, cropped in advance for the card.
• Two to six additional images for the case study page if the project needs more detailed coverage.
• A short description of the task, the solution, and the result without long promotional copy.
• A contact or next step: request a consultation, view related projects, or get in touch with the team.

Filtering without chaos

The portfolio filter is useful only when the number of categories stays small and the categories make sense to the visitor. If you create dozens of tags, people stop understanding what to choose. For Yard, four to six broad categories work better than a long list of internal studio terminology. Category names should match how the client thinks about the job: "Apartments," "Offices," "Houses," "Commercial Spaces," not just internal project codes.

After setting up the filter, check the empty states. If a category contains only one project or none at all, the filter feels weak. At the beginning, it may make more sense to combine categories temporarily and split them later as the portfolio grows.

A case study card as a trust-building page

An individual project page should answer not only "Does this look good?" but also "Can this team be trusted with a project like this?" For Yard, a strong structure is: a large visual opening, a brief project summary, several process or result images, a block with project parameters, a testimonial or comment, related projects, and a contact transition.

If you use Builder for case studies, save a successful section to the library and reuse it. If you expect many cases, consider using Templates with dynamic content so editors do not have to assemble every page from scratch.

Practical Example: Building a Homepage for an Architecture Studio

Imagine that you need to put together a studio homepage quickly - one that showcases a single strong project, explains the firm's specialization, leads into the portfolio, and gives the visitor a path to contact. This is a realistic scenario for Yard: the template already has a demo rhythm with a large image, a featured project card, an about block, a future projects section, and contact zones.

Goal

Create a homepage where a visitor immediately understands the studio's focus, sees a strong project, can move into the portfolio, and can find contact information. We are not copying the demo literally. We are using its compositional logic.

Preparation

• YOOtheme Pro is installed, Builder opens, and settings save correctly.
• There is a working template style for the homepage.
• Three to five project photos in a consistent style have been prepared.
• The menu items "Projects," "About the Studio," and "Contacts" already exist.
• There is a short positioning statement for the studio and one main call to action.

Steps

1. Open the homepage in the YOOtheme Pro Builder and load a suitable Yard layout or build a new page from sections.
2. In the hero section, keep one strong visual focal point: a project, a facade, an interior, or a wide shot that reflects the studio's specialization.
3. Replace the demo text with a short statement explaining what the studio does and for whom.
4. Add a featured project card linking to the case study page. Do not use several equally weighted CTAs at once, or the visitor will lose focus.
5. In the about block, keep two to three meaningful points: experience, approach, and types of projects. Move the full story to a separate page.
6. Configure the portfolio or projects section to show three to six cards that work visually together.
7. Add a contact block near the bottom of the page and verify that it is visible in the mobile preview.
8. Save the layout, clear the cache, and open the page as a normal visitor would.

Checking the result

Open the homepage in a normal browser window, a private window, and the mobile preview. Make sure the hero does not take up too much vertical space, the menu does not wrap into two lines, the project card links to the correct case study, the images are not stretched, and the contact block does not disappear because of module assignment or language settings.

A nuance that often gets in the way

Yard's demo images are usually selected to work together in both color and composition. A studio's real photography may be warmer, darker, more vertical, or visually noisier. If the page looks worse after replacing the images, first check the crop, focal point, and color compatibility before changing the entire style variation.

Practical Ways to Use Yard Across Different Site Types

Yard is not limited to one demo homepage. Its pages, style, and Builder can be applied to different kinds of Home & Living projects. The key is to tie each idea to confirmed capabilities: ready-made layouts, Builder, styles, portfolio features, modules, template styles, images, and Joomla structure.

Architecture firm

Use the homepage as a showcase for one strong project and a concise positioning statement, Projects as a filterable portfolio, Case Study as a detailed project page, and People as the team page. Judge the result by two signs: the portfolio is easy to filter, and each case study ends with a clear next step.

Interior design studio

For an interior design studio, details, materials, and mood matter. With Yard, you can create a denser visual presentation: more images in cards, separate sections for work stages, and a refined testimonials block. But keep an eye on speed: optimize images, use responsive generation, and do not load heavy galleries at the top of the page.

Developer or real estate agency

For real estate, Yard can work well as a presentation layer for properties, but not as a full CRM-driven catalog. If you need filters by price, size, room count, and lead submission, you will need a separate component or a more specialized solution. In that scenario, Yard handles the presentation and trust-building layer: polished property pages, team pages, office presentation, contact information, and project explanation.

Construction company portfolio

A construction company benefits from case studies structured around stages: challenge, process, result, timeline, materials, and before-and-after photos. In Builder, you can save a repeatable section structure and reuse it for new projects. If different editors create the pages, set clear rules: the same main image size, the same block order, and consistent category names.

Checking Speed, SEO, and Accessibility After Setup

As a template, Yard does not guarantee speed or SEO performance on its own. It provides the visual foundation, but the final result depends on the content, images, caching, heading structure, menu setup, internal linking, media quality, and Joomla configuration. Check the site before launch, while fixes are still easy to make.

Images and performance

YOOtheme Pro can automatically define sizes, generate responsive images, use lazy loading, and support next-generation formats if the server meets the requirements. But that does not remove the need to prepare your source files properly. Do not upload random oversized photos without review. For every key image, check the focus, dimensions, file weight, and how it appears on mobile.

If the site slows down after replacing images, do not roll back the entire template. First inspect the heaviest images, whether responsive formats are enabled, the image cache, external caching settings, and the number of visual blocks above the fold.

Page SEO structure

On Builder pages, it is easy to get carried away with visual blocks and forget the heading structure. Each page should have a clear main heading, a logical sequence of subheadings, textual project descriptions, and internal links. Project cards should lead to pages that offer not just an image, but useful context.

For a studio or developer site, do not hide all the meaning inside pictures. Search engines and AI-generated answers need textual explanations: what the company does, which projects have been completed, where the office is located, which services are available, and how to get in touch. Yard helps present that beautifully, but the text still has to be written.

Accessibility and contrast

The YOOtheme Pro documentation mentions semantic markup, skip links, aria labels, and the fact that accessibility depends partly on the author's content and palette choices. In practice, check text contrast over photography, link focus states, menu readability, image alt text, and whether forms work correctly from the keyboard. Be especially careful with dark panels over images: they can look impressive, but they require sufficient contrast.

Safe Enhancements Without Editing the Template Core

With Yard, it is better not to modify YOOtheme Pro core files. The documentation offers safer methods instead: Custom CSS in settings, CSS in an element's Advanced settings, a child theme for project-level customizations, Joomla language overrides, and template styles for different page groups. These mechanisms survive updates much better than manual changes to template files.

A small CSS enhancement for project cards

If the project cards in a real portfolio look too uniform, you can add a light accent to selected cards. The example below is not tied to any internal Yard class. It assumes that you manually added the yard-featured-project class in the Advanced settings of the required Builder element or section. The code can be added in Settings -> CSS or in the child theme's css/custom.css.

/* Light accent for a selected project card in Yard */
.yard-featured-project .uk-card,
.yard-featured-project.el-element {
  border-left: 4px solid #f4bf57;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.10);
}

.yard-featured-project .uk-button {
  letter-spacing: 0;
}

The check is simple: add the class to only one test card, save the layout, clear the cache, and open the portfolio page. If the accent makes the design worse, remove the class from the element or delete the CSS. The rollback does not touch Joomla core, YOOtheme Pro, or the demo template files.

Language overrides for system strings

If you need to replace a system string from YOOtheme Pro or Joomla, use System -> Language Overrides. The YOOtheme Pro documentation notes that you can search for TPL_YOOTHEME constants to locate template strings. This is safer than editing language files manually because the override is stored separately and is not lost during a normal update.

For Yard, this may be useful for read more links, utility labels, logo text, or recurring system phrases. Do not use language overrides for long page content. Standard content is better translated through articles, modules, and Builder pages.

A child theme for project-level customizations

If the number of customizations grows, create a child theme. In the YOOtheme Pro Joomla documentation, a child theme is created as a separate folder alongside yootheme, and additional custom.css and custom.js files can be stored in your own directories. This is an approach for a developer or an experienced webmaster. A child theme is not necessary for a one-time button color change, but it becomes much more convenient for broader customizations across multiple projects.

Why the Result Does Not Match the Demo and How to Diagnose It

Problems with Yard often look like "the template is broken," but the real cause is usually the installation package, template style assignment, modules, images, caching, or permissions. Below is a Joomla-specific diagnostic map for a YOOtheme Pro template, not a generic error checklist.

The demo did not appear after template installation

Symptom: YOOtheme is installed, but the site looks empty or nothing like Yard. A likely cause is that the standard theme package was installed into an existing site instead of deploying the demo package. A standard package is not expected to import the full demo site automatically.

Check which archive you used. If it was the standard template, load the required layouts through the YOOtheme Pro library or rebuild the structure manually. If you need the full training site, deploy the demo package on a separate staging environment as a new Joomla installation.

The style is assigned, but the page shows a different appearance

This symptom is often related to template styles and menu assignment. Check which menu item the page is tied to, whether another menu item is active, which language is assigned to the page, whether cache is enabled, and whether you are opening a URL that Joomla associates with a different menu item.

Fix: assign the required template style to the specific menu item, clear the cache, and open the page through the menu rather than through a random direct link. If the style difference is needed only for one block, do not create a new template style - fix the block in Builder.

A module does not appear in the header or footer

Check the position, publication status, language, access permissions, menu assignment, and whether you are using a Builder page where some positions are not rendered automatically. For positions builder-1 through builder-6, you need a Position element inside the layout, otherwise the module may not appear where you expect it.

The Customizer does not save changes

Likely causes include file permissions, hosting restrictions, an error in custom Less/CSS, or a conflict with server-side security. First remove the last problematic change, then check permissions and logs. The YOOtheme Pro documentation on file permission issues lists common permissions for files and directories, but apply them in line with your hosting policy.

The page became heavy after replacing the images

Check the source files, image dimensions, responsive images, image cache, lazy loading, and the number of media elements above the fold. Do not use one huge photo everywhere. Project cards, hero areas, and galleries need different image sizes and different focal point settings.

Russian text breaks cards and menus

Russian wording is often longer than the English demo labels. Shorten menu item names, rework card headings, and check the mobile header and typography settings. If the problem happens only in one element, use a local CSS fix or the element settings instead of shrinking the font across the entire site.

Quick diagnostic table

Where to look when Yard shows typical symptoms

Symptom	Likely cause	What to check	Safe fix
No demo pages	The standard package was installed instead of the demo package	Check the archive name and installation scenario	Deploy the demo on a separate staging site or load layouts manually
Wrong style on the page	Menu assignment error or cache	Open the page through the correct menu item	Assign the template style to the menu item and clear the cache
Module is not visible	Position, language, publication, or a Builder page	Check the Modules panel and menu assignment	Use the correct position or the Position element
Settings do not save	File permissions, limits, or broken CSS/Less	Review the latest change and the server logs	Roll back the edit and check permissions and hosting limits

When YOOtheme Yard Is the Right Choice

Yard is worth using if you want to get to a strong visual foundation for a Joomla site quickly, especially when projects, architectural imagery, team presentation, contact flow, and polished service pages matter. It is particularly effective when the team is ready to work not only with the template itself, but also with the YOOtheme Pro Builder, template styles, modules, images, and result validation.

Do not choose Yard only because the demo looks attractive. First check whether its structure matches your real content: do you have quality photography, clear project categories, prepared copy, a real team, a contact flow, and a plan for updating the site? If the answer is yes, the template gives you a strong start and saves time you would otherwise spend designing everything from scratch.

Before you get the Joomla version, prepare a staging environment, a backup, a menu map, and a set of real images. That approach saves more time than a quick installation on a live site with no plan, because Yard's biggest mistakes usually come not from the template itself, but from the wrong implementation scenario.

The final check is simple: if the visitor can clearly understand the studio's profile, open projects, read a case study, find the team or contact details, and the administrator knows where to manage styles, menus, modules, and pages, then the template is doing its job. If people constantly need explanations about where things are and why a page looks wrong, go back to the structure, template styles, and media set before publishing.