Joomla 6 Template Documentation

Thank you so much for purchasing our product. We hope you enjoy using our template.

  • Author: Prothemes

If you have any questions that are beyond the scope of this help file, Please feel free to contact us

Description

Joomla 6 template built with Helix Ultimate and SP Page Builder 6. Joomla 6 requires PHP 8.2 or higher to run properly. Joomla 6 Technical Requirements

Modern, clean and fully responsive Joomla 6 template designed for SaaS startups, software companies and business websites. It features a well-structured layout, smooth user experience and a professional design tailored for modern digital products and online services. Built with Helix Ultimate and SP Page Builder 6, it delivers fast performance, easy customization and a flexible, scalable solution for creating high-quality websites without coding.

The template is based on Helix Ultimate Framework and uses SP Page Builder 6 , offering full control over layout, design and content structure.

Installation

There are two methods you can use to install your template:

  1. Using the quickinstall if you are starting your project from scratch.
  2. Using the template only if you are working on an already made website.

METHOD 1: The Quickinstall

The quickinstall package is a complete ready-to-use demo website. It includes Joomla 6, template, extensions and all demo content already configured.

This method will install the demo exactly as seen in preview.

The Quickinstall package includes:

  • Joomla 6 installation
  • Template
  • Helix Ultimate Framework
  • SP Page Builder 6
  • All demo pages, modules, menus and settings

This method is highly recommended for new projects.

Standard Installation Steps

  • 1. Create a fresh database on your server.
  • 2. Upload the Quickinstall package to your hosting.
  • 3. Extract the files into your website directory (public_html).
  • 4. Open your domain in browser.
  • 5. Follow the Joomla installation process.
  • 6. At the final step, set your own administrator username and password.

Akeeba Backup Restoration (Recommended)

The Quickinstall uses Akeeba Backup Core for restoring the demo website.

  • 1. Upload the Quickinstall files to server.
  • 2. Open your browser and go to yourdomain.com/installation/index.php.
  • 3. Follow the Akeeba restoration wizard.
  • 4. Enter your database details.
  • 5. Complete the installation.

IMPORTANT SECURITY WARNING

Default demo credentials may be:
Username: admin
Password: demo

⚠️ You MUST change these credentials during installation (last step) or immediately after login.
Leaving default credentials will expose your website to security risks.

Quickinstall in images

step 1
step 2
step 3
step 4
step 5

METHOD 2: The Template Alone

The template alone is only the template. It will not install the menus, components, modules and plugins from the demo — you will only get a new look. We included all instructions to get everything you need for your website to look exactly like the demo (follow all steps and check the FAQ).

Important:
The Template Only installation includes only the template design and framework integration. It does NOT include demo content (pages, modules, menus or layout).

The full demo preview is available ONLY via Quickinstall package.

1. First steps:

  1. Install Joomla 6 from the official website: Joomla Official Website
  2. After installing Joomla, open the template folder from the downloaded package and locate the template ZIP file.
  3. Go to System → Install → Extensions and upload the template ZIP file.
  4. Once installation is complete, activate the template from System → Site Template Styles.
  5. If everything is installed correctly, you can proceed to the next chapter.

2. With Joomla and our template installed, make it work:

  1. Make sure the template is present in your templates list.
  2. Install plugin system.zip for Helix Ultimate.
  3. Enable the required plugin(s) from the Joomla administrator area.
  4. Set the newly installed template as default.
  5. Great work so far. You should have the template up and running.
template list
install
enable
default

3. Get the components/modules we used in the demo:

  1. In the downloaded pack you have the extensions folder. Install all the extensions from there.
  2. There are also links to the free extensions in a text file.

4. Import settings to match the demo:

Pick what you need from the import folder:

  1. Template Settings:
    • Files are in import → theme settings.
    • Admin: Templates → Site Template Styles.
    • Click the Default template → Template Options → Advanced → Import & Export.
    • Select Default.json.
    import settings
    template options
  2. Import a Page in SP Page Builder:
    • Files are in import → page builder.
    • Admin: Components → SP Page Builder Pro → + New → Import.
    • Select the desired .json file and save.
    import page
  3. Page Builder modules:
    • Files are in import → page builder → modules.
    • Admin: Modules → + New → SP Page Builder.
    • Import the module .json.
  4. All done. If something looks off, check the FAQ.

Updating The Template

It is simple to update our template. Steps:

  1. Make a full backup of your website.
  2. If you didn’t modify core files just install the new template from the Template folder (download fresh pack).
  3. Keep safe any custom files you changed.
  4. Install the new template version from Joomla administrator.
  5. If you used custom.css, copy your rules to the new custom.css.
  6. Clear cache.

Updating To Joomla 6

Follow the steps below to migrate safely to Joomla 6 with our template.

