YOOtheme Horizon - Joomla Template

A Practical Guide to Setting Up and Using YOOtheme Horizon

YOOtheme Horizon is a Joomla template for technology companies, agencies, service businesses, and product-focused websites, but its real value does not come from a polished cover image. It comes from assembling it properly: understanding the demo structure, configuring styles, menus, modules, images, post templates, and validating the final result. In this guide, we will look at Horizon as a working starter kit rather than a static catalog screenshot.

This guide is written for a Joomla site owner, webmaster, or editor who needs to turn a demo into a clear company or product page quickly. We will cover preparation, installation, initial checks, YOOtheme Pro settings, a practical homepage example, common issues, and safe improvements. We will also look at where Horizon works especially well and where another template or a more flexible builder-based approach may be a better fit.

All specific facts about the number of layouts, styles, the demo package, and post fields come from the official Horizon page and the YOOtheme Pro documentation. Where the interface may differ in your installation, the wording here stays intentionally cautious: check the current developer documentation and your local settings screen first, then move changes to the live site.

What Horizon Brings to a Site and Where It Works Best

The official page positions Horizon as a template for software and technology websites. The demo makes it clear that the main emphasis is on a clean white background, refined typography, red accents, spacious sections, large tech-style hero graphics, and blocks for services, clients, metrics, products, and news. This is not a heavy corporate template packed with dense tables and multiple side columns. Its strength is clean presentation for a product, service, or agency site where the visitor should quickly understand the value and move to services, pricing, company, or news pages.

The package includes 9 ready-made page layouts: home, features, services, about, pricing, index, post, plus additional page variations for product and service content. That matters in real-world work because you do not have to start from a blank canvas. You can use the demo as a map for the future site structure, replace the text, swap in real images, and keep only the pages your project actually needs.

The second important layer is the 6 style variations. In Horizon, this is not just a button color swap. A style affects the overall tone of the site, background treatments, accent contrast, and the mood of the interface. The official page lists Default, White Blue, White Green, White Dove, Dark Turquoise, and Black Orange. If you are building a B2B service site, a digital product landing page, or a small studio website, it usually makes sense to start with calmer light options and decide on a dark style only after reviewing real content.

The main practical takeaway: Horizon is especially useful when your site structure resembles the demo scenario: a homepage, services, product benefits, team or company pages, pricing, news, and posts. If you need a marketplace, a complex catalog, a user account area, or a site with many custom components, Horizon can still serve as a strong visual foundation, but you will need to plan extensions and output templates separately.

Who This Joomla Template Fits and Who Should Think Twice

Before installation, it helps to answer one question honestly: does your site match the logic of the template? Horizon is minimalist, which means weak content becomes more noticeable than it would in a busier design. If the demo hero uses a strong, modern tech illustration but the real site ends up with a random low-quality banner, the page will lose credibility very quickly.

Good Use Cases for Horizon

The template works well for sites that need to explain a service or product through several sequential sections. For example, a development studio can use the hero for its core offer, the services block for work areas, careers or company for trust, pricing for plan logic, and news or post for a knowledge base. A SaaS project can replace the demo captions with product benefits, add interface screenshots, create a features page, and use articles as a technical blog.

For a small agency, Horizon is convenient because the demo already has a clear rhythm: heading, short explanation, visual proof, and next step. You can keep that rhythm without copying the text. The key is not to overload each section with long descriptions. The template is built for short, precise blocks and strong visual hierarchy.

When Horizon May Be Inconvenient

If the site needs to display many categories, filters, user account areas, complex spec tables, or advanced forms, the template alone will not be enough. YOOtheme Pro can work with dynamic content and Joomla custom fields, but the project still needs to be designed as a system: what fields Joomla stores, what templates output them, which modules appear on which menu items, and how cache and access permissions affect the final result.

Do not choose Horizon just because the first demo section looks good. A visual template does not replace content architecture. Before installation, sketch out your pages, blocks, images, menus, and modules. If you do not need half of the demo and will have to build the missing pages from scratch, another YOOtheme package or a separate framework with its own design may be a better choice.

What to Check Before Installation and Demo Import

Preparation is not just a formality. YOOtheme Horizon has two different entry paths: installing the YOOtheme Pro theme into an existing Joomla site, or launching the demo package as a full Joomla installation with demo content. The official documentation clearly separates these options: the demo package cannot be installed over an existing site like a regular template because it is a complete Joomla build.

Site and Environment Checks

Before you begin, check more than just the template file:

