YOOtheme Makai - Joomla Template

A Guide to Setting Up and Using YOOtheme Makai for Joomla

YOOtheme Makai is not just a ready-made homepage mockup. It is a theme package for YOOtheme Pro that needs to be integrated properly into your Joomla site structure. This guide explains how to turn the surf school demo into a working website: prepare the installation, understand the layout logic, configure styles, menus, modules, images, and service pages, and verify the result without making random edits.

This guide is written for site owners, Joomla administrators, and webmasters who have received the template and want to do more than simply enable it. The goal is to build a clear, usable website for a surf school, sports club, rental business, camp, fitness studio, or a similar project. We will also cover where it makes sense to use the full demo package and where it is safer to install only YOOtheme Pro and bring in the layouts you need through the library.

The main focus is practical post-installation setup. The article includes a workable homepage scenario, a map of module positions, menu assignment setup, logo and style configuration, media handling, speed checks, troubleshooting for common issues, and similar alternatives. Where exact features depend on your YOOtheme Pro or Joomla version, the recommendations are intentionally cautious: verify them in the admin panel and documentation first, then make changes on the live site.

Do not start by editing every block in the demo. First define the site structure, keep only the pages you actually need, configure the global elements, and check which blocks are really tied to Joomla menus, modules, and dynamic content. That way, YOOtheme Makai does not turn into a collection of beautiful but hard-to-maintain sections.

What Problem Makai Solves and Where It Works Best

Makai was designed as a visual starting point for sports and wellness projects, especially surf schools. The demo includes lessons, camps, rentals, a clubhouse, partners, schedules, contact details, and emotionally driven photography. Inside YOOtheme Pro, that means more than a single page template. It is a set of ready-made pages, sections, styles, and images that you can reshape around your own content.

The practical value of the package is that it gives the site a clear voice right away. It has distinctive top navigation with fine borders, a large hero section with ocean imagery, contrast between handwritten accents and bold serif typography, generous spacing, service cards, and image-driven sections. That kind of visual language works well when the service sells through atmosphere, trust, and a clear visitor journey: choose a lesson, review pricing, check rental options, and get in touch.

For Joomla, the package is also useful as a learning build for YOOtheme Pro. You can see how the page builder, menu system, template styles, modules, and images work together as one system. If the site is small, Makai can function almost like a ready-made landing structure. If the site grows, it is better to use it as a design foundation and gradually move recurring content into Joomla articles, categories, modules, and dynamic templates.

When the Template Is a Good Fit

YOOtheme Makai makes sense when the project has a strong visual theme, solid photography, clear services, and several visitor paths. Examples include a sports school, equipment rental business, outdoor camp, waterfront yoga studio, activity-based tour business, local club, instructor site, or a small service with a schedule.

• You need a visually expressive homepage with a large hero section and several service-focused blocks.
• You offer services that can be grouped into lessons, camps, rentals, consultations, or packages.
• Photography, the atmosphere of the place, trust in the team, and fast contact matter.
• The site editor is willing to work in YOOtheme Pro Builder, not just the standard Joomla editor.
• You want to get a starting structure quickly while keeping room for customization through styles and modules.

When Another Approach Is Better

Makai may be too much for a portal with hundreds of content items, a complex member area, unusual ecommerce requirements, or a project where the design needs to stay as neutral as possible. In those cases, the built-in surf aesthetic will require substantial rework: replacing photos, restructuring sections, checking contrast, configuring dynamic templates, and deciding who will maintain the builder layouts.

If you have very few high-quality images, the template will also need careful adaptation. Makai depends on large visual surfaces. Random stock photos, mixed color temperatures, and inconsistent framing will quickly break the overall impression. In that case, it is better to start with a neutral template or prepare a photo set before installation.

What the Package Includes and How to Read the Demo Pages

The official Makai page describes the package as a YOOtheme Pro theme package for Joomla, with ready-made pages, style variations, and curated images. For practical work, it helps to translate that into tasks. The ready-made pages do not have to become your actual site pages one-to-one. It is more useful to treat them as a solution library: how a service is presented, how pricing is displayed, how the contact page is structured, and which sections can be reused on a camp or rental page.

The demo includes pages such as Home, Lessons, Camps, Rentals, About Us, Journal, and Contact. On a real site, those labels should match your structure. If you are building a school site, keep lessons, camps, and rentals. If it is a fitness studio, rename them to classes, memberships, schedule, and team. If it is a travel project, use routes, accommodations, booking, and questions.

Makai's real strength is not the specific word Surf, but the compositional logic behind it. It helps present a service through a sequence: an emotional first screen, a quick choice of directions, proof of place and team, detailed service blocks, contact information, and a clear path to action.

Page Layouts

Ready-made layouts speed up the start, but they should never be left as-is. In each layout, check which elements are static text inside the builder, which can be replaced with a Joomla article, and which are better moved into a module. For example, contact details and business hours are easier to manage in a single module or a reusable builder block so you do not have to update them manually across multiple pages.

