Cms rubedo création des mises en pages des contenus

1,070 views

Published on

Le CMS Rubedo permet de créer des mises en page (gabarits ou template) personnalisées pour tous les contenus. En quelques minutes le CMS Rubedo permet de définir les gabarits d'affichage respectant les principes du responsive design. Une fois activés, les mises en page sont prises en compte en temps réel sur les sites.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,070
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cms rubedo création des mises en pages des contenus

  1. 1. CMS RUBEDO http://www.rubedo-project.org Création des gabarits de contenus 24/10/2013
  2. 2. CMS Rubedo : Création des gabarits de contenus A partir de la version 1.4 du CMS Rubedo, vous pouvez créer des gabarits personnalisés pour les contenus. Ces gabarits permettent de modifier la mise en page de vos contenus détail. Les gabarits détail correspondent à l’affichage en front-office des sites. – Pour chacun de vos types de contenus, vous pouvez créer votre mise en page personnalisée en sélectionnant les éléments (titre, résumé, date, image, ...) que vous souhaitez afficher. Pour aller encore plus loin, choisissez l'affichage de chaque élément pour les différents supports (ordinateur, tablette et smartphone). http://www.rubedo-project.org
  3. 3. Exemples d’affichage en front-office Dans l’exemple ci-dessous, le même article est présenté de 2 façons différentes http://www.rubedo-project.org
  4. 4. Etape 1 : connexion au back-office 1. Ouvrir le menu 2. Fonctions Studio 3. Types de contenus 3 – Types de contenus 2 - Studio 1 - Menu
  5. 5. Etape 2 : Sélection du type de contenu Lorsque le type de contenu est sélectionné, le menu d’édition s’affiche Sélection du type de contenu http://www.rubedo-project.org
  6. 6. Etape 2 : Sélection du type de contenu Chaque contenu dispose de champs (Titre, résumé, texte, image, …. Dans cet exemple, le type de contenu Wiki dispose des champs suivants : • Titre • Résumé • Texte de l’article • Image • Position géographique http://www.rubedo-project.org
  7. 7. Etape 2 : Sélection du type de contenu Sur la partie visible aux internautes (front-office), nous retrouvons les champs du type de contenu wiki. Le titre de l’article Sa situation géographique L’image Le texte http://www.rubedo-project.org
  8. 8. Etape 2 : Sélection du type de contenu A la création d’un nouveau type de contenu, le gabarit détail par défaut affiche les différents champs les uns en dessous des autres. Notre nouveau type de contenu Wiki ne dispose donc pas de mise en page spécifique.
  9. 9. Etape 2 : Sélection du type de contenu Dans l’application Type de contenus, une fois le type Wiki sélectionné, cliquer sur l’onglet « Mise en Page » L’onglet mises en page permet de créer un gabarit d’affichage personnalisé
  10. 10. Etape 3 : création du gabarit 1. Cliquer sur « Ajouter » 2. Donner un nom à la nouvelle mise en page 1 – Ajouter une mise en page 2 – Donner un nom et cliquer sur Créer http://www.rubedo-project.org
  11. 11. Etape 3 : création du gabarit Après avoir donné un nom à la mise en page, les champs du type de contenu s’affichent sous forme de liste. Liste des champs du type de contenu Nom de la mise en page http://www.rubedo-project.org
  12. 12. Etape 3 : création du gabarit La création des gabarits repose sur les mêmes principes que la création des pages et des masques de page. 1. 2. 3. Ajouter des lignes pour définir les zones de votre mise en page Ajouter des colonnes dans les lignes Ajouter les champs dans les colonnes. Les propriétés des lignes et des colonnes permettent de définir les supports (téléphone, tablette, ordinateur) sur lesquelles les éléments seront affichés. La dimension des colonnes et des lignes sont exprimées en pourcentage pour le responsive design. SPAN est basé sur 12. Offset permet de réaliser un « décalage » visuel de l’élément. http://www.rubedo-project.org
  13. 13. Etape 3 : création du gabarit Sélectionner le cadre Cadre http://www.rubedo-project.org
  14. 14. Etape 3 : création du gabarit Ajouter de nouvelles lignes puis des colonnes à l’intérieur des lignes Paramétrer la taille et disposition Colonne http://www.rubedo-project.org
  15. 15. Etape 3 : création du gabarit Lorsque la mise en forme générale est finalisée, Assigner un champs dans chaque colonne. Une liste déroulante permet de sélectionner les champs disponible dans le type de contenu. http://www.rubedo-project.org
  16. 16. Etape 3 : création du gabarit La mise en page doit ensuite être activée. Puis enregistrer. Activer la mise en page http://www.rubedo-project.org Enregistrer les modifications
  17. 17. Etape 4 : Visualiser la mise en page des contenus sur le site La mise en page doit ensuite être activée. Puis enregistrer. Titre Résumé Adresse Contenu http://www.rubedo-project.org Image
  18. 18. Création de mises en pages des contenus Pour résumé : – Une mise en page personnalisée peut être crée pour chaque type de contenu d’un site. – Dans les sites multilingues, la mise en page s’applique pour toutes les langues. – Pour chaque ligne et colonnes d’une mise en page, il est également possible d’ajouter un Style et une classe HTML – Les mises en pages activées sont prises en compte en temps réel sur les sites D’autres tutoriels sont disponibles sur le site www.rubedoproject.org http://www.rubedo-project.org
  19. 19. Documentation et tutoriel : http://www.rubedo-project.org/accueil/ressourcesrubedo/documentation @Rubedo_project http://www.rubedo-project.org

×