JS Stellar is a creative agency template for Joomla that allows users to easily build and manage websites for their businesses. This template offers a wide range of features and customization options, making it suitable for various creative agencies.

Template Version: 2.0.2
SafariJoomla template JoomShaper Stellar
 

Template Description

Template JS Stellar provides a sleek and modern design to showcase the creativity and professionalism of a creative agency. With its clean layout and professional typography, this template ensures that your website captures the attention of visitors and leaves a lasting impression.

This template for Joomla offers a responsive design, ensuring that your website looks great on any device, including desktops, tablets, and mobile phones. It also comes with a variety of pre-designed pages and sections, allowing you to easily create a unique and engaging website that reflects the branding and style of your agency.

This templates powerful navigation system allows for easy browsing and seamless user experience. Its intuitive menu system enables visitors to navigate through the website effortlessly, finding the information they need in a convenient and organized manner.

One of the standout features of this template is its extensive range of customization options. With JS Stellar, you have full control over the layout, colors, fonts, and other visual elements of your website. This flexibility allows you to create a website that aligns perfectly with your agencys brand identity and vision.

Furthermore, this template is developed with SEO optimization in mind, improving the visibility and ranking of your website on search engines. By incorporating best practices for on-page SEO, JoomShaper Stellar ensures that your website has a solid foundation for attracting organic traffic and reaching a wider audience.

Aside from its visual appeal, this template also offers functionality and features that enhance the user experience. It includes integrated social media buttons, contact forms, and other interactive elements that allow visitors to engage with your agency easily. Whether you want to showcase your portfolio, highlight your services, or promote your team members, this template provides the tools and flexibility to do so effectively.

Another remarkable feature of this template is its compatibility with popular Joomla extensions. This allows you to extend the functionality of your website by integrating additional tools and features that suit your agencys needs. Whether you want to add a blog, an e-commerce platform, or a booking system, this template can easily accommodate your requirements.

In conclusion, JoomShaper Stellar is a powerful and flexible template for Joomla that empowers creative agencies to build stunning and functional websites. With its sleek design, responsive layout, and extensive customization options, this template provides the perfect platform to showcase your agencys creativity and professionalism. Whether you are a web design agency, a photography studio, or a marketing firm, this template is designed to help you succeed online.

Template Features:

  • The template is constantly updated to the latest versions of Joomla!.
  • Actual and secure code, the latest versions of PHP and MySQL.
  • Support compression of JavaScript and CSS to speed up website.
  • Compliance with standards W3C XHTML 1.0 Transitional and W3C CSS Valid.
  • Template frame comprises 40+ positions for the location of the modules and 5 color suffix.
  • The template includes 3 excellent color schemes.
  • The ability to change the background image for the main color themes, template parameters.
  • Advanced typography for a custom design content.
  • Has support for Google fonts and RTL/LTR languages.
  • Several types of menus: Off Canvas, Mega Menu, Split Menu и Drop Line Menu with smooth effects.
  • Shortcode Plugin allows you to quickly and freely to build their own columns, buttons, quotes, headlines and will save you time.
  • Includes support for CCK component of content management K2, SP Page Builder Pro, and other popular extensions.
  • Support for Retina displays and large-format monitors with high resolution!
  • Demo QuickStart package with support for version Joomla! 6.x.

Specifications:

Release date: 01-06-2018
Last updated: 13-01-2026
Type: Premium
License: GPL 
Subject: Blog Business Portfolio Hi-Tech & Software
Compatibility: J3.x J4.x J5.x J6.x
QuickStart: Joomla! 6.x
Color
schemes:
Developer: JoomShaper

