JoomShaper Artion - Joomla Template

A Guide to Setting Up JoomShaper Artion for a Joomla Portfolio Website

JoomShaper Artion is best understood not as a polished visual shell, but as a set of interconnected pieces for a creative website: a Helix Ultimate-based template, SP Page Builder Pro pages, SP Simple Portfolio for project showcases, several visual directions, and ready-made scenarios for an agency, an individual creator, or an NFT project. In this guide, we’ll look at how to approach installation, what to check before you begin, which settings to adjust first, and how to turn the demo into a working site without breaking the template’s visual composition.

This article is intended for a site owner, Joomla editor, or developer who has the template archive and wants to quickly understand which path makes sense: install QuickStart on a clean environment, bring the design into an existing site, or manually assemble a similar structure using a template style, menus, modules, and builder pages. It does not cover purchasing or license activation - only practical work with an installation package you already have access to.

Special attention is given to the areas where Joomla templates most often run into issues: mixing up QuickStart and the regular template package, missing demo images, empty module positions, incorrect menu item assignments, oversized portfolio images, off-canvas menus that do not work, and custom CSS conflicts caused by caching. If you are reading this before installation, start with the preparation and package selection sections. If the template is already installed, jump to the Helix setup, SP Page Builder pages, and final verification steps.

What Artion Is Really For and Why It Is More Than Just a Design

Artion is built for websites where visual presentation matters more than a long catalog: an artist portfolio, a creative agency site, a photographer showcase, a personal author website, an architecture studio, a small design studio, an exhibition project, or an NFT showcase. The official product page describes it as a Joomla multipurpose template for NFT and portfolio websites, but in practice its strength is broader: it gives you a ready-made visual narrative for the hero area, services sections, projects, About pages, contact forms, and individual project details.

The core idea when working with a template like this is simple: preserve the visual rhythm of the demo first, then replace the demo content with your own. If you start immediately moving blocks around, changing every color, removing animations, and dropping in random photos with different proportions, Artion quickly loses the very qualities people usually choose it for. That is why setup should move from structure to detail: style, menu, core pages, projects, images, forms, responsiveness, and performance.

Unlike a generic corporate theme, Artion depends on large imagery, expressive typography, an emotional hero section, project cards, and smooth visual effects. That works well for creative projects, but it also requires discipline. Images should be prepared in advance, text should be tighter than standard corporate copy, and the menu should guide visitors to key pages without overload. The fewer random elements you add, the easier it is to keep the premium look intact.

Technically, the template is built around Helix Ultimate, SP Page Builder Pro, and SP Simple Portfolio. That means part of the appearance is controlled through the template style, part of the site is edited in the page builder, and project work can be displayed through the portfolio component. A common mistake site owners make is looking for one "main Artion setting." There is no such thing. You need to understand which layer is responsible for which result.

Who This Template Is For and When a Different Option Makes More Sense

Artion works especially well for people who already have strong visual material: project photography, illustrations, posters, architectural renders, video previews, collection images, or at least a strong visual identity. The template will not rescue weak content. It enhances a portfolio when there is something worth showing, and it makes the site more convincing when the owner is ready to adapt the demo to a real-world use case.

For an agency, the template is useful because it already includes services pages, projects, About blocks, and contact scenarios. For an individual creator, the real value is in the large typography, personal narrative, visual gallery, and the ability to show several directions of work without building a heavy catalog. For an NFT project, the countdown blocks, collection cards, and visual presentation are relevant, but it is important to remember that the template itself does not replace a marketplace, wallet integration, smart contract, or a full sales system.

Artion is probably not the right choice if the site primarily needs to be a large product catalog, a major news portal, a documentation hub, or a platform with multiple user dashboards. Joomla can handle those tasks, but this particular template shines where the focus is on showcasing work rather than supporting complex business logic. For a store or catalog, you are better off with a solution built around products, filters, carts, and orders from the start.

Another limiting factor is the editor’s skill level. If you want to manage pages fully without a developer, you need to be comfortable with SP Page Builder Pro: understanding sections, columns, addons, spacing, and responsive settings. If the site will be maintained by a developer, Artion gives you a strong starting point: you can keep the demo logic, add CSS carefully through Helix, and avoid editing the template core.

Practical takeaway: Artion is worth testing if your main asset is visual work and the goal of the site is to quickly present your style, services, case studies, and contact path. If your top priority is a knowledge base, catalog, or complex interactive system, choose a template built for that purpose instead of stretching a portfolio design beyond what it was made to do.

What to Check Before Installation