It helps to break the services page into levels. The first level is service category cards, the second is a detailed service page, and the third is contact or an inquiry form. In YOOtheme Pro, you can build everything statically, but for easier maintenance, it is better to decide early which content will change often. Prices, schedules, instructor names, and seasonal programs usually need their own content discipline.

Style Variations

Makai includes several built-in style variations. The official page lists white variations and a dark turquoise style. This is not just a button color change. In YOOtheme Pro, styles are tied to UIkit components, variables, fonts, cards, backgrounds, and element states. That means you should change the style only after checking how the hero area, menu, service cards, forms, footer, mobile header, and content pages actually look.

A practical rule is to pick the style that is closest to your brand first, then make minimal adjustments to colors and fonts, and only after that start reworking individual sections. If you do it in reverse order, local edits may conflict with the overall theme, and after switching styles you may have to fix the same elements all over again.

Images and Atmosphere

The Makai package relies on a large set of themed images. Use them as a starting visual language, but do not keep demo photos in places where they become misleading. If the school is not by the ocean, building the hero section around a wave makes little sense if the real service is paddleboarding on a lake or beach fitness. It is better to preserve the structure and rhythm of the sections while replacing the images with honest photography of the place, the team, and the equipment.

A simple post-replacement check: open the homepage, a service page, and the contact page on desktop and mobile widths. If the site's main message is clear without reading every paragraph, the visual foundation is working.

What to Check Before Installing on Joomla

Before installation, it is important to understand what you actually have: a standard YOOtheme Pro theme ZIP for an existing site, or a demo package with a full Joomla installation and demo content. These are different scenarios. YOOtheme's official documentation explicitly separates theme installation on an existing site from deploying a demo package as a full Joomla install.

If the site is already live, do not try to install the demo package over it as if it were a normal extension. That package is meant for a fresh installation. For an existing site, install the YOOtheme Pro template and then load the layouts and styles you need through YOOtheme Pro tools if they are available in your setup. That way, you avoid overwriting the site structure and mixing demo data with production content.

Site Technical Readiness

Check the Joomla version, PHP version, image processing extensions, file upload limits, and administrator permissions. YOOtheme Pro uses media, the builder, styles, and cached files, so hosting-related issues often show up not during installation but when saving a style, generating images, or working with the builder preview.

• Make sure the administrator has permission to install extensions, edit templates, and manage modules.
• Create a backup of the files and database before installing or importing the demo structure.
• Verify that the site can upload ZIP archives of the required size through the standard Joomla installer.
• Check that the images folder is writable, since YOOtheme Pro may store uploaded and processed media there.
• On a staging domain, disable aggressive minification and caching until the initial setup is complete.

Content Readiness

The template will only look convincing if the content structure is sound. Before installation, prepare a short page list: homepage, services, pricing, team, FAQ, contact, and blog or journal. Then gather the actual content: service names, 2-3 paragraphs about each one, photos, address, business hours, phone numbers, social links, booking terms, and answers to common questions.

If that content is missing, demo content can create a false sense of readiness. Visually, the site may look polished, but users still will not understand where the price is, how to book, who teaches the classes, or what age and skill restrictions apply. That is why Makai is best installed after a basic content brief, not before one.

A Working Environment for Changes

Even if the site is small, configuration work is better done on a copy. YOOtheme Pro has many global settings: style, header, menus, modules, images, custom CSS, consent scripts, and the media folder. A single change can affect several pages. A staging environment lets you verify the result before moving it to the main site.

Installation: Template, Demo Package, and the First Website Builder Launch

In practical terms, installing YOOtheme Makai starts with choosing the right scenario. For a new project, the demo package is helpful because it shows a complete structure, content set, and configuration. For an existing site, it is safer to install YOOtheme Pro as a template and then bring in the pages and styles you need from the library. In both cases, the goal after installation is the same: open YOOtheme Pro Website Builder, confirm that the site is using the correct template style, and make sure the homepage is tied to the right menu item.

Scenario for an Existing Site

1. Back up the site and database.
2. Open the Joomla admin panel and install the YOOtheme Pro archive through the standard extension installer.
3. Go to site templates and assign YOOtheme Pro either as the default style or as a separate style for the required menu items.
4. Open the new template style and click Open Website Builder.
5. Make sure the preview is showing the correct page, not a random menu item or an old template.
6. Load the needed layout or build the page using Makai sections as a starting point.

After that, do not rush to replace every demo block. Start with the site-level settings: logo, header, menu, footer, style, favicon, media folder, and image behavior. Once those are stable, individual pages are much easier to edit.

Scenario for a New Site

For a new site, the demo package works best as a full Joomla installation. You get a complete reference build that shows which pages, modules, menus, and images produce the original demo. After installation, open the admin panel and do not delete the demo data immediately. First study where the homepage is located, how the menu is built, which modules are published in the header, toolbar, bottom, or dialog positions, and which pages are assembled in the builder.

Then create a cleanup plan. Remove unused pages and modules gradually. If you delete everything in one pass, it is easy to lose the connection between a menu item, a page, a module, and a builder section. The correct first launch is not a redesign. It is an inventory pass.

