JS Konstra is a template designed specifically for construction companies using Joomla. This template provides a professional and visually appealing website solution for businesses in the construction industry.

Template Version: 2.0.4
SafariJoomla template JoomShaper Konstra
 

Template Description

The JS Konstra template offers a range of features and design elements that make it an ideal choice for construction companies looking to establish an online presence. With its clean and modern design, this template instantly creates a positive impression on visitors, portraying the professionalism and reliability of the company.

One of the key strengths of the JoomShaper Konstra template is its excellent responsiveness. It is fully mobile-friendly, ensuring that the website will adapt and display perfectly on various devices, including desktops, tablets, and smartphones. This feature is crucial in todays mobile-centric world, as it allows businesses to cater to a wider range of users and potential clients.

This template also includes a range of customization options, enabling businesses to create a unique and personalized website that aligns with their brand identity. With the easy-to-use layout builder, businesses can easily create and modify the structure of their pages, making it simple to showcase services, projects, and testimonials.

Furthermore, given its compatibility with the powerful Joomla platform, JS Konstra offers a wide range of functionalities and extensions that can enhance the functionality and user experience of the website. From contact forms and social media integration to a multi-language support system, this template provides businesses with tools to streamline their online interactions and communicate effectively with their target audience.

The JS Konstra template also places emphasis on search engine optimization (SEO), allowing businesses to optimize their website for better search engine rankings. This feature ensures that the website will be more easily discoverable by potential clients, enhancing the chances of attracting organic traffic and generating leads.

In terms of design, this template offers multiple pre-built page layouts, providing businesses with a head start in creating their website. With attention to detail and a focus on aesthetics, each page layout is carefully designed to showcase the companys work, services, and expertise in an appealing and informative manner.

Overall, the JoomShaper Konstra template offers construction companies a comprehensive Joomla-based solution for creating a professional website. With its responsive design, customization options, and compatibility with various extensions, businesses can effectively showcase their services, engage with their audience, and establish a strong online presence within the competitive construction industry.

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 has an excellent color scheme.
  • 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: 08-04-2019
Last updated: 02-04-2026
Type: Premium
License: GPL 
Subject: Blog Business Portfolio Construction & Repair
Compatibility: J3.x J4.x J5.x J6.x
QuickStart: Joomla! 6.x
Color
schemes:
Developer: JoomShaper