Rating:
4.5276595744681 1 1 1 1 1 (235 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

General Features:

 

Helix v3 Framework

The framework provides an easy access to hundreds of powerful features and tools for more flexible customization and create amazing websites based on Joomla.

Responsive Design

Fully flexible layout template perfectly adapts to the users browser width. And great is displayed on your PC, iPad, iPhone and other mobile devices.

HTML5 & CSS3

Template has a wide range of benefits, since only uses modern web technologies: HTML5, CSS3, LESS, JQuery and Bootstrap 3.2.

Quick Start

Install a complete Joomla! website containing demo content, styles and preconfigured extensions to get started in minutes.

Cross-Browser

Impeccable work in all modern browsers, such as Firefox, Chrome, Safari, Opera, Netscape, Yandex Browser and Internet Explorer 10+.

SEO optimization

Code template database is fully optimized to ensure good indexing and the presence of your site by Joomla Search Engine.

How to Set Up JoomShaper Stellar for an Agency or Portfolio Website

JoomShaper Stellar is useful not just as another attractive Joomla skin, but as a starting foundation for an agency, studio, designer, photographer, marketing team, or small business website that needs a strong hero section, portfolio, services, blog, and contact blocks. This guide does not focus on the template's sales page. Instead, it walks through the practical work: which package to choose, how to deploy the demo, what to check in Joomla, where to edit the homepage, and how to connect menus, modules, positions, the footer, and Helix Ultimate settings.

Cover image for the JoomShaper Stellar guide with the template demo homepage
General visual reference: Stellar is built around a bold hero section, portfolio, service blocks, and a clean agency-style layout.

This guide is intended for a site owner or Joomla administrator who already has the template archive and wants to test it safely on a staging domain. We will clearly separate two scenarios: installing Quickstart as a ready-made demo site and installing only the Template Pack on top of an existing Joomla site. That distinction matters because the expectations for these packages are different: Quickstart gives you an almost ready-made copy of the demo, while the standalone template requires you to assemble pages, modules, and content manually.

The guide also includes a practical scenario: building a homepage for a creative studio based on Stellar's demo logic, replacing the content, configuring the menu, checking mobile navigation, the footer, the contact form, and the final result on the live front end. We will also cover common troubleshooting cases: the demo does not match the preview, images are missing, the menu does not expand, the footer does not update, the contact form does not send email, or custom CSS does not work.

What the Template Does and Where It Works Best

Stellar belongs to the category of visual Joomla templates for creative and commercial websites. Its main purpose is to give your site a complete structure quickly: a hero section with a prominent message, navigation, service blocks, portfolio, gallery, about page, blog, contact area, and trust-building elements. According to JoomShaper's materials, the template is built on Helix Ultimate and SP Page Builder Pro, and the demo homepage uses the page builder for its layout. Because of that, Stellar is best viewed as a three-layer setup: Joomla manages content and menus, Helix Ultimate handles the framework, header, footer, responsiveness, and template settings, and SP Page Builder is used to edit pages and visual sections.

This approach works especially well for sites where the visual presentation helps sell expertise. For an agency, it is not enough to have a "Services" page. Visitors need a fast path: see the specialization, understand the team's experience, open work samples, and move to contact. For a photographer or designer, the emphasis shifts more toward the portfolio and gallery. For a marketing team, the blog and service pages become more important. For a small business, Stellar can serve as a starting structure if the content is not overly specific and does not require a complex catalog, member area, or custom logic.

Stellar's biggest strength is the ready-made visual rhythm of the demo: a large hero block, light sections, a distinctive green-turquoise accent color, service and portfolio cards, and confident typography. The weakness of any template like this is the risk of leaving demo text, random images, and unconfigured modules in place. If you skip the initial setup, the site will look like a generic template showcase instead of a page for a real company.

The template is a good choice if you need a Joomla foundation without building everything from scratch, while still keeping the ability to edit pages through a visual editor. It does not replace content strategy, copywriting, real case studies, or SEO setup, but it removes much of the work involved in creating the initial layout. If the project requires a complex product catalog, booking flow, customer account area, private section, or custom CRM integration, Stellar may work only as the visual layer, not the core solution.

Stellar Packages: Quickstart, Template Pack, and SP Page Builder

Before installation, you need to understand which archive you actually have. JoomShaper's documentation for Stellar separately describes the Quickstart Pack, the Template Pack, and the role of SP Page Builder. This is not just a technical detail. It is exactly where the expectation of "I installed the template, so why doesn't my site look like the demo?" usually comes from.

Quickstart as a Ready-Made Demo Site

Quickstart is a full Joomla installation package that includes the template, extensions, modules, Helix Ultimate settings, and demo content. Its purpose is to deploy a site that looks similar to the demo on a clean environment. It cannot be properly "installed on top of" an already running Joomla site like a regular template. It needs its own directory and its own database, just like any standard new CMS installation.

Quickstart is convenient when you are launching a new site or want to study the finished setup in a staging environment first. After installation, you can open the homepage, review the menu structure, module positions, footer settings, SP Page Builder pages, and then copy that logic into your own project. The demo content in this package is meant for learning and replacement, not for publishing as-is.

Template Pack for an Existing Site

The Template Pack is a standalone Joomla template. It controls the site's appearance, but it does not bring along all demo pages, modules, images, and components in a ready-to-use state. If you install only the Template Pack on an existing Joomla site, the site is not supposed to automatically match the official preview. You will need to assign the template style, create or connect menus, place modules into the correct positions, configure pages, and install any required dependencies if needed.

This path is better for an existing live site where you cannot overwrite the structure with Quickstart. It is safer for your content, but it requires more manual assembly. Before installation, create a backup, check extension compatibility, and prepare a list of pages that will be moved to the new design.

The Role of SP Page Builder in Real-World Work

The Stellar demo homepage is built with SP Page Builder Pro. That means a large part of the visual structure lives not only in the template settings, but also inside the builder pages themselves: sections, columns, addons, images, buttons, spacing, and background blocks. When working with the demo, first locate the correct page in the SP Page Builder component, open it for editing, and change the content where it is actually stored.

One important detail: Quickstart may include an installed copy of SP Page Builder Pro, but the standalone Template Pack by itself does not mean your existing Joomla site already has a separate up-to-date builder installed. If the site is not being built through Quickstart, confirm in advance which components need to be installed and available for page editing.

Decision flow for choosing Quickstart or Template Pack for JoomShaper Stellar
Your package choice determines everything that follows: Quickstart is explored as a ready-made demo build, while the Template Pack is assembled manually on an existing Joomla site.

What to Check Before Installing on Joomla

Preparation for Stellar starts not with uploading the archive, but with checking the environment. JoomShaper templates have requirements for the Joomla version, PHP, database, upload limits, and available memory. In practice, installation issues are more often caused not by the template itself, but by a small upload limit, outdated PHP, long script execution times, disabled cURL, or conflicting extensions on an existing site.

Basic Hosting Check

Open your hosting panel and the Joomla admin dashboard. Compare your CMS version with the compatibility listed on the Stellar product page. Check your PHP version and limits: upload_max_filesize, memory_limit, max_execution_time. For Quickstart, extra execution time and memory matter most, because you are installing not one small template, but a full build with demo data.

If your hosting does not allow you to change these settings yourself, contact support before installation. Do not try to brute-force the issue by repeatedly uploading the same archive if the error is clearly related to file size or execution time. Remove the limitation first, then rerun the installation on a clean database.

Backup and Staging Environment

For an existing site, a full backup of both files and the database is mandatory. Even if you are installing only the Template Pack, changing the active template can affect how modules, menus, page titles, images, and custom CSS are rendered. Without a backup, you will be fixing the result live, which is especially risky for a site that already has traffic.

The safest order is this: set up a separate staging subdomain or local copy first, install Stellar there, and only then move confirmed settings to the live site. Quickstart makes the most sense in a staging environment: it helps you understand where sections and positions are located, but it should not replace a live site without a migration plan.

Content and Media Library

Prepare your real assets upfront: logo, 3 to 6 portfolio projects, team photos, a background image for the hero section, blog images, and contact details. Stellar relies heavily on large images and cleanly styled cards. If you replace only the text but leave random demo images in place, the design will feel incomplete. If you replace the images but do not check cropping, the portfolio and service cards can lose their visual balance.

Practical check: before installation, make a simple table of pages: homepage, services, portfolio, about, blog, contact. For each page, note which real content is already ready and what will remain as a draft for now. That will keep you from publishing a demo structure filled with empty content blocks.

Installation and Initial Result Check

The installation process depends on the package you chose. With Quickstart, you go through the standard Joomla installation wizard, but use the Stellar demo package as the source archive. With the Template Pack, you log in to the admin area of an existing Joomla site and install the template as an extension. After that, you need to assign the template style and verify that the front end is actually using Stellar.

Quickstart Scenario

  1. Create a new directory or subdomain for the staging site.
  2. Create a separate database and database user.
  3. Upload the Quickstart files and open the Joomla installer in your browser.
  4. Enter the site details, database connection, and administrator account information.
  5. After installation, remove the installation directory if the Joomla wizard tells you to do so.
  6. Open the front end of the site and compare the structure to the demo: header, hero, cards, portfolio, footer.

If the demo does not match the preview, do not rush to edit the CSS. First make sure the installation finished without errors, all extensions are enabled, the demo data was actually applied, and the Joomla cache has been cleared. With Quickstart, the result should be close to the demo, although images may differ or be missing depending on demo media licensing and package settings.

Template Pack Scenario

  1. Create a backup of the site.
  2. Open System and install the template ZIP archive through the standard extension installer.
  3. Go to template styles, find the Stellar style, and set it as default or assign it to the required menu items.
  4. Check which module positions are used on the current pages and move important modules into the positions expected by Stellar.
  5. Open the homepage, an article page, and the contact page on the front end.

After installing the Template Pack, it is normal to see only the "skeleton" of the design without demo content. That is not an error. It is simply how a standalone template works. From that point on, you build the pages using SP Page Builder, standard Joomla articles, menus, and modules.

Initial Post-Install Check

Check four states: the homepage in a normal browser, an internal article page, the mobile menu, and a page with the contact form. If all four load without fatal errors, you can move on to configuration. If the issue appears only on one page, it is more likely tied to a specific module, menu item, or component than to the template as a whole.

Configuring the Framework: Helix Ultimate, Template Style, and Navigation

Once Stellar is installed, the real work begins in the template style and the Joomla site structure. Helix Ultimate provides settings for the framework, header, footer, custom code, typography, and responsiveness. Stellar adds the design and demo logic, but many practical tasks remain standard Joomla work: assign the style, check the menu, publish modules, clear cache, and review the result on the front end.

Configuration map for Helix Ultimate and the Stellar template in the Joomla admin panel
Template setup runs through a combination of the Stellar style, menus, modules, SP Page Builder pages, and front-end verification.

Assigning the Style and Menu

In Joomla, a template style can be assigned globally or only to selected menu items. For a new site, it is usually easiest to make the Stellar style the default. For an existing site, it is safer to assign it first to a single test page or a hidden menu item, verify the result, and only then expand its usage.

Stellar's header supports a horizontal menu in the Header area, and MegaMenu features apply specifically to that position. Because of that, you should not expect any menu published in a random position to automatically look the same. Check which menu item is set as the main one, which child items should expand, where page titles are enabled, and which modules are assigned to the menu.

Logo, Header, and Scroll Behavior

Replace the logo first, then check the header height, menu readability, and how the header behaves on scroll. Stellar has a visually strong top section, so the header should not compete with the hero block. If the logo is too tall or the menu color blends into the background, fix that through the template settings or carefully targeted CSS, not by editing core files.

Stellar's documentation includes an example of custom CSS for changing the header color after scrolling. That can be useful if a transparent or light header looks good in the hero section but loses contrast farther down the page. Test the style on one page first, then roll it out site-wide.

Footer and Lower Section

The lower part of the Stellar demo is built with module positions, while the copyright text is available in the template settings. That means part of the footer is edited as Joomla modules, while another part is controlled through template settings. If you change the text in one place and nothing happens, do not assume the template is broken. Check whether the fragment actually lives somewhere else: a module position, an SP Page Builder page, template footer settings, or a language override.

Check the footer after every major change: on the homepage, on an internal article page, at mobile width, and after clearing cache. The footer is often the last piece of demo content people notice, usually after the site has already been published.

Homepage: How to Replace the Demo with a Real Studio Website

The Stellar demo homepage is built with SP Page Builder Pro, so it needs to be edited as a builder page. The biggest mistake is looking for all content only in Joomla articles or modules. In JoomShaper templates, some content may live inside builder sections while other parts live in modules and menus. The practical workflow is to map the page first, then replace blocks from top to bottom.

The Logic of the Hero Section

The hero section should answer three questions: who you are, what problem you solve, and where the visitor should go next. Stellar puts a strong visual emphasis on this area, so do not overload the hero with long text. For an agency, a short positioning statement, one primary action, and an image or mockup that reinforces the specialization are enough. If you use a slogan that is too generic, even a beautiful hero section will not help. Visitors will see the design, but they will not understand the offer.

Check the hero section elements: background, headline, subheadline, button, menu link, and behavior at mobile widths. If the button goes to contact, the form should be ready. If the button goes to the portfolio, real work samples should already be there. A polished hero section without a working next step creates a break in the user journey.

Service and Portfolio Blocks

Service sections work best when they are not just a list of everything the company does, but a set of 3 to 6 real offerings you actually sell. Each service should have a short benefit statement, a link to more details, or a clear next step. If you have a large body of work, organize the portfolio by project type. For a smaller site, it is enough to feature your strongest cases and add a button to the full section.

Stellar includes portfolio variations, a gallery, a service page, and team blocks. Use them as structure, but do not leave the demo labels in place. For each case study, add the task, context, result, and visual material. That matters more than the number of cards.

How to Preserve Meaning When Replacing Sections

The most common mistake when working with a polished demo is replacing the text while keeping the original block order without checking whether it matches the actual business goal. In the Stellar demo, the order makes sense for a creative agency: a strong promise first, then cards, then visual proof, then a team or services block, and finally a contact path. But a specific studio may sell Joomla support, ad landing pages, brand strategy, or photography rather than design in general. In that case, the section order should follow the real customer journey.

Before editing the homepage, write down one primary scenario. For example: "the visitor came from search for a service and wants to see the quality of work, timelines, and how to get in touch." In that case, the hero should name the service quickly, the portfolio should appear above a long team description, and the button should lead to contact or a brief form. Another scenario might be: "the visitor is choosing a contractor based on experience." Then it makes sense to surface case studies, clients, testimonials, and a short methodology block higher on the page. Stellar does not force a single scenario, but its demo gives you useful building blocks that should be rearranged intentionally.

In SP Page Builder, it is often better to disable sections temporarily rather than delete them right away. If you are unsure, leave a section unpublished or save a copy of the page. That way you can return to a working version without restoring a backup. After each rearrangement, check not only the visual result but also the narrative flow: from promise to proof, from proof to action.

Blog and Trust Pages

A blog makes sense in Stellar if the company will actually publish useful content on a regular basis. If the blog is empty, it is better to remove it from the main menu temporarily and avoid showing a latest posts block on the homepage. For an agency, three strong articles or case studies are more valuable than ten meaningless demo posts.

Review the "About Us," "Team," "Contact," and "404" pages separately. The template may include ready-made layouts, but they still need real details: address, map, form, staff roles, social links, service descriptions, and actual contact methods.

Flowchart for editing the JoomShaper Stellar homepage with SP Page Builder
The homepage is easiest to edit as a sequence: hero section, services, portfolio, trust elements, blog, and contact path.

Stellar Pages Worth Configuring Before Launch

Stellar is not just about the homepage. The template becomes truly useful when several connected pages create a complete journey: the visitor sees the hero section, moves to services, reviews the portfolio, opens the about page, reads the blog, or goes straight to contact. If you configure only the homepage and leave the remaining pages as demo placeholders, the site will feel unfinished no matter how good the top section looks.

Services Page

A service page should explain not just "we do design," but what the client actually gets. For each service, create a simple structure: who it is for, what problem it solves, what is included, what result the client will see on the site or in the business process, and how to get in touch. If a service is complex, move the details to a separate page and leave only a card with a link on the homepage.

In Stellar, service blocks can be built with builder sections and cards. Do not turn them into a row of identical icon headings. A better structure is to use different levels: 3 to 4 key services on the homepage, detailed blocks on the services page, and separate case studies in the portfolio. That way visitors do not get lost in a long list and can tell more quickly where to click.

Portfolio and Gallery

For Stellar, the portfolio is one of the main sections. The template provides different ways to display projects, but the actual value depends on what is inside each card. For every project, add the project name, type of work, a short description, an image, and a detailed page if possible. Do not fill the portfolio with random images just to complete the grid. It may look attractive, but it will not build trust.

If you have only a few projects, it is better to show three strong ones with clear descriptions than twelve empty cards. If you have many, add categories or filtering, but make sure the filters still work at mobile widths and do not break the grid after the images are compressed.

Contact Page

The contact page needs a technical check. The map and form matter, but so does the path after submission: does the email actually arrive, is the success message clear, is there a backup contact method, and is the recipient address current? If the demo uses a Google Map addon or a similar map, verify the keys, consent requirements for third-party scripts, and load performance.

If the site serves multiple regions or languages, do not overload the contact page with one catch-all form. In some cases, separate contact options for sales, support, and partnerships work better. Stellar gives you room for that structure, but it needs to be planned before launch.

Error Pages and Coming Soon

The Stellar product page mentions built-in pages such as 404, registration, login, and coming soon. Not every site needs all of them, but you should definitely review the 404 page. Visitors may land on old URLs after a site migration, and a clean error page with a way back to the homepage or portfolio is much better than a default technical error page.

A Coming Soon page makes sense for a temporary launch phase, but it should not stay active after the site goes live. If the site is already open to indexing, make sure hidden splash pages, test menu items, and draft pages are not accessible to random visitors.

Modules, Positions, and Menus: Why the Demo Does Not Build Itself with One Click

A Joomla template does not store the entire site in a single file. A page consists of a component area, modules around it, menus, the template style, and settings for individual extensions. Joomla documentation describes modules as flexible blocks that render around the main component and can be assigned by menu item. That is especially important with Stellar: the lower section, menus, separate blocks, and utility areas may all depend on module positions.

How to Think About Module Positions

A position is simply a place in the template where Joomla can display a module. The same module can be published in the correct position and assigned only to specific menu items. If a block is visible on the homepage but not on an internal page, check not only whether the module is published, but also its menu assignment. If the module is published but still does not appear, check the position, access level, language, cache state, and the selected template style.

With Stellar, it helps to create a simple map: Header for menu and navigation; main area for the SP Page Builder page or Joomla article; bottom for several modules in the lower section; footer for template settings and optional custom modules. A map like that keeps you from hunting for the same text in ten different places.

Menus and Page Assignment

In Joomla, the homepage is defined by a menu item. If you created a beautiful page in SP Page Builder but it is not opening as the homepage, check which menu item is marked as home and what it is linked to. On a new site after Quickstart, it is usually easier to edit the existing demo menu item than to create a parallel structure. On an existing site, it is better to create a test menu item, verify the page, and only then assign it as the homepage.

Checking the Result Without Guesswork

After changing modules, run a short verification routine: clear the Joomla cache, open the page in a private browser window, check desktop and mobile widths, confirm the source menu item, then go back to the admin area and adjust only one setting at a time. It is less exciting than clicking through settings at random, but it gets you to the real cause faster.

Map of Joomla module positions and menus for the Stellar template
If a block is not showing, check the full chain: the module is published, the position is correct, the menu item is assigned, access is allowed, and the cache has been cleared.

Safe Adjustments: CSS, Language, and Small Changes Without Touching Core Files

Stellar supports safe targeted adjustments through the template settings and custom code. The official documentation shows that Template settings allow you to add custom CSS, JavaScript, meta tags, and verification codes. That does not mean you should dump your entire future front-end codebase there, but for small visual fixes it is a convenient and reversible option.

When to Use Custom CSS

Use CSS when you need to change the color of the mobile off-canvas menu, the sticky header background, page title spacing, or a minor visual conflict. Do not use CSS to hide serious issues, disable required form fields, break responsiveness, or mask unfinished content. Before editing, document the original state and add one code block at a time.

The example below is based on Stellar's documented approach to changing off-canvas menu link colors. Replace the colors with your own, then check the mobile menu at several widths after saving.

.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span {
  color: #ffffff;
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:active,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {
  color: #ffe45c;
}

Where to apply it: in the template's custom CSS, not in Joomla core files and not in the extension's source files. How to verify it: open the mobile menu, hover over items in desktop emulation, then check it on a real phone. How to roll it back: remove the CSS block you added and clear the cache.

Use Language Overrides Instead of Editing Files

If you need to change a label, system string, or a short interface text, start with Joomla's built-in language override mechanism. That is safer than editing language files by hand because a template or extension update should not wipe out your change. This approach is useful for contact forms, messages, buttons, and short utility phrases.

What You Should Not Change Manually

Do not edit Joomla core, Helix Ultimate files, SP Page Builder files, or Stellar source files if the goal can be achieved through settings, a module, the page builder, a template override, or custom CSS. Direct file edits make updates and troubleshooting harder. If you need to make a major HTML structure change, create an override plan first, identify which component outputs the fragment you need, and work on a staging copy.

Practical Scenario: Homepage for a Creative Studio

Let us walk through a concrete example. The goal is to build a studio homepage with clear navigation, a strong hero section, services, portfolio, a trust block, a contact path, and a clean footer. This is not a generic "click everything" walkthrough. It is a practical working flow for Stellar.

Goal and Preparation

We want a site where visitors understand the studio's specialization in the first screen, then see the services, work samples, and path to contact. Prepare a logo, short headline, subheadline, 3 to 4 services, 4 to 6 portfolio items, team copy, a contact email, and an address if needed. The staging site should already have either Quickstart or the Template Pack installed, with SP Page Builder available.

Configuration Steps

  1. Open the homepage in SP Page Builder and save a copy or draft before editing.
  2. Replace the hero headline, subheadline, and button so they describe the studio's real service.
  3. Check the main menu: Home, Portfolio, About Us, Blog, Contact Us, or your local equivalents.
  4. In the services block, keep only the directions you actually offer and have examples for.
  5. In the portfolio, replace the images and captions, then verify the card links.
  6. Update the copyright text in the footer through the template settings and the lower-section modules.
  7. Open the front end and verify the homepage, portfolio, contact page, and mobile menu.

Result Check

The page is ready for further content work if five conditions are met: the hero immediately explains the offer, the menu leads to real pages, the services do not look like demo placeholders, the portfolio opens without broken images, and the contact path works. Also check image load speed: large hero backgrounds and portfolio images should be compressed to a reasonable size before upload to the media library.

Quick takeaway: Stellar speeds up structural setup, but the quality of the site depends on how consistently you replaced the demo logic with your own content, connected the menu to real pages, and verified the result on the front end.

Practical scenario for configuring the Stellar homepage for a studio
Practical workflow: hero, services, portfolio, trust, contact, and verification on desktop and mobile widths.

Troubleshooting Common Post-Installation Issues

With Joomla templates, problems are rarely solved with a single click because the result depends on the CMS, the template, the page builder, modules, menus, cache, and server environment. Below are common symptoms for Stellar and similar Helix-based templates, along with a safe verification order.

Diagnostic map of JoomShaper Stellar issues after installation
Troubleshooting should follow a chain: installation, dependencies, menu, modules, builder, cache, and front-end result.

The Demo Does Not Look Like the Official Preview

Symptom: after installation, the site looks empty, without sections, portfolio, or the expected homepage. A possible reason is that the Template Pack was installed instead of Quickstart, the template style was not assigned, the SP Page Builder homepage was not created, or the required modules were not published.

What to check: package type, active template style, the home menu item, the presence of a page in SP Page Builder, module publication, and cache clearing. How to fix it: if you want a site that looks like the demo, deploy Quickstart on a clean staging environment; if this is an existing site, build the pages and modules manually. A rollback only makes sense when the Template Pack is enabled on a live site and breaks key pages.

Demo Photos Are Not Displaying

Symptom: the page structure is there, but image areas are blank or show different pictures. The reason may be that the demo media is not included in the package, was not copied during installation, or was replaced for licensing reasons. Stellar's documentation addresses this separately, so do not treat missing photos as a fatal error.

What to check: image paths in builder sections, the Joomla media library, permissions on image folders, and whether the files exist after installation. How to fix it: replace the demo photos with your own optimized images, then check cropping in the hero area and cards. There is no need to roll anything back if the structure works and the issue is limited to media.

The Mobile Menu Is Hard to Read

Symptom: on a phone, off-canvas menu items blend into the background or the hover and active states look messy. The cause is usually a color conflict between the menu and the chosen background or site palette. What to check: header settings, custom CSS, cache, mobile width, and a real device. How to fix it: add a small CSS block for off-canvas menu link colors through custom code, then verify the result. If the CSS introduces side effects, remove the block and go back to the template settings.

The Footer Does Not Change After Editing

Symptom: you changed the text, but the old label or demo block is still showing at the bottom of the site. The reason is usually that you edited the wrong area: the footer may include template settings, modules in the bottom section, and separate page elements. What to check: Template settings, the Basic tab, footer parameters, published modules in lower positions, and module assignment by menu item. How to fix it: identify the source of the specific text and edit it there. Do not go looking for it by editing files directly.

Custom CSS Is Not Working

Symptom: the code has been added, but the appearance does not change. Possible reasons include Joomla or browser cache, an incorrect selector, CSS added to the wrong template style, the target element appearing only on a different page, or the rule being overridden by a more specific style. What to check: the active style, cache clearing, the page where the element appears, and selector accuracy. How to fix it: temporarily simplify the rule, verify it in developer tools, and only then apply the final version.

The Contact Form Does Not Send Email

Symptom: the contact area is visible, but submissions do not arrive. The cause may have nothing to do with Stellar and instead be related to Joomla mail settings, SMTP, the form component, anti-spam protection, or server-side mail delivery. What to check: Joomla global mail settings, a test send, the recipient address, the spam folder, and hosting restrictions. How to fix it: configure SMTP, test the form on a simple page, and then return to the Stellar design. If the form is important for leads, do not publish the site without testing mail delivery.

SEO, Performance, and Responsiveness After Setup

Stellar gives you the visual foundation, but SEO and performance depend on how you implement it. The template may be responsive and retina-ready, yet large images, unnecessary modules, unused sections, heavy maps, and third-party scripts can easily drag down the result. That is why, after building the pages, you still need a separate technical review.

SEO Review for Pages

Check page titles, meta descriptions, readable URLs, menu structure, and internal links. On the homepage, do not repeat the same keyword in every block. For the portfolio, create dedicated case study pages if you have something meaningful to show: the task, process, result, and images. For the blog, publish content that genuinely helps your audience instead of merely imitating activity.

Performance and Media

Optimize images before uploading them: hero backgrounds, portfolio cards, and team photos should be sharp enough but not excessive. Check lazy loading, caching, compression, and whether unused demo pages are still present. If you enable optimization in Helix Ultimate or Joomla, do it one setting at a time and test the front-end result. Turning on minification and file combination everywhere at once without testing can break sliders, menus, or builder sections.

Responsiveness and Accessibility

Check the header, off-canvas menu, buttons, portfolio cards, and contact form at narrow widths. Buttons should be easy to tap, text should not overlap images, and contrast should remain readable. If the hero section looks great on desktop but loses clarity on a phone, shorten the headline, replace the background, or adjust spacing in the builder section.

What to Test First After Optimization

After enabling cache, compression, or file optimization, check the elements most likely to depend on JavaScript and load order: the hero slider, mobile menu, portfolio grid, contact form, map, pop-up, or any interactive SP Page Builder elements. If something breaks, disable settings one at a time. Do not change Joomla cache, server settings, minification, and a third-party optimizer all at once, or you will not know which layer caused the issue.

For images, use a simple rule: the hero area should look crisp enough without becoming too heavy, portfolio cards should have a consistent visual density, and team images should not look like random stock photos next to real work samples. If a creative studio site loads slowly because of oversized images, Stellar's visual advantage disappears.

Heading Structure and Internal Linking

On a Joomla site built with Stellar, make sure each page has one main heading in the content area and that builder sections do not create a chaotic set of oversized headings. This is especially important on the homepage: visual H2 and H3 headings may look appealing, but the search and content structure still needs to stay clear. If a heading inside a builder section is only decorative, it is better to make it visually less dominant or change its level if the tool allows it.

Add internal links between the homepage, services, portfolio, blog posts, and contact page. These links should help visitors move through a clear path instead of repeating the same anchor text everywhere. For example, a case study can link to a service, a service can link to relevant projects, and a blog post can link to contact or consultation. That turns a Stellar site from a collection of pretty pages into a connected system.

Multilingual Setup, RTL, and Localization Without Chaos

The product page states that Stellar is ready for multilingual, translation, and RTL scenarios. That is useful for agencies working across multiple markets, but a compatibility badge does not mean a multilingual site appears automatically. In Joomla, you still need to configure languages, menus, articles, modules, SP Page Builder pages, and system strings. If you miss one layer, users will see a mix of languages or land on a missing page.

What to Translate First

Start with the visitor path: menu items, hero section, buttons, services, portfolio, contact form, and post-submission messages. Then translate secondary pages, the blog, the footer, and utility strings. If the site launches in only one language first, do not leave a language switcher there just for appearance. It should lead to a fully localized page, not a copy filled with empty blocks.

For SP Page Builder pages, check how language versions are organized in your setup. Sometimes it is easier to create a separate page for each language and assign it to the corresponding menu item. In other cases, duplicating sections and replacing the text is more convenient. Either way, document where the source version lives so you do not accidentally edit the wrong language a month later.

Modules and Language

Joomla modules can be assigned by language. That matters for the footer, contact blocks, menus, quick links, and banners. If the Russian version of the site suddenly shows an English footer, check not only the module text, but also its language field, menu assignment, and position. On a multilingual site, it helps to give modules clear names in the admin panel, such as "Footer contacts RU" and "Footer contacts EN."

RTL and Visual Review

If you are using a right-to-left language, do not stop at simply enabling RTL. Check the header, menu, portfolio cards, slider arrows, icons, form, map, and column order. The template may be RTL-ready, but specific images, custom CSS, or third-party addons may behave differently. The best approach is to use a separate checklist for each language version and test on real pages, not just the homepage.

Updates, Backups, and Moving to the Live Site

After configuring Stellar, it is important to preserve your ability to update it safely. The template has a changelog page on the product listing, and the documentation separately explains template updates. The exact update process depends on the package and the current site version, but the core logic does not change: backup first, then staging, then update, then verify the template, SP Page Builder, modules, and public pages.

Why You Should Not Update Blindly

Stellar is tied to Joomla, Helix Ultimate, SP Page Builder, and additional modules. If you update one layer without checking the others, you may end up with visual changes, style conflicts, or broken interactive elements. Be especially careful with sites that include custom CSS, template overrides, or third-party optimizers. Those changes may be safe, but they still need to be accounted for during updates.

Before updating, save a list of critical pages: homepage, services, portfolio, contact, blog, and 404. After the update, open them on the front end and verify not just that the content is still there, but that the behavior still works: menu expansion, button clicks, forms, the map, sliders, and responsiveness. If an issue appears after the update, disable cache first and check the browser console before changing CSS.

Moving from Staging

If you built the site with Quickstart on a subdomain, moving it to the live domain should be a separate operation, not a random copy of individual files. You need the files, the database, correct paths, domain settings, mail setup, SSL, robots, the sitemap, and a check of internal links. After the move, always open the front end while logged out and walk through the path like a regular visitor.

If you used Quickstart only as a learning sandbox and are building the live site through the Template Pack, do not move everything over blindly. Transfer only the confirmed decisions: page structure, CSS, menu settings, the module list, and visual principles. That is safer than trying to merge two separate Joomla installations.

Documenting Changes

Create a short technical log: where custom CSS was changed, which pages were built in SP Page Builder, which modules control the footer, which menu items are assigned as main, and which language overrides were added. A file like that saves hours during the next update or when handing the site over to another administrator. With Stellar, this is especially useful because some of the logic lives in the template, some in the builder, and some in Joomla modules.

Pre-Launch Checklist for a Stellar Website

The final review is not just a box to check. On template-based sites, the most visible problems usually remain at the edges: a demo image in the footer, a button leading to a missing section, a low-contrast mobile menu, a form that does not send email, or a hidden staging page indexed by search engines. So before launch, go through the site first like a normal visitor, then like an administrator.

Front End

Open the homepage while logged out. Check that the hero section answers the question "what does this company do?" rather than simply showing an attractive design. Click every main menu item. Open the portfolio, one project, the services page, contact, and the blog. If any demo text is still there, do not patch it with one quick sentence. It is better to hide the block temporarily than to publish a page that looks finished but explains nothing.

Review the images: are any photos stretched, are there empty blocks, are the hero backgrounds too heavy, are the same stock illustrations repeated in different sections? Stellar is visually sensitive to media quality, so weak images damage the template more than small copy issues do. If you do not yet have strong work samples for the portfolio, publish fewer cards and make them better.

Admin Panel and Settings

In the admin panel, check the active template style, menu assignment, the list of published modules, language assignments, and custom CSS. Make sure you understand where each important block is edited: the hero section in SP Page Builder, the lower section through modules, copyright through template settings, and separate text through language overrides or pages. If that is only clear to the person who built the site, write the map down in the technical log.

Clear the Joomla cache and browser cache, then repeat the review in a private window. If the site uses a CDN or server cache, clear that too. Many "it doesn't work" problems at the final stage turn out not to be template issues at all, but an old CSS or HTML version still being served from cache.

Technical and Legal Details

Check SSL, redirects, robots, the sitemap, the privacy policy page, cookie notices if your project requires them, and real contact details. If the form collects personal data, do not leave it without a proper explanation and compliant handling. If the site includes a map, video, or third-party widgets, verify that they are not slowing down the homepage or breaking the layout at mobile widths.

Also review the 404 page and old URLs if the site was migrated from a different structure. A polished template will not help if search or ad traffic lands on technical errors. Set up redirects for important old pages, and for missing ones provide a clear error page with a path back to the homepage, services, or portfolio.

The Go-Live Decision

The site is ready to launch when three conditions are met: visitors understand the offer within the first few seconds, key actions work technically, and the administrator knows where to maintain the core blocks. If even one of those conditions is not met, it is better to delay publication by a day and fix the structure. Stellar helps you build an expressive foundation quickly, but responsibility for clarity, content, and verification still belongs to the site owner.

Stellar Video and What to Look for in It

The official product page includes a YouTube video for Stellar. It works best as a visual supplement to the sections about the demo appearance and overall template structure: in the video, it is easier to see the rhythm of the homepage, the transitions between sections, and how the template presents a creative agency. Do not treat the video as a replacement for setup. It shows the product vision, not every troubleshooting step.

After watching, go back to your staging installation and compare four areas: the hero section, portfolio, blog, and footer. If those parts in your project have already been replaced with real content and still work well at mobile widths, then the video has done its job by helping you compare your result to the original concept of the template.

Questions About Setting Up and Using Stellar

Why doesn't the site look like the demo after installing the Template Pack?

Because the Template Pack installs a standalone template, not the full demo build. To get something close to the official demo, you need Quickstart on a clean environment or a manual build of the pages, modules, and menus.

Can I install Quickstart on an existing site?

Not as a regular extension. Quickstart is installed as a full Joomla build with its own database and demo data. For an existing site, use the Template Pack and move the required structure manually.

Where do I edit the Stellar homepage?

The demo homepage is built with SP Page Builder Pro. Look for the page inside the builder component, not only in Joomla articles. Menus, modules, and template settings still need to be checked separately.

What should I do if the demo has no photos?

Check the media library, image paths, and the documentation about demo photos. In many cases, the correct solution is to replace the demo media with your own images rather than trying to restore every original file.

Can I change colors and the header without editing files?

Yes. Use Helix Ultimate settings and the custom CSS area in the template settings. Reserve direct file edits for intentional template overrides on a staging copy only.

Is Stellar a good fit for a multilingual site?

The product page states support for multilingual, translation, and RTL scenarios. In practice, you still need to configure Joomla languages, a separate menu for each language, translations for SP Page Builder pages, modules, and utility strings.

Does Stellar affect site speed?

The template provides the foundation, but final speed depends on images, modules, third-party scripts, maps, builder sections, cache, and hosting. After setup, be sure to check the homepage weight and optimize your media.

When should I choose something other than Stellar?

If you need a strict corporate look, a complex catalog, an online store, a narrow industry-specific structure, or a minimal template without a bold creative visual style, compare Stellar with more appropriate alternatives before moving your content.

When JoomShaper Stellar Is the Right Choice

Stellar is worth using if you want a Joomla site with a strong visual presentation, ready-made agency-style logic, and the ability to build a homepage quickly with SP Page Builder. It is especially well suited for studios, portfolios, small creative teams, marketing services, and commercial websites where the hero section, services, case studies, blog, and contact path all matter.

Before publishing, check the essentials: the correct package is selected, the style is assigned, the homepage is linked to the menu, modules are published in the right positions, the footer has been updated, the contact form has been tested, images have been replaced and optimized, the mobile menu is readable, and the cache has been cleared. If all of that is done, you can move on to real content work and a safe launch.

If you have not yet deployed a staging copy, the logical next step is to download JoomShaper Stellar, install it in a separate environment first, and work through this guide from top to bottom. That gives you a real result without risking the live site and lets you decide whether to keep Stellar as the project's foundation or switch to a more suitable alternative.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.