Initial Post-Install Check

The check should be short but consistent. Open the public site, the admin panel, Website Builder, and the template styles list. Confirm that the active style matches what you expect, the header is visible, menu items open correctly, the builder preview loads, and changes can be saved.

Minimum checklist after installing YOOtheme Makai

What to check	Where to look	What counts as a normal result
Active template style	Joomla template styles and the homepage menu item	The correct style is assigned to all pages or to the selected menu items.
Website Builder	The Open Website Builder button	The preview opens, elements can be selected, and changes can be saved.
Menu and mobile header	The public site and the Menus panel	The main navigation is visible on desktop and at smaller widths.
Images	Homepage, media manager, images folder	Large images keep their proportions, and lazy loading does not hide important content.
Modules	The Modules panel and Joomla Module Manager	Modules are visible on the intended pages and do not appear in unexpected positions.

Post-Installation Setup: Where the Key Decisions Live

The most common mistake when working with Makai is editing an individual text block without understanding what level the setting belongs to. In YOOtheme Pro, some decisions belong to the current page layout, some to the template style, some to the global style, some to module positions, and some to standard Joomla entities. That is why setup is best handled in layers.

Template Styles and Menu Item Assignment

Joomla lets you create multiple template styles and assign them to different menu items. YOOtheme Pro documentation recommends duplicating a base style, opening it in Website Builder, and assigning it to the appropriate menu items. This is especially useful for Makai when the homepage should be highly visual, while inner pages should feel calmer and lighter.

A practical example: create a dedicated style for the homepage with a large hero section and richer background treatment, and use a simpler style for schedule pages or terms pages, with a cleaner header and less visual noise. The key is not to create styles without a reason. If two styles differ only by a single button color, it is better to solve that through the style library or a section class.

Style Library and Makai Visual Variations

The official Makai page confirms that several style variations are available. That means you can quickly change the overall character of the site, but you should not choose a style based on taste alone. First check the text contrast in the hero area, navigation readability, button color, the look of service cards, and the background sections. A style that looks great on the demo's ocean photography may perform much worse on your own interior shots or trainer photos.

Use the Style Library as a controlled experiment:

1. Save the current style in My Styles so you have a fallback point.
2. Select a new variation and check the homepage, services page, contact page, and mobile menu.
3. Evaluate the contrast of buttons, links, headings, and text over images.
4. If the style works, save it under a clear name.
5. If the style hurts readability, revert to the saved version.

The best YOOtheme Makai setups begin with a readability check, not with the most dramatic color choice. This matters most in the hero section, where text sits on top of water photography.

Settings, Images, and System Parameters

In the Settings panel, check the favicon, custom CSS, API key for updates and layout libraries, media folder, next-gen images, image URLs, system assets, cache, and system check. Do not enable everything by default. For example, loading Bootstrap, Font Awesome, or jQuery only makes sense in specific cases where the default Joomla output or your own code requires them. If the site works without them, extra system assets will only add page weight.

Image discipline matters even more: use clear folder structures, avoid uploading dozens of nearly identical files, and make sure photos look good on light, white, and dark backgrounds. The YOOtheme media manager supports different view modes, search, uploads, and local storage handling. That makes it easier to keep demo images separate from real project photography.

Builder Access Permissions

If multiple people edit the site, restrict access to the YOOtheme Pro customizer. An editor who only updates a schedule or a service description does not always need access to the global style, header, or footer. YOOtheme Pro includes protection against simultaneous layout overwrites by different authors, but that does not replace clear roles and working rules.

Template Styles and Menus: How to Control Different Makai Pages

For a Joomla template, template styles are especially important. In YOOtheme Pro, you can duplicate a style, modify it, and assign it to specific menu items. That makes it possible to create, for example, a visually bold homepage, a calmer article page, and a separate style for a camp landing page. But that flexibility comes with a cost: if menu assignments are handled carelessly, visitors may see the wrong header, the wrong color style, or the wrong module set.

When One Style Is Enough

One style is usually the better choice for a small site where every page should look consistent: homepage, services, pricing, contacts, and journal. In that case, there is less risk that an editor will change a color or header in one style and forget to repeat the change in another. It is easier to maintain and easier to explain to the team.

Start with the official variation that best matches your content. For a marine or outdoor theme, a rich turquoise base works well. For a studio or wellness project, a light variation with softer accents is often more appropriate. After choosing it, check text contrast on large images and button states.

When Multiple Styles Make Sense

Several template styles are useful when the site contains sections with different visual goals. For example, the homepage and a camp landing page may use a transparent header over the hero area, while journal pages may need a standard header on a light background. A pricing page can be more restrained, while a team page can be more visual.

Do not create a new style for every small tweak. It is better to keep 2-3 meaningful styles: main, landing, and content. For each style, document which menu items it is assigned to, which header it uses, which modules should be visible, and which color variation it is based on.

The Menu as the Foundation of the User Journey

