TemplateToaster : un outil de création de Template depuis votre bureau

Le design de votre site Joomla! est géré par un template, cela vous le savez.
Pour cela, vous téléchargez des templates tout faits, vous adaptez les templates natifs de Joomla, ou pour les plus malins d’entre vous, vous créez votre template grâce à CK Template Creator ou autour d’un framework de template (c’est cette dernière solution que j’ai choisie pour créer mes sites chez Web54)

Sachez qu’il existe une autre catégorie d’outil de création de template : des outils Inline de type Themler ou de type desktop tels Artisteer ou TemplateToaster.

Ayant été contacté par l’équipe dynamique de TemplateToaster pour tester leur outil, je me suis exécuté et vous propose un survol de ce soft.

templatetoaster-cinnk-magazine

Crédits : Tony Webster

TemplateToaster, c’est quoi ?

Comme son concurrent Artisteer, TemplateToaster est une application exécutable qui se charge depuis le site du développeur et s’installe sur votre bureau.
Cet outil est une interface facile et ludique, vous permettant d’un seul endroit de créer un template original et agréable à l’œil.

Comment l’obtenir et à quel prix ?

http://templatetoaster.com/download

Cette version est une version Free, faite pour tester, voir pour créer un template.
Ce template en version Free ne sera pas modifiable ultérieurement, sauf à bien s’y connaître et à aller dans le code et les images posséderont un filigrane.

Pour bénéficier de l’enregistrement du fichier au format TTR et des images sans filigrane, il vous faudra prendre un abonnement, modique en regard de certains vendeurs de templates.

http://templatetoaster.com/purchase :
Abonnement standard à $49 ou abonnement professionnel à $149.

Après avoir testé l’application, il vous suffira de vous abonner pour obtenir un code d’activation qui déverrouillera votre logiciel : la licence est valable pour deux ordinateurs à votre nom.

Rien ne vous y oblige et je vous encourage à d’abord essayer si l’outil vous est utile.

Donc vous téléchargez l’application .exe et vous l’exécutez sur votre ordinateur.

Découverte de l’interface

interface-templatetoaster

Au lancement de l’application, une fenêtre modale s’ouvre, vous proposant le choix entre différentes plate-formes :

  • Joomla!
  • WordPress
  • WordPress avec du contenu
  • Drupal
  • Blogger
  • Html
  • Magento
  • PrestaShop
  • ou la possibilité d’ouvrir un projet existant. :

nouveau-template-joomla

Nous nous intéresserons à la création d’un nouveau template Joomla! puisque c’est notre sujet :
Nous avons le choix ici aussi entre un thème pré-construit ou bien un template vierge, si nous prenons le template vierge nous aurons un autre écran avec des choix généraux de couleurs et de polices.

Nous nous retrouvons ainsi dans l’onglet général de notre template (1) :

onglet-general-templatetoaster