• Create a backup of your files and database if you are not working on a clean test installation.
• Verify the YOOtheme Pro requirements and the current Joomla requirements, especially PHP, the GD extension, and write permissions for directories.
• Make sure you have the Joomla package itself, not a WordPress theme and not the full demo package intended for a new installation.
• Prepare your logo, favicon, core images, menu structure, and real text for the hero, services, pricing, and company sections.
• Check who is allowed to edit the template. In YOOtheme Pro, access to the customizer is tied to the Edit Templates permission, and that permission should not be broader than necessary.

For a live site, it is better to work on a staging copy. Visual changes, style switching, and template style assignment changes can affect several pages at once. On a test copy, you can see which modules and menu items actually change before visitors encounter an unfinished interface.

A Content Map Before the First Click

Create a simple table that maps each Horizon demo page to a real page on your site, shows which menu item opens it, what modules should appear there, and what result you expect. This is especially useful for pricing, services, and news. Site owners often import a demo, change only the first screen, and leave inner pages with demo captions and demo logic still in place.

Before importing or building manually, define a minimum goal: the homepage opens correctly, the menu leads to real sections, modules do not show unnecessary content, and demo text has been removed from the public-facing site.

Installation: Regular Template, Demo Package, and the First Check

For an existing site, the standard path starts with installing the YOOtheme Pro theme package for Joomla. After installation, assign the template, open Website Builder, and confirm that the customizer, pages, style library, and media manager all work without errors. If you want to explore Horizon in detail, it is more convenient to deploy the demo package separately. It includes a full site with YOOtheme Pro, demo content, layouts, images, and styles.

If the Site Already Exists

1. Open the Joomla admin panel and go to extension installation.
2. Upload the YOOtheme Pro theme package for Joomla, not the demo package.
3. After installation, open System, then the templates section, and make sure the YOOtheme style is available.
4. Open Website Builder and check that pages, templates, the style library, and the media manager all load correctly.
5. Configure the API key only if you need updates, access to the layout library, and cloud image libraries. Do not share keys with outside contractors unless there is a real need.

After installation, do not rush to change everything at once. Start by checking one page, one menu item, and one style. That makes it much easier to understand exactly what changed: Joomla settings, template style, page layout, or an individual module.

If You Want to Start from the Demo

The demo package is deployed as a new Joomla installation. It is a good way to see how Horizon is assembled: what pages it includes, which custom fields it uses, how post templates are connected, and where images are placed. But it is not a safe way to "add the demo" to an existing site. If you want to transfer the structure into a real project, it is safer to study the demo package on a separate domain or local copy and then manually move the layouts and settings you actually need.

The initial post-installation check is simple: open the homepage, check the menu, save one layout without changing it, switch the style in the style library, and switch it back. If saving does not work, do not continue configuring the site until you have checked file permissions, PHP limits, cache, and YOOtheme Pro system messages.

Configuring YOOtheme Horizon After Installation

The real work begins once the template is installed and opens without errors. Horizon setup has several layers: site and logo, header and navbar, style library, page layouts, modules, template styles, media, and system parameters. If you change them randomly, you can easily end up with a situation where a heading is fixed in the builder, but another template style still shows the old version, or a module is published but does not appear because of menu assignment.

Logo, Header, and Navigation

In the Horizon demo, the header is very light: a small logo on the left, a slim top menu, and a lot of open space. That means long menu labels can quickly break the rhythm. In Layout → Header, check the placement of the logo, navbar, and header positions. If you have many menu items, it is usually better to keep the main menu short and move secondary links to the footer or a dialog/offcanvas area instead of compressing navigation until it becomes hard to read.

If your site uses longer menu labels, check them in advance. If you need more descriptive wording, consider using a dropdown or separate pages. After every change, review the public-facing page at both wide and medium viewport widths, because Horizon's header relies on precise spacing.

Style Library and Palette Selection

The official Horizon page shows 6 variations. Start with the one that fits your content best, not the one you personally like most. For a technology landing page with mostly white screenshots, a light style with a red or blue accent is usually the easiest starting point. For a more contrast-heavy product, dark options may be worth testing, but check text readability over images right away.

YOOtheme Pro lets you switch style variations and save your own styles. That is convenient, but there is a common trap: if an editor changes colors without checking contrast, the hero may look impressive on a large monitor and become hard to read on a laptop or at mobile width. The inverse colors documentation explains separately that text on images is not always detected automatically, so for sections with a background image you need to check Text Color, Color Mode, and, when needed, Preserve color.

Images, Focus, and Performance