The Makai demo shows a top menu with lessons, camps, rentals, information, and contact details. On a real site, the menu should reflect the visitor's path, not the structure of the demo package. For a surf school, a logical path would be lessons, camps, rentals, pricing, team, FAQ, and contact. For a fitness studio, it might be programs, schedule, trainers, pricing, reviews, and contact.

YOOtheme Pro integrates Joomla Menu Manager into the Menus panel, but it does not replace Joomla's underlying rules. A menu item determines the URL, the page type, the assigned template style, and often affects which modules are displayed. That is why you should not delete or rename menu items blindly. First check whether a separate style or module is assigned to them.

Practical Menu Setup Order

1. Create or clean up the main Joomla menu.
2. Assign the homepage to the correct menu item.
3. In the Menus panel, choose the Navbar position for the main menu.
4. For mobile navigation, check Mobile Navbar or Mobile Dialog.
5. If you need a mega menu, use the builder only on the first level where it genuinely helps.
6. After saving, check the desktop, tablet, and mobile previews.

Short takeaway: template styles control how pages behave visually, while menus control routes and assignments. Once those two layers are clear, Makai setup becomes far more predictable.

Menus, Module Positions, and Navigation for a Real School Site

In the Makai demo, the menu does more than list pages. It groups user journeys: lessons, camps, rentals, club information, journal content, and contact. In YOOtheme Pro for Joomla, menus and modules matter even more because some output may live in standard Joomla modules, some in template positions, and some inside builder layouts.

Main Menu and Mobile Navigation

Start with a simple structure. For the initial launch, 5-7 top-level items are enough: home, classes, camps, rentals, about, journal, and contact. If you add too many items, Makai's thin header will lose its clean look, and the mobile menu will become too long. Subsections are better tucked into dropdowns or routed through a Services page, where the user can choose a direction more naturally.

Make sure the mobile items lead to the same destinations as the desktop ones. YOOtheme Pro provides separate positions for the mobile header and dialog. For multilingual sites, the documentation recommends using menu modules in positions such as navbar, dialog, navbar-mobile, and dialog-mobile, because standard menu positions are not suitable for multilingual setups.

Module Positions

YOOtheme Pro integrates Joomla Module Manager and displays modules by position. Gray indicators help you see whether a module is published on the previewed page, and hovering highlights the module rendering in the live preview. In Makai, this is especially useful when configuring the footer, contact blocks, language switcher, service menus, banners, and additional blocks in the top or bottom positions.

If a module is not needed on a page, do not hide it with CSS. It is better to review its publication status, position, and menu assignment. For more advanced visibility rules, YOOtheme recommends Advanced Module Manager by Regular Labs. That does not mean every site needs it, but for a site with multiple services, languages, or seasonal campaigns, it can simplify display conditions.

Builder Module

Builder Module lets you use the YOOtheme Pro builder inside a Joomla module and output more complex blocks in module positions. For Makai, this is a good way to create a promo block above the main content, a seasonal camp section, a schedule notice, or a compact booking block. But you should not turn every module into a mini page. The more complex builder modules you use, the more carefully you need to review performance and admin clarity.

Visual Setup: Header, Logo, Styles, Images, and Consent

After installation, the most useful place is the YOOtheme Pro customizer. This is where you configure site-level settings: logos, header, toolbar, breadcrumbs, media, scripts, consent manager, custom CSS, and advanced options. For Makai, this stage matters a lot because the template is recognized by its header, navigation borders, bold typography, and photography. If you replace only the text but do not configure the logo, menu, contrast, and images, the site will still feel like the demo.

Logo and Header

In Makai, the header plays a prominent role: thin lines, oversized navigation, contact details, and social elements all function as part of the design. Replace the logo text or logo image before editing individual sections. If the logo is complex, prepare a simplified version for the mobile header. For dark or photo-based sections, keep an inverse logo version so the header does not disappear into the image.

If you use a transparent header over the first screen, check contrast across different hero images. Sometimes a beautiful photo makes the menu hard to read. In that case, it is better to darken the top part of the image through overlay settings, choose a different crop, or give up the transparent header on selected pages.

Style, Fonts, and Colors

YOOtheme Pro Style Customizer works through UIkit and Less variables. That means changing a global color or typography setting affects more than one block - it changes buttons, cards, headings, navigation, and other components. For Makai, that is useful because you can keep the original rhythm while adapting the accents to your brand.

Work from general to specific:

1. Choose the closest built-in style variation.
2. Check the heading fonts and body text for Cyrillic support if the site is in Russian.
3. Configure the main colors for buttons, links, and cards.
4. Check hover states, image contrast, and text visibility in inverse sections.
5. Save the changes and clear the YOOtheme Pro cache if the style does not update on the public site.

For a Russian-language site, it is especially important to check the font used in handwritten accents. If the decorative font does not support Cyrillic well, use it only in English brand details or replace it with a more reliable font pairing.

Images and Media