Preparation matters more with a Joomla template than most people expect. Artion comes with both a QuickStart package and a standard template package, and those are two completely different starting points. QuickStart is for a clean installation when you want a site that is as close to the demo as possible. The regular template package is for an existing site, but it will not create demo pages, place modules for you, or populate the project sections. If you choose the wrong package, what follows is not really a "template error" - it is the result of starting with the wrong scenario.

Before installation, check your hosting environment: the PHP version and server settings should match Joomla’s requirements, and the database should be available under a separate user. For QuickStart, it is best to use an empty folder and a fresh database. If you are working with an existing site, make a full backup of both files and database first, then test the template on a copy or staging site. Do not install QuickStart through Joomla’s extension manager: that package includes the CMS itself and installs as a complete website.

Prepare your content separately as well. With Artion, this is not a formality. You will need a standard logo and mobile logo, a favicon, hero images, 8-12 portfolio items, short service descriptions, contact details, About page copy, form details, and image variants for different aspect ratios. If the content is not ready, the installation may succeed, but the site will get stuck in the state of "a beautiful demo with no real purpose."

Minimum Setup Before You Start

• An empty test environment for QuickStart or a copy of the live site for the standard template package.
• Access to the Joomla admin panel, file manager or SFTP, and the database control panel.
• The template archive, the QuickStart package, and a list of the extensions included with the demo.
• Prepared project images with reasonable file sizes and clear filenames.
• A menu plan: Home, Projects, Services, About Us or About the Author, Contact, and if needed a Blog or Collection page.
• A clear understanding of which demo pages will be kept, which will be removed, and which will be rebuilt from scratch.

For an existing site, also check active templates, overrides, languages, cache settings, SEO extensions, and custom modules. Artion may look different if the page is tied to another template style or if the required module position is not assigned to the current menu item. That is a normal Joomla behavior, but it is better to account for it up front.

Installation: QuickStart, the Standard Package, and the First Check

There are two correct ways to install Artion. The first is QuickStart, when you are building a new site and want the full demo structure with the extensions already configured. The second is the standard template package, when Joomla is already installed and you want to apply the design without overwriting the site. Both paths are valid, but they serve different purposes.

When to Use QuickStart

Choose QuickStart if the site is new, you want to start from the demo, and you are comfortable replacing the sample data with your own. This package is deployed like Joomla itself: files are uploaded to the site root or subdomain, a database is created, the installer is opened, the installation folder is removed or cleanup is confirmed after setup, and then you log in to the admin panel. The main advantage is that you get a structure that closely matches the demo and can study it as a working example.

The downside of QuickStart is that it cannot be cleanly "applied" to an existing site. It includes a full CMS with settings, components, the template, and demo content. That is why using QuickStart directly on a live site without isolation is a bad idea. The correct approach is to use a separate subdomain, local copy, or clean environment where you can safely study the structure and then move over only the parts you actually need.

When to Use the Standard Template Package

The standard template package is installed through Joomla’s extension manager and adds the template, but it does not turn your current site into the Artion demo. After installation, you need to go into template styles, assign the style to the appropriate menu items, configure the logo, header, off-canvas, layout, and colors, and build the pages manually. If SP Page Builder Pro or SP Simple Portfolio is not installed on the site, the pages and portfolio will not magically appear. That is not a package problem - it is the normal difference between a template and a demo website.

On an existing site, start by assigning Artion to a single test menu item. For example, create a hidden menu item called "Artion Test," attach the template style to it, open the public page, and check the header, fonts, component output, module positions, and mobile menu. Only after that should you expand the assignment to the homepage and other sections.

First Check After Installation

1. Open the homepage without logging into the admin panel and make sure there is no white screen, PHP error, or broken header.
2. Go to the admin panel at /administrator and confirm that the template appears in the list of template styles.
3. Open System and check for extension notices that indicate something needs to be updated or enabled.
4. Check the menu: the active menu item should lead to a page where the correct template style is assigned.
5. Open the site in a private window and on a narrow screen so you can catch cache and off-canvas issues immediately.

First Helix Ultimate Settings to Configure After Installation

Once the template is installed, do not rush straight into editing every page in SP Page Builder. First configure the layer that affects the entire site: the Helix Ultimate template style. In Joomla, the path usually starts in the templates and styles section, where you open the active Artion style. Menu labels may vary slightly depending on the Joomla version and distribution, so focus on the meaning: template style, options, basic, layout, menu, typography, presets, custom code.

Start with the logo and favicon. Helix includes settings for the main logo, mobile logo, logo height, alt text, and sticky header logo. This matters in Artion: bold typography and generous whitespace in hero sections do not pair well with a heavy raster logo. Use SVG, PNG, or WEBP with a transparent background, check contrast on both light and dark areas, and make sure the logo alt text is filled in.

