Bobcares

Drupal Layout Paragraphs | An Introduction

by | Dec 3, 2023

We can create dynamic and flexible layouts using the Drupal Paragraphs module. Bobcares, as a part of our Drupal Software Development offers solutions to every query that comes our way.

Contents
  1. What is the Drupal Paragraph Module?
  2. Main Characteristics of Drupal 9 Paragraph Module
  3. Usage Steps
  4. Conclusion

What is the Drupal Paragraph Module?

A novel approach to content generation is the paragraph. It lets site designers organise things more neatly and gives users greater editing options.
Drupal’s “Drupal Paragraphs” module is widely used for managing content. Comparable to content fields, it offers a plethora of choices for content styles, layouts, and groupings based on specifications.

The Paragraphs module in Drupal is frequently used to build adaptable and reusable text structures. By arranging material into fieldable entities called “paragraphs,” we can create intricate page layouts. Paragraph types offer a flexible approach to organise material because each one can have its own set of fields and display options.

There are several kinds of Drupal paragraphs. They may be a basic written message or a customizable slideshow, or they could be a picture or a video.

Rather than placing all the information in a single body field, we may make many types of paragraphs with various patterns. The end user may now select from a variety of pre-defined paragraph types thanks to this. Drupal Paragraphs enables us to generate many featured paragraphs, from which customers may select the best fit for their requirements.

Drupal developers may change the components’ appearance at the theme level using the Drupal Paragraphs module, which is also very easy to use for non-technical users.

Main Characteristics of Drupal 9 Paragraph Module

1. Drupal paragraphs can be used when several structures are present on the same page or on separate pages. For example, there’s a slideshow at the bottom and a picture with text at the top. We may simplify this by using Drupal Paragraphs.

2. In the event that the display has changed—for example, if we wish to move the title to the top, followed by the picture and description, instead of the image being on top. Drupal paragraphs make it simple to make such modifications. To alter the display order of the entire content wherever a paragraph is used, go to “manage display” of the paragraphs that are used and adjust their order.

3. It is possible for two Drupal paragraph fields to reference one another. Choose the Drupal paragraph type we wish to add by selecting “Paragraph” under “Reference revisions” when selecting the field to paragraphs.

Usage Steps

Installation & Setup

1. To install the paragraph module using Composer, use the following command:

drupal layout paragraphs

2. Following module installation, we must activate the paragraph module.

3. The Entity reference revisions module is a prerequisite for the paragraph module. The paragraph module and the entity reference revisions module need to be enabled together.

4. Under each paragraph are submodules that can be activated based on the situation: Paragraphs demo, Paragraphs library, Paragraphs report, and Paragraphs type permissions. We may get a quick overview of the module’s use case from the description.

Paragraphs Type Creation

1. Go to Structure > Paragraph types to add a new paragraph type.

2.Complete all the required fields to generate a paragraph type. In this case, the fields for labels, icons, and descriptions are optional.

3. By selecting the edit option, we are able to modify the paragraph type’s machine name.

4. Click Save and manage fields once the fields have been filled out.

Field Addition

1. Field addition in a paragraph type is the same as field addition in a content type.

2. The manage fields tab may be accessed by clicking on Save and Manage fields. Go to Manage Fields and choose Add field. We may either reuse the current field or add a new one here.

3. Make sure the field type is chosen, add a label, and adjust the field parameters to suit the needs. The method used to add the fields to the content type is the same. Any number of fields may be added based on the needs.

4. The list of fields added to the manage display form is seen once the field has been added. Under the manage form display tab, we are able to modify the field’s configurations and order. Click and drag the fields to rearrange their order, then click the settings button located at the right end of each field to modify its setup.

5. We may alter the field value’s format and order in the manage display tab once the paragraph is shown. Click and drag the fields to rearrange them. Click the dropdown menu next to “Format” to adjust the format to fit the needs of that particular field.

6. We have the option to both align the field’s label and hide it from view. These choices are located under Label.

7. In the event that the website supports many languages, we may translate the paragraph type under the Translate paragraphs type tab and clone it from the clone tab, where we must assign a new label to the copied paragraph.