More about Joomla 6 documentation.

  1. Full backup (site + DB) — we recommend Akeeba Backup.
  2. Check technical requirements for Joomla 6 (PHP 8.2/8.3, MySQL 8+ / compatible MariaDB): Technical Requirements.
  3. Update all extensions to the latest versions (SP Page Builder, Helix Ultimate, modules, plugins). Temporarily disable unknown/unmaintained extensions.
  4. Install the newest template package:
    • Admin: System → Install → Extensions and upload the new template ZIP.
    • Or via FTP: in /templates/ rename old folder (e.g. _old-template) and upload the new template folder.
  5. Clear cache (System → Clear Cache) and run Database Fix & Global Check-in (Maintenance).
  6. Switch to the proper update channel if needed (System → Update → Joomla → Options → Joomla Next/Stable).
  7. Run Pre-Update Check for Joomla 6:
    • Resolve extension compatibility warnings.
    • Tick the acknowledgment and click UPDATE.
  8. Regenerate CSS by saving the template options again. In Helix, pressing Save rewrites generated CSS files when needed.
  9. Re-check Off-canvas menu alignment (Template Options → Menu → Off-canvas) if it was lost during restore.
  10. Front-end testing: forms, SP Page Builder modules/pages, JS effects. If styles look missing, clear browser cache or re-check custom.css.

Quickstart for Joomla 6

Starting from scratch? Use our Joomla 6 Quickinstall package. Install the full demo in minutes via Akeeba, then replace logo, colors and content.

SP Page Builder compatibility: use the latest version compatible with Joomla 6. The “activate license” notice does not remove features included with our pack.

Theme Customization

All our styles are easy to modify. See below:

  1. GENERAL, HEADER, FOOTER → custom.css
    • General styles (components, blog, shop, font imports, Page Builder rows/columns), header and footer styles live in custom.css.
    • Edit: templates/your-template/css/custom.css
    • We might include some Page Builder custom CSS here when not possible directly in addon CSS.
    • Hint: Use browser dev tools (F12) to inspect classes.
  2. PAGE-LEVEL CSS via SP Page Builder
    • When a page needs different header/footer/background/fonts etc., we place CSS at page level (to avoid multiple template styles).
    • Top-left in Page Builder → Custom CSS → edit.
    • page css
  3. ADDON-LEVEL CSS
    • Each addon has its own Custom CSS section.
    • SP Page Builder → Pages → Edit page → Edit addon → STYLE tab → Custom CSS.
    • addon css

Quick Color Switcher (One-Click)

  • Custom Code – Custom CSS (Global Colors)
  • You can control the main colors of the website using CSS variables defined in the :root section.
  • :root {
    --bs-orange: #0d6efd;
    --color_blue: #0d6efd;
    --color_dark: #212529;
    --color_mint: #98fcff;
    --color_lavender: #d7e0ff;
    --bs-text-opacity: 1;
    --bs-border-radius: 6px;
    --bs-border-radius-pill: 800px;
    --bs-border-radius-xl: 12px;
    --bs-border-color: #dadcdf;
    --gray-800: #666b70;
    }
  • To quickly change the main color of the website, simply edit:
    --bs-orange: #0d6efd;

    Replace #0d6efd with your preferred brand color and save the changes to update the main accent color across the website.

Layout

Template Configuration

In the administrator panel go to Templates → Site Templates Styles → click your template → Template Options

  1. Basic
    • 1. Logo – Upload your logo image or use text logo.
    • 2. Header – Configure favicon, sticky header and header behavior.
    • 3. Body – Enable preloader, boxed layout and general layout options.
    • 4. Footer – Enable "Back to Top" button. The footer is created using a SP Page Builder module (position footer1) for maximum flexibility.
  2. Layout
    • Create and manage your website layout structure.
    • You can duplicate template styles to create multiple layouts.
    • Recommended: install the Quickinstall package on a subdomain and use it as reference.
  3. Menu
    • Helix Ultimate includes Menu Builder, Mega Menu and Off-canvas menu.
    • Important: for Off-canvas menu to work, make sure alignment is selected in Template Options.
  4. Custom Code Tab
    • Add your custom CSS and JavaScript directly from Template Options.
  5. Custom Code – Custom CSS (Global Colors)
    • You can control the main colors of the website and your extra CSS custom

Offline & Coming Soon Page

With Helix Ultimate, you can easily display a custom maintenance or pre-launch page on the frontend of your website. This is useful when your site is still under development or temporarily unavailable to visitors.

Instead of creating a separate page manually, Helix Ultimate provides a built-in option that automatically replaces your frontend with a Coming Soon or Maintenance layout once enabled.

Coming Soon Mode

The Coming Soon feature allows you to present a professional placeholder page while your website is being prepared. You can fully customize its content and appearance directly from the template options.

coming soon
  • Enable Coming Soon: Activates the maintenance/coming soon screen on the frontend.
  • Page Title: Main heading displayed (e.g. Coming Soon, Under Maintenance).
  • Description: Add a short message explaining the current status of the website.
  • Countdown Timer: Set a specific date and time for when the website will be available.
  • Logo: Upload your brand logo to be displayed on the page.
  • Background: Choose an image or color background.
  • Social Icons: Show links to your social media profiles.
  • Login Access: Allow administrators to log in from the frontend while the mode is active.