Rating:
4.4958333333333 1 1 1 1 1 (240 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.

A Practical Guide to Setting Up JoomShaper Konstra for a Construction Website on Joomla

JoomShaper Konstra is best understood not as a generic visual theme, but as a ready-made framework for a construction website. What matters here is not just the color palette or the striking cover design, but also the QuickStart package, page structure, module positions, navigation, project portfolio, contact forms, and integration with SP Page Builder Pro. This guide shows how to turn the installed template into a working website for a contractor, architecture firm, developer, or renovation company.

Below, we cover preparation, installation, choosing between QuickStart and the standalone template package, and configuring the homepage, menu, footer, portfolio, forms, and visual details. It also explains how to verify the final setup and how to diagnose the most common issues that typically come up with Joomla templates built on Helix Ultimate and SP Page Builder.

This guide does not repeat the product's short description. Its purpose is practical: to help you understand where Konstra saves time, where it still needs manual work, which elements should not be changed blindly, and when it makes more sense to choose another template or a more general-purpose framework.

Cover image for the JoomShaper Konstra guide with a reference to the template homepage
Konstra works best when you approach it as a combination of the real demo design, Joomla settings, and hands-on editorial work after installation.

What Konstra Delivers for a Construction Company in Practice

Konstra is designed for websites where visitors need to quickly understand the scope of work, review projects, explore services, and submit an inquiry. That means the real value of the template is not simply in presenting a good-looking page, but in bringing together the typical building blocks of a construction business into one coherent path: a large hero section featuring a project, a statement of expertise, services, markets served, portfolio, investor or contractor pages, a contact form, and a blog.

The official product page and documentation confirm that the template is built on Helix Ultimate and SP Page Builder Pro. That combination matters. Helix controls the site's overall framework, header, positions, footer, core design settings, and custom code, while SP Page Builder manages the pages and sections themselves, including the homepage and many internal content blocks. In QuickStart, there are also Joomla modules and components that assemble the demo site.

For a site owner, that creates a straightforward workflow. You do not have to start with a blank Joomla installation and manually invent the structure of a construction website. You can take the demo as a foundation and replace the text, photos, projects, service categories, and contact details. But there is a downside to that approach: if you simply leave the demo pages in place and swap out a few words, the result will still look like a template mockup. The strongest outcome comes when Konstra is used as a project framework rather than a finished website that needs no editorial work.

Where the Template Is Especially Useful

Konstra works well for companies that already have visual assets: jobsite photos, renderings, diagrams, a service list, descriptions of completed projects, department contacts, and a clear offer structure. In that case, the demo blocks can be filled with real data quickly, and the portfolio and service pages start doing useful work as trust-building elements.

For a construction contractor, strong visuals alone are not enough. Visitors are usually looking for proof: types of work, geographic coverage, industries served, experience with commercial or residential projects, and a way to get in touch about a specific need. In Konstra, service pages, project details, the contract page, the timeline slider, and the contact form are all useful for that.

Where the Product May Be More Than You Need

If you need a small three-page website with no portfolio, no complex menu, and no editorial team, Konstra may be heavier than necessary. The template really comes into its own when the demo structure and project-focused presentation actually serve a purpose. For a simple company profile site, it may be easier to use plain Helix Ultimate, a lightweight template without a large demo package, or to build the page directly in SP Page Builder without a prebuilt construction bundle.

Another important case is an existing site with a content history. QuickStart cannot be installed over a live Joomla site through the extension manager, because it includes the Joomla core, template, components, modules, and demo data. For an active site, the usual approach is to use the template package and manually recreate the needed structure, or deploy QuickStart on a test domain and use its settings as a reference.

QuickStart or the Standalone Template Package: What to Choose Before Installation

The most important decision before installing Konstra is choosing the right package. In JoomShaper's documentation, QuickStart and the Template Pack are treated as two different things. QuickStart is a complete Joomla demo installation: it already includes the CMS, the template, components, modules, Helix Ultimate configuration, and demo content. The Template Pack is the standalone template that can be installed into an existing Joomla site, but it does not bring along demo pages, modules, or a ready-made structure.

That difference is often underestimated. A user installs only the template on an existing site and expects to see the same homepage shown in the demo. Instead, they get an empty shell, because the SP Page Builder pages, modules, navigation, and demo content all have to be created separately. That is why, for learning and initial setup, it usually makes more sense to launch QuickStart in a separate staging environment, study the structure, and only then decide whether to recreate it on the live site.

Decision diagram for choosing between QuickStart and the Template package for JoomShaper Konstra
Your package choice determines the entire workflow that follows: a fast demo clone or a manual setup on an existing Joomla site.

When to Choose QuickStart

QuickStart is the right choice if you are starting a new site, want to get a structure close to the demo quickly, and are prepared to replace the demo content with your own materials. It is especially useful for agencies that first show the client a working prototype and then gradually replace the pages and images.

Before installing QuickStart, prepare a separate site directory and database. The documentation explicitly warns that this package cannot be installed through Joomla Extension Manager on top of an existing Joomla installation. It needs to be deployed like a standard Joomla installation: upload the files, open the domain or subdomain in a browser, run the installer, create the admin account, connect the database, and then check folder permissions after the installation is complete.

When to Choose the Template Pack

The Template Pack is the right choice for an existing site that already has articles, menus, users, SEO-friendly URLs, and working extensions. It controls the visual design and layout, but it does not build the pages for you. After installation, you will need to manually create or recreate SP Page Builder pages, assign menu items, publish modules in the correct positions, and configure styling.

This path takes longer, but it is safer for a site with history. It does not overwrite the structure of your live Joomla installation and lets you introduce Konstra gradually: first a test template style, then navigation, then one or two pages, and only after that the portfolio and forms.

What to Check in Advance

  • Whether your Joomla version matches the current product page and changelog.
  • Whether you have a test domain or subdomain available for QuickStart.
  • Whether a new database has been created or a separate table prefix has been chosen.
  • Whether you have a backup of both files and database before any update or template change.
  • Whether you understand where your real project photos will come from, because demo images may not be included in the package.
  • Whether you are prepared to replace the demo text, contact details, forms, and legal information before publishing the site.
If your goal is to explore Konstra safely, start with QuickStart on a test subdomain. If your goal is to update an existing site, install the template package on a copy of the site first, not on the live domain.

Installation and the First Post-Launch Checks

Installing Konstra should not begin with clicking Install and hoping for the best. First decide what result you want: an exact demo clone or a controlled integration of the template into an existing structure. Then choose the package and define a few checkpoints that will tell you whether the installation has gone as expected.

The QuickStart Scenario

For a new site, use QuickStart as a standard Joomla installation. Extract the archive locally, upload the files to the root of the domain or subdomain, create the database, open the site in a browser, and complete the installer. The documentation recommends not using admin as the super user name. Once the installation is finished, log in to the admin panel and verify the system information, folder permissions, and public site availability.

Do not rush to change everything at once. First open the homepage, one service page, one project page, the contact page, and the blog. If those pages load, the menu works, and the admin panel shows no critical errors, you have a stable rollback point. Only after that should you start replacing the content.

The Template Pack Scenario

For an existing Joomla site, install the template through System -> Install -> Extensions. Then create or duplicate a template style so you do not disrupt the site's current theme. Assign the new style only to a test menu item or a private page. That lets you check the header, component area position, footer, responsive behavior, and base styling without affecting the entire site.

If the result looks empty after installation or does not resemble the demo, that does not automatically mean something is wrong. The standalone package does not include demo pages or modules. Use the Konstra documentation as a map: which positions exist in the layout, how the homepage is built, which modules were used in QuickStart, and which elements were created in SP Page Builder.

Mini Checklist After Installation

Konstra post-installation checkpoints
What to Check Where to Look What Counts as Normal
Public site Homepage and several inner pages Pages open without a blank screen, and the menu and main content blocks are visible.
Folder permissions System -> System Information -> Folder Permissions Key directories are writable where Joomla requires it.
Template style System -> Site Templates Styles Konstra is assigned only where you expect it to appear.
SP Page Builder A page created in the builder The editor opens, and sections can be edited and saved.
Menu and off-canvas Site header and mobile menu Menu items lead to the correct pages, and the overlay does not permanently cover the content.

Bottom line: before you start adjusting the design, make sure you installed the correct package, the site loads, folder permissions are not blocking Joomla, and the template is assigned in a controlled way. Most unpleasant errors appear when a user installs the package, changes the menu, removes demo content, and updates extensions all at the same time.

The Homepage in SP Page Builder: Turning Demo Sections into a Real Inquiry Funnel

The Konstra homepage and its major pages are described in the documentation as pages built with SP Page Builder Pro. That means most of the content is edited not through a standard Joomla article, but through sections, rows, columns, and addons. For a construction site, that is convenient: you can visually rearrange the hero, services, markets, projects, forms, and text sections without editing PHP.

But this is also where it is easy to weaken the site. If you only replace the company name and keep the demo logic, visitors will see a polished but unconvincing mockup. The homepage needs to answer practical questions: what the company does, which kinds of projects it is suited for, what work it has already completed, how to start a conversation, and why it can be trusted.

Configuring the Konstra homepage in SP Page Builder with a block sequence and results check
The homepage should turn demo blocks into a visitor journey: hero section, services, proof, projects, and contact.

The Hero Section and Hero Slider

The original visual reference shows a large hero with an industrial photo, yellow-and-black accents, outlined text, and a prominent project title. That style works well for a construction theme, but it depends on strong photography. A weak stock image or a blurry project photo immediately undermines trust. That is why the hero should be updated in this order: first the image, then the core message, then the location or project-type label, and only then the inquiry button or link.

Do not overload the hero with several competing promises. For a construction company, one focus is enough: construction management, general contracting, design, industrial construction, commercial renovation, or development projects. If the company offers many services, move them lower into the services block and keep the hero as a strong entry point.

The Three-Pillar Block

In the demo structure, there is a section built around three pillars: pre-construction and estimates, engineering, and detailing and 3D modeling. For a real site, that is an excellent format if you replace generic wording with the company's real operating logic. For example: pre-project assessment, schedule management, and technical supervision. Each item should include not just a label, but a brief explanation of which client risk it reduces.

The test is simple: if any item could be placed on another company's site without changing the meaning, the block is not ready yet. Add specifics such as project types, budget control, BIM modeling, subcontractors, geography, documentation, and warranty stages. Konstra's sections let you present this visually, but the substance still needs proper editorial work.

Services and Markets Served

The services block should guide the visitor toward a decision. If the company works in commercial properties, education, residential projects, healthcare, oil and gas, or mining, as shown in the reference, each category should point to a clear next step: a case study, a service page, a contact path, or a portfolio item. Otherwise, the icons remain purely decorative.

In SP Page Builder, check how the block is built. It may use feature boxes, images, tabs, icons, columns, or custom classes. After saving, open the page in incognito mode, review the hover effects, and make sure the text does not break on mobile widths. If the block starts falling apart, reduce the amount of text and adjust the columns first instead of immediately adding random CSS.

How to Check the Flow After Editing

  1. Open the homepage on the public side of the site.
  2. Make sure the hero clearly explains what the company does.
  3. Follow the service and project links, if they are present in the blocks.
  4. Check the mobile width and the off-canvas menu.
  5. Clear the Joomla cache and browser cache if the changes do not appear right away.

The main success criterion for the homepage is that a visitor can understand the company's specialization, see proof, and find a clear way to get in touch in a single pass.

Header, Hamburger Mega Menu, and Module Positions

Konstra's header differs from classic Joomla navigation. The documentation states that the default setup uses a menu icon on the right next to the logo, and the main navigation structure is built through an SP Page Builder Module with addons and modules inside it. This is not a standard list of menu items, so the navigation needs to be changed carefully.

If the company has many sections such as services, projects, investors, subcontractors, blog, and contacts, a hamburger mega menu can be a good solution. It frees up the hero area and gives you room for broader navigation. But for a small site, that approach may be unnecessary. Visitors do not expect to go hunting for three menu items inside a hidden layer. Decide what kind of navigation the business actually needs first, and only then change the layout.

Diagram for configuring the Joomla menu and module positions in the Konstra template
In Konstra, the header, menu, and module positions are tied to the Helix Layout Builder, so you need to check both the admin setup and the front-end result.

Predefined Layouts and a Custom Header

The documentation describes several predefined header layouts as well as the option to disable the default header and build your own in Layout Builder. A practical workflow looks like this: open the template options, go to the layout builder, create or edit a row, assign positions for the logo and menu, save the changes, and then check the responsive grid. For the row that contains the logo and menu, it is important to use the expected name header if you want a sticky header.

Do not start by deleting the entire current structure. Duplicate the template style first or work on a staging copy. Changes to the header affect every page, and a mistake in the menu position can leave the site without navigation. If you need to add your own menu module, the documentation advises against using the menu or offcanvas positions for a custom module. Instead, use another position such as position2 or feature.

Module Positions and the Component Area

Konstra uses module positions, while part of the homepage is built through addons in the component area. That means not every visible block is a Joomla module. Some sections are edited in SP Page Builder, while others are rendered through positions. A common beginner mistake is searching for all content only under Modules and never opening the page in the builder.

To understand where a specific block lives, check three places: the menu item, the Page Builder page, and the list of modules assigned to positions. If the block is in the bottom or footer area, it may be published as an SP Page Builder Module. The documentation notes that the bottom section in QuickStart is built through a single SP Page Builder Module in the bottom1 position. That is convenient for a complex lower section, but it means you need to remember how the module is assigned to pages.

How to Avoid Losing Navigation During Setup

  • Create a backup of the template style first or work on a site copy.
  • Do not change the header layout, menu module, and menu items at the same time.
  • After each change, check both the desktop and mobile menus.
  • If the menu disappears, restore the previous position and review the module assignment.
  • If the off-canvas layer covers the page, check the cache, JavaScript errors, and conflicts with third-party scripts.

Projects, Timeline, Forms, and Industry Pages

Konstra is valuable because it includes more than just a generic homepage. It also provides construction-specific scenarios: portfolio and project details, a contract page, investor relations, a subcontractor page, a timeline slider, a contact form, and a construction blog. These elements help turn the site from a visual brochure into a practical trust-building tool.

The documentation confirms that SP Simple Portfolio is integrated with SP Page Builder. Portfolio items can be created and edited through the component, while the visual presentation can be built in the builder. This matters a great deal for construction companies, because projects are often the main proof of competence. If the portfolio is empty or filled with repetitive demo cards, the template loses much of its value.

Working setup for the portfolio, timeline, and contact form in Konstra
Projects, timeline, and the contact form work best when configured as one trust-building sequence rather than as separate decorative blocks.

How to Prepare the Portfolio

For each project, prepare a title, short description, category, location, type of work, visual assets, and outcome. If the company handles several kinds of projects, do not mix them into one stream without filtering. Visitors can assess experience much more easily when commercial, residential, educational, and industrial projects are separated in a meaningful way.

Project details should answer the questions a potential client normally asks: what the task was, what the company actually did, what constraints existed on site, what result was delivered, and how to discuss a similar project. Konstra helps present the object well visually, but conversions come from specifics, not from visual polish alone.

Timeline Slider as Proof of Experience

The documentation describes Timeline Slider as an addon developed specifically for Konstra and located at templates\konstra\sppagebuilder\addons\timelineslider. It can be used on other pages through the backend or frontend editor. For a construction website, the timeline is useful not just as a company history, but also as a way to explain project stages: initial assessment, design, permits, procurement, construction, and handover.

Do not turn the timeline into a list of years just for visual effect. It is far more useful to show a process the client can understand: what happens at each stage, which documents or decisions are needed, where the client is involved, and where the company takes responsibility. That turns the addon into an educational block rather than a decorative animation.

The Contact Form and Spam Protection

The product page states that the contact form is built with the SP Page Builder Form Builder addon and supports spam protection through CAPTCHA mechanisms. The SP Page Builder documentation includes an important warning: Form Builder does not store submitted messages, so if the mail server fails or the email settings are incorrect, important inquiries can be lost.

For a construction site, that is critical. Before publishing the form, submit a test inquiry and check the mailbox, spam folder, sender address, and email subject. If the form includes a topic selector, tie it to real departments such as estimating, design, contracting, tenders, partnerships, or suppliers. But do not add too many required fields. The longer the form, the more often visitors postpone submitting it.

For important inquiries, do not rely only on a nice success message. It shows that the form worked in the browser, but it does not guarantee that the email actually reached the right staff member.

Practical Example: Building a Contractor Homepage After QuickStart

Let us look at a realistic scenario. The company specializes in commercial construction management and wants a homepage that leads visitors toward requesting a project estimate. QuickStart is already installed on a test subdomain, the admin panel works, demo pages are available, and SP Page Builder is functioning properly.

Goal

The task is to replace the demo homepage with a page that has a clear hero, three operational pillars, services, portfolio, industry markets, and a contact path. It is important to preserve Konstra's industrial visual style while removing anything that still reads like someone else's demo copy.

Preparation

Before editing, gather the materials: logo, two or three strong project photos, a service list, three key advantages, three to five projects, contact details, and form copy. Create a site backup, or at least export the SP Page Builder page if that option is available in your current builder version.

Setup Steps

  1. Open the homepage in SP Page Builder and locate the hero slider.
  2. Replace the first slide background with a real project photo, while keeping strong text contrast.
  3. Rewrite the main heading so it names a specific service rather than using a generic slogan.
  4. In the pillars block, replace the demo items with your actual workflow stages: assessment, engineering coordination, construction oversight.
  5. In the services section, keep only the services the company actually provides and can explain on a dedicated page.
  6. Add at least a few real projects to the portfolio, each with categories.
  7. Configure the form in the contact section and submit a test inquiry.
  8. Save the page, clear the cache, and review the public site while logged out.

Checking the Result

Open the site as a regular visitor. The hero should explain the company's specialization without requiring the visitor to scroll to the footer. Service links should lead to real pages. The portfolio should open project detail cards. The form should send an email, and the recipient should be able to tell which page the inquiry came from.

If some edits do not appear after saving, check the Joomla cache, browser cache, and the page assignment in the menu. If blocks look different on mobile widths, open the row and column settings in the builder instead of trying to fix everything immediately with CSS.

A Common Obstacle

Demo photos may be missing from QuickStart or replaced with placeholder blocks because of licensing restrictions. That is not an installation error. For a construction site, prepare legal photo assets in advance. If you do not yet have many project photos of your own, it is better to use honest images of the team, equipment, drawings, or the work process than to leave gray placeholders or use irrelevant stock imagery.

Practical Ways to Use Konstra Beyond the Standard Homepage

Konstra can be used for more than a single contractor website. Its construction-oriented logic works for different communication goals, as long as you stay grounded in the documented elements instead of inventing features: SP Page Builder, portfolio, pages, navigation, contact form, timeline, and industry-specific blocks. Below are several scenarios where the template can deliver real value.

Map of practical Konstra use cases for construction and architecture websites
The same template can be adapted to different goals: inquiries, projects, investors, contractors, and a knowledge base.

A General Contractor Website Built Around Trust

Use project details, services, markets served, and the contact form as a chain of proof. On the homepage, keep a major project image and a concrete offer. In the portfolio, separate projects into categories. Configure the contact form around estimate requests or consultations. The success check is simple: a visitor should be able to find a similar project and submit an inquiry within two or three clicks.

An Architecture Firm or Engineering Company

For a design or engineering firm, the process matters more than a simple list of services. Timeline Slider can explain the stages clearly: brief, concept, design, approvals, and support. In the pillars block, focus on engineering precision, documentation workflows, and visualization. In the portfolio, emphasize project detail rather than only a polished photo.

A Page for Investors and Partners

The official Konstra description mentions dedicated investor and subcontractor pages. If the company needs partners, those pages can become separate entry points: investor relations with facts and reports, and a subcontractor page with an interest form, contractor requirements, and contact details. Here it is especially important to replace demo wording with legally accurate copy.

A Client Knowledge Base

Konstra's construction blog does not have to be used only for news. A strong use case is publishing articles about site preparation, choosing a contract format, estimate stages, approval timelines, and common client-side mistakes. That supports SEO and helps the sales team, because some questions get answered before the call ever happens.

Visual Customization and Safe Improvements

Konstra has a recognizable visual foundation: yellow-and-black industrial accents, oversized typography, thin vertical lines, outlined text, strict card styling, and bold construction photography. You can change that style, but it is best to do it in layers: first the built-in settings, then the Helix CSS fields, and then a separate file for longer edits. Editing template core files or the framework itself is a poor choice, because updates may overwrite your changes.

Vertical Lines and Decorative Stripes

The Konstra documentation specifically explains how to manage vertical lines: in the template settings, go to Basic -> Body and toggle Enable Border. This is useful when the vertical lines clash with photography or create the impression of a visual defect on light sections. It is better to make that change through the documented setting rather than with CSS.

For the hero slideshow, the documentation also provides a small CSS snippet that removes three stripes from the images. That makes sense if the stripes conflict with a real project photo or cover an important part of the image.

.main-slider .sppb-container > div::before {
  display: none;
}

Add this code in Template Options -> Custom Code -> Custom CSS or in a separate custom.css file if your edits are more than a few lines long. After saving, clear the cache and check the hero section on both desktop and mobile widths. Rolling it back is simple: remove the snippet and clear the cache again.

Stroke Text and Section Classes

The documentation also describes the classes stroke-text, stroke-text-black, col-animatio, border-backward, and feature-hover. These are part of Konstra's signature visual effects. Use them selectively: for an accent word, a specific column, or a section where the effect genuinely improves the composition. If you apply that kind of class to an entire text block, readability can suffer.

A safe rule: save the original value of the CSS Class field first, then add the new class and check the result. If the section becomes harder to read or stops adapting correctly, restore the old value. This approach does not require editing files and is easy to roll back.

Custom CSS, JS, and Meta Code in Helix

Helix Ultimate lets you add custom CSS, JavaScript, and meta code through the template options. Helix documentation recommends using the custom CSS field or a separate custom.css file instead of editing template.css. For longer edits, a separate file is easier to find, compare, disable, and move later.

Use JavaScript more cautiously. Bad code can conflict with Joomla, SP Page Builder, or the template itself. In Konstra, CSS and builder settings are usually enough. JS is only justified for a small UX adjustment that cannot be handled through settings and does not touch the inquiry form, authentication, security, or other critical workflows.

Before changing the visual layer, make one small edit, save it, check the public site, and only then move on to the next one. That makes it much easier to identify which change broke the layout if something goes wrong.

Checking Speed, SEO, and Stability After Setup

Konstra is visually rich: large photos, sliders, portfolio sections, animations, menus, and builder-based layouts. That is normal for a construction template, but once you replace the content, the site needs to be checked for more than visual appearance. Large project photos, leftover demo pages, and unused modules can slow down loading and make the site harder to maintain.

Photos and Media

The homepage of a construction website usually depends heavily on imagery. When replacing demo photos, do not upload full camera originals without optimization. Prepare image sizes for the actual blocks, use clear file names, add alt text, and avoid reusing the same oversized image in several sections. If you have a project gallery, separate preview images from large detail images.

Menus, Links, and Indexing

After configuring the menu, verify that every important page is reachable through a menu item or internal link. In Joomla, that affects more than navigation. It also impacts page URLs, module assignment, and how understandable the structure is. For a construction website, service pages, portfolio pages, contact pages, and trust-building pages matter especially. Empty demo pages are better unpublished or replaced with real content.

Cache and Result Verification

If Joomla cache or server-side caching is enabled, changes made in SP Page Builder and the template options may appear with a delay. After major edits, clear the cache, test the site in another browser, and open the page while logged out. If the live site uses a CDN, test changes on a staging copy first. That way, you do not mistake a cached version for a template error.

Check the result like a visitor, not like an administrator: no editing panel, no login session, a normal internet connection, and several screen widths. That is how the future client will actually see the site.

How to Move a Configured Konstra Setup from Staging to the Live Site

Many teams use QuickStart as a lab: they deploy the demo on a subdomain, adjust the structure, choose the right blocks, show the client a working version, and only then move the result to the live domain. That is the right approach, but the move should not be treated as a mechanical copy of everything. QuickStart can contain demo pages, temporary materials, test users, placeholder images, and modules that do not belong on the public site.

Before migration, split your changes into three groups. The first is the structure you want to keep: the template style, navigation, homepage, service pages, portfolio, contacts, footer, and required module positions. The second is content that still needs review: text, images, alt descriptions, forms, links, legal pages, and the sitemap. The third is clutter that should be deleted or unpublished: demo articles, extra categories, test forms, unused menu items, and pages that do not match the real business.

Migration Through a Site Copy

The safest path is to create a full copy of the future live site, apply Konstra there, and verify everything in a closed environment. This is especially important if the site is already indexed, contains lead forms, supports multiple languages, or relies on third-party extensions. On the copy, you can safely change the template style, menu assignments, module positions, and builder pages. Once the result is approved, the changes can be transferred to the live domain according to an agreed checklist.

If you only need to move the design and pages from QuickStart, do not overwrite the live site's entire database with the demo database. It is better to recreate the necessary settings manually or use built-in export options where your extension stack supports them. That way, you do not lose users, content, SEO URLs, or live operational data.

What to Check Before Publishing

  • All forms send messages to real addresses, not demo email inboxes.
  • Menu items point to published pages and do not open test URLs.
  • The portfolio contains no third-party projects, placeholder photos, or outdated categories.
  • The footer copyright, contacts, social links, and utility labels have been replaced.
  • Service pages include a clear next step: inquiry form, call, brief, or link to a relevant project.
  • Pages that are not ready yet are unpublished or hidden from the menu.

A template is not ready for publication when the demo looks attractive. It is ready when every visible block has an owner, a purpose, and a verified action path. That is especially important with Konstra, because the template includes many strong niche pages, but every one of them needs real content behind it.

A Konstra Video That Helps You See the Template in Motion

The official product page includes a Watch Video link, and it is useful as part of a front-end result check. By watching it, you can assess not only the feature set, but also how the template behaves in motion, how the hero works, how the menu opens, and how the pages and transitions feel. Use it as a visual reference before changing the header, homepage, and portfolio.

After watching, compare the video to your own site. Does the homepage structure still match? Has the menu logic been preserved? Have any key sections been replaced by random blocks? Does the hero remain readable? The video does not replace the documentation, but it helps you understand more quickly what kind of result the template is supposed to deliver.

Diagnosing Common Issues When Setting Up Konstra

Problems with Konstra are usually not caused by a single template file. They are more often tied to the interaction between Joomla, Helix Ultimate, SP Page Builder, modules, menus, cache, and the installation package. That is why troubleshooting is best approached from symptom to cause, rather than by immediately editing code.

Diagnostic map of Konstra issues for a Joomla template
Most failures have a short verification path: installation package, menu assignment, module positions, builder, cache, and permissions.

No Demo Pages After Installation

Symptom: the template is installed, but the site does not look like the preview. In many cases, you just see an empty Joomla page or a plain layout with no finished sections.

A likely cause is that the Template Pack was installed instead of QuickStart. The standalone template does not include demo content, modules, or SP Page Builder pages. Check which archive was used. If the site is new and you need a demo clone, deploy QuickStart in a separate Joomla installation. If the site already exists, create the pages and modules manually, using QuickStart as a learning reference on a test domain.

QuickStart Will Not Install Through Extension Manager

Symptom: Joomla Extension Manager rejects the archive, or the installation ends with an error.

This is expected behavior for QuickStart. It includes the Joomla core and is installed as a new Joomla deployment, not as an extension. Check that you extracted the archive, uploaded the files to a separate directory, prepared the database, and opened the installer in a browser. If the package is intended for an existing site, use the template package instead of QuickStart.

Demo Photos Are Missing

Symptom: instead of polished construction photos, you see placeholders or gray images.

The documentation explains that this is due to demo image licensing, so those files may not be included in the package. The solution is to replace them with your own images or legally licensed assets. Do not treat the original demo photos as a required part of the product and go searching for them in the template files. It is better to prepare your project photos in advance and optimize them for the actual blocks.

The Menu Disappeared or the Off-Canvas Menu Behaves Incorrectly

Symptom: there are no menu items in the header, the hamburger icon opens an empty layer, the mobile menu covers the page, or some links lead to the wrong place.

Check the template options, Layout Builder, menu module assignment, the menu and offcanvas positions, and the Joomla menu items themselves. If you created a custom header, make sure the row and module positions are configured correctly. If you suspect a JavaScript conflict, temporarily disable any recently added custom JS and clear the cache.

SP Page Builder Changes Do Not Appear on the Site

Symptom: the block looks updated in the editor, but the public page still shows the old version.

Check that you are editing the exact page assigned to the current menu item. Then clear the Joomla cache, builder cache, browser cache, and CDN cache if applicable. If the page belongs to a different language or template style, review the menu assignment and language associations.

The Contact Form Shows Success, but No Email Arrives

Symptom: the user sees a success message, but the inquiry never appears in email.

SP Page Builder Form Builder does not store submitted messages, so the form should not be considered reliable until delivery has been verified. Check Joomla mail settings, the recipient, spam folder, sender address, domain SPF/DKIM records, and CAPTCHA. If inquiries are business-critical, consider an additional component that stores submissions, or an external CRM integration if it is supported by your stack.

Styles Broke After a CSS Edit

Symptom: spacing disappeared, text overlaps the image, or the hero no longer responds properly.

First remove the most recent custom CSS edit and clear the cache. If the code was placed in custom.css, temporarily rename the file or comment out the block. Do not edit template.css or other template core files. For small adjustments, use the custom CSS field. For larger changes, use a separate file with clear comments.

Questions About Konstra Setup and Its Limitations

Can QuickStart be installed on an already running Joomla site?

No. QuickStart is not installed over an existing Joomla site through Extension Manager. It is deployed as a fresh Joomla installation with demo data. For a live site, use the template package or a staging clone.

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

Because the template package contains only the template itself. The demo pages, modules, components, and configuration come with QuickStart. If you want the same look, study QuickStart in a separate installation and recreate the structure manually.

Can the homepage be edited without code?

Yes. The homepage and major Konstra pages are built in SP Page Builder Pro, so sections, rows, columns, and addons can be edited through the builder. Code is only needed for targeted visual tweaks that cannot be done through settings.

What should I do if QuickStart does not include the preview photos?

Replace them with your own images or legally licensed assets. JoomShaper documentation explains that demo photos may be excluded from the package because of image rights.

What is the safest way to remove the vertical lines from the design?

Start with the built-in setting Basic -> Body -> Enable Border. If you need to remove the stripes from the slideshow, you can use the documented CSS snippet from the Konstra documentation in the custom CSS area.

Do I need to keep all demo pages?

No. Keep only the pages that support a real visitor journey. Empty investor, subcontractor, services, or blog pages are better unpublished until they are filled with real content.

Is Konstra suitable for a small brochure-style business site?

It can be, but it may be excessive. If there is no portfolio, no service depth, no case studies, and no complex navigation, a lighter template or plain Helix Ultimate may be easier to maintain.

Where should I check compatibility before updating?

Review the product page, the Konstra changelog, and the Helix Ultimate and SP Page Builder documentation, then test the update on a site copy. Always create a backup of both files and database before updating.

When JoomShaper Konstra Is the Right Choice

Konstra is worth using if you need more than just a visually attractive Joomla template. It gives you a ready-made construction structure with a strong homepage, services, portfolio, navigation, timeline, contact forms, and Helix Ultimate-based configuration. It is especially useful for a new site or for an agency prototype, where QuickStart can be deployed on a test domain and shown to the client quickly as a working concept.

If the site is already live, the approach should be more careful: use the template package, work on a site copy, control the template style, and assign pages and modules manually. Do not deploy QuickStart over a working Joomla site, and do not change the header, navigation, builder pages, and CSS all at once. The best results come from a staged process: package, verification, pages, menu, portfolio, forms, performance, and only then small visual refinements.

After reading this guide, you can go to the product file and download the ZIP package, but it is better to do so with a clear plan: where the test installation will live, which pages are needed, which demo blocks will be removed, which images will be replaced, and how the inquiry form will be tested. That is when the template becomes the foundation of a useful, stable site rather than just an impressive copy of the demo.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.