Addition of Paragraphs to Content Type

1. We have to create a field of type entity reference revision, which aids in referring to paragraph types inside the content type, in order to add paragraphs to a content type.

2. Navigate to Structure > Content types to add the field. To add a paragraph type, click the manage fields of the content type that needs it.

3. Select “Add fields.” Give the field a name after selecting the paragraph under Reference Revisions.

4. To proceed, click Save.

5. Here, we may choose to select the field’s limit. Change the Allowed number of values to limited and choose the number that shows up after choosing the restricted option if we only want to add one set of data for the paragraph. Then, after selecting the limit, click Save Field Settings.

6. We may choose the paragraph type that needs to be added to the chosen content type by clicking on the “Save Field Settings” button. Under Paragraph kinds, a list of all the produced paragraph types will appear. Here, we have two choices: either choose one of the paragraph kinds, or choose the option below to omit the selected paragraph types, which will permit the non-selected paragraph types. The alternative option is to include the one below, which will permit the list’s specified paragraph kinds. Once the paragraph kinds have been chosen, click “Save Settings” to finish.

7. The entity reference revisions field has a variety of field widgets that may be chosen in the manage form presentation of the content type to which the field is added.

Addition of Content to Paragraph

1. Go to Content > Add content to add the material. Choose the sort of material to which we add the paragraph.

2. All of the fields will be added to the paragraph along with the addition of the paragraph type. Click the “Add” button next to the paragraph name to add further paragraphs of the same kind. Then, click the three dots that appear next to the collapse button to choose the paragraph that we need to remove. Click on the duplicate to make a copy of the paragraph.

3. Once the paragraph has been filled with text, save the node.

[Need to know more about Drupal Paragraph Module? We’re available 24/7.]

Conclusion

We use the Paragraphs module in Drupal to generate dynamic and adaptable layouts. Content writers will find it easier to create and manage intricate page layouts using this method as it enables a modular and reusable structure without requiring a high level of technical expertise.

PREVENT YOUR SERVER FROM CRASHING!

Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.

GET STARTED

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Never again lose customers to poor
server speed! Let us help you.

Privacy Preference Center

Necessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

PHPSESSID - Preserves user session state across page requests.

gdpr[consent_types] - Used to store user consents.

gdpr[allowed_cookies] - Used to store user allowed cookies.

PHPSESSID, gdpr[consent_types], gdpr[allowed_cookies]
PHPSESSID
WHMCSpKDlPzh2chML

Statistics

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

_ga - Preserves user session state across page requests.

_gat - Used by Google Analytics to throttle request rate

_gid - Registers a unique ID that is used to generate statistical data on how you use the website.

smartlookCookie - Used to collect user device and location information of the site visitors to improve the websites User Experience.

_ga, _gat, _gid
_ga, _gat, _gid
smartlookCookie
_clck, _clsk, CLID, ANONCHK, MR, MUID, SM

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

IDE - Used by Google DoubleClick to register and report the website user's actions after viewing or clicking one of the advertiser's ads with the purpose of measuring the efficacy of an ad and to present targeted ads to the user.

test_cookie - Used to check if the user's browser supports cookies.

1P_JAR - Google cookie. These cookies are used to collect website statistics and track conversion rates.

NID - Registers a unique ID that identifies a returning user's device. The ID is used for serving ads that are most relevant to the user.

DV - Google ad personalisation

_reb2bgeo - The visitor's geographical location

_reb2bloaded - Whether or not the script loaded for the visitor

_reb2bref - The referring URL for the visit

_reb2bsessionID - The visitor's RB2B session ID

_reb2buid - The visitor's RB2B user ID

IDE, test_cookie, 1P_JAR, NID, DV, NID
IDE, test_cookie
1P_JAR, NID, DV
NID
hblid
_reb2bgeo, _reb2bloaded, _reb2bref, _reb2bsessionID, _reb2buid

Security

These are essential site cookies, used by the google reCAPTCHA. These cookies use an unique identifier to verify if a visitor is human or a bot.

SID, APISID, HSID, NID, PREF
SID, APISID, HSID, NID, PREF