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.

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