Atelier template creator Joomladay France 2014

2 378 vues

Publié le

Template Creator est un outil de création de templates Joomla! qui vous permet de générer vos propres templates Joomla!.
Conçu comme un assistant très intuitif, il n’en est pas moins complet et efficace : organisation des positions, création des styles, gestion du responsive… il permet de construire son design directement sur votre site Joomla mais aussi de récupérer une archive installable. Imaginé pour répondre aux besoins des débutants, il s’adapte parfaitement aux exigences des professionnels.
Ceci est le diaporama utilisé durant cet atelier conçu comme un tutoriel en live.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 378
Sur SlideShare
0
Issues des intégrations
0
Intégrations
248
Actions
Partages
0
Téléchargements
64
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Atelier template creator Joomladay France 2014

  1. 1. 1 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 20141 Créez votre template Joomla! avec Qui sommes-nous Créer son template ? Template Creator… Création d’un template en 10 étapes Questions réponses
  2. 2. 2 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Qui suis-je ? Céline ROBERT (c-line) Webdesigner / formatrice / consultante / … Co-fondatrice et gérante de Joomla! depuis 2007 Agence de communication Création de supports de communication Formations à la communication Conseil en communication
  3. 3. 3 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Qui suis-je ? Cédric Keiflin (ced1870) Joomla! depuis 2008 Modérateur sur forum.joomla.fr Développeur de Template Creator CK entre autres…
  4. 4. 4 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Les 3 méthodes pour créer son template
  5. 5. 5 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 … tout fait main Dans les règles de l’art …
  6. 6. 6 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 … pourquoi réinventer la roue ? La rusée …
  7. 7. 7 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 … pas toujours à la hauteur Avec un logiciel …
  8. 8. 8 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Template creator
  9. 9. 9 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Evolution Template Creator Un composant = Création en direct sur le site Couleurs Responsive Dégradés Typographie Ombres CSS3 Compatibilité Positions Structure
  10. 10. 10 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.chocolaterie-larra.fr
  11. 11. 11 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.alaneo-formation.com
  12. 12. 12 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.hoyado.com
  13. 13. 13 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Quelques exemples avec Template Creator www.com3elles.com
  14. 14. 14 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Le programme de l’atelier 1. installer le composant, créer le projet 2. créer un jeu de polices personnalisées 3. choisir une structure de site (colonnes) 4. créer des conteneurs 5. créer des zones de modules 6. ajouter son propre logo 7. personnaliser le template 8. personnaliser les styles 9. paramétrer le responsive design Astuces Questions / réponse
  15. 15. 15 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Démarrons ! Rappel : utilisez un installation de Joomla avec « exemples en français »
  16. 16. 16 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Démarrons ! Récupérez les fichiers sur La clé USB !
  17. 17. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M RÉSULTAT FINAL Logo Menu horizontal déroulant Zone pour slideshow Modules alignés Zone de contenu 3 colonnes Modules alignés Zone de pied de page 2
  18. 18. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M INSTALLER UNE POLICE GOOGLE 3 1 http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans 2 3
  19. 19. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CRÉER UN NOUVEAU TEMPLATE • Menu >> Composants >> Template Creator CK Dans l’admin de Joomla! • Cliquez sur le bouton « Nouveau » Dans Template Creator • Choisissez votre version de Joomla! • Donnez un nom au template Dans la fenêtre d’édition Le nom du template ne doit comporter ni espaces ni caractères spéciaux. 4 1 2 3
  20. 20. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CHOISIR UNE STRUCTURE DE SITE • Choisir le modèle N° 13 qui correspond le mieux au design souhaité A la création du template • Lorsque le logiciel vous le demande, validez le chargement du thème par défaut Chargement du thème par défaut 5 1 2
  21. 21. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M ENREGISTRER LE TEMPLATE 6 Pensez à enregistrer votre template régulièrement !
  22. 22. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M LOGO + MENU 7 • Créez un nouveau conteneur pour accueillir le bloc logo+menu Conteneur principal • Glissez le bloc logo+module dans le nouveau conteneur Bloc logo+module
  23. 23. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M SLIDESHOW 8 • Créez un nouveau conteneur pour accueillir le bloc slideshow Conteneur principal • Créez un nouveau bloc de module simple dans le conteneur Bloc slideshow
  24. 24. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 9 •Supprimez le bloc de menu horizontal qui existe déjà Bloc menu horizontal • Editez le layout du bloc logo+module • Désactivez le module et activez le menu • Réglez les largeurs à 65% / 35% • Renommez le nom et la position pour le menu : nav / position-1 Bloc logo+module 1 4 5 3 2 Lorsque vous renommez un bloc il faut éditez les CSS et revalider pour mettre à jour les styles 67
  25. 25. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M COULEURS DE FOND 10 1 6 2 7 8 3 4 5
  26. 26. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 11 • Largeur maxi de 1000px • Design fluide qui s’adapte à tous les écrans • Charger Bootstrap pour Joomla! 3 Paramètres du template • Couleur principale de la page #ebebeb Fond de page • Couleur du texte et liens #969696 • Couleur des liens survolés #00b7f0 • Texte de 12px • Police ‘Segoe UI’ • Interligne de 20px Texte 1 3 4 5 6 7 Onglet Page 2
  27. 27. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 12 1 Titre H1 2 7 8 3 5 6 4
  28. 28. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 13 1 Titre H2 2 4 6 7 3 5
  29. 29. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 14 1 Titre H3 2 4 6 3 7 5
  30. 30. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 15 1Bouton 2 4 5 3 6 7 8
  31. 31. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 16 1Bouton survolé 2 4 3
  32. 32. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 17 1Champ 2 4 3 5 6
  33. 33. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONFIGURER LE TEMPLATE 18 1Champ cliqué 2 4 3
  34. 34. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M AJOUTER SON LOGO 19 • Editez les CSS du bloc ‘bannerlogo’ • Sélectionnez votre image à utiliser comme logo Image du logo • Donnez les dimensions de votre image • Régler la taille du bloc dans le layout du bloc ‘banner’ Dimensions du logo 3 4 1 2
  35. 35. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 20 1 Lien normal Niveau1 2 3
  36. 36. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 21 1 Lien survolé Niveau1 2 3 ( IDEM pour lien actif )
  37. 37. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 22 1 Conteneur Sous menu 3 2
  38. 38. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 23 1 Lien normal Sous menu 2 3 4 5
  39. 39. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 24 1 Lien survolé Sous menu 2 ( IDEM pour lien actif )
  40. 40. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MENU HORIZONTAL 25 1 Conteneur Sous menu 2
  41. 41. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS 26
  42. 42. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS 27 Gestion des largeurs 55,55 %44,45 % 32,7 % 33,6 % 33,6 % 24,25 % 25,25 % 25,25 % 25,25 % 19,2 % 20,2 % 20,2 % 20,2 % 20,2 % Pour info, les modules auront une marge gauche de 5% (sauf les modules tout à gauche)
  43. 43. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS 28 1 2 4 3 Module tout à gauche Styles des modules Autres modules 2
  44. 44. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS 29 1 2 4 3 Titre des modules 5 6
  45. 45. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M COLONNES PRINCIPALES 30
  46. 46. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M COLONNES PRINCIPALES 31 1 6 Styles des colonnes >> Colonne gauche >> Colonne centrale >> Colonne droite 2 3 5 4 7
  47. 47. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M COLONNES PRINCIPALES 32 1 2 4 5 Titre des colonnes 3
  48. 48. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS BAS 33 Styles des modules
  49. 49. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS BAS 34 1 2 4 3 Module tout à gauche Styles des modules Autres modules
  50. 50. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M MODULES ALIGNÉS BAS 35 1 2 4 3 Titre des modules
  51. 51. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONTENEUR PIED DE PAGE 36
  52. 52. +H T T P : / / W W W. T E M P L A T E - C R E A T O R . C O M CONTENEUR PIED DE PAGE 37 4 Conteneur 1 2 3 5 6 7
  53. 53. 17 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 2014 Vous avez aimé Vous aimerez : Gestionnaire de menus (admin) Gestionnaire de modules (admin) Menu type mac Effet paralaxe (3D) à partir de vos images Menus avancés Diaporama élégant et responsive Infobulles avancées Menu accordéon Et plus encore sur www.joomlack.fr
  54. 54. 18 Créez votre template Joomla! avec Template Creator CK Paris 23 mai 201418 Merci pour votre attention www.joomlack.fr et www.com3elles.com

×