YOOtheme Pro supports media fields, automatic resizing, responsive images, and lazy loading. But the quality of the result still depends on the source files. Upload large photos with a clear subject in the frame. For hero images, leave extra space around the edges because the crop changes across different screen sizes.

For Makai, it helps to create a small media guide in advance:

• Hero: a wide shot with one strong focal point and a safe zone for text.
• Services: photos with a consistent color temperature and a similar subject distance.
• Team: honest photos of instructors or staff, without abrupt style clashes.
• Rentals or equipment: product-style shots with a clean background and visible texture.
• Contact: photos of the location, entrance, desk, map, or surroundings that help people find the place.

Consent Manager and External Services

If the site uses maps, video, analytics, or marketing scripts, configure the consent manager in YOOtheme Pro before publishing. YOOtheme Pro documentation describes consent categories and placeholders for external content when consent has not been granted. For a school or rental site, this is especially noticeable on the contact page: the map and video should not load unexpectedly if the site policy requires consent.

Safe setup: add external scripts through the standard Settings panel and assign them to a consent category. Do not scatter random code snippets across multiple places, or it becomes hard to understand what is actually loading on the page.

A Small CSS Fix for Card Readability

If the service cards become harder to read after you replace the photos, do not edit the core template. In YOOtheme Pro, you can add custom CSS in the Settings panel. First, assign an extra class to the required element or section in the builder, for example makai-service-note in the element's advanced settings. Then add this small CSS snippet:

.makai-service-note {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 91, 116, 0.18);
}

.makai-service-note .uk-heading-small,
.makai-service-note h3 {
  color: #073f52;
}

This change does not modify core files and is easy to roll back: remove the class from the element or delete the CSS from the custom CSS area. Check the result on the service page and at mobile width. If the card starts to look out of place, it is better to adjust the style variation or the photo itself rather than keep adding more local rules.

Joomla Modules and Positions in the Makai Template

Modules are one of the reasons a Joomla template cannot be configured like a static page. YOOtheme Pro integrates Joomla Module Manager and exposes positions directly in the Modules panel. In Makai, this matters in the header, toolbar, dialog, bottom and footer scenarios, contact areas, and recurring content blocks. If you do not understand the positions, you can easily run into a common problem: the module is published, but it does not appear on the page.

Which Positions You Will Use Most Often

YOOtheme Pro includes positions for the toolbar, logo, navbar, header, dialog, mobile variants, sidebar, top, bottom, and builder slots. For Makai, the most common ones are:

• toolbar-left and toolbar-right - for the address, phone number, social links, or a short line above the header.
• navbar and navbar-mobile - for the main menu.
• dialog and dialog-mobile - for the off-canvas menu, contact info, or extra navigation.
• bottom - for footer blocks, contact details, schedules, or repeated links.
• builder-1 - builder-6 - for rendering modules inside the page builder through the Position element.

One important detail: the sidebar may not appear on pages built entirely in YOOtheme Pro page builder. The documentation explains that full-width builder sections require the sidebar to be placed inside the builder structure itself, for example through a Position element. So if you need a module on a builder page, think not only about the standard Joomla position but also about where it belongs inside the layout.

How Not to Lose a Module During Setup

When a module is not visible, do not start by changing CSS. First check four layers: whether the module is published, whether it is assigned to the right menu items, whether it is placed in a position that is actually rendered on that page, and whether it is hidden by a visibility setting. In YOOtheme Pro, the Modules panel helps with a blue highlight in the preview, but that works only if the module is published and relevant to the current page.

Diagnostic Order

1. Open Joomla Module Manager and check the publication status.
2. Check Menu Assignment: the module must be assigned to the current menu item or to all pages where it is needed.
3. Open Website Builder and the Modules panel, then locate the position and the module.
4. Check device visibility if the module disappears only at mobile width.
5. If the page is builder-only, use a Position element or a builder module instead of a standard sidebar.

In Makai, modules are best used for recurring information, not for every visual block. The hero area, service cards, and gallery are usually easier to manage in the builder, while contact info, schedules, language switching, footer menus, and repeated CTAs often work better as modules.

Dynamic Content and Service Pages Without Manual Duplication

YOOtheme Pro supports dynamic content: builder elements can pull data from Joomla, such as the article title, featured image, custom fields, categories, and related content. For Makai, this becomes especially useful once the site grows beyond a single static homepage. Lessons, camps, rentals, FAQs, journal articles, and team cards can all be maintained through Joomla data rather than by copying blocks manually.

You do not need to build a complex architecture right away. Start with the data that will change often: service cards, pricing, instructors, schedule, and gallery. If that information remains static across several builder layouts, every update turns into a manual task and a potential source of errors.

When a Static Builder Layout Is Enough

A static layout is perfectly fine for a small page that rarely changes: a homepage, a seasonal program landing page, or a one-time campaign page. In that case, the builder gives you control over composition and helps preserve Makai's visual atmosphere. The key is not to duplicate the same block in ten different places. If a block repeats, it is better to turn it into a layout, preset, or module.

When You Need Template Builder