Colors and Typography

The official Artion listing highlights three style variations: agency, personal, and NFT. Do not think of them as three random color skins. They represent three different moods for the site. Agency works better for a studio and service-oriented site, personal fits an author or artistic portfolio, and NFT is aimed at a collection-style showcase. If you use Helix presets or custom styling, change colors carefully: one accent color for buttons and links, a neutral background, strong text readability, and enough contrast in the menu.

Typography is part of Artion’s personality. If you replace the expressive heading style with a random system font, the template will start to feel generic. But the opposite extreme is risky too: an overly decorative font in long descriptive text will make the site harder to read. A practical approach is to keep headings expressive, body text calm, and buttons and labels large enough that they do not get lost next to the imagery.

Layout and Module Positions

Helix Layout Builder works through rows, columns, and module positions. The Helix documentation describes a 12-column grid and the ability to assign module positions by row. This is useful in Artion when you need to add a custom block above the footer, display a contact module, place an exhibition banner, or configure side navigation. But do not turn the layout into a chaotic builder canvas. Add a position only when it is clear which pages need it and how it should behave on mobile.

If you change the grid, immediately check the live site at three widths: wide desktop, tablet, and phone. Artion includes many visual blocks, and even a small column error can show up as a gap between sections, text that becomes too narrow, or an image overlapping a button. It is better to add one clean position and test it than to stack multiple rows and later try to figure out which one is breaking the page.

Menu and Off-Canvas

The official Artion page mentions an off-canvas menu design. In Helix, the menu settings typically include Menu Builder, Mega Menu, and Off-canvas. For a portfolio website, the menu should stay short. In the header, keep only the main paths: Work, Services, About, Contact, and if needed Blog or NFT. In the localized version of the site, these might be "Work," "Services," "About the Author," and "Contact." If you have many categories, do not push them all into the top level - use a filtered projects page instead.

Test the off-canvas menu separately. On a mobile screen, tap the menu icon and confirm that the correct list opens, the items are visible, the contrast is adequate, the panel can be closed, and the active item does not disappear. If the background and text are too similar in color, first check the selected off-canvas layout and the assigned menu, and only then add CSS.

How to Work with Demo Pages in SP Page Builder

Artion’s pages are built around visual sections: the hero area, services block, project examples, About sections, contact elements, project pages, and extra built-in pages. With QuickStart, those pages already exist. With the standard installation, you will need to create or recreate them manually. In either case, SP Page Builder becomes the main tool for editing content inside those pages.

Open the builder page list through a path such as Components > SP Page Builder Pro > Pages. At first, do not edit everything at once. Make a copy of the key page or work on a test duplicate so you can compare your result against the original. Give each block a role: grabbing attention, explaining a service, proving capability through work, moving the visitor toward the portfolio, or driving a contact action. If a block serves no real purpose, it is better to remove it than leave it there as decorative emptiness.

Editing the Hero Section

The hero section in Artion on the attached reference is built around large typography, asymmetric images, and generous whitespace. This is not the place for a long paragraph of text. Replace the main slogan with one strong line, keep a short supporting statement, and use one clear button. If the project is agency-focused, that button can lead to services or the portfolio. If it is a personal site for an artist, it is better to lead to the work. If it is an NFT showcase, the button should make the next step clear without promising functionality the site does not actually provide.

The images in the hero section should feel visually consistent. Mixing a dark photo, a bright illustration, a random screenshot, and a vertical portrait often turns into a collage with no real logic. Use 3-5 visuals with the same mood: work from one series, scenes from a project, exhibition fragments, or illustrations from a single palette. For large images, prepare WEBP files or optimized JPGs, but do not lower the quality so far that compression artifacts become visible.

Services and About Sections

In an agency scenario, the services sections should answer not "what nice cards came with the demo," but "what do clients actually come to you for." Services work best in short blocks: the direction, the outcome, and an example of the work or a link to a case study. In the About block, there is no need to repeat a long company history. With Artion, the stronger approach is a simple sequence: who you are, what makes you different, what kind of work you show, and why the visitor should open your projects.

If you use animations, do not enable them in every section. Scroll-based animation and hover effects can strengthen the impression, but too much of them slows down how the page is understood. Make sure the animation does not hide important text, interfere with keyboard navigation, or create lag on mobile devices.

Portfolio and Projects: Where Artion Is at Its Best

