Les meilleurs templates Joomla3 et Joomla4 : la puissance de Gantry

Comment caractériser un bon template pour Joomla3 ou Joomla4 ?

Performant : les fichiers chargés sont optimisés pour réduire le temps de chargement du site.

Compatible : les conflits avec des extensions sont extrêmement rares voire inexistants.

Evolutif techniquement : le changement de version de Joomla3 vers Joomla4, les upgrade de versions de Joomla et de PHP, n'impactent pas le fonctionnement du template, et ne peuvent qu'améliorer ses performances.

Adapté aux modules : un nombre important de positions doit être proposé, avec des réglages possibles de toutes les largeurs de positions.

Souple graphiquement : des classes css doivent pouvoir être positionnées ainsi que les média queries (hidden-phone, visible-desktop...)

Adapté pour des non techniciens : les paramétrages doivent être accessibles et intuitifs, notamment le paramétrage du head du site, le chargement du favicon ou des fichiers javascripts avant le </body>

Fonctionnellement complet et évolutif : un template qui intègre des fonctionnalités utiles et puissantes (galerie photos, gestion de blocks modulaires, zones cliquables, effets scrollreveal ou autres js ...) permettra d'éviter de charger des extensions qui vont alourdir le site. De plus la compatibilité sera garantie. 

Documenté : un template de bon niveau sera forcément documenté et des ressources de qualité sur internet seront accessibles, avec une communauté d'utilisateurs compétents.

Bénéficie d'un support : réactif et réellement motivé.

1- Performance des templates Gantry

On entend ici la vitesse de chargement mais aussi la fiabilité du template. Concernant la vitesse de chargement les templates Gantry sont dans la moyenne des templates Joomla. On ne peut pas parler ici de point fort mais plutôt de maîtrise du poids d'un environnement évolué. En d'autres termes, on pourra toujours trouver des templates plus "légers" à charger, mais forcément bien moins évolués en matière de fonctionnalités.
La fiabilité des templates Gantry est indéniable, on rencontre très peu de conflits avec des extensions Joomla.
Par ailleurs l'éditeur de Gantry met à jour très régulièrement son Framework, signe d'une optimisation constante.

2- Modularité des template Gantry

Il s'agit de la gestion des positions des modules, du nombre et de la largeur de leur containers. Les possibilités en nombre et largeur sont infinies, et très faciles à gérer pour un simple utilisateur. Cela constitue le grand point fort des templates Gantry, largement au-dessus de tous les autres templates pour Joomla, voire au-dessus de ce qui existe au niveau des autres CMS. En d'autres termes, les templates Gantry offrent une souplesse inégalée, couplée à la puissance des modules de Joomla.
Par exemple ci-dessous, en section "Top" de ce site https://www.archilog.net/ (tout en haut du site), les largeurs des 5 positions de modules sont définies très précisément (Exemple "top-a"=17%), tout en permettant un ajustement responsive :

Lors de mes formations, je montre que l'on retrouve cette structure de la section "Top" dans la console du navigateur, ci-dessous:

Quelques exemples illustrant la richesse fonctionnelle de la combinaison modules Joomla + templates Gantry :
<> avoir la liberté de placer le logo n'importe où et pas uniquement à une place prédéfinie
<> paramétrer facilement, sans css, les styles (famille de police, couleur de police, image ou couleur de fond) pour chaque section (éléments structurants placés les uns en-dessous des autre : top, header, breadcrumb ... footer)
<> gérer par exemple 5 modules en section "Top" en haut de mon site avec des largeurs toutes différences (15%, 25%, 40%, 12%, 8%),
ou ne disposer qu'un seul module mais complétement à droite en top du site (connexion , réseaux sociaux, langues...)
<> construire une page d'accueil complexe avec par exemple 10 sections les unes en-dessous des autres, certaines en pleine largeur et d'autres non; et ceci tout en faisant en sorte que ce template soit aussi utilisé pour les autres pages (un seul template pour tout le site)
<> gérer des largeurs différentes sur des pages différentes, pour la section "Feature" et ceci toujours avec 1 seul template pour toutes les pages:
page 1: feature-a (50%) et feature-b (50%)
page 2: feature-1a (40%) et feature-2a (60%)

