Les meilleurs templates Joomla : la puissance de Gantry

Évaluer cet élément
(0 Votes)

Comment caractériser un bon template pour Joomla ?

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 : les upgrade de versions de Joomla et de PHP (par exemple) 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é.

layout template gantry

Les templates Gantry : une qualité inégalée

A l'occasion de chaque prestation sur un site que je n'ai pas créé (refonte, formation, optimisation, recherche de hack...), je dois me familiariser avec les caractéristiques des templates installés par le client. Gratuits ou payants, ces templates présentent parfois de bonnes idées mais aussi, dans leur grande majorité, des limites fonctionnelles. Ces contraintes rapidement analysées, constituent un comparatif sans appel en faveur des templates de la famille Gantry. Parfois, selon le budget du client, j'ai pu convaincre de la nécessité de changer de template.
Cette expérience, consolidée au fil du temps et des sites "auscultés", m'a conforté dans mon choix vers l'utilisation exclusive des templates Gantry pour les sites que je mets en place, les plus puissants fonctionnellement et faciles à adapter.
Les templates Gantry apportent un confort d'utilisation selon 3 critères fondamentaux:
. performance, 
. modularité, 
. fonctionnalités
.

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/ les largeurs des positions des 5 modules sont définies très précisément (Exemple "top-a"=17%), tout en permettant un ajustement responsive :

template gantry largeur positions modules

On retrouve cette structure de la section "Top" dans la console du navigateur, ci-dessous:

console navigateur visuel template joomla

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 à 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%)
positions modules jommla gantry
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.

styles templates gantry joomla

<> 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

modules menu gantry

modules 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".

module mobile only

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

sous menu template gantry

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

layout gantry fullwidth

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

layout fullwidth site

<> 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)
script js settings

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

fontAwesome settings

. le chargement du Favicon
favicon gantry

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

atoms gantry

 

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 : 
syntaxe scrollreveal

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

 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.
Je détaille les paramètres dans cet article consacré à la syntaxe scrollreveal.

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/modules complémentaires: 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é Joomla3 uniquement (Avril 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

Au niveau des ressources, nous venons de voir qu'il faut choisir son éditeur : RocketTheme ou Inspiretheme; chacun ayant des avantages et des inconvénients.

Sur Joomla4 donc RocketTheme, votre analyse doit porter sur le détail des particles proposés, et valider son adéquation au plus proche du fonctionnel que vous recherchez.

Si vous n'avez pas d'idées fonctionnelle précise ni d'impératif Joomla4, alors avoir accès à de nombreux templates ET particles, peut vous séduire.

Dernière modification le 21 04 2022