SP Simple Portfolio is one of the most important parts of Artion, because the template’s official listing explicitly points to integration with this extension. Its role is to display work items with filters, images, descriptions, status, language, access levels, tags, column counts, lightbox support, and video links. For a portfolio website, that is a much more natural setup than storing every project as a standard Joomla article with no shared structure.

Start with the tag structure. For an agency, these might be "Branding," "Web," "Illustration," "Photo," and "Architecture." In the localized version, that would be "Brand Identity," "Websites," "Illustration," "Photography," and "Architecture." Do not create tags for every tiny distinction. The filter should help the visitor, not expose the studio’s internal filing system. If a category contains only one project, it is usually better to merge it with a neighboring one or avoid showing the filter for now.

Project Card

Each project should have a thumbnail, full-size image, title, short description, and if needed a URL, language, and access level. Write the title like the heading of a case study, not like a filename. In the description, explain the brief, the creator’s role, and the result. If the project is highly visual, do not overload the card with too much text: 2-4 sentences and a link to the detail page are enough.

It is best to standardize images around a few aspect ratios. If your portfolio mixes square images, extremely narrow verticals, and wide panoramas, a masonry layout may feel lively, but it becomes harder to control. For a clean first version, choose one primary format for previews and one for full-size images. After uploading, test the lightbox, hover animation, loading speed, and filter behavior.

Project Pages and the Three Visual Directions

The official Artion listing mentions three project variations and project details for Personal and NFT. That is useful as editorial logic. Agency pages can focus on a project grid and services, Personal can highlight the creator’s story and project detail, and NFT can focus on collections, countdowns, and a visual showcase. Do not try to mix every scenario into one page. It is better to choose one main style and use the others as a source of individual sections.

If you are building an artist site, the main projects page should lead to detailed project pages. If it is for an agency, it should lead to case studies and an inquiry form. If it is an NFT showcase, it should lead to the collection page and explain participation rules, without pretending to be a full trading platform if that functionality does not actually exist. The test is simple: within two clicks, a visitor should understand what you are showing, why it matters, and how to get in touch.

Artion’s Three Visual Directions: Agency, Personal, and NFT

The official Artion listing highlights three niche directions, and that should be treated not as a set of ready-made skins, but as an editorial decision. Each direction has its own purpose, pacing, and risks. If you simply take a hero section you like from one variation, a services block from another, and collection cards from a third, the site may look impressive in isolated pieces but lose overall coherence. That is why it helps to choose a primary scenario before you start populating the site, and use the other two as an idea library rather than as equal parts of the same page.

Agency: For a Studio, Services, and Case Studies

The Agency direction is a better fit for those selling a service rather than individual images: brand design, websites, illustration, production, architectural visualization, exhibition design, photography, or video production. Here, the visitor should quickly see three things: the studio’s style, the problems it solves, and the work that proves its experience. The hero can be bold, but the services block needs to stay very clear. If you write "creative direction," show what that includes: concept work, visual systems, asset preparation, and launch support. If you write "branding," immediately provide examples or a path to case studies.

For an agency site, the "service - case study - contact" sequence is especially important. In Artion, you can build that without overload: the hero handles positioning, the services block explains the focus areas, featured projects prove experience, the About section builds trust, and the contact section closes the path. The homepage does not need to become a long presentation full of dozens of logos and banners. Creative agencies tend to benefit more from short sections backed by strong visual proof.

Personal: For an Author, Artist, or Photographer

The Personal direction should feel calmer. If the site represents a single creator, the visitor needs to understand not just "what they do," but "how they see the world." That means the structure can be less commercial: a hero with an artistic statement, selected work, a short bio, project series, exhibitions or publications, and contact information. In this scenario, there is no need to force too many service blocks into the page. It is more effective to show a few strong projects and explain how people can collaborate with the creator.

The risk of a personal site is excessive decoration. Large typography, collages, and animation can overpower the work itself. If the image is your main proof, the surrounding interface should support it, not compete with it. Test the page like this: look past the decorative treatment and ask yourself which three projects remain memorable after the first view. If all you remember are animations and oversized headings, the layout needs to be simplified.

NFT: For a Collection and Visual Showcase

The NFT direction in Artion is useful for presenting a collection, an event, a drop page, or a digital exhibition. Countdown blocks, collection cards, bold visual covers, and a clear path to project details all make sense here. But it is important not to promise features the site does not actually provide. If the sale, wallet connection, minting, or marketplace functionality lives on an external platform, Artion should clearly lead visitors there or explain the process rather than pretending to deliver a full trading workflow inside the template.

For an NFT showcase, pay special attention to legal and user-facing text: who the creator is, what the participant receives, where the works are hosted, how authenticity is verified, and which links are official. These details are better explained in plain text and in the FAQ than hidden inside decorative cards. The template gives you a strong visual presentation, but trust comes not only from design - it also comes from clear rules and careful linking.

