Créer des templates Joomla! avec le composant Template Creator

Créer des templates Joomla! avec le composant Template Creator

Le template d'un site Joomla! est très important, il vous permet de déterminer la charte graphique de votre site web. Même si ce template ne représente que la couche de peinture qui vient s'ajouter à l'ensemble de votre travail et des fonctionnalités que comporte votre site, son rôle n'en est pas moins crucial car il conditionne la première impression que vos visiteurs auront en arrivant sur votre site.

Avant même que ces visiteurs n'aient trouvé l'information ou la fonctionnalité qu'ils sont venus chercher ils se feront donc un premier avis sur votre site, sur son design et peut-être même sur la manière de naviguer sur ce site.

Notons également qu'il est important de choisir un template correctement codé et cela pour au moins trois raisons :

  • Les moteurs de recherche aiment le code propre, votre site sera donc plus facilement référençable si le code qu'il présente est propre.
  • Un template correctement codé aura un temps de chargement rapide, ce qui est agréable pour vos utilisateurs.
  • Il vous sera plus simple de modifier (si nécessaire) le code d'un template correctement codé.

Pour toutes les raisons que nous venons de voir, il est donc importement de choisir soigneusement votre template.

Lorsque vous installez Joomla!, vous installez également 2 templates (en ce qui concerne la partie Frontend), Protostar et Beez3. Ces deux templates sont propres, prêts à être utilisés, responsive design (adaptés à tout type de support), mais pour vous démarquer de tous les autres sites web construits avec Joomla!, vous souhaiterez certainement modifier ces templates ou en utiliser un complètement différent.

Si vous souhaitez utiliser un template différent de ceux proposés nativement avec Joomla!, 2 possibilités s'offrent à vous :

  • Télécharger et installer un template proposé par un fournisseur de templates. Vous en trouverez des milliers, gratuits ou commerciaux.
  • Construire votre propre template.

Construire votre propre template vous demandera des connaissances dans plusieurs languages de programmation (comme par exemple le HTML ou le CSS), mais vous pouvez également vous servir d'outils qui vous permettent de construire ce template sans avoir à mettre les mains dans le code.

L'outil que nous allons voir aujourd'hui s'appelle Template Creator.

Template Creator est un composant pour Joomla!, qui vous permet de créer simplement - peu de connaissances vous seront nécessaires - des templates entièrement personnalisés, de qualité et entièrement responsive design.

Comme tous les composants Joomla!, Template Creator s'installe sur votre site, puis vous permet de créer et générer vos templates. Une fois ces templates générés, vous pouvez les exporter et les installer comme n'importe quel template.

 

 Télécharger Template Creator

A noter que Template Creator est un composant commercial. L'extension est disponible à partir de 24€ HT (sans support avec 6 mois de mises à jour inclus) et pour 59€ HT (avec support et 6 mois de mises à jour inclus). L'extension est accessible via le site de l'auteur TemplateCreator.com
Vous remarquerez que vous avez droit à une période d'essai de 30 jours durant laquelle, si vous n'êtes pas satisfait, vous pourrez vous faire rembourser.

 

Installer Template Creator

L'installation du composant se fait comme pour n'importe quelle extension Joomla!, pour cela, connectez-vous à l'administration de votre site, puis rendez-vous dans Extensions (1) → Gestion des extensions (2) → Onglet "Archive à envoyer" (3). A l'aide du bouton (4) sélectionnez l'archive sur votre disque, puis cliquez enfin sur le bouton "Envoyer & Installer" (5).

Installation de Template Creator

Installation de Template Creator

Une fois l'installation terminée, vous devriez obtenir un message vous indiquant que tout s'est bien passé.

 

 Présentation de Template Creator

Vous pouvez accéder au composant en vous rendant dans Composants → Template Creator. Vous arrivez sur cette page :

Présentation de Template Creator

Présentation de Template Creator

1 - Permet de créer un nouveau template.

2 - Permet de modifier un template existant en le sélectionnant préalablement.

3 - Permet de créer une copie d'un template.

4 - Permet d'importer un template que vous auriez exporter.

5 - Permet d'exporter un template.

6 - Permet de placer un template dans la corbeille.

7 - Liste des templates : Vous affichez l'ensemble de vos templates.

8 - Polices : Vous pouvez télécharger et installer des polices.

9 - A propos : Vous retrouvez une description de l'extension.

10 - Retrouvez ici plusieurs vidéos vous permettant de prendre en main l'extension. N'hésitez pas à consulter ces différentes vidéos qui vous permettront de débuter et de progresser dans la réalisation de vos templates. A noter que vous trouverez également une documentation complète sur le site de l'auteur, dans la partie téléchargement.

 

Créer un template

 Pour créer votre premier template, cliquez simplement sur le bouton Nouveau (1), vous arrivez sur la page suivante :

Paramètres nouveau template

Paramètres nouveau template 

 1 - Deux paramètres doivent obligatoirement être entrés : la Version de Joomla! sur laquelle vous souhaitez installer ce template, ainsi que le Nom du template