Horizon relies heavily on polished tech visuals and product illustrations. YOOtheme Pro can generate responsive images, use width and height to prevent layout shifts, handle cropping through a focal point, and apply lazy loading. For the first screen, choose an image that is large enough, but do not overload the page with a collection of heavy files. If an image appears in the initial viewport, check whether it should use eager loading. For lower sections, lazy loading is usually the better choice.

Do not replace every demo image with random stock photography. Horizon is built around calm white space and precise accents, so it is better to use fewer images and keep them visually consistent. If the product has an interface, use real product screenshots in the hero and features sections. If this is an agency site, process diagrams, case studies, clean team photos, and visual proof of results are usually a better fit.

Post Fields and Post Templates

The official Horizon documentation lists two custom fields for the default Post: Teaser Image as an alternative post image and Teaser Image Text Color for text color on the background image. This is a small but important product-specific detail. If you are using the blog, news, or knowledge base section, fill in these fields in test posts and check how they render in the index and post layouts.

If a field is empty, the layout may look different from the demo. That does not automatically mean the template is broken. First check which fields the specific layout expects, whether the post contains an image, and whether the selected text color disappears into the background. That approach is usually faster than hunting for a CSS issue or reinstalling the template.

Template Styles, Menus, and Different Page Variations

With a Joomla template, it is important to understand the difference between a page layout and a template style. A page layout defines the structure of a specific page in the YOOtheme builder, while a template style can be duplicated and assigned to menu items. The YOOtheme Pro documentation describes the workflow: open Joomla Template Manager, duplicate yootheme - Default, and then assign the new style to the required menu items through Menu Assignment or through the settings of a specific menu item.

This is especially useful in Horizon when the homepage should feel light and presentation-focused, while news or post sections should feel calmer and easier to read. For example, you can keep a transparent or minimal header and a large hero on the homepage, while using a different template style for articles with a more standard header and a more comfortable content width.

A Practical Assignment Scheme

Do not create many template styles just in case. Start with two:

• A primary style for the homepage and marketing pages, where the hero, red accents, and visual sections matter most.
• A content style for posts, news, and documentation pages, where readability, stable text width, and a predictable header matter more.

After assigning them, open each menu item on the public-facing site and verify which style is actually being applied. If the result does not match your expectation, check template style order, menu assignment, and caching. In Joomla, confusion often comes not from the design itself, but from different assignment layers overriding each other.

How to Avoid Breaking the Demo During Adaptation

Keep the original structure as a working reference point. Before making a major page edit, create a copy of the layout or save the section to the library if that option is available in your installation. YOOtheme Pro shows sticky Save Layout and Cancel buttons, and it is worth using them deliberately: saving a page layout does not save all theme settings, and cancel only rolls back layout changes made since the last save.

If you are not sure where the page appearance is being changed, check the chain in order: menu item -> assigned template style -> page layout -> modules -> post fields -> cache.

Modules and Positions: Bringing Joomla Logic into a Visual Template

Horizon may look like a polished landing page, but a Joomla site rarely consists only of static builder sections. You still need menus, search, a language switcher, news, contact blocks, modules in top or bottom positions, and sometimes a sidebar. The YOOtheme Pro documentation emphasizes that Joomla Module Manager is integrated into YOOtheme Pro: modules can be viewed in the Modules panel, their settings can be opened, and they can be linked to the live preview.

Which Positions to Check First

For most Horizon-based sites, start by checking logo, navbar, header, dialog, top, bottom, and builder-1 through builder-6. The toolbar-left and toolbar-right positions are useful if you need to show a short contact line, a language switcher, or a search link above the header. There are separate mobile equivalents for the header as well, and you should not ignore them if the site is multilingual or includes an important quick-access link.

Pay special attention to sidebar. The YOOtheme Pro documentation states that the sidebar position is not rendered on pages built with the page builder, even if a module is published in sidebar. That is not a Horizon bug. On builder-based pages, the sidebar needs to be assembled inside the layout itself, for example with a Position element or a custom section grid.

Module Assignments and Visibility

In Joomla, modules can be assigned to specific pages. If a module is not visible, do not start by reinstalling the template. Check publication status, position, menu assignment, access, language, cache, and whether you are expecting a sidebar on a builder page. For more advanced visibility rules, the YOOtheme documentation mentions Advanced Module Manager by Regular Labs, but use it only when standard Joomla assignments are no longer enough.

Good module setup in Horizon usually looks like this: the main menu stays short, top and bottom positions are used for repeatable promo or trust elements, the footer contains links and contact details, and builder positions are used only when a module needs to appear inside a visual layout. The fewer random modules you publish on "all pages," the easier the site is to diagnose and maintain.

A Practical Example: Building a Homepage for a Technology Service