How to Choose a Main Style Without Creating Chaos

A simple method is to write one sentence describing the site’s goal. For example: "Show the studio and drive branding inquiries," "Build an artist portfolio and provide a curator contact path," or "Present a digital collection and explain participation." Then choose the Artion direction that best supports that sentence. Every page, menu, block, and image should work toward it. If a block looks good but does not help the goal, leave it in a demo copy instead of putting it on the live homepage.

Once the style is chosen, create a mini guide for editors: palette, heading style, image sizes, text tone, button rules, and the structure of a project card. That is not design bureaucracy - it protects the page from slowly falling apart. A few weeks after launch, new projects, banners, news posts, text, and modules will start to appear. Without rules, Artion quickly becomes a mix of unrelated decisions. With them, it keeps the original impression intact.

Practical Scenario: Build the Homepage for a Creative Agency

Let’s take a real-world task: launching a small creative agency website on Joomla using Artion as the foundation. The goal is a homepage with a strong hero section, services, featured projects, a short team intro, and a clear path to contact. We are not going to build the whole site at once. We will start with the homepage because it puts every major template layer to the test: Helix, SP Page Builder, the menu, the portfolio, and responsiveness.

Goal and Preparation

The goal is to build a page where the hero sets the visual tone, the services block explains the studio’s specialization, the projects prove experience, and the contact path is easy to find. Before you begin, you need 4-6 project images, three short service descriptions, a logo, a contact email, About text of roughly 500-700 characters, and at least 6 portfolio items with tags. If you are using QuickStart, make a copy of the demo homepage. If you are using the standard package, create a new page in SP Page Builder and assign it to the "Home" menu item.

Setup Steps

1. In the template style, set the logo, favicon, and primary accent color, and check the header height for desktop and mobile.
2. Keep 4-5 menu items: "Work," "Services," "Studio," "Contact," and if needed "Blog."
3. Open the homepage in SP Page Builder and replace the hero text with a short agency positioning statement.
4. Replace the demo images in the hero block with real work from one cohesive visual series.
5. In the services block, keep 3-4 directions and tie each one to a specific outcome rather than an abstract capability.
6. Add projects in SP Simple Portfolio, assign tags, and test the filter on the projects page.
7. Keep 3-6 featured projects on the homepage and add a button linking to the full portfolio.
8. In the contact block, test the link, form, or email, then save the page and clear the Joomla cache.

Checking the Result

Open the homepage in a private browsing window. First, do not focus on whether it looks beautiful - focus on the sequence: who you are, what you do, which projects prove your experience, and where the visitor should click next. Then check the mobile view. The hero should not stretch across multiple screens without purpose, images should not overlap the text, the off-canvas menu should open correctly, and the buttons should be large enough to use comfortably.

After that, check the technical side: are there any browser console errors, are images loading at an unnecessarily huge original size, do animations disappear after clearing the cache, and does the active menu item behave correctly. If something breaks only after enabling CSS/JS optimization, temporarily disable compression and isolate the conflict one setting at a time.

Configuring Menus, Modules, and Template Styles in Joomla

Many visual issues in Joomla templates are caused not by the template itself, but by how menu items and modules are assigned. In Joomla, a template style can be assigned to all pages, to specific menu items, or not assigned to the required section at all. That is why one page looks like the demo, another looks like bare Joomla, and a third loses the footer entirely. With Artion, where visual consistency matters, this becomes especially noticeable.

Start by defining one main template style. If you are using separate styles for agency, personal, and NFT, do not mix them without a reason. For example, the main "Agency" style can be assigned to the homepage, services, and agency project pages. A separate style can be created for a special landing page or collection, but its differences should be clear: another accent, another menu, another module group. Otherwise, editors will get confused very quickly.

Modules and Positions

Module positions should be treated as a framework, not as a storage area for random blocks. If you add a module to the header, footer, sidebar, or a custom position, set its menu assignment right away. A "Contact CTA" module may make sense on projects and services pages, but not necessarily on every page. A social links module belongs naturally in the footer and off-canvas area, but may distract in the hero section. A latest projects module can work well in the blog, as long as it is not duplicating the main portfolio page.

A good practice is to keep a simple position map: module name, position, where it appears, why it is there, and who owns its content. This becomes especially helpful when several editors work on the site. Without that map, a month later nobody remembers which module outputs a certain block or why it disappeared after a menu item change.

Multilingual Setup

