Guide to creating page layouts with Drupal Paragraphs

Beautifully and logically arranged content is key to better user engagement. Luckily, Drupal abounds in modules to create web page layouts. Site builders and content editors can rely on the new Drupal 8/9’s Layout Builder, the Panels, the Display Suite, the Gutenberg … and, of course, on the super popular Paragraphs module. We decided to devote a few useful paragraphs here to using Drupal Paragraphs. Let’s begin!

Introduction to Drupal Paragraphs

The Paragraphs Drupal module brought a new component-based approach to creating page layouts. It allows you to create reusable component blocks (Paragraphs types) that are further added to the Drupal content. They can be anything — a slideshow, a popup, a quote, a call-out box, a grid, a block with a text and an image, and so on. The structure of these components is built up with fields just like so many entities in Drupal, so it is virtually unlimited.

During content creation, editors or users can quickly pick the suitable Paragraphs types instead of adding everything field by field. Drupal Paragraphs make the content entry process much simpler, cleaner, and more consistent. Non-technical users do not have to do complex formatting, and developers, in their turn, do not have to worry that someone messes things up.

Still, the page structures look advanced, varied, and interesting because they have been predefined before the content entry. In addition, front-end developers can apply specific styling to Drupal Paragraphs to make them look exactly as needed.

Flexible content with a clean structure — that’s what we got when Paragraphs appeared. It was initially released in 2013 for Drupal 7 and then completely rewritten for Drupal 8/9. There are 166,500+ sites actively using the module. Today, we will be reviewing how it works in Drupal 8 or 9.

Drupal Paragraphs vs Layout Builder

Ever since the Layout Builder module entered the scene in early 2018, all other modules for creating web page layouts have been losing their share of admirers. What about the Paragraphs module? Both Paragraphs and Layout Builder are really very powerful and allow you to achieve great results in the end if you use them to their full capacity. In a nutshell, here is how they can be compared.

• Drupal Layout Builder. The Layout Builder is a core module in Drupal 8 and 9, which means it needs no installation and is easier in updates and maintenance. It’s built around the concept of sections and blocks. You can build your layout with sections and then add blocks to them. The blocks can be mixed, matched, and moved throughout the layout using a drag-and-drop interface. Block types can be preconfigured. It’s possible to create individual layouts for specific pages.
• Drupal Paragraphs. Paragraphs are built around the concept of components, each of which is made up of its own fields. While page building with the Layout Builder looks more creative, it looks more streamlined and controlled with the Paragraphs. In many cases, you need no variations in the design, so the prebuilt components are just fine. Fewer clicks are necessary to make the content entry. So the Paragraphs are not going away and still very important when you need to create complex structures.

Drupal Paragraphs module tutorial: let’s build some pages!

Installing the Paragraphs module

The Paragraphs Drupal module depends on another module — the Entity Reference Revision module. We need to install both modules in any preferred way on our Drupal website. When enabling the Paragraphs module, we will need to enable a very important submodule in the package — the Paragraphs Type Permissions.

Creating Paragraphs types

We can see that, in addition to the standard Content types, Comment types, Media types, and so on, the Structure page of our Drupal admin dashboard now has Paragraphs types. By clicking “Add paragraph type,” we can create one.

Let’s call our new Paragraphs type “Text and image.”

Since a paragraph is a fieldable entity, its display options look standard with “Manage fields,” “Manage form display,” and “Manage display.” We can assemble it out of fields and configure their display further (hide their labels, apply image styles, reorder the fields, etc.)

By clicking “Add field,” we will now add two fields to our Paragraphs type:

• a text field (of the “formatted, long”)
• an image field (of the “Media” type so it pulls from Drupal’s Media Library)

While configuring the fields, let’s limit the number of their values to one. The Media field will need a Media type selected (“Image”).

We don’t want the field labels shown, so let’s make them hidden on the “Manage display” tab.

Adding Paragraphs to content types

The next step will be to use our newly created Paragraphs type in a content type. We will go to Structure > Content types > [Our content type]. In our example, this will be the Basic page. On its “Manage fields” tab, we click “Add field” and select the Paragraph field type from the dropdown list. It can be found under the “Reference revisions” field group.

In the field settings, the type of item to reference needs to be “Paragraph,” and so it is by default. The allowed number of values can be left as unlimited.

After saving the field settings, we approach the final step in adding our Paragraphs type to our Drupal content type. We need to scroll down the final field settings page and checkmark the particular Paragraphs types that we want to make available in this content type. In the case of multiple ones, we can reorder them by dragging them if needed.

After saving the results, we can check how the content entry process looks now. Our Basic page adding interface now has a new “Text and image” field.

Nesting Drupal paragraphs inside paragraphs

It’s amazing that Drupal Paragraphs types are made of fields and also, in their turn, serve as fields in content types. This creates an option for a nested structure. While creating a Paragraphs type, we can just add another Paragraph as its field.

Styling the Paragraphs types

When simply assembled of fields, Drupal Paragraphs do not always look exactly as we want out-of-the-box. To improve this, we can write CSS for them in the theme or subtheme. It’s possible to control the style of the specific Paragraphs fields by adding just a few lines of code to the stylesheet.

While speaking about the theming for Paragraphs, we should mention that Paragraphs combine perfectly with the responsive, mobile-first front-end web development framework — Bootstrap. Your Paragraphs can use specific Bootstrap components like carousels, accordions, tabs, modals, jumbotrons, alerts, progress bars, button dropdowns, responsive embeds, multi-column layouts, and so on. There is also the Bootstrap Paragraphs contributed module in Drupal that provides a suite of these components so they can quickly and easily be used in the content.

Start a new paragraph in your website’s story!

There are so many opportunities in Drupal to make your pages look more engaging while providing a cleaner content entry process. The Drupal Paragraphs module alone can work wonders in this sphere, and there are also other page building modules. Would you like to discuss the options with our Drupal development team? Contact us!

Waiting to build attractive pages,

Your Golems