Cms rubedo création des mises en pages des contenus

  • 467 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
467
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CMS RUBEDO http://www.rubedo-project.org Création des gabarits de contenus 24/10/2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Etape 3 : création du gabarit Sélectionner le cadre Cadre http://www.rubedo-project.org
  • 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. 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. 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. 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. 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. Documentation et tutoriel : http://www.rubedo-project.org/accueil/ressourcesrubedo/documentation @Rubedo_project http://www.rubedo-project.org