If the site will be multilingual, do not stop at translating text inside SP Page Builder. Check the language assignment for menus, modules, builder pages, and portfolio items. The logo may use a custom link that should point to the correct language-specific homepage. Portfolio tags should also make sense in each language. If you use different template styles by language, document which settings are shared and which are different.

Safe Improvements Without Editing the Template Core

Artion can be adapted to a project without editing the template’s core files. This is an important principle: if you modify template files directly, an update may overwrite your changes or create conflicts. For small changes, use Helix settings, custom CSS, module assignments, language overrides, and template overrides if you are sure what you are overriding. Code-level changes should stay small, reversible, and easy to verify.

A simple safe example is improving the readability of the off-canvas menu and buttons after changing the palette if the text no longer has enough contrast. The Helix documentation describes the Custom Code area in Template Options and separately warns against inserting custom PHP there. That means for Artion, CSS is the right tool here, not arbitrary PHP or JS.

CSS for Better Off-Canvas and Button Contrast

This snippet only makes sense after you have checked the built-in Menu and Off-canvas settings. If the wrong layout is selected or the menu is not assigned, CSS will not fix the root cause. But if the issue is specifically contrast after changing the palette, add the code to the custom CSS field in the template style and save the settings.

@media (max-width: 860px) {
  #offcanvas-toggler .burger-icon > span {
    background-color: #1a1a1a;
  }

  .offcanvas-menu {
    background-color: #f8f4ef;
  }

  .offcanvas-menu .offcanvas-inner ul.menu > li > a {
    color: #1a1a1a;
    font-weight: 600;
  }
}

.sppb-btn,
.btn-primary {
  border-radius: 0;
  letter-spacing: 0.02em;
}

After saving, clear both the Joomla cache and browser cache, then test the mobile menu, button hover states, and pages with a dark background. Rolling it back is simple: remove the snippet from custom CSS and clear the cache again. If the site uses aggressive CSS/JS optimization, test the result first with compression disabled, then turn optimization back on.

Language Overrides

If some English strings remain in the template, extension, or form, do not edit the extension files directly. Use Joomla language overrides. This is the standard mechanism and it survives updates far better than direct edits. Find the original string, create an override for the required language, and check the public-facing site. This is especially useful for contact forms, system messages, and small interface labels.

Rollback rule: every customization should have an obvious way to turn it off. If you cannot clearly explain where it is enabled, where it is stored, and how to remove it, it is better not to add it to a live site.

Speed, SEO, and Accessibility for a Visual Portfolio

A portfolio template has an obvious risk: beautiful images can quickly turn into a heavy page. Artion uses large visuals, animations, and project cards, so optimization should happen during content creation, not after launch. There is no need to promise guaranteed ranking growth. The practical goal is simpler: make the site fast, understandable for search engines, and accessible for people browsing on different devices.

Start with images. For the hero section and project cards, use prepared sizes rather than camera originals. Save images as WEBP or well-optimized JPG when transparency is not needed. Write alt text based on meaning: what the image shows and why it matters to the project. Alt text should not be a list of keywords. For the first image in a project, the project name and work type are often enough, for example "Interior illustration for an exhibition booth."

In SP Page Builder, check your heading order. The site may already have a main H1, and inside sections you do not need to turn every decorative line into a large heading. For SEO, what matters is clear title tags, meta descriptions, readable URLs, menu structure, internal linking, and speed. For accessibility, it is contrast, keyboard focus, understandable links, alt text, legible font sizes, and the absence of animation that gets in the user’s way.

If you enable CSS/JS compression, do it after the site has been populated and the basics have been tested. First check the page without compression, then turn optimization on and compare: did animations disappear, did the off-canvas menu break, did portfolio filters stop working. If there is a conflict, disable settings one by one. Do not change Joomla cache, CDN settings, minification, lazy loading, and third-party optimizers all at once - that makes the root cause impossible to identify.

SEO Logic for Project Pages

Portfolio sites have a common weakness: many owners show strong visuals but leave weak textual signals. Both search engines and human visitors should understand what the project is, who it was created for, and why it matters. For every project detail page, add a short heading, a task description, the creator’s role, 2-3 result images, and a clear link to contact or similar work. There is no need to write a long case study where 600-900 characters are enough, but a completely empty gallery does a poor job of explaining value.

Make URLs and titles readable. If a project is called "Urban Light," the URL should be short and understandable, not an ID string. Meta descriptions are best written manually for key pages: homepage, portfolio, services, contact, and several standout projects. Do not create dozens of thin standalone pages for portfolio tags. If a tag only exists as a filter on a page, do not turn it into a separate SEO target with no real text or structure.