Template builder is useful when one structure should apply to multiple content items. For example, you may have several service articles: beginner lesson, kids lesson, corporate lesson, and rentals. Instead of copying the same layout manually, you can create a template for a single article or a category blog and bind Joomla fields to elements such as the title, image, summary, level, duration, price, and CTA.

YOOtheme Pro documentation emphasizes that templates can be assigned to page types such as single article, category blog, featured articles, contacts, search, and others. For Makai, this creates a practical path: keep the homepage as a designed page, and gradually move recurring services and journal posts into templates.

What to Do with Invalid Sources

When you move a layout from the demo package to your own site, dynamic content may point to sources or fields that do not exist in the current Joomla installation. The documentation describes invalid sources and fields: the selected source does not exist, a field was removed, the page does not provide the required source, or the source exists but the fields are not mapped. In the builder, those cases are highlighted as issues.

If a block is empty or shows a warning after import, do not assume Makai itself is broken. In many cases, the problem is simply that the demo expects data that your site does not have yet. Create the required Joomla fields, switch the source to an existing one, or turn the block into a static element if you do not need dynamic behavior.

A good workflow is to build one complete service page first, then create a second one using the same fields. If the second page comes together without copying text or changing the layout again, the dynamic structure is set up correctly.

Practical Example: Building a Surf School Homepage

Let us walk through a realistic scenario, because that is where it becomes clear how YOOtheme Makai works as a system. Suppose you need to prepare the homepage for a small surf school: the first screen, service choices, a clubhouse block, lesson cards, partners, contact details, and a quick path to booking. We are not covering product purchase or activation here. We are working with a template and YOOtheme Pro that are already available.

Goal

The goal is a homepage where a visitor understands within the first few minutes: where the school is located, what classes are offered, whether equipment is available, whether there is a camp, how to get in touch, and where to go next. Visually, the page should still feel like Makai: a wide hero area, ocean-inspired palette, bold headings, handwritten accents, thin lines, and strong photography.

Preparation

• Create a Home menu item or its localized equivalent and assign it as the homepage.
• Make sure the correct Makai template style is assigned to that menu item.
• Prepare the logo, hero photo, 4 service photos, 1 location photo, and the contact details.
• Decide which pages will sit underneath it: lessons, camps, rentals, pricing, and contact.
• Open the page in Website Builder and save the original layout as a backup if that option is available in your setup.

Setup Steps

1. Replace the hero headline with a specific promise: not a generic slogan, but a clear offer for your school.
2. In the top line or toolbar, add the city, email, and phone number. If the contact details will repeat, move them into a module.
3. Keep 3-4 directions in the services section. For each one, add a photo, a short description, and a link to the full page.
4. In the clubhouse section or a similar block, explain what is available on-site: changing rooms, lounge area, rentals, safety, and instructors.
5. In the board or equipment selection block, use practical guidance rather than marketing copy: who a soft top is good for, who needs an advanced board, and where availability can be confirmed.
6. In the lower part of the page, add partners, schedule, contact details, and a CTA leading to the booking page or contact form.
7. Configure the mobile header and make sure the main CTA does not disappear at small widths.

Checking the Result

Open the homepage in a private window and walk through it like a new visitor. Three things should be immediately clear: what is being offered, where it is located, and what to do next. Then check every link in the top menu and in the service cards. If a card leads to an empty page or a demo placeholder, it is better to point it to a contact block temporarily than to leave a broken path in place.

At mobile width, the hero area should not take over the entire screen so completely that the user cannot see the next action. If the text is too long, shorten the headline or move the secondary phrase below it. If the photo crops the main subject badly, choose a different crop. If the menu is too long, use the dialog or mobile menu.

A Common Issue That Gets in the Way

The homepage can look correct in the builder preview but different on the public site because of cache, a different template style, an old compiled CSS file, or menu assignment. So after saving, clear the YOOtheme Pro cache, the Joomla cache, and any external optimizer cache if one is enabled. Then check the public URL while logged out.

Practical Use Ideas for Different Sites

Makai can stay close to its surf school logic, but more often it gets adapted for adjacent types of projects. Below are not abstract "use cases," but practical scenarios that make it clear which part of the template to use and how to verify the outcome.

Active Sports School

For a surf school, SUP school, kitesurfing school, climbing school, or outdoor training business, keep the lessons, camps, and rentals structure. Use service cards as entry points to detailed pages, and use the journal as a knowledge base for safety, preparation, equipment, and weather conditions. The result is easy to verify: the user should be able to find a class by skill level and see how to book it.

Club or Fitness Studio

For a studio, replace the surf house with the club space, lessons with class types, camps with intensives, and rentals with memberships or equipment. The header and hero area should usually feel less extreme, and the cards should include workout level and class format. Make sure the mobile header does not hide the schedule or contact information.

Equipment Rental and Service

If the site revolves around rentals, use the Rentals and Price List pages as the foundation. Split equipment into categories, add terms, deposits, restrictions, return times, and a booking contact. Do not promise online booking unless it actually exists in the Joomla component or form. Visually, make sure the equipment cards do not feel like an empty gallery with no rental conditions attached.