Note : Le nom du template ne doit pas contenir d'espace et/ou de caractères spéciaux.

2 - Des paramètres complémentaires, certains comme Auteur, Licence ou Copyright peuvent être intéressants à entrer.

Une fois que tout est bon, cliquez sur le bouton Enregistrer & Fermer. Vous retournez alors sur la page listant tous vos templates. Vous n'avez qu'à cliquer sur celui que vous venez de créer afin de l'éditer. Vous arrivez sur la page suivante :

Template Creator layouts

Sur cette page, vous devez définir le layout correspondant le plus à la structure de votre projet. Ce choix n'est pas définitif, vous pourrez par la suite ajouter ou supprimer des blocs. Cela vous permet simplement de gagner du temps.

 Pour l'exemple, nous allons choisir le modèle 11 qui propose déjà pas mal de positions différentes.

Définir le style général du template

Template Creator styles généraux

1 - Vous pouvez éditer les informations de votre template (version de Joomla!, nom, copyright, etc).

2 - Le bouton paramètres vous permet d'éditer le style général du template. Vous pourrez modifier, entre autre, la largeur de ce template, le fond de page, les couleurs (liens, texte), la police à utiliser, la taille, les titres (<h1<, <h2>, etc), les boutons, etc et intégrer également du code personnalisé.

3 - Ce bouton vous permet de définir l'aspect responsive design de votre template, c'est-à-dire la manière dont il va s'afficher sur les différents supports (smartphones, tablettes, ordinateurs de bureau).

4 - Prévisualiser vous permet d'afficher votre site avec le template que vous êtes en train de créer.

5 - Télécharger vous permet de télécharger le template sur votre ordinateur, afin, par exemple, de l'installer sur un autre site Joomla!.

6 - Vous permet de faire une copie de votre template.

7 - Le mode expert vous permet d'accéder à des paramètres avancés pour chaque bloc.

8 - Vous permet de charger un thème déjà existant (très intéressant pour les débutants).

9 - Vous permet d'enregistrer votre template. Comme pour toujours, pensez à régulièrement sauvegarder votre travail au cas où vous rencontreriez un problème.

10 - Annuler et retourner à la liste de vos templates.

 

Comme vous pourrez donc le remarquer, il vous est facilement possible de définir, autant dans les grandes lignes que dans les détails, l'ensemble du design de votre template.

Prenez le temps de découvrir le bouton paramètres (2) et les nombreuses fonctionnalités qu'il propose. A partir de ce bouton vous pourrez facilement donner l'allure que vous souhaitez à votre template, d'une manière générale.

 

Définir le style de chaque bloc

 

Une fois que vous avez défini le style général du template, vous pouvez agir sur chaque bloc.

En passant votre souris au dessus d'un bloc en particulier, vous obtenez les informations suivantes :

Template ceator style bloc 

1 - Supprimer le bloc.

2 - Déplacer le bloc vers le haut.

3 - Déplacer le bloc vers le bas.

4 - Modifier le bloc. Ici, vous rentrouvez de nombreux paramètres qui s'appliquent seulement au bloc. Cela vous permet donc de personnaliser et différencier ce blog du reste du template.

 

Ensuite, vous pouvez même définir des styles pour chaque position de module.

 

En utilisant l'ensemble des paramètres que nous venons de voir, vous pouvez donc créer et personnaliser votre template très simplement. Pensez à vérifier le rendu (qui peut être parfois différent de la réalité) en cliquant sur le bouton prévisualiser.

Une fois que vous avez terminé votre template, vous pouvez cliquer sur le bouton Télécharger. Template Creator va alors créer un package zip que vous pourrez installer sur un autre site Joomla! de la même manière que vous installeriez n'importe quelle extension.

 

Les fonctionnalités intéressantes

 

Aucune notion de code nécessaire

Comme nous l'avons vu dans les parties ci-dessus, Template Creator ne nécessite pas de connaissance particulière. Vous réglez simplement les différents paramètres, et le composant génère le code nécessaire à la création de votre template. Vous aurez donc simplement à prendre en main le composant pour pouvoir créer vos templates entièrement personnalisés.

 

Une utilisation simple

Template Creator vous permet de créer simplement votre template, et surtout de le visualiser directement sur votre site, avec les éléments que comprend ce site.

 

Le support du responsive design

Grâce aux nombreux paramètres proposés, il vous est possible de paramétrer très précisément l'affichage de votre site sur les différents supports (smartphones, tablettes, ordinateurs de bureau). Il est même possible de définir (pour les smartphones et tablettes) l'affichage en mode paysage et portrait.

 

Un code généré simple

Le code généré par Template Creator est simple. Cela vous assure de la simplicité si vous souhaitez modifier ce code par la suite, et surtout vous assure de ne pas rencontrer de problème avec l'utilisation d'extensions tierces.

 

Notez cet article:
16
Plaçons la barre haute pour la sécurité de Joomla ...
Tutoriel Joomla! pour la mise en place d'un plan d...

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
lundi 23 septembre 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.