Accessibility and Trust

Artion is visually expressive, so accessibility needs to be checked deliberately. Text contrast on images, visible focus states on links, clear button labels, and meaningful alt text are not formalities. If a button says "Explore," the localized version of the site should either give it supporting context nearby or replace the label with a clear local-language equivalent in custom sections. If an image is purely decorative background, do not overload the alt text. If an image shows actual work, the alt text should describe the work, not repeat the template name.

Trust is also built through technical care. Use real contact details, do not leave demo email addresses in place, and check the error page, privacy policy, form consent, and social links. Creative sites often postpone these details "for later," but they are exactly what separates a working website from a copied demo. If the form is not configured yet, it is better to point the button to an email address temporarily than to send inquiries into a void.

Updates, Backups, and Safe Ongoing Maintenance

Work with the template does not end after launch. JoomShaper products receive updates, Joomla has its own support cycle, and SP Page Builder and Helix each evolve in their own way. That is why any site built with Artion should follow one simple rule: backup first, then test updates, then update the live environment. This matters even more if you have added custom CSS, template overrides, language overrides, or third-party optimization tools.

Do not update everything in one click if the site is already bringing in inquiries or serving as a portfolio for clients. Create a copy of the site on a subdomain or staging environment, update Joomla, the template, Helix, SP Page Builder, SP Simple Portfolio, and related extensions in logical groups, then test the homepage, portfolio, form, menu, and mobile screen. If something breaks, you will see the cause in a safe environment rather than on the live site.

What to Document After Setup

Project documentation does not need to be extensive. One file or editor-facing page is enough: where to edit the homepage, where the projects live, what image sizes to use, which menu items should not be touched, where custom CSS is stored, how to clear the cache, and which pages to test after an update. This is especially useful with Artion because part of the site lives in SP Page Builder, part in SP Simple Portfolio, and the overall appearance depends on the template style.

Add a list of "dangerous actions" as well: do not install QuickStart over a live site, do not delete a template style without a backup, do not disable SP Page Builder on pages built with it, do not change module positions without testing, do not insert arbitrary PHP into custom code, and do not upload huge images without optimization. A short list like this can save hours of recovery work after an accidental change.

How to Refresh the Design Without Rebuilding Everything

A few months after launch, you may want to "refresh the site." With Artion, it is safer to update the design in small layers. Start by replacing a few weaker portfolio items, then update the hero images, then revisit the service copy, and only after that change the palette or layout. If you change everything at once, you lose the ability to understand what improved the result and what hurt it.

A good maintenance rhythm looks like this: once a month, check inquiries and contact details; every few months, update the featured work; after every major Joomla update, test the mobile menu and portfolio; and before adding a new section, create a copy of the page. This is not complicated maintenance, but it keeps a visual template working like a real site instead of turning into an archive of old demo blocks.

How to Tell If the Site Is Configured Correctly

Result validation should be systematic. Do not stop at "it opened for me." With Artion, you need to test visual cohesion, how the Joomla layers work together, and the visitor journey. A site may look great on your large desktop monitor while still being awkward on a phone, broken in portfolio filters, or confusing to someone seeing the brand for the first time.

Walk through the path of a new visitor: open the homepage, go to the projects, filter a project, view the detail page, return to services, and send a contact inquiry or click through to email. If at any point the visitor has to stop and think about where to click, fix the structure. If the page looks like a set of separate attractive blocks, review the copy and the transitions between sections. If the portfolio contains too many similar projects, add filters or highlight featured work.

Technical Result Checklist

• The Artion template style is assigned to the correct menu items, not just the homepage.
• The logo, favicon, and sticky header display correctly on both light and dark backgrounds.
• The off-canvas menu opens, closes, and displays the correct menu.
• SP Page Builder pages save without losing sections and are visible to public visitors.
• SP Simple Portfolio filters projects by tag and opens the detail page or lightbox correctly.
• Images do not load at excessive sizes and are not stretched inside cards.
• Cache has been cleared after changes to CSS, menus, modules, and template style.
• The contact path works: link, form, email, or external service leads where it is supposed to lead.

For the final test, ask someone who was not involved in the setup to find three things: what the project does, where to view the work, and how to get in touch. If they can do that without hints, Artion is doing its job. If they cannot, the problem is usually the structure of the text and menu, not the design itself.

Common Artion Issues and How to Diagnose Them

Below are issues that commonly appear in Joomla templates built with Helix, SP Page Builder, and portfolio components. They do not mean the template is "broken." In most cases, the cause lies in the installation package you chose, menu assignments, off-canvas settings, caching, or image preparation.

