You installed a basic Drupal 8 website, created a few articles and now you want to customize the way the content pages look. When you go to “Manage Display” you can re-order fields but you can’t put them in regions.
Display Suite is the module designed to do just that. It offers extra regions on the “Manage Display” page with a drag-and-drop fields interface. There are different layouts with different sets of regions. You can move fields around without writing a single line of code.
Let’s get started
1. Install Display Suite module
First we need to install the Display Suite Module. Go to http://www.drupal.org and choose “Download & Entend”. Choose Modules. Type “display suite” in the search box and click “Search”. The Display Suite module should be on the first page. There are several version but we choose the last stable one for Drupal 8. At this moment that is version 8.x-3.1.
2. Modify “Full Content” display
After we installed and enabled the Display Suite we can start modifying how the content pages look. We go to “Structure” and choose “Content Types”. Here we choose the content type (entity) we want to alter. Lets go with the Article entity. Open the drop-down on the right side and choose “Manage display”.
We are on the “Default” page. We want to change the full content layout so at the top of the page we choose “Full content”.
If it is not there we enable it on the “Custom display settings” tab near the bottom of the page. We click “Custom display settings” and enable “Full content”. Click save and the “Full content” option should be there.
On the “Full content” display settings page we scroll near the bottom of the page and we can select a layout in the “Select a layout” drop-down box in the “Layout for article in full” tab. When you open it you see a list of Display Suite layouts.
For this tutorial we choose “Two column stacked layout” and click save. You should see five regions now. “Header”, “Left”, “Right”, “Footer” and “Disabled”. We can start dragging the fields into the section we want.
Drag the “Title” field in the “Header” section.
Drag the “Body” field in the “Left” section.
Drag the “Tags” and “Links” fields in the “Right” section.
Drag the “Comments” field in the “Footer” section.
Click save.
When we go to the content we see the changed layout.