A Content-Driven Project About a Place and Team

If the goal is to promote a location, a tour, or a club community, lean more heavily on About, Journal, and Contact. For articles, you can connect dynamic content and single article templates so the posts feel like part of Makai rather than like standard Joomla pages with no design continuity. The check is simple: each article should have a readable title, image, meta information, and a clear path back to the services.

Speed, SEO, and Maintenance Checks After Setup

A template alone does not guarantee a fast site or strong rankings. Makai gives you structure, styles, and a visual foundation, but quality still depends on images, menus, content, headings, internal linking, cache, and how carefully external services are configured. After the initial build, run a short technical audit.

Images and PageSpeed

Large photos are Makai's biggest risk. YOOtheme Pro can generate responsive images and lazy loading, but it cannot rescue a poor source file. Check the weight of the hero image, service card images, and gallery assets. Do not upload tens of megabytes for the sake of a single block. For images that contain text, avoid baking the text into the photo itself: it adapts poorly and often becomes unreadable at mobile widths.

If you enable next-gen images, verify that your hosting environment supports them. YOOtheme documentation notes that some optimized formats depend on PHP and GD support. If images stop generating or empty spaces appear after enabling them, revert the setting and review the system requirements.

SEO Structure of the Pages

The product page may already have the site's main H1, but on your Joomla site every menu item and every article still needs a logical heading structure. Makai makes it easy to get carried away with large decorative headlines, so make sure the page is not just a collection of nice-looking phrases with no semantic hierarchy. The homepage should explain the service, lesson pages should cover conditions and format, pricing pages should clarify cost and restrictions, and the contact page should make the next step obvious.

Use Joomla menu item metadata and article fields where appropriate. Do not use the same meta description across every page. On service pages, add internal links between skill levels, rentals, and the contact form. In the journal, use categories and tags only if they genuinely improve navigation, not just "for SEO."

Permissions and Editors

The YOOtheme Pro customizer is available to users with template editing rights. The documentation recommends treating that permission carefully, especially if editors can access YOOtheme Pro through front-end editing. In practice, it is better to separate roles: content editors update articles, images, and modules, while the webmaster handles builder layouts, styles, and custom CSS.

If everyone has access to everything, the site quickly loses stability. One editor changes module assignment, another changes the style, a third edits the header, and after a month nobody understands why different pages look different. With Makai, role discipline matters more than the number of available settings.

Safe Improvements Without Editing the Template Core

Most ready-made templates invite customization: changing a label, improving contrast, adding a different footer, hiding an unnecessary block, or showing a language switcher. Do that through YOOtheme Pro settings, Joomla modules, language overrides, template styles, a child theme, or carefully written custom CSS. Do not edit YOOtheme Pro core files for a small visual task.

Language Overrides for Interface Strings

If a string like Continue Reading is still visible on a Russian-language site, it is safer to use Joomla language overrides. Joomla documentation describes the built-in mechanism for overriding strings without changing language files directly. That approach survives updates much better than manually editing .ini files.

1. Find the string on the public site.
2. Open Joomla language overrides for the required language and client.
3. Find the constant by text, or create an override using the known constant.
4. Save the translation and clear the cache.
5. Check the page on the public site while logged out.

If the string belongs not to Joomla itself but to a specific builder element, check that element's settings first. Language overrides are for system strings, not for normal text that an editor can change in the builder.

Child Theme and Overrides

For deeper changes, YOOtheme Pro supports child themes, and Joomla supports template overrides. That is developer-level work. Use that path only if the builder, style customizer, modules, and CSS cannot solve the problem. For example, you might change the output of a specific Joomla component through an override, but that should not be your starting point for something as small as a button color.

Before creating any override, define the goal clearly: what needs to change, where the original output lives, which files will be affected, how the result will be checked, and how the change can be rolled back. After updating Joomla or YOOtheme Pro, review the overrides, because the structure of the original templates may have changed.

Custom CSS as the Final Thin Layer

Custom CSS is useful for small visual corrections: spacing, color, contrast, width, or hiding a decorative element, as long as accessibility is not harmed. But it is a poor way to rewrite an entire template. If your CSS grows beyond a couple dozen lines, you are probably fighting the chosen style or an incorrect section structure.

Your rollback path should be clear before you make the edit. If you cannot quickly say which class to remove and where to verify the result, the change is better postponed and handled through settings instead.

Why Makai May Display Incorrectly and How to Diagnose It

Problems with a Joomla template rarely have a single cause. More often they sit at the intersection of menu assignment, module positions, cache, styles, dynamic content, and permissions. Below is a practical troubleshooting guide for Makai and YOOtheme Pro without trying to guess the issue blindly.

The Homepage Does Not Look Like the Demo

Symptom: after installation, the site opens, but the header, hero area, colors, or sections do not resemble the Makai look you expected.