No Demo Pages After Installation

Symptom: the template is installed, but the site does not look like the demo and there are no ready-made homepage layouts, projects, or sections. A likely cause is that the standard template package was installed instead of QuickStart. The standard template controls appearance, but it does not create demo content, SP Page Builder pages, or modules.

Check which archive was used. If you need to start from the demo, deploy QuickStart on a clean environment. If the site already exists, use QuickStart as a reference on a test domain and build the required pages manually on the live site. Do not try to install QuickStart through the extension manager.

The Homepage Looks Right, but Inner Pages Look Different

Symptom: Artion appears on the homepage, but project, contact, or blog pages open with different styling. A likely cause is that the template style is assigned to only one menu item, or the inner pages use another style. Check the assignment on the template style and the active menu item. In Joomla, the menu often determines which style and modules are applied.

Fix: assign the correct style to the relevant menu items or deliberately create multiple styles. After making changes, clear the cache and test the page in a private window. If the site is multilingual, repeat the check for each language.

The Off-Canvas Menu Does Not Open or Is Empty

Symptom: the mobile menu icon is visible, but the panel is empty, too dark, or will not close. First check the Menu and Off-canvas settings in Helix: is the layout selected, is a menu assigned, and do the items have the correct access level. Then check whether custom CSS or compression is hiding elements.

If the menu exists but is hard to read, use a small custom CSS adjustment to improve contrast. If no menu is assigned at all, CSS will not help. Whenever you make changes, clear both the Joomla cache and browser cache, otherwise you may be evaluating an outdated CSS version.

The Portfolio Does Not Filter or Shows an Empty Grid

Symptom: the projects page opens, but the filter does not work, some items disappeared, or the grid is empty. Check the status of SP Simple Portfolio items, language, access level, tags, menu item publication status, and whether images are present. If the site is multilingual, a project in one language may not appear in another language’s list.

Start the fix with one test item: a published project, one tag, a valid image, and public access. If it appears, add the rest step by step. If it does not, check the menu item and component settings. Do not begin by deleting everything in bulk and re-importing it.

The Page Breaks After Optimization Is Enabled

Symptom: everything works without minification, but after compression is enabled, animations, the menu, or filters stop working. A likely cause is a CSS/JS load-order conflict or a third-party optimizer. Disable optimization, confirm that the basic version works, then enable settings one at a time. After each step, clear the cache and test the same page again.

If the problem appears with only one setting, leave that setting disabled or add an exception. Do not hide the issue with extra code until you know which file is conflicting. For a portfolio and navigation, stability matters more than maximum optimization aggressiveness.

Demo Images Do Not Match the Official Example

Symptom: after QuickStart, some images are replaced with placeholders or do not look like the demo. JoomShaper’s QuickStart documentation notes that the package may not include the actual demo photography. That is common with templates because image licensing can impose restrictions.

The solution is not to hunt for "missing" demo photos, but to prepare your own imagery. Keep the section composition, proportions, and mood, but replace the visuals with project-specific content. That way the site stays legally safe and looks original instead of like a copied demo.

Official Artion Video and How to Use It

The official product page includes a video about Artion. It is most useful not as a promo clip, but as a visual cue for structure: which screens the creators consider most important, how attention moves between the hero area, projects, services, and pages, and which animations feel natural versus which ones are easy to overload with your own content.

After watching it, open your test homepage and compare not the wording, but the rhythm: how many screens it takes to reach the first project, how the transition to services is handled, whether the hero section is too long, and whether the contact button gets lost. The video does not replace setup work, but it helps you preserve the original idea of the template while you swap in your own content.

When It Makes Sense to Move On to Downloading and Testing

JoomShaper Artion is a strong choice if you want a site where the work itself and the visual style need to sell more effectively than long descriptions. It fits a studio, artist, photographer, architect, designer, creative agency, or a project built around a collectible visual presentation. But before launching anything in production, make sure of three things: you chose the correct installation package, your own images are ready, and it is clear which pages will be edited through SP Page Builder versus which depend on Helix and the Joomla menu.

If you are still comparing options, start with a test environment. Deploy QuickStart separately, study the demo structure, note which pages matter, and only then decide whether to bring the design into an existing site or launch a new one. If the task is already clear and you are ready to test the template in your own environment, you can get the Joomla version and perform a safe installation on a test domain.

After testing, do not judge the template only by first impressions. Check the portfolio, menu, mobile experience, speed, contact form, SEO metadata, and editing workflow. If all of that comes together into a clear and manageable process, Artion can become not just a beautiful shell, but a full foundation for an informative, presentational, and conversion-focused page for your creative project.