Display Suite

Display suite (short DS) is very popular. It offers you the possibility to split up your content block into regions (= extra blocks). Within these regions you can put your fields en add some CSS. DS allows you to make view modes for content types, others than teaser and full mode.

We install the following modules. You need the Extras for layout and other things. So activate.. The DS Switch view mode lets the visitor switch between view modes.

Drupal8_001576.png

After installation in the content type there is now the option to determine a layout. The layout module is needed for that.

Drupal8_001564.png

DS gives you the choise between some layouts. You can add them in combination with Panels. Here is choose only DS layouts.

Drupal8_001565.png

Give the fields a region place.

Drupal8_001578.png

All nodes are now according your configuration.
Drupal8_001566.png

With views there is a DS option too. It works with the view modes.


Drupal8_001567.png

You can put them alternating. You can also choose the mode selector. Visistors then can switch between the view modes.


Drupal8_001568.png
Drupal8_001569.png

You can make a view mode yourself. Click the link and configure.

.
Drupal8_001570.png

DS allows you to make CSS classes for the regions and the fields.

Drupal8_001571.png

For the fields you have to enable the field template.


Drupal8_001572.png

Other configurations...


Drupal8_001573.png

The classes are now visible in the field configuration.


Drupal8_001574.png

Add the CSS (CSS injector). I put the name of the painter bigger..

Drupal8_001575.png

Display suite is not only suited for giving a layout to the content type and views. It puts CSS to these regions and fields also. Al last.. you can add blocks to your layout. So you can control 100% the look of your site.

Drupal8_001577.png