Possible causes: you installed only the theme, not the demo package; the required layout was not loaded; a different template style is assigned to the menu item; you are viewing the wrong page; or the cache is serving old CSS. Check the active template style, the homepage menu item assignment, the presence of the required layout in the builder, and clear the YOOtheme Pro and Joomla caches. If you are working on an existing site, it is normal that demo content does not appear automatically.

The Module Is Published but Not Visible

Symptom: the module exists in Joomla Module Manager, but it does not appear in the header, bottom, or sidebar.

Check the publication status, position, menu assignment, and visibility. If the page is built in YOOtheme Pro page builder, a normal sidebar may not render where you expect it to. Use a Position element or a builder module to render it inside the layout. If the module appears in preview but disappears on the public site, clear the cache and review access permissions.

Changes in Style Customizer Are Not Visible

Symptom: you changed a color, font, or custom CSS, but the public page did not update.

Check whether the changes were actually saved, whether a different template style is open, whether external caching is enabled, and whether a Less or CSS error occurred. The documentation warns that syntax errors in Less can break the Style Customizer. If the issue started after editing custom CSS or Less, temporarily remove the latest snippet and save again.

Dynamic Content Shows an Empty Block

Symptom: cards, article lists, or page templates do not output any data.

Check whether the selected source exists on the current page, whether a Joomla field was removed, whether the required field is mapped, and whether the template is assigned to the correct page type. In YOOtheme Pro, invalid sources and fields are highlighted. The fix is to switch the source, create the missing field, remap the field, or make the block static if you do not need dynamic behavior.

Photos Are Cropping Poorly

Symptom: the image looks great on desktop, but on mobile the main subject disappears or the text falls over a busy area.

The cause is usually an unsuitable crop, an overly tight composition, or a transparent header. Choose an image with a safe zone, adjust the image position or overlay, or replace the photo. Do not solve the problem by making the hero area endlessly taller - users should be able to reach the next meaningful block quickly.

Images Disappear After Optimization Is Enabled

Symptom: after enabling next-gen images, external caching, or an optimizer, some images stop displaying.

Check the system requirements, support for the required format on the hosting side, write permissions for the images folder, and any conflict with external caching. Roll back the latest optimization, clear the cache, and re-enable settings one by one. If the problem is related to server-side image generation, do not try to fix it with CSS.

An Editor Accidentally Changes the Global Design

Symptom: after content edits, the header, styles, menu, or sections change across several pages.

Check access permissions. Editors who should only update articles do not always need access to template editing or the YOOtheme Pro customizer. Separate the roles and keep a short change log: who edits styles, who manages menus, and who works in the builder. This matters even more on sites where Makai is maintained by a team rather than a single webmaster.

Questions Worth Answering Before Publishing a Site on Makai

Can I install the demo package on an existing Joomla site?

Not as if it were a regular template on top of an existing site. A demo package is a full Joomla installation with demo content. For an existing site, use the YOOtheme Pro template archive and transfer the required layouts and styles through standard YOOtheme Pro tools, if they are available.

Why are not all demo pages available after installation?

In most cases, only the template or theme archive was installed, not the demo package. In that case, the demo pages do not appear automatically. You need to load layouts from the library or build the pages manually using Makai as the reference.

Can I build a Russian-language site if the demo is in English?

Yes, but check the fonts, line lengths, buttons, menus, and system strings. Standard text is changed in the builder or in Joomla content, while system strings are better handled through language overrides.

What should I do if the mobile header looks worse than the desktop header?

Check the mobile logo, mobile menu position, dialog layout, and the length of the menu items. In many cases, it is enough to simplify the logo, move secondary items into the dialog, and review the contrast over the hero image.

Do I need dynamic content on a small site?

Not always. If there are only a few pages and the data changes rarely, a static builder layout is simpler. Dynamic content becomes useful when services, articles, team cards, categories, relationships, or fields repeat and should update from Joomla data.

Why does a module not show up on a builder page?

Some positions, such as the sidebar, may not render on full-width builder pages the same way they do on standard Joomla pages. Use a Position element, a builder module, or another suitable position, and also check the menu assignment.

Can I edit template files directly?

Not for normal setup work. Use Style Customizer, custom CSS, template styles, modules, language overrides, and a child theme. Direct core edits are harder to maintain through updates and harder to roll back.

When YOOtheme Makai Is the Right Choice

YOOtheme Makai is worth using if you need a visually expressive Joomla template for a service that sells through atmosphere, photography, and a clear visitor journey. It is especially strong for a school, club, rental business, sports camp, or wellness project where the homepage, services, pricing, contact details, and trust in the team all matter.

Before publishing, check more than just the visual result. Make sure you understand who will update services, where images are stored, which menu items control the template styles, which modules are reused, how the cache is cleared, and what permissions editors have. If those answers are clear, Makai stops being just a beautiful demo and becomes a manageable site foundation.

If the template fits your scenario after review, you can get the Joomla version, deploy it on a staging copy, and follow the process from this guide: installation, style assignment, header setup, menus, modules, images, a practical homepage build, and troubleshooting. That gives you a real working result before you start changing the live site.