JoomShaper Kind - Joomla Template
Template Description
The primary JS Kind and focus of the product are entirely dedicated to social assistance, supporting those in need, environmental protection, and global philanthropy. It is perfect for building websites for non-governmental organizations (NGOs), orphanages, animal shelters, ecological movements, and any other groups that require a reliable platform to organize fundraising and attract new volunteers. The developers have equipped the Kind template with optimal marketing and technical tools to make the donation process as transparent and intuitive as possible for users on any device.
The hero image of this template, which welcomes visitors on the homepage, deserves special attention. It features a full-width, emotionally charged photograph: joyful children from developing countries surrounded by caring volunteers during the distribution of vital humanitarian aid. Overlaid centrally on this inspiring fullscreen illustration is a large, contrasting headline with a strong call to action. Right below the headline is a brief text succinctly explaining the foundation's core mission, followed by a visually prominent "Sponsor a child" button. A crucial detail of the main screen is the integrated fundraising progress bar, which clearly displays the amount already collected and how much is still needed to reach the final goal, instantly motivating visitors to make their personal contribution.
The color schemes and overall palette of JoomShaper Kind were carefully selected by professional designers with a deep understanding of user psychology. The base design is dominated by clean, light shades - primarily stark white and soft gradations of a light gray background. These create a subconscious feeling of openness, honesty, and absolute trust in the charitable organization. The main accent colors are warm orange and rich yellow, symbolizing hope, vitality, and optimism, harmoniously combined with soft green and sky blue - colors of ecology, tranquility, and life protection. The demo images and page layouts consistently feature the happy faces of people who have already received help, rescued wild animals in their natural habitats, large-scale tree-planting events, and friendly volunteer teams in branded apparel. Together, all these elements form an extremely positive and inspiring visual aesthetic.
The functionality and internal content of the pages are thought out to the smallest detail. The information architecture includes fully prepared sections for detailed descriptions of current fundraising campaigns, as well as separate pages providing comprehensive information about each project or individual in need of targeted assistance. The website features specialized forms for the quick registration of new volunteers, thematic blocks with touching success stories, and strict financial reports on the work accomplished. Key user interface elements include dynamic animated counters for collected donations, convenient calendars for upcoming charity events, stylish photo galleries from event locations, blocks with genuine testimonials from major donors, and highly user-friendly feedback forms.
From a technical standpoint, JS Kind is based on the most advanced web standards and is fully compatible with the latest versions of the Joomla 5 and 6 content management systems, as well as modern PHP builds. Its reliable foundation is the powerful Helix Ultimate framework, ensuring 100% responsive design on smartphone and tablet screens while offering flexible typography settings. Visual content editing is powered by the highly popular SP Page Builder Pro plugin, which comes included. This visual constructor allows you to build web pages directly on the frontend using drag-and-drop methods, with absolutely no coding knowledge required. Site administrators have access to an extensive library of built-in addons: social media integrations, dynamic sliders, advanced payment acceptance forms, e-commerce tools, and interactive maps for pinpointing physical humanitarian aid collection points.
Template Features:
- Compliance with W3C XHTML 1.0 Transitional and W3C CSS Valid standards.
- Support for JavaScript and CSS scripts compression to speed up the website performance.
- Thanks to the use of the latest versions of PHP and MySQL, the template code is current and secure.
- A large number of positions for placing modules and several color suffixes.
- Several built-in color schemes of the template for individual design of your project.
- The template supports Google fonts and RTL/LTR languages.
- Multiple menu types, Mega Menu, Dropline Menu, CSS Menu, with smooth animation effects.
- Integrated support for popular extensions: Helix v3, SP Page Builder Pro, expanding the functional capabilities of the site.
- QuickStart demo package with support for CMS version Joomla! 6.x.
Specifications:
| Release date: | 01-04-2026 | |
| Last updated: | 01-04-2026 | |
| Type: | Premium | |
| License: | GPL | |
| Subject: | Charity Blog Holidays & Events | |
| Compatibility: | J6.x | |
| QuickStart: | Joomla! 6.x | |
| Color schemes: |
||
| Developer: | JoomShaper | |
| Rating: | ||
Share with your friends!
General Features:
Powerful 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 4 & 5.
Quick Start
Install Joomla! website containing demo content, styles and preconfigured extensions and 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 and Using JoomShaper Kind for a Charity Website
JoomShaper Kind is a Joomla template for charity, nonprofit, and education-focused initiatives where success depends not just on attractive pages, but on a clear visitor journey: see the program, explore events, learn about the children or beneficiaries, read real stories, and take action. This guide focuses not on a marketing overview of the template, but on the practical work that starts after installation: which package to choose, where to edit pages, how the dynamic collections are structured, and what to check in menus, modules, and Helix Ultimate settings.
This material is written for site owners, content managers, and Joomla developers who receive a finished design and need to turn the demo into a working website. The template is built on Helix Ultimate and SP Page Builder Pro, so many decisions are made across several layers rather than in one place: template style, builder pages, modules, menus, and dynamic content.
The core idea is simple: Kind works best when you organize your content structure first and only then start changing colors, buttons, and photos. If you begin with visual tweaks, it is easy to end up with a polished homepage while losing the connection between programs, events, child pages, and navigation.
What Kind Actually Helps You Build
Kind is designed for websites where an organization needs to explain its mission quickly and show evidence of real work. In the official materials, the template is positioned for fundraising, nonprofit organizations, charity foundations, campaigns, social welfare initiatives, and child sponsorship. In practice, that usually means a foundation website, a charity school, a child support program, a local initiative, a nonprofit organization, a civic project, or an educational campaign.
The real strength of the template is not a single attractive hero section, but its set of ready-made page types. The documentation specifically mentions Educational Programs, Program Details, Events, Event Details, Children, and Children Details. That means the template is built not just for a static landing page, but for repeatable content entities: programs, events, and child or beneficiary profiles.
In practice, that creates three strong working scenarios.
- A foundation can present its areas of support: educational kits, school classes, scholarships, local programs, evening events, and fundraising campaigns.
- The team can maintain events such as donor meetups, reporting evenings, volunteer activities, local drives, and public programs.
- A content manager can maintain child or program participant profiles without building every page manually from scratch.
This approach is especially useful when the site needs regular updates. A basic static template becomes outdated quickly: every new event means copying an older page, changing blocks, and making sure nothing breaks. In Kind, some repeatable pages are powered by Dynamic Content in SP Page Builder Pro, so the logic is closer to a catalog: one data type, many pages with the same structure.
At the same time, Kind is not a full CRM, donation platform, or donation accounting system. If the organization needs payments, donor portals, recurring billing, contribution reporting, and bank integration, those requirements need to be handled with separate extensions or external services. Kind gives you the visual and content framework of the site, not the nonprofit's entire internal operating system.
Who the Template Is Best For
Kind is a strong fit for teams that want to launch a polished public-facing website quickly, with a warm visual tone, ready-made sections, and page editing through SP Page Builder Pro. It works especially well for projects where emotional storytelling, photography, programs, events, a blog, and a clear call to action all matter.
The template will be comfortable to manage if you have a content manager who is ready to work with collections, pages, and media. For a small nonprofit, that is often more realistic than building a custom component: first install Quickstart on a staging domain, then gradually replace the demo data with real programs, pages, and photography.
When a Different Approach Makes More Sense
Kind may be too much for a simple three-page brochure site. It is also not ideal if the organization deliberately avoids the page-builder approach, wants to keep all content strictly in native Joomla Articles, or requires a very rigid custom data model. In those cases, it makes more sense to evaluate a lighter Helix Ultimate template, custom Joomla overrides, or a separate component for the program catalog.
One specific risk is assuming Quickstart will give you a finished site with the same photos shown in the demo. JoomShaper's documentation clearly explains that images from the live preview may not be included in the package because redistribution rights are not available. Plan your own image library in advance.
Quickstart or the Standalone Template Package: How to Choose Without Extra Rework
Before installation, it is important to understand the difference between the two approaches. JoomShaper usually offers both Quickstart and a standalone template package for templates like this. In the Kind documentation, the distinction is described fairly clearly: Quickstart is a complete demo site with Joomla, the template, extensions, Helix Ultimate settings, and demo content; the template package is the standalone Helix Ultimate template without modules, components, or demo materials.
Your choice affects everything that follows. If you install Quickstart, you get a site that is close to the demo and can study which pages, collections, menus, and modules are already configured. But Quickstart cannot be installed into an existing Joomla installation: it needs a clean directory and a separate database. If you already have a live site, it is better to deploy Quickstart on a staging subdomain rather than trying to layer it over your current project.
The template package makes sense when the site already exists and you only need the visual layer. But it is not a magic demo import. After installing the standalone template, you will need to create the pages, modules, menus, dynamic collections, and design connections manually. For an experienced developer, that is a normal workflow. For a site owner without technical help, it is usually more complex than it first appears.
| Situation | Best option | Why |
|---|---|---|
| New nonprofit site with no existing structure | Quickstart on a clean installation | You immediately get the demo pages, collections, menus, footer, and Helix settings. |
| Live Joomla site with content already in place | Standalone template package | This is safer for existing data, but page and module setup will be manual. |
| You need to understand how the demo logic is built | Quickstart on a staging environment | You can dissect the staging site like a reference model: which modules are published where, which collections are used, and which pages are tied to the menu. |
| You only need the visual style and general top-level design | Template package plus selected pages | There is no reason to import all demo data if your site structure is significantly different. |
Practical advice: if this is a new project, launch Quickstart in a private staging area first. Do not publish it immediately as your main site. Review the structure, replace the demo content, remove unnecessary pages, and only then move the result to the live domain.
What to Check Before Installation
Kind depends on a current Joomla environment, Helix Ultimate, SP Page Builder Pro, and proper server settings. That makes pre-installation preparation more important than it would be for a simple static template. The official documentation lists requirements for PHP, memory, upload size, execution time, the database, cURL, OpenSSL, and the file_get_contents() function. These settings matter most for Quickstart because it deploys not a small template zip, but a full demo site.
Start with a staging environment. Do not perform your first installation on a live site that already contains real inquiries, donations, SEO pages, and user data. Even if you plan to use only the template package, having a copy of the project for checking menus, modules, cache behavior, and extension compatibility is still useful.
Minimum Technical Checklist
- Make sure your Joomla version matches the compatibility stated on the product page.
- Compare your PHP version and server limits with the Kind documentation, especially
memory_limit,post_max_size,upload_max_filesize, andmax_execution_time. - Confirm that your database supports the requirements of modern Joomla and that the database user has permission to create tables.
- Check whether cURL, OpenSSL, and
file_get_contents()are enabled if your hosting environment restricts PHP functions. - Prepare your own images in advance for hero sections, program cards, events, and child profiles, because the demo photos may be replaced with placeholders.
- Create a backup if you are working alongside an existing site.
Do not try to fix Quickstart problems by editing Joomla core files or template files. If the installation hangs, first compare your server settings with the technical requirements, then contact your hosting provider. Editing SQL files inside the installation package should only be considered as a last-resort test scenario, and only if you understand the database implications.
Content Preparation
The technical install does not solve the content problem. Before replacing demo data, it helps to create a simple table: what programs the organization runs, which events will be published, what stories belong in the blog, which child or participant profiles can be shown publicly, and which data must not be disclosed for ethical or legal reasons.
That is especially important in Kind because of the child sponsorship use case. Photos and stories involving children require consent, careful wording, and personal data protection. The template helps present profiles beautifully, but the decision about what can actually be published remains with the organization.
Who Should Be Involved in Preparation
Even if one webmaster is assembling the site, it helps to split responsibilities before launching Kind. The technical specialist checks the server, installation, cache, template styles, and the safety of code changes. The content manager is responsible for programs, events, copy, and imagery. The project lead approves public wording, numbers, CTAs, and legal pages. This basic division saves time: design revisions are not blocked by missing copy, and technical review does not turn into a debate about the organization's mission.
Before importing or manually rebuilding the demo structure, agree on which sections will remain in the menu. If the team will not maintain events, do not leave an empty Events section. If child profiles cannot be published under internal policy, replace Children with Stories, Beneficiaries, or another ethical format. Joomla lets you rename menu items, and SP Page Builder plus Dynamic Content make it possible to reshape the content model, but it is better to do that before large-scale content entry begins.
A good starter document for Kind is not a ten-page technical brief, but a simple mapping table: demo section, real website section, content owner, data source, and readiness status. It quickly shows which pages can be reused with minimal changes and which are better removed or rebuilt from scratch.
Installation and the First Check in Joomla
If you choose Quickstart, treat it like a new Joomla installation. Prepare a clean directory, a separate database, admin credentials, and temporarily block the site from indexing. After installation, log in to the admin panel and make sure the frontend opens correctly, the homepage resembles the demo structure, and the menu leads to the expected sections.
If you choose the standalone template package, installation works like any Joomla extension upload through System and the extension installer. After a successful install, the template should appear under Site Template Styles. You can assign it as the default or attach it to specific menu items. On an existing site, it is usually safer to assign Kind to a test menu item first so you can see potential conflicts in styles, modules, and markup.
First Steps After Installing Quickstart
- Open the public side of the site in a regular browser window and in a private window to rule out cached results for a logged-in user.
- Check the main menu:
Home,About,Events,Programs,Children,Blog, and any extra items should lead to live pages. - Go to
Components>SP Page Builder Pro>Pagesand review the list of pages created by the template. - Open
Dynamic Contentin SP Page Builder and inspect the collections tied to programs, events, and children. - Go to
System>Templates>Site Template Stylesand open theKind-Defaultstyle or its equivalent in your installation. - Check
Content>Site Modulesto understand which modules are published in the header, footer, and supporting positions.
After these steps, you should have a working map of the site: where pages are edited, where repeatable content is stored, where the menu is configured, which modules control the footer, and which elements are best left alone unless there is a clear reason to change them.
First Steps After Installing the Template Package
When installing the standalone template, do not expect a ready-made homepage. Create a test menu item, assign the Kind style to it, publish the basic modules, and then start transferring the blocks you need through SP Page Builder. If you want to reproduce the demo structure, keep a Quickstart installation on a staging site nearby as both a visual and technical reference.
Pay especially close attention to template overrides. JoomShaper documentation warns that template packages often include overrides for component views. That is a normal part of the template, but during updates and manual customization you need to know which output comes from Joomla, which comes from the component, and which comes from the template folder.
How to Keep Test Content Separate from Live Content
Kind makes it tempting to change a few headlines and open the site right away. For a nonprofit, that is risky: demo numbers, placeholders, test profiles, and broken buttons can end up indexed or shared in email campaigns. After installation, assign a clear status to every page: draft, review, ready to publish. If the editor works inside SP Page Builder, they should update a page only after the related collections already contain real entries.
Also make sure the staging environment is blocked from public promotion. Do not place real data collection forms there and do not send visitors to temporary pages. Once the structure is ready, move only verified elements: pages, collections, media, and menu settings. A nonprofit site should launch as a coherent story, not as a collection of partially replaced demo blocks.
Configuring Pages with SP Page Builder Pro
Kind uses SP Page Builder Pro as the main tool for editing visual pages. The template documentation states that Quickstart pages can be edited through either the admin editor or the frontend editor in SP Page Builder. The standard path is Components > SP Page Builder Pro > Pages, then select the page you want.
Do not start editing every page at once. Begin with the homepage, because it sets the promise of the site: who you are, who you help, what programs exist, and how a visitor can support the initiative. Then move on to the program listings, event pages, child profiles, and the blog.
How to Edit the Homepage Without Breaking Its Logic
The source reference shows a large hero section built around the mission, a sponsorship button, a visual rhythm of children’s portraits, an emotional statement block, a video story, statistics, and a programs section. This is not a random set of blocks. The order works like a trust funnel: first the mission, then the human face of the cause, then proof, and only then the programs.
Keep that logic intact as you replace content. If you remove the statistics, visitors may not see the scale of the work. If you place the donation form before explaining the mission, the site will feel more aggressive. If you leave the demo headlines and only swap the photos, trust goes down because the copy no longer matches the organization’s actual work.
Safe Editing Sequence
- Start by replacing the logo, main menu, and hero headline so the site no longer looks like a demo.
- Then update the images, but use properly licensed materials and optimize file sizes in advance.
- After that, update the buttons so they point to real menu items, program pages, a contact form, or an external donation service.
- Review the statistics blocks: keep only numbers you can verify, and do not reuse demo values as if they were real metrics.
- Finally, check responsiveness and spacing on desktop, tablet, and mobile widths.
Quick takeaway: SP Page Builder makes visual editing easier, but it does not protect you from a weak content structure. Update blocks in the order of the user journey: mission - proof - program - action.
How to Work with Dynamic Content on Pages
The Educational Programs, Program Details, Events, Event Details, Children, and Children Details pages in Kind are tied to Dynamic Content. That matters because if you only change the outer page layout without filling the collections, the lists will look empty or still feel like demo content. On the other hand, if you fill the collections but break the connection to the Dynamic Text or Dynamic Image addon, the data will not appear where it should.
In SP Page Builder, Dynamic Content works through collections, fields, and items. A collection defines the data type, fields define the structure, items store the actual entries, and the index/details pages output lists and individual cards. For Kind, think of it this way: Program is the collection, each program is an item, and Program Details is the page template for one individual entry.
Dynamic Sections: Programs, Events, and Child Profiles
The most product-specific part of Kind is its dynamic pages for educational programs, events, and children. This is where the template becomes something more than a generic "nice-looking Joomla design." When these sections are used properly, the site becomes a living knowledge base about the organization’s work rather than a simple brochure.
Start not with the card design, but with the data model. For each entity, decide which fields you need. A program might include a title, short description, image, goal, region, type of support, status, and a link to the details page. An event may need a date, location, format, short description, and either registration or a report link. A child or participant profile may include a name or pseudonym, age group, story, needs, level of public visibility, image, and support status.
Not every field should be shown publicly. For a charity website, that is not only a design issue but also an ethical one. In some cases, it is better to show a generalized story without exposing unnecessary personal details. The template gives you space for profile cards, but your editorial policy should be more careful than the demo content.
Configuring Collections Without Chaos
In the admin panel, open Components > SP Page Builder > Dynamic Content. If the site was created from Quickstart, the default collections should already be there. Before doing large-scale editing, create a copy or export if that feature is available in your version of SP Page Builder Pro. The SP Page Builder documentation describes export and import for Dynamic Collections, but for images in collection items, absolute URLs matter, so do not assume local media will always transfer automatically.
Review the fields in each collection. Do not delete demo fields immediately. First check which Dynamic Text and Dynamic Image addons use those fields on the index/details pages. If you remove a field that is connected to the output, a card may lose its headline, image, or button.
Verification Chain for One Program
- Create or edit one item in the program collection.
- Fill in the title, image, short description, and link to the detail page if that link is being used.
- Open the program listing page on the frontend.
- Confirm that the card appears, the image is not stretched, the text is not cut off too early, and the button leads to the correct page.
- Open the details page and verify that the fields are being injected into the correct blocks.
If the result does not appear, do not start rewriting the layout right away. First check whether the item is published, whether the correct collection is selected in the Collection addon, whether a filter is active, whether the menu item points to a different page, and whether Joomla or the browser cache is interfering.
Filters and Navigation for Larger Lists
If the number of programs or events grows, users will need a way to narrow things down. SP Page Builder includes a Dynamic Filter addon that can filter collection items by fields, including categories, dates, tags, and other values. In Kind, this is especially useful for the programs and events sections: for example, you can separate educational kits, classes, scholarships, and volunteer events.
You should only add filtering when there is enough data to justify it. If the organization has only three programs, a filter will feel unnecessary. But if the site publishes events regularly, a filter by event type, region, or format can help visitors find the right page much faster.
Editorial Workflow for Repeatable Cards
Dynamic collections only stay useful if the team is disciplined about how they are filled. For each collection, define a short rule: who creates the item, who reviews the copy, who approves the image, and who is responsible for removing outdated entries. Events in particular need a clear process for handling past dates: some should be turned into reports, while others are better archived or hidden from the active list.
For programs, it is helpful to keep not only the public description but also an internal note about status. If that note field is not rendered on the site, it can still help the team understand why a program is being promoted less actively for a period of time. If you do not have that internal structure, do not add it as visible text on the public page. Keep operational information in a working document or a separate non-public field if your workflow supports it.
The most common editorial failure in dynamic sections is that a card exists, but it is not connected to a clear user journey. The item exists inside the collection, but there is no path to it from the menu, a listing, a CTA, or a related block. After adding any program or event, check not only the details page but also the path a visitor would use to find it.
Menu, Header, Off-Canvas, and Footer in Helix Ultimate
Kind’s Helix Ultimate settings live inside the template style. The documentation gives this path: System > Templates > Site Template Styles > Kind-Default > Template Options. At minimum, three areas matter here: Menu, Layout, and Header/Footer.
The source reference shows a simple top navigation with Home, About, Events, Programs, Children, Blog, an additional More item, and a sponsorship CTA button. For a charity website, that kind of header works well because it is not overloaded. Visitors can quickly see the key directions and the next action.
Menu Builder, Mega Menu, and Off-Canvas
Helix Ultimate gives Kind access to Menu Builder, Mega Menu, and Off-canvas Menu. The documentation notes that mega menu is not enabled in Kind by default, but it can be turned on for menu items through Menu Builder. For a small nonprofit, a mega menu is often unnecessary. It becomes worthwhile if the organization has many initiatives, regional programs, reports, and separate pages for donors and volunteers.
Off-canvas controls the mobile menu. In Kind, it is right-aligned and centered by default. After changing menu items, always test the mobile version: make sure long labels are not cut off, the CTA link is still visible, and the first item does not send visitors to a leftover demo page.
Header and Layout Builder
The Header, Layout, and Footer documentation states that Kind uses a predefined header, and that the settings allow you to change the layout, positions, column sizes, and visibility on different devices. This is a powerful tool, but it is easy to use it too aggressively. If you move positions around, test not only the homepage but also internal pages.
A common mistake is configuring the header based only on the homepage, where there is a lot of open space, and then discovering that on a program details page the heading gets squeezed against the menu or the CTA button breaks onto a second line. To avoid that, open at least three pages after every change: the homepage, a program list, and a details page.
Footer and Copyright Note
The Kind documentation says that the footer position uses one SP Page Builder module, footer1, and that the copyright note is also tied to the footer1 position. That means you should not look for the footer in only one place. One part may be edited as a module, another through SP Page Builder, and another through the template style.
On a charity website, the footer should close the trust loop: contact information, legal pages, privacy policy, terms, social links, a short statement of mission, and possibly links to reports. If the demo footer remains in place, the site will feel unfinished even if the homepage looks polished.
Colors, Typography, and Safe CSS Tweaks
Kind uses a warm palette, bold typography, and strong photography. On the JoomShaper product page, the template is presented with color variations, global typography and styling controls, and web fonts. But on a real site, you should not change the style just for the sake of being different. For a charity project, readability, contrast, trust, and consistency across imagery matter more.
Start with template options and SP Page Builder settings. If you only need to strengthen a button, adjust spacing, or improve contrast in a specific block, it is safer to use Custom CSS in Helix Ultimate or a separate custom.css file than to edit template files directly. Helix Ultimate documentation explicitly recommends not modifying template.css, because those changes may be overwritten during updates.
A Small CSS Adjustment for a CTA Block
This example does not depend on any private Kind API. First, assign a custom class to the target section in SP Page Builder, for example kind-cta-contrast. Then add the CSS through Template Options > Custom Code > Custom CSS or through a safe custom CSS file if that is already part of your workflow.
.kind-cta-contrast {
background: #fff7e8;
border-radius: 18px;
}
.kind-cta-contrast a,
.kind-cta-contrast .sppb-btn {
min-height: 44px;
padding: 12px 22px;
font-weight: 700;
}
.kind-cta-contrast a:focus-visible,
.kind-cta-contrast .sppb-btn:focus-visible {
outline: 3px solid #f6a400;
outline-offset: 3px;
}
The point of this tweak is not to "redesign" the template, but to make an important CTA block more noticeable and more keyboard-friendly. After saving, check the page in a regular window, a private window, and at mobile width. If the buttons become too large or the color clashes with your palette, remove the class from the section or remove the CSS. The rollback is simple because no Joomla core files or template files were changed.
Language Overrides Instead of Editing Files
If you need to change a Joomla system phrase or extension text, use language overrides. In modern Joomla, that is done through System > Manage Panel > Language Overrides. This approach is better than manually editing language files: overrides survive updates and let you control only the strings you actually need.
For Kind, this is useful if part of the interface text remains in English after localization, or if you need to adapt the wording to match the organization’s tone. But do not use language overrides for large page content blocks. Program content, events, and profile cards should live in SP Page Builder, Dynamic Content, or Joomla Articles, not in language constants.
Practical Example: Launching a Nonprofit Homepage Without Demo Traces
Let’s walk through a realistic scenario. The organization has a new site built on Kind, and the goal is to prepare the homepage and connected sections so that visitors see a real mission, three educational programs, an upcoming event, and a clear path to support. This is not a full platform launch, but it is an excellent first production milestone.
Goal
Create a homepage where the hero, statistics, programs, event, and CTA all point to real content instead of demo pages. The result should be verifiable: program cards open correctly, the menu works, the mobile header does not break, images are optimized, and usage rights are respected.
Preparation
- Quickstart is already installed on a staging domain, or the template package is connected to a test copy of the site.
- There are at least three real programs with short descriptions and images.
- There is one upcoming event or report-style story that can be featured on the homepage.
- There is already a decision about where the CTA leads: a program page, a contact form, or an external donor service.
Steps
- Open the homepage in
Components>SP Page Builder Pro>Pages. - Replace the hero headline with the real mission. Do not copy the demo slogan word for word if it does not fit your project.
- Replace the sponsorship button with a clear real-world action. If the link goes to an external service, check both the destination and security settings.
- In
Dynamic Content, open the programs collection and fill in three items: title, short description, image, status, and link. - Open the program listing page and confirm that the cards are pulling from the correct collection.
- Check the event: if it is rendered through Dynamic Content, fill the events collection; if it is a static block, replace the text and link manually.
- Open the template options and review the menu. The
Programs,Events, andChildrenitems should lead to your actual pages. - Clear Joomla and browser cache, then open the site while logged out.
Verification
On the public side, you should see a real logo, a current mission statement, working menu links, three real programs, a correct event card, a CTA without demo URLs, and a readable footer. At mobile width, test the off-canvas menu: it should open correctly, menu items should stay inside the screen, and the action button should remain accessible.
A Common Issue That Gets in the Way
If you changed data in the collection but still see the old card on the page, check three things: whether the correct collection source is selected in the addon, whether the item is published, and whether Joomla is serving a cached version of the page. Do not start redesigning the card until you are sure the data is actually coming from the right place.
Practical Ways to Use Kind Across Different Nonprofit Scenarios
Kind does not have to be used only for child sponsorship in the narrow sense. Its official positioning is broader: donation platforms, NGOs, campaigns, nonprofit organizations, and social welfare initiatives. But any adaptation should be based on the template’s real pages and collections, not on imagined features that do not exist.
Education Support Foundation
This is the scenario closest to the demo. The Programs section becomes a catalog of educational initiatives, Events becomes a calendar of meetings, and Children becomes a carefully managed showcase of beneficiaries or support stories. The key is deciding in advance which child-related information can be shown publicly. To verify the result, open a child card, a program page, and the path from the CTA to the final action.
Local Nonprofit with Several Projects
Programs can become projects, Events can become activities and reporting meetings, and Blog can become stories and updates. In this scenario, the Children cards may be unnecessary, or they can be rethought as beneficiaries if that is ethical and clear. The important part is not leaving an empty section in the menu. If an entity is not needed, remove both the menu item and the related blocks from the homepage.
Fundraising Campaign for One Main Goal
If the organization is focused on one major campaign, Kind can work as an extended landing page. In that case, Programs can represent campaign phases or spending areas, Events can show public activities, and Blog can be used for progress reports. But the actual payment flow still needs a separate solution. Make sure the CTA does not promise functionality the website does not provide.
Educational Initiative Without On-Site Donations
Sometimes the site is not about donations at all, but about trust: showing the work, schedule, programs, and contact options. In that case, the sponsorship button can be replaced with registration, an inquiry, contact, or a link to a partner form. This scenario is easier from a legal standpoint, but it still requires a solid privacy policy and a clear footer.
Result Review: Frontend, Speed, SEO, and Trust
After setting up Kind, it is important to review more than just the visual appearance. A charity website often gets traffic from social media, email campaigns, search engines, and direct links from partners. An error on one page can damage trust more than it would on a standard corporate site.
Frontend Review
- Open the homepage, the programs list, a program page, the events list, an event page, the children page or its equivalent, the blog, and the contact page.
- Check every CTA button. Each one should lead to a real destination, not a demo anchor.
- Review the images: there should be no gray placeholders, watermark text, stretched portraits, or overly heavy files.
- Check the footer: contacts, legal links, and policy pages should all be filled in.
- Test the mobile menu, especially if you use long menu labels.
SEO and Structural Clarity
SP Page Builder Dynamic Content supports an approach where details pages pull their data from a collection item. The SP Page Builder documentation also describes SEO settings for collection details and dynamic variables. That is especially useful in Kind: every program or event can have a clear title, description, and unique URL.
Do not promise search growth just because you chose a particular template. SEO depends on structure, content, speed, indexation, metadata, links, and overall page quality. But Kind does provide a solid foundation for a clean structure: programs separated from events, events separated from stories, and stories separated from the blog.
Speed and Media
The source reference shows that the design leans heavily on photography. That looks strong, but heavy images can slow the site down. Before publishing, compress your images, use sensible dimensions, verify lazy loading, and avoid uploading oversized originals into the hero or cards. If the page becomes noticeably slower after replacing the photos, the problem may not be Kind at all, but unprepared media assets.
The most useful pre-launch test is to follow the path of a normal visitor from the homepage to an action and back again. If the visitor cannot tell where the program is, why it can be trusted, and what happens after clicking the button, the design is not solving the real problem yet.
Troubleshooting Common Problems When Configuring Kind
Most Kind issues are not caused by one "broken template," but by a mismatch between layers: Quickstart, SP Page Builder, Dynamic Content, template style, menus, modules, cache, and server limits. Troubleshooting works best when you move from the symptom to the source instead of changing everything at once.
Quickstart Hangs or Fails to Create Tables
Symptom: the installation takes too long, stalls while creating tables, or never completes. Possible cause: server limits are lower than Quickstart requires, including execution time, memory, PHP settings, or database permissions. What to check: max_execution_time, memory_limit, upload size, PHP version, error logs, and the privileges of the database user.
Fix: first raise the limits through your hosting panel or control panel, then restart the installation on a clean database. If the hosting environment does not allow those changes, it is better to use a different staging server than to break apart the installation package. After a successful install, return any temporary execution-time increase to a normal safe value.
The Demo Photos Are Missing After Installation
Symptom: instead of polished demo photography, you see placeholders or neutral blocks. This is expected behavior for many JoomShaper templates: the Kind documentation explains that images from the live preview may not be included in the package because of licensing restrictions. What to check: the media library, SP Page Builder blocks, collection item images, and cards.
Fix: replace the photos with your own properly licensed images, with appropriate dimensions and alt text prepared in advance. Do not look for a way to "extract" the demo photos from the package. This is not a technical error, but a licensing limitation.
Program or Child Cards Do Not Update
Symptom: you changed an item in Dynamic Content, but the site still shows the old text or nothing appears at all. Possible causes: the page is using a different collection, the item is unpublished, the addon is linked to the wrong field, the page is cached, or the menu item points to another page.
Check: open Dynamic Content, find the correct collection, and verify the item and fields. Then open the index/details page in SP Page Builder and inspect the source collection. After that, clear Joomla cache and browser cache. Start the fix from the data binding, not from the visual design.
Modules or the Footer Show Up in the Wrong Place
Symptom: the footer, copyright note, or an individual block appears only on some pages, disappears after changing a menu item, or shows up in the wrong location. Possible causes: module position, menu assignment, template style assignment, or changes made in the Helix Ultimate layout builder.
Check Content > Site Modules, the module position, the menu assignment tab, and the template style used for the target menu item. For the footer, keep the footer1 position mentioned in the Kind documentation in mind. If the issue started after a layout edit, temporarily restore the previous version and test the page again.
Menu Items Open, but the Design Does Not Match the Homepage
Symptom: the homepage looks correct, but internal pages use a different style, a different header, or do not display the expected positions. Possible cause: the menu item is assigned to a different template style or was created before Kind was configured. What to check: System > Templates > Site Template Styles, the menu assignment tab, and the style assigned to the specific menu item.
Fix: assign the correct Kind style to the necessary menu items, or make it the default if the entire site should use one template. After making the change, clear the cache and test the page while logged out.
SP Page Builder Will Not Save the Page or Is Blocked by Security
Symptom: the editor opens, but saving fails, an access error appears, or the request gets blocked. For SP Page Builder in general, JoomShaper documents situations where cache, security extensions, or server security rules interfere. What to check: Joomla cache, browser cache, security extensions, WAF rules, ModSecurity, and server logs.
Fix: start by clearing caches and testing in another browser. If the block happens again, do not disable all protection permanently. Create a targeted exception for the editor using the documentation for the specific security extension, or contact your hosting provider.
Questions That Usually Come Up Before Launching Kind
Can Quickstart be installed over an existing Joomla site?
No. Quickstart is designed for a clean environment and a separate database. For an existing site, use the template package or deploy Quickstart separately as a staging reference, then rebuild the necessary structure manually.
Why are the same photos from the demo missing after installation?
That is not necessarily an error. The Kind documentation explains that photos from the live preview may not be included in the package because of rights restrictions. You need to use your own legally licensed images and replace the demo placeholders in pages, collections, and modules.
Where do I edit programs, events, and child profiles?
If the site was installed from Quickstart, look for those related sections in SP Page Builder Pro and Dynamic Content. The listing and details pages are powered by collections, so edit not only the page layout but also the items inside the relevant collection.
Is Kind suitable for full donation processing?
Kind gives you the design, CTA structure, and layout for a donation-oriented website, but it does not replace a payment system or donor CRM. If you need payments, recurring contributions, receipts, and reporting, connect a separate extension or an external service and verify the legal requirements.
Can I change the menu and off-canvas behavior without code?
Yes. The core configuration is handled through Helix Ultimate: System > Templates > Site Template Styles > Kind-Default > Template Options > Menu. Menu Builder, Mega Menu, and Off-canvas Menu are available there. After making changes, always test at mobile width.
What is the safest way to change the visual style?
Start with Helix Ultimate and SP Page Builder settings. For small CSS adjustments, use Custom CSS or a custom CSS file. Do not edit template.css or core files, because updates may overwrite those changes.
What should I do if a page will not save in SP Page Builder?
Clear Joomla cache and browser cache, test in another browser, then check security extensions, WAF, and ModSecurity. If the block is happening at the server level, it is better to create a targeted exception through your hosting provider than to disable protection entirely.
When JoomShaper Kind Is the Right Choice
Kind is worth using if you need a Joomla template with built-in nonprofit logic: a strong homepage, program and event sections, child or beneficiary profiles, a blog, a footer with legal pages, and configuration through Helix Ultimate plus SP Page Builder Pro. It is especially useful when the website needs to explain the organization’s mission quickly and stay current through repeatable content sections.
Before publishing, do not stop at a nice-looking hero section. Review the Quickstart or template package choice, fill in Dynamic Content, configure the menu and off-canvas navigation, replace the demo photography, verify the footer, clear the cache, and walk the full visitor journey from the homepage to the action. If all of that works, you can download the JoomShaper Kind package and test the template safely in your Joomla environment.
If what you actually need is a lightweight brochure site, a fully custom data model, or a built-in donation system with payment accounting, Kind is better treated as a visual foundation rather than a complete platform. In that case, plan the additional extensions, data publication rules, and post-launch support workflow in advance.
Nearby Materials | ||||
|
JoomShaper Selixo - Joomla Template | JoomShaper Nexio - Joomla Template |
|
|