Let us walk through a scenario that fits Horizon especially well. Imagine you are preparing the homepage for an analytics service or an automation agency. The goal is not just to replace lorem ipsum, but to build a clear visitor path: what the product does, who it helps, which services or features are available, where the proof is, and where to go next.

Goal and Preparation

The goal is a homepage where the first screen explains the offer, the menu leads to the product, services, company, and news, and the lower sections highlight services, metrics, product benefits, and recent content. Before you start, you should already have a logo, 3 to 5 menu items, one strong image or product screenshot, short copy for the hero, services, and features sections, and 2 to 3 posts for testing the index and post layouts.

Step-by-Step Assembly

1. Open the homepage in the YOOtheme builder and find the hero section that contains the "all round experience" heading in the demo.
2. Replace the heading with a specific value proposition, for example around reporting automation, product development, or digital customer support.
3. Keep one primary link in the hero and point it to the product, services, or contact page. The button label should match the action instead of sounding generic.
4. In the services block, replace the 4 demo directions with real services or features. Give each one a short explanation, otherwise the cards lose their rhythm.
5. Use only verifiable numbers in the metrics section. If you do not have real metrics, it is better to replace that section with case studies, testimonials, or a results list.
6. Check the news or post layout: add Teaser Image and Teaser Image Text Color to a test post, then open the content listing.
7. Save the layout, clear the cache, and review the page as a guest, not only as a logged-in administrator.

Validating the Result

The public-facing page should answer three questions without forcing the visitor to dig through documentation: what the site offers, where to click next, and which sections are available in the menu. Further down the page, the user should see real services, benefits, proof, and current content. If the first screen looks attractive but the menu leads to empty pages, the setup is not finished.

A Nuance That Often Gets in the Way

The most common mistake in this scenario is leaving the demo structure in place without any content logic behind it. Horizon handles a lot of open space well, which means an empty block becomes obvious immediately. If you do not have real data for a metrics section, do not insert random numbers. Remove the section, save the layout, and make sure the surrounding blocks still flow naturally.

Practical Ways to Use Horizon Across Different Site Types

Horizon does not have to remain "a site about apps." It can be adapted to different technology-driven scenarios as long as you do not invent features and instead rely on the capabilities it actually provides: page layouts, style variations, the YOOtheme builder, modules, template styles, media, and Joomla content. Below are several ideas you can implement without changing the Joomla core or relying on questionable custom modifications.

SaaS Product Website

Use the homepage as a path from the promise to the features. The hero shows the main outcome, services becomes a block of key capabilities, pricing explains the plan logic, and the post layout becomes a hub for updates and educational content. The check is simple: the user should immediately understand where to see the features, where to compare options, and where to read the details.

Agency or Studio Website

For an agency, the key combination is services, company, careers, and news. Horizon supports that rhythm well: first you explain the direction briefly, then show services, team, metrics, and publications. If you need case studies, you can use post templates and custom fields for cards with a teaser image.

A Small Product-Centered Knowledge Base

If the site needs to educate as well as sell, create a separate content-focused template style for articles. The homepage can remain marketing-oriented, while posts get a calmer width, a clear heading, and a cleaner teaser image output. In this scenario, Teaser Image Text Color and contrast checks on background images become especially useful.

Internal IT Service Presentation

For a corporate portal, Horizon can serve as a showcase for an internal service: the product section describes capabilities, services shows processes, company becomes the support team, and news becomes updates. The important part is configuring Joomla access permissions properly and making sure internal materials are not visible to guests if the site is accessible from outside the organization.

Performance, SEO, Accessibility, and Safe Improvements

With a template for a technology-focused site, people often judge appearance before performance. That is a mistake. If the hero is heavy, images are not optimized, contrast is weak, and the menu is overloaded, a polished design will not save the experience. YOOtheme Pro gives you tools for responsive images, lazy loading, next-gen formats, local storage for selected Google Fonts, aria labels, and a skip link, but the final quality still depends on your decisions.

What to Check for Performance

• Specify correct width and height values for images to avoid layout shifts.
• Keep lazy loading for lower-page images and evaluate the first screen separately.
• After changing image quality or formats, clear the image cache so you can see the real result.
• Do not use too many different fonts and font weights. The YOOtheme documentation recommends staying close to the global typography settings.

What to Check for SEO and Accessibility

For Horizon, SEO does not start with a keyword list. It starts with a clear structure: one meaningful H1 is already provided by the page itself, the layout should contain logical headings, buttons should lead to real sections, and images should be meaningful and include useful alternative text. For accessibility, check text contrast in the hero, keyboard navigation focus, link readability, and whether text gets lost on background images.

