RUBEDO CMS
http://www.rubedo-project.org

Content layouts
12/11/2013
Rubedo CMS : Designing content layouts

From Rubedo v1.4, you can create custom content layouts.
Thanks to these layouts, ...
Different layouts in front-end

In this example, the same article is
displayed with two different layouts.

http://www.rub...
Step 1 : log in the back-end
1.
2.
3.

Open the start menu
Studio features
Content types

3 – Content types

2 - Studio
1 ...
Step 2 : Select a content type
Once a content type is selected, the « Edit » tab is displayed.

Select a content type
Step 2 : Select a content type
Each content has its own fields (title, summary, date, image, ...)

In this example, the
« ...
Step 2 : Select on content type
On the front-end, the different fields of the « wiki » content are displayed :

Title

Loc...
Step 2 : Select a content type

When you create a new content type, the fields are displayed
by default one below another....
Step 2 : Select a content type
In the Content Types application, once the « Wiki » content type is
selected, click on the ...
Step 3 : Create a new layout
1.
2.

Click on « Add »
Give your new layout a name

1 – Add a new layout

2 – Give it a name...
Step 3 : Create a new layout
Once you have given a name to your layout, the fields of your content
type are displayed as a...
Step 3 : Create a new layout
Creating a new layout is based on the same principles as
creating a new page or a new page ma...
Step 3 : Create a new layout
Select the main frame

Frame

http://www.rubedo-project.org
Step 3 : Create a new layout
Add new rows, and then new columns inside rows.

Specify span,
offset and
visibility

Column
...
Step 3 : Create a new layout
Once you have divided your layout into rows and columns,
you can assign one field or more in ...
Step 3 : Create a new layout
The layout must now be activated and saved.
Activate the
layout

Save

http://www.rubedo-proj...
Step 4 : Check your new layout on the front-end
The new layout should now be taken into account :
Titre
Résumé

Adresse

C...
Create new content layouts

To sum up :
– A custom detail layout can be created for each content type.
– Within multilingu...
Documentation and tutorials :
http://www.rubedo-project.org/accueil/ressourcesrubedo/documentation

@Rubedo_project

http:...
Upcoming SlideShare
Loading in …5
×

Tutorial rubedo cms, content layouts

2,771 views

Published on

From Rubedo cms v1.4, you can create custom content layouts.
For each of your content types, you can create your own custom content layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (desktop, tablet or smartphone).

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
2,771
On SlideShare
0
From Embeds
0
Number of Embeds
225
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial rubedo cms, content layouts

  1. 1. RUBEDO CMS http://www.rubedo-project.org Content layouts 12/11/2013
  2. 2. Rubedo CMS : Designing content layouts From Rubedo v1.4, you can create custom content layouts. Thanks to these layouts, the detail view of you contents can be modified in the front-end display. – For each of your content types, you can create your own custom content layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (desktop, tablet or smartphone). http://www.rubedo-project.org
  3. 3. Different layouts in front-end In this example, the same article is displayed with two different layouts. http://www.rubedo-project.org
  4. 4. Step 1 : log in the back-end 1. 2. 3. Open the start menu Studio features Content types 3 – Content types 2 - Studio 1 - Menu
  5. 5. Step 2 : Select a content type Once a content type is selected, the « Edit » tab is displayed. Select a content type
  6. 6. Step 2 : Select a content type Each content has its own fields (title, summary, date, image, ...) In this example, the « Wiki » content type has the following fields : • Title • Summary • Text • Image • Location
  7. 7. Step 2 : Select on content type On the front-end, the different fields of the « wiki » content are displayed : Title Location Image Text http://www.rubedo-project.org
  8. 8. Step 2 : Select a content type When you create a new content type, the fields are displayed by default one below another. Our new « Wiki » content type does not have a specific layout yet.
  9. 9. Step 2 : Select a content type In the Content Types application, once the « Wiki » content type is selected, click on the « Layout » tab. « Layouts » tab lets you create new custom layouts.
  10. 10. Step 3 : Create a new layout 1. 2. Click on « Add » Give your new layout a name 1 – Add a new layout 2 – Give it a name and click on « Create new layout »
  11. 11. Step 3 : Create a new layout Once you have given a name to your layout, the fields of your content type are displayed as a list. List of the fields of your content type Name of the new layout
  12. 12. Step 3 : Create a new layout Creating a new layout is based on the same principles as creating a new page or a new page mask : 1. 2. 3. You can add rows to define areas of your layout. You can divide rows into columns. You can add fields into columns. Properties on rows and columns let you define on which devices (desktop, tablet, smartphone) these elements will be displayed. Width of rows are in percentage for responsive web design, based on a 12-column grid (« span »). « Offset » corresponds to a space left blank. http://www.rubedo-project.org
  13. 13. Step 3 : Create a new layout Select the main frame Frame http://www.rubedo-project.org
  14. 14. Step 3 : Create a new layout Add new rows, and then new columns inside rows. Specify span, offset and visibility Column http://www.rubedo-project.org
  15. 15. Step 3 : Create a new layout Once you have divided your layout into rows and columns, you can assign one field or more in each column, by selecting it thanks to the combobox. http://www.rubedo-project.org
  16. 16. Step 3 : Create a new layout The layout must now be activated and saved. Activate the layout Save http://www.rubedo-project.org
  17. 17. Step 4 : Check your new layout on the front-end The new layout should now be taken into account : Titre Résumé Adresse Contenu http://www.rubedo-project.org Image
  18. 18. Create new content layouts To sum up : – A custom detail layout can be created for each content type. – Within multilingual websites, layout applies for all languages. – For each row and column in a layout, you can add a custom style and HTML class. – Activated layouts are applied in real time in the front-end. Other tutorials are available on www.rubedo-project.org http://www.rubedo-project.org
  19. 19. Documentation and tutorials : http://www.rubedo-project.org/accueil/ressourcesrubedo/documentation @Rubedo_project http://www.rubedo-project.org

×