Drupal Paragraphs Module Setup for Flexible Content

Drupal Paragraphs Module Setup for Flexible Content

Paragraphs is one of the most popular Drupal modules. It allows building pages from reusable blocks (paragraphs): Hero section, text with image, cards, quote, table, form. Editors assemble pages from paragraphs like a constructor, without coding.

Installation

composer require drupal/paragraphs
drush en paragraphs -y
drush cr

Creating a Paragraph Type

Structure → Paragraph types → Add paragraph type.

Example — "Hero section" paragraph:

• Paragraph name: Hero section
• Machine name: hero_section
• Fields:
  • field_hero_title (Text, plain)
  • field_hero_subtitle (Text, plain, long)
  • field_hero_image (Image)
  • field_hero_cta_text (Text, plain)
  • field_hero_cta_url (Link)

Adding a Paragraphs Field to Content Type

Manage fields → Add field → Type: Paragraph (entity reference revisions).

Settings:

• Number of values: Unlimited (to add multiple paragraphs)
• Allowed paragraph types: select required ones
• Widget: Paragraphs Classic or Paragraphs Experimental (with drag-and-drop)

Paragraph Template in Theme

File templates/paragraph/paragraph--hero-section.html.twig:

{% set classes = ['paragraph', 'paragraph--hero-section'] %}

<section{{ attributes.addClass(classes) }}>
    <div class="hero__content">
        {% if content.field_hero_title %}
            <h1 class="hero__title">{{ content.field_hero_title }}</h1>
        {% endif %}

        {% if content.field_hero_subtitle %}
            <p class="hero__subtitle">{{ content.field_hero_subtitle }}</p>
        {% endif %}

        {% if content.field_hero_cta_text and content.field_hero_cta_url %}
            <a href="{{ content.field_hero_cta_url[0]['#url'] }}" class="btn btn--primary">
                {{ content.field_hero_cta_text }}
            </a>
        {% endif %}
    </div>

    {% if content.field_hero_image %}
        <div class="hero__image">
            {{ content.field_hero_image }}
        </div>
    {% endif %}
</section>

Nested Paragraphs

A paragraph can contain child paragraphs. For example, "Cards section" contains multiple "Card" paragraphs:

1. Create card type with fields: title, text, icon
2. Create cards_section type with field_cards field of type Paragraph, allowed type: card
3. Editor adds section → adds cards inside

Display Configuration

Manage display → Display Suite or Layout Builder for visual arrangement of paragraph fields.

Paragraphs and Revisions

Paragraphs support revisions synchronously with parent node (entity reference revisions — not just entity reference). Rolling back a node rolls back paragraphs too.

Timeline

Development of 5–8 paragraph types with templates — 3–5 days depending on layout complexity of each block.