To allow frontend login access, make sure the Site Offline option is enabled from System → Global Configuration → Site.

Important: The Coming Soon mode is intended for public display before launch. If you are actively working on your site, it is recommended to disable it and use Joomla’s Offline Mode instead.

Also note that the frontend editor is not accessible while Coming Soon mode is enabled. You must disable it before switching to Offline Mode if editing is required.

Error Page Customization

Helix Ultimate also allows you to customize error pages such as 404. You can upload a custom background and logo to maintain a consistent design across your website.

Additionally, you can assign a module to the 404 position and display custom content, including Joomla modules or SP Page Builder sections.

Template Options

Access Template Options from System → Site Template Styles → your template.

template options
Basic Tab – add your logo logo
Choose header layout header
Choose body loading animation preloader
Layout boxed or full width

Boxed: add image/color background visible on left/right. Full width: edge-to-edge pages.

layout
Typography

Enable and choose your site fonts.

typography

Extensions

Official documentation for the extensions used in our template.

  1. SP Page Builder PRO 6
  2. Helix Ultimate Framework
  3. Akeeba Backup for Joomla

FAQ

Below are answers to the most common questions about installation, setup and customization.

Go to Components → SP Page Builder, create a new page, click Import in the top-left area, select the required JSON file from the import/page builder folder, then save the page.
Before importing pages, copy the images folder from the Quickinstall package into your Joomla website /images directory. If the images are not copied, imported pages may appear incomplete.
The Template Only installation does not include full demo content. To reproduce the demo layout, import the template settings and SP Page Builder pages from the import folder, or use the Quickinstall package for a complete ready-to-use demo website.
Some sections may use Joomla modules instead of direct page content. These modules must be recreated or assigned manually. We recommend checking the Quickinstall version as reference and confirming that the images folder has been copied correctly.
Some premium extensions included with the template may show licensing or activation notices inside the administrator area. The features included in our package remain functional. If you need a manual update, contact us through the support page.
Yes. Always create a full backup of your website and database before updating the template, Joomla core, or any extension.
If you use Quickinstall, the demo setup is already included. If you use Template Only, non-Page Builder modules and Joomla menu items usually need to be recreated manually.
If your header uses different logo states such as normal, transparent or sticky versions, CSS filters or alternate logo settings may affect the result. Check your logo settings in Template Options and review custom.css if needed.
In this template, the footer is built as a SP Page Builder module assigned to position footer1. To edit it, go to Extensions → Modules and modify the relevant module.
Go to Template Options → Custom code → CSS and update your main color variables there. You can also change colors inside individual SP Page Builder addons when needed.
One regular license is valid for one live website. If you want to use the template on multiple live domains, you need an additional license for each domain.
No. The included extensions are provided for use with this template package. However, automatic updates or vendor-only services may require direct licenses from the original developers.
No. The easiest method is to use the Quickinstall package, then replace the demo content, images and branding with your own.
The default administrator credentials may be admin / demo. For security reasons, you should change them during the final step of installation or immediately after the first login.
Some SP Page Builder block library items are part of JoomShaper’s own online service and may require a personal license. The template package still includes all layouts, pages and styling used in the demo.
Check the PHP version, folder permissions, database connection details and server limits such as upload_max_filesize, post_max_size and memory_limit. Also confirm that your server meets Joomla 6 technical requirements.
Make sure the Off-canvas alignment option is selected in Template Options → Menu → Off-canvas. If this setting is missing, the menu may not open correctly.
Go to Templates → Site Template Styles → Your Template → Template Options → Typography and adjust the font settings as needed.
Yes. SP Page Builder can also be used for modules. For example, header or footer areas may be created and managed as SP Page Builder modules depending on the demo structure.

Source & Credits

Images:

Fonts:

Components & Framework:

  • SP Page Builder PRO
  • Helix Ultimate Framework
  • Akeeba Backup

Support

If this documentation doesn't answer your questions, please contact us using Support Page

We may be located in different time zones, but we answer all questions as soon as possible, weekdays and weekends. If you don’t get a reply within 24 hours, please write again or comment in the item page — email can sometimes fail to reach us.

Note: Support is for verified buyers and covers issues related to our template (bugs and errors). Custom work and 3rd-party integrations are not included and may require a paid service.

Don’t forget to Rate this template

Please add your Review for our template — it helps us a lot.
Thank you!

Changelog

See what's new: added, changed, fixed, improved or updated.

Version 1.0 (May 14, 2026)

  • Added Initial release
  • Added Joomla 6 compatibility
  • Added Quickinstall package (Akeeba Backup)
  • Added Helix Ultimate framework integration
  • Added SP Page Builder support