19
Content layouts 12/11/2013 RUBEDO CMS http://www.rubedo-project.org

Tutorial rubedo cms, content layouts

  • Upload
    rubedo

  • View
    1.986

  • Download
    10

Embed Size (px)

DESCRIPTION

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).

Citation preview

Page 1: Tutorial rubedo cms, content layouts

Content layouts12/11/2013

RUBEDO CMShttp://www.rubedo-project.org

Page 2: Tutorial rubedo cms, content layouts

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 canbe 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 whethereach element will be displayed or not for each device (desktop, tabletor smartphone).

http://www.rubedo-project.org

Page 3: Tutorial rubedo cms, content layouts

Different layouts in front-end

http://www.rubedo-project.org

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

Page 4: Tutorial rubedo cms, content layouts

Step 1 : log in the back-end

1. Open the start menu

2. Studio features

3. Content types

1 - Menu

2 - Studio

3 – Content types

Page 5: Tutorial rubedo cms, content layouts

Step 2 : Select a content type

� Once a content type is selected, the « Edit » tab is displayed.

Select a content type

Page 6: Tutorial rubedo cms, content layouts

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

Page 7: Tutorial rubedo cms, content layouts

Step 2 : Select on content type

� On the front-end, the different fields of the « wiki » content are displayed :

http://www.rubedo-project.org

Title

Location

Image

Text

Page 8: Tutorial rubedo cms, content layouts

Step 2 : Select a content type

� When you create a new content type, the fields are displayedby default one below another.

� Our new « Wiki » content type does not have a specificlayout yet.

Page 9: Tutorial rubedo cms, content layouts

Step 2 : Select a content type

� In the Content Types application, once the « Wiki » content type isselected, click on the « Layout » tab.

« Layouts » tab lets you create new custom layouts.

Page 10: Tutorial rubedo cms, content layouts

Step 3 : Create a new layout

1. Click on « Add »

2. Give your new layout a name

1 – Add a new layout

2 – Give it a name and click on « Create new layout »

Page 11: Tutorial rubedo cms, content layouts

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.

Name of the new layout

List of the fields of yourcontent type

Page 12: Tutorial rubedo cms, content layouts

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. You can add rows to define areas of your layout.

2. You can divide rows into columns.

3. You can add fields into columns.

� Properties on rows and columns let you define on whichdevices (desktop, tablet, smartphone) these elements will bedisplayed.

� 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

Page 13: Tutorial rubedo cms, content layouts

Step 3 : Create a new layout

� Select the main frame

http://www.rubedo-project.org

Frame

Page 14: Tutorial rubedo cms, content layouts

Step 3 : Create a new layout

� Add new rows, and then new columns inside rows.

http://www.rubedo-project.org

Specify span, offset and visibility

Column

Page 15: Tutorial rubedo cms, content layouts

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 selectingit thanks to the combobox.

http://www.rubedo-project.org

Page 16: Tutorial rubedo cms, content layouts

Step 3 : Create a new layout

http://www.rubedo-project.org

� The layout must now be activated and saved.

Activate the layout

Save

Page 17: Tutorial rubedo cms, content layouts

Step 4 : Check your new layout on the front-end

� The new layout should now be taken into account :

http://www.rubedo-project.org

Titre

Résumé

Adresse

Contenu

Image

Page 18: Tutorial rubedo cms, content layouts

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

Page 19: Tutorial rubedo cms, content layouts

http://www.rubedo-project.org

Documentation and tutorials :http://www.rubedo-project.org/accueil/ressources-

rubedo/documentation

@Rubedo_project