Nous pouvons choisir :

  1. notre onglet (la partie que nous allons traiter : corps, en-tête, menu, slideshow, contenu, position de menu, pied de page, etc.),
  2. possibilité de choisir un exemple de template,
  3. la couleur, la typo générale du site,
  4. la disposition des éléments,
  5. le type de thème (on peut passer d’un CMS à un autre, ce qui fait que si vous avez plusieurs sites de la même compagnie, sur différentes plate-formes, vous pouvez avoir sensiblement le même thème.
  6. d’ajouter des CSS ou du JavaScript,
  7. de modifier la typographie,
  8. de gérer le favicon,
  9. de gérer les marque-pages.

Comme première approche, c’est plaisant, cela n’a pas l’air trop difficile pour quelqu’un qui sait utiliser une souris. Voyons un peu plus loin.
Les mises en page
Je charge un template q

Les mises en page

Je charge un template quelconque, fais quelques modifications de mise en page puis ajoute un fond dans l’onglet corps.

mise-en-page-templatetoaster

Les possibilités sont nombreuses, on peut définir l’ordre des éléments (entête, menu , page), l’affichage des barres latérales, si on veut un fond fixe, en image, dégradé, couleur uni, etc. Et même y appliquer des filtres.

Au niveau de la largeur de la page également, si on veut une page fixe en px, ou fluide en %, c’est possible.

Prise en compte du responsive design

responsive-designUn onglet responsive design m’intrigue : à l’intérieur quelques boutons me permettent de choisir des vues Mobile, minitab, Tablette, ordinateur de bureau ou personnalisée (Hauteur, Largeur) et en cliquant dessus, le template s’affiche dans une simulation de l’appareil mobile choisi : ex : téléphone mobile.

Je ne sais pas si le rendu restera le même, mais cette fonctionnalité me rassure sur le côté responsive du template qui est toujours un casse-tête pour un créateur de template.

Ergonomie de l’outil

A priori, il y a des boutons un peu partout, censés nous faciliter la tache, ok, super…

De même quand on clique sur un élément, par exemple le menu, on est déplacé vers l’onglet menu et la zone menu en question est accentuée par une bordure jaune.

C’est bien, il faut juste s’y habituer et je dois avouer que mon cerveau n’a pas eu le temps de s’adapter. Toutefois, je pense que ce n’est pas insurmontable.

Par contre j’ai trouvé pénibles certaines redondances… Parfois on ne sait plus trop où l’on se situe, ce n’est pas trop grave et c’est souvent le cas pour les logiciels de bureau. C’est juste un point à améliorer.

Aperçu en temps réel

Une spécificité de ces interfaces de bureau est que vous apercevez les changements en temps réel.

C’est un vrai plus ! En choisissant une couleur, une image, une police, simplement en les survolant, votre zone de template va se modifier instantanément !

De même, puisque vous êtes sur une application de bureau, les raccourcis claviers fonctionnent, en particulier Ctrl+Z et Ctrl+Y, vous permettant d’annuler ou de refaire une action sans avoir à recharger comme vous le feriez avec un template en live.

Les Typos

Au delà des réglages généraux du template, dans chaque onglet, dans chaque partie de la mise en page, il est possible de déclarer les typos des différents objets textes.
Tout ou presque est prévu :

  • la prise en compte du survol,
  • la prise en compte de l’état des liens (survol, visité, actif, etc.),
  • tailles, couleur, soulignement, barré, effet d’ombre, effet de lueur,
  • choix des polices Google ou custom ou system avec possibilité d’aller recharger de nouvelles polices.

typos-templatetoaster

Franchement, pour ce qui est de la typo, vous trouverez votre bonheur, sauf à avoir un graphiste impossible à vivre et nous en connaissons tous...

Le slideshow

Un onglet attire mon œil : SLIDESHOW… Allons voir.

Je coche la case diaporama et apparaît un nouveau… diaporama. (Bravo)

Je peux choisir sa position dans le template, les effets de transition pour chaque slide, hauteur, largeur, bordure et marges.

En image d’arrière plan, je peux choisir un dégradé, une couleur, une image de la bibliothèque, ou une image que j’irai chercher dans mes dossiers : c’est ce que j’ai fait pour une de mes diapositives et j’ai eu la bonne surprise de voir apparaître un popup éditeur d’images de fond dans lequel je peux faire plein de réglages. Entendons-nous bien, ce n’est pas du Photoshop, mais cela peut permettre de régler une certaine ambiance ou de mettre les images à la bonne dimension tout simplement.

slideshow-templatetoaster

Les différents réglages me paraissent alléchants, mais je me dis que si je dois régler ici, je n’aurais pas la main dessus dans le site.

Cela peut être intéressant pour un créateur de thème ou pour un webmaster sans connaissance des modules de slideshow de Joomla.

Réglage et positions des modules

Partie intéressante pour une personne n’ayant pas l’habitude des frameworks complets tels Gantry, Helix ou Vertex, ici vous pouvez régler vos positions de module.

positions-templatetoaster

Vous pouvez :

  • ajouter ou enlever une position (1)
  • régler le nombre de colonnes (2)
  • faire différentes opérations de design CSS (3)
  • modifier le nom (4) de la position (5)
  • dessiner une portion que vous placez quasiment où vous le voulez.

Bref je dis, pourquoi pas ? Attendons pour voir une fois en place.

Envoi par FTP

Il est possible de configurer un FTP inclus dans le logiciel pour renvoyer chaque version de votre template sauvegardé dans un dossier. Cela pourrait s’avérer pratique pour tâtonner avant un réel template fonctionnel.

Export et import dans Joomla!

Fin de la visite de l’appli… On ne va pas tout détailler.

Maintenant j’exporte, toujours en mode essai, un template Joomla.

Template Toaster m’avertit que j’ai une version d’évaluation et que donc je vais avoir des filigranes sur mes images. Il me demande également si je le veux au format zip ou dossier, si je le veux compatible VirtueMart, moi qui utilise ce composant de e-commerce en priorité, cela me satisfait.

xport-joomla

J’ai donc un zip à importer.

Opération classique par l’installateur de Joomla !

Et me voila dans le template :

template

Des onglets :

  • Header
    • possibilité de changer le logo, l’image de fond, le titre, le slogan, etc.
  • Slideshow option
    • belle surprise : je peux changer les images du slideshow
    • je peux décider si le slideshow est affiché uniquement sur la page d’accueil
    • mauvaise surprise, c’est tout ce que je peux faire… (par rapport à des outils comme Smart Slider c’est la nuit et le jour).
  • Color options
    • deux couleurs modifiables block heading et sidebar menu heading.
    • Je n’ai pas pris le temps de lire la documentation pour savoir si l’on pouvait affecter d’autres couleurs dans cet onglet.
  • Sidebar options
    • réglages des tailles de polices (mais pas des polices).
  • Style options
    • indique pour chaque position si on va utiliser le style de TemplateToaster ou le style par défaut.
  • Menu Style options
    • indique pour chaque position si le menu sera horizontal ou vertical.

RENDU ET APPRÉCIATION FINALE

Un temps d’adaptation vous sera nécessaire pour vous satisfaire du rendu.

Vu que j’ai testé rapidement, cela ne correspondait pas à l’idée que j’avais de mon template.
Mais je suis trop exigeant.

Je suis persuadé toutefois que c’est un bon départ pour établir un template original, correspondant à vos attentes.

Je conseille donc cet outil à ceux qui veulent créer des templates faciles à mettre en place, peu modifiables par la suite (sauf à avoir le fichier source et pour cela il faut la version payante).

Les habitués des frameworks resteront sur leur faim, ceux qui galèrent à modifier un simple template Protostar adoreront.

J’avoue pour ma part que je m’en servirai, pour des projets précis où je sais que je n’aurais sûrement pas à revenir en cours de projet sur les emplacements et je vous incite à le tester, puis à l’acheter si cela vous plaît, et enfin à donner toutes vos remarques à l’équipe de TemplateToaster, équipe dynamique en attente de retour utilisateurs pour vous proposer un outil adapté à vos besoins.

À propos de l'auteur

serge-billon
Serge Billon

Serge est intégrateur Joomla. Il propose sur son site professionnel http://www.web54.fr des tutoriels sur la migration Joomla, les frameworks de templates. Il est également modérateur sur http://virtuemart.fr et sur http://aidejoomla.com

Mon panier

Le panier est vide

Vous aimez lire Cinnk magazine ?

Abonnez-vous !

cinnk-magazine-abonnement-1-an

Envie de rejoindre le projet ?

Vous aimez écrire, vous avez une experience à partager, une expertise à apporter ou encore une vision à exposer et vous souhaitez participer au projet ?

Rejoignez-nous !

Proposer un article

Devenez annonceur

L'équipe de rédaction

Rédacteur en chef
Simon Grange
Rédacteur en chef adjoint
Christian Bardin
Directeur artistique
Vincent Velasco
Sécretaire de rédaction
Sandra Thevenet
Illustration et iconographie
Gaëlle Berguin

Ont participé à ce numéro
Christophe Avonture
Serge Billon
Yannick Berges

Please publish modules in offcanvas position.

Sur ce site, nous utilisons des cookies.