Drupal ^8.8 || ^9: Paragraphs - A Tutorial

Abstract image

Are you struggling to create complex layouts in Drupal? There is a misconception that Drupal is not flexible on the front end. This is not true. This tutorial shows how Paragraphs module can be used to build complex layouts.

We will create a Paragraph to hold the following layout:

Image
layout for paragraphs

The Modules Used

  • Paragraphs (paragraphs) and sub-module Paragraphs Library (paragraphs_library)
    Paragraphs is the new way of content creation! It allows you — Site Builders — to make things cleaner so that you can give more editing power to your end-users.
    Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything you want from a simple text block or image to a complex and configurable slideshow.
    Paragraphs module comes with a new "paragraphs" field type that works like Entity Reference's. Simply add a new paragraphs field on any Content Type you want and choose which Paragraph Types should be available to end-users. They can then add as many Paragraph items as you allowed them to and reorder them at will.

  • Entity Usage (entity_usage)
    This module provides a tool to track entity relationships in Drupal. This module is required by Paragraphs Library. Paragraphs Library enables the re-use of existing Paragraph entities.

  • SVG Image (svg_image)
    This module changes default image field widget and formatter to allow use SVG image with the standard Image field.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.