Ceci revient à créer autant de positions que l'on souhaite ainsi que leurs largeurs.
<> dimensionner finement la largeur de la colonne de droite (à droite des articles), par exemple à 22% de la taille du conteneur global
<> placer l'affichage des messages système de Joomla à un endroit visible et pertinent, per exemple juste au-dessus de l'article (et non pas en position "top" ou "footer")
<> intégrer des modules (et images) dans le menu mobile
<> gérer un pied de page avec 2 niveaux, par exemple le premier avec 2 modules, le second avec 4 modules
<> disposer simplement un bouton en position fixe à 10% du top à droite, uniquement sur desktop, etc...

3- Fonctionnalités des template Gantry (paramétrages)

Nous abordons ici les principaux paramétrages des templates Gantry permettant de structurer les contenus. Nous n'abordons pas ici les contenus fournis par les templates sous la forme de modules (et appelés particles). Ce sujet fait l'objet d'un autre article.

<> Gestion des styles de base accessibles à tous les utilisateurs, sans connaissance de css (cf ci-dessous). Les styles peuvent être adaptés à chaque section. Par exemple, on peut paramétrer une section avec une couleur de fond foncée et du texte en blanc, et les autres sections avec un fond clair et une couleur de police foncée.

<> Menu principal : possibilité d'intégrer des modules (Connexion, Recherche...) ou des images au sein du menu, ce qui permet leur intégration au menu mobile

Plus fort encore, il est possible de n'afficher ces modules intégrés au menu que sur mobile grâce à la classe css "visible-phone".

<> Sous-menus : possibilité d'affichage sur plusieurs colonnes, avec des images ou des icônes (cf ci-dessous)

<> Paramétrage fullwidth ou container ("boxed") très simple pour chaque section du site :

Fullwith = occupe toute la largeur de l'écran, quelle que soit sa taille.
Container-boxed= occupe la largeur de son container, ce container est générée par le template, sa largeur maximale est en générale de 1200 px, mais elle est aisément modifiable dans les paramètres du template.

Exemple ci-dessous de différence entre "Container-Boxed" et "Fullwidth" sur le site https://www.archilog.net/

<> Plus classique, il est possible d'assigner un style à 1 page spécifique : parfois utile pour la page d'accueil ou pour un site multi-langues

<> Gestion simple d'un style spécifique pour la page du site Hors-ligne, pour l'affichage de la page 404.

<> Gestion simple des paramètres globaux du site :
. les scripts et fichiers dans le <head>
. des scripts JS après le <body> ou avant le </body> (Emplacement pour les cript Google Analytics ou d'un plugin d'accessibilité ci-dessous)


. l'appel de FontAwesome pour pouvoir utiliser de nombreuses icônes:

. le chargement du Favicon

. le chargement des ATOMS : programmes complémentaires qui permettent de gérer des fonctions Javascript, de type Scrollreveal (cf chapitre ci-après)

Les templates Gantry et scrollreveal pour Joomla