A Small and Safe CSS Fix for Focus Visibility

If keyboard focus on buttons or navigation becomes hard to see after choosing a style, you can add a small CSS snippet in YOOtheme Pro Settings → CSS or in the child theme's css/custom.css. This does not modify the template core and relies on the public UIkit classes that YOOtheme Pro uses on the frontend.

.uk-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible {
  outline: 2px solid #e94b4b;
  outline-offset: 4px;
}

.uk-section-primary .uk-button:focus-visible,
.uk-light .uk-button:focus-visible {
  outline-color: #ffffff;
}

After adding the CSS, open the site, press Tab, and check the hero button, the menu items, and the links in the header. If the outline clashes with your style, change the color or remove the snippet. Rolling it back is simple: remove the CSS from the field or file and clear the cache.

Do not add large CSS overrides before you have checked the style library, color mode, and template style settings. Very often the issue can be solved with a built-in parameter instead of a manual override.

Why Horizon May Not Look Like the Demo and How to Diagnose It

Problems with a Joomla template rarely have a single cause. The same symptom may be tied to the demo package, a template style, a module, menu assignment, cache, file permissions, or unfilled custom fields. It is better to diagnose from simple to complex so you do not reinstall a working template because of one incorrect assignment.

The Demo Will Not Install Over an Existing Site

Symptom: you try to upload the demo package as if it were a regular template, but Joomla does not accept it or the result looks nothing like the demo. A likely reason is that the demo package is a full Joomla installation, not an extension package for an existing site.

What to check: the archive name, the developer instructions, and the package type. If it is a demo package, deploy it separately as a new installation. If you need to work with an existing site, install the YOOtheme Pro theme and move layouts using the standard YOOtheme Pro tools if they are available in your subscription and installation.

The Page Does Not Match the Selected Style

Symptom: you switched the style variation, but one specific page still looks different. The cause may be another template style assigned to that menu item, local layout settings, or cache. Check Menu Assignment, then open the relevant menu item and see which template style is selected in its details.

Fix: assign the correct style to that menu item, save the changes, clear the Joomla cache, and clear the browser cache. If the page still looks different, check whether a separate template was created in YOOtheme Pro that overrides the output for that page type.

A Module Is Published but Not Visible on the Page

Symptom: the module exists in Joomla and has a selected position, but it does not appear on the public-facing page. Check publication status, access, language, menu assignment, position, and page type. For builder pages, remember the sidebar rule: the sidebar position is not rendered on pages built with the YOOtheme Pro page builder unless you place it inside the layout through the appropriate element.

Fix: use the appropriate positions for the header or footer, and for a more complex block inside a page use a builder module or a Position element. If the visibility rule is complex, first get the output working with standard Joomla settings and only then bring in Advanced Module Manager.

Text Is Hard to Read on an Image

Symptom: the hero heading or background cards disappear against a light or dark image. This is especially noticeable in Horizon because of its minimalist typography. Check Text Color, Color Mode, inverse colors, and overlay color. If you are using a post layout, also check Teaser Image Text Color.

Fix: start with the built-in text color and overlay settings, then replace the image or adjust the crop focus. Use CSS only after checking the built-in parameters. If different pages need different solutions, separate them through template styles or post fields.

Saving a Layout or Style Does Not Work

Symptom: you click Save Layout, but the changes disappear or the customizer shows an error. Possible causes include write permissions, PHP limits, a cache conflict, incorrect user permissions, or a syntax error in custom CSS/Less.

Check: open YOOtheme Pro Settings and the system check, review Joomla errors, temporarily disable questionable custom CSS/Less, and verify the user's Edit Templates permission. If the issue started after adding CSS, remove the last snippet and try saving again.

When YOOtheme Horizon Is a Good Choice

Horizon is worth using if you need a clean, technology-oriented Joomla site with a ready-made demo structure, polished typography, multiple styles, and the ability to build pages quickly with YOOtheme Pro. It works especially well for services, agencies, product presentations, and websites where clear sections, visual rhythm, and calm professional presentation matter.

Before launch, verify three things: the site structure matches the layouts, the editors understand the difference between a page layout, a template style, and a module assignment, and the images and text are prepared for a minimalist design. If those conditions are in place, you can get the YOOtheme Horizon file, deploy it on a test installation, and validate the result before moving it to the main site.

If the project requires a complex catalog, a large number of custom components, or a design far removed from the demo, use Horizon only as a visual starting point. In that case, plan extensions, output templates, access permissions, and the content model in advance so that a polished start does not turn into a long rebuild.