Soit le template Gantry intègre nativement les fonctionnalités de scrollreveal, soit un simple particle (sorte de plugin spécifique) est à installer et activer.
Comme son nom l'indique, le Javascript de Scrollreveal permet de créer quelques animations qui apparaissent lorsqu'on scrolle (donc lorsqu'on affiche) certains contenus.
Par exemple ces paramètres : 

permettent l'animation sur le site https://www.formation-kinesiologie.net/ de l'image :

A noter que le paramètre "reset" permet une permanence de l'effet d'animation, autant de fois qu'on affiche le contenu => en scrollant vers le bas, puis vers le haut, l'effet sera reproduit sur cette image.

Module sticky (ou fixe) très simplement sous Joomla

Les templates Gantry permettent d'insérer des paramètres très rapidement pour créer un module "sticky" c'est à dire qu'il reste fixe à l'écran quand on scrolle.

On peut visualiser l'effet "sticky" sur le module "Nouveautés Joomla4 pratiques et utiles" sur les pages de ce site concernant Joomla4, par exemple https://www.joomla-bourgogne.com/joomla/migration-vers-joomla4-avantages-et-benefices.

Il faut connaitre le paramétrage mais il suffit d'insérer data-uk-sticky => {top:150, media: 768} au dans les paramètres du module (au niveau du template). Où "150" signifie à 150px du top du container, et "media:768" signifie que l'affichage ne sera effectué que pour les écrans supérieurs à 768px, c'est-à-dire pour tous les écrans hors mobile (trop petits pour un tel affichage fixe).
Lorsqu'on connait la méthode c'est extrêmement simple, ci-dessous un exemple:

Changer de template : une opération maîtrisée

Une refonte d'un site consistant à changer simplement son "enveloppe" c'est-à-dire son template, sans toucher au contenu est une opération maîtrisée mais nécessitant une démarche et une certaine rigueur.

1- identifier les raisons du changement et présenter les avantages du nouveau template pour compenser les limites du template actuel
2- identifier les aspects graphiques à conserver et qui font l'identité du site :
. position du logo et de tous les éléments présentés en entête du site (menu, icônes de réseaux sociaux, drapeaux de langues, bouton de connexion...)
. idem pour le pied de page
. les principaux styles inhérents à l'ancien template et déterminer avec le client ceux qui sont à conserver (police de caractères, couleurs ...)
3- se concentrer sur l'objectif principal, à savoir le fait que le nouveau template doit afficher le contenu en place - il sera toujours temps, par la suite, grâce à de nouvelles positions de modules, ou de nouvelles fonctionnalités, d'enrichir les contenus. Donc à cet effet, il faut inventorier les positions actuelles et leur associer les nouvelles positions du nouveau template. Par exemple : la position "top" deviendra "top-a".
On peut indiquer dans le champ "Note" du module, l'ancienne position "top" pour garder une trace éventuelle, voire une réversibilité (peu probable) de la démarche.
3bis- Mettre le site Hors-ligne si le trafic est important et de nombreux modules sont impactés
4- appliquer quelques css pour retrouver les aspects graphiques de l'identité du site mentionnés au point -2,
5- finaliser avec quelques css pertinents qui vont produire une différence visuelle immédiate,
5bis- remettre le site en ligne
6- se poser la questions d'améliorations complémentaires (contenus, animations, points graphiques).

Ressources Gantry

Téléchargement du Composant Gantry5 et de 2 templates (Themes) gratuits : https://gantry.org/downloads  - compatibilité Joomla3 et Joomla4.
Il faut bien sûr ensuite installer le composant puis le template.

L'éditeur RocketTheme de Gantry, propose d'excellents templates : https://rockettheme.com/joomla/templates - vérifier dans le détail de chaque template la compatibilité Joomla3 ou Joomla4.

Un autre éditeur, Inspiretheme, propose de nombreux templates ainsi qu'une bibliothèque de particles (ou modules fonctionnels tels que diaporama, galerie photos, compteurs etc...): https://www.inspiretheme.com/  (à consulter sur Firefox).
Le principe, chez cet éditeur, est un abonnement annuel, grâce auquel on a accès à tous les templates et tous les particles gratuits ou payants. - compatibilité Joomla4 depuis Septembre 2022.

Malheureusement, les particles de ces 2 éditeurs ne sont pas compatibles : si vous tentez d'installer un particle Inspiretheme sur un site fonctionnant avec un template RocketTheme, il ne fonctionnera pas. Et inversement.

Conclusion pour choisir un template

Que ce soit sur Joomla3 ou Joomla4 chez Inspiretheme ou RocketTheme, votre analyse doit porter sur le détail des modules/particles proposés, et valider son adéquation au plus proche du fonctionnel que vous recherchez.

Si vous n'avez pas d'idées fonctionnelles précises, alors le principe d'Inspiretheme, permettant d'accéder à de nombreux templates ET particles, peut vous séduire.

Surtout ne pas se focaliser sur le graphisme, voire l'ergonomie, c'est le fonctionnel qui prime. Le graphisme et l'ergonomie peuvent toujours être modifiés par un prestataire, pour un tarif raisonnable selon le type d'adaptations. Le fait de disposer d'un template intégrant 100% (ou presque) des besoins fonctionnels est une garantie de pérennité, un confort d'utilisation et une assurance sécurité (une tranquillité d'esprit) qui n'ont pas de prix!