Browse cities

It isn’t for no reason that we’ve called Drupal 8 Paragraphs module an “emergency kit” that Drupal 8 comes “to your rescue” with. Not only that it makes building a landing page so very time-efficient, but it “fortunately” limits your creativity freedom.
How come “fortunately”? Because the fewer options you have at your disposal, to distract you and to challenge your creativity, the more focused you are.
To put it simply: it’s the lack of options that sharpen your mind!
It challenges you to take the best decisions in short time while empowering the end user with so much flexibility (he/she can rearrange and edit the content later on). It dares you to come up with an ideally simplified (not necessarily minimalistic, although “extreme minimalism” is such a huge trend these days) result and to put the spotlight on content (that’s right, The King).
Now let us show you precisely how you can use the Drupal 8 Paragraphs module and integrate it into your team’s landing page creation process.

Steps to take with Drupal 8 Paragraphs module

1. Get It Running (plus helpful stuff about handling paragraph types and fields)

  • add the Entity Reference Revision and the Paragraphs modules to your website
  • notice that the Drupal 8 Paragraphs module comes equipped with multiple new “paragraph” fields 
  • notice that you get to a theme and to control the way they’ll display on the web page, as well
  • add a new paragraph field on the target Content Type and select the Paragraph Types (Structure  > Paragraph Types) that later on the end user can administer (as a developer you practically get to create precisely those types of paragraphs that your client needs)
  • use paragraphs independent from one another (they’re predefined)
  • although they’re called “paragraphs”, they can take whatever 
  • form/functionality you want; they range from images, headlines, buttons, text blocks, links etc. Each one of them is a different paragraph type with its own “collection” of fields (that you get to define)

2. Build Your Landing Page (Plus An Example)

So, you’ve added the Drupal 8 Paragraphs module to your website, you’ve learned about the Paragraphs’ “juicy” features, now let’s get to work (for there was an unreasonable deadline haunting you, remember?)
First, define the paragraph bundles that you’ll be using later (using the User Interface). They come in three “versions:
  • simple: title+ body field
  • advanced: title+ body+ field collection fields
  • blocks paragraphs: title+ body+ block reference field (the cool thing about this type of paragraph bundle is that the end user gets enabled to add maps, embed sliders, views blocks etc.)
In a nutshell: you select the node you’d like to add your field of paragraph type to, then you choose the paragraph bundle that this specific fields will refer to.
Ok, now let’s imagine that we’re rushing in (we have no choice, the clock is ticking) to create a “call to action” type of paragraph.
Our long experience as landing page “creators” will then instantly unfold a list of a call to action-specific components in our mind: text, link, message. 
What do you do then? You add all these fields, that your mind’s informing you about, to your Paragraph Type. 
Let’s it sum up:
  • add your Paragraph Type called “Call to Action”: Paragraph Types- +Add Paragraph Types
  • add all the needed fields (link, title, image and the rest) to your “Call to Action” Paragraph Type: Manage Fields > +Add Field
  • create a content-type landing page and a field of type Paragraph labelled “Call to Action”. Afterwards, from Settings you get to predefine which Paragraph types will be referenced
Probably one of the most alluring features of this module is that it enables you to display even far more complex components (galleries, videos, ads): you simply create a paragraph type of each one of these complex components and then give permission to the end user to reference them.
Reference Type- Reference Method: Default- Type
Note that it’s “none” that you must select from the “paragraph types” drop down menu, so that the user can reference more than just one type.

3. Decide How Your Fields Will Get Displayed

There, you have your content added to your landing page and yet: don’t rush in to proudly show your “work-of-art” to your client!
There’s one more fix you still need to do: setting up the way the call to action gets displayed.
Go to Manage Display and do your thing: format and update the order in which those fields will get displayed.
Now it’s just a matter of… filling in the blanks, since all the major configuration and predefining steps have been taken.
When it comes to your landing page’s customized visuals, add CSS and override templates.

Here's An Ultra Efficient Workflow for Building Up a Landing Page

1. Gather and structure all your information and fill in the landing page content form
2. Choose a Paragraph type for each fragment of content
3. Add the elements of design that each paragraph form require
4. Mix and match, edit and rearrange the paragraph entities till you get the desired result
5. Test out the results, of course!
See? Quick and easy!
And although some might say that Paragraphs limits your creativity, in fact, it actually challenges you to be ultra efficient and, given the limited options, to get even more creative. Ironical, right?
What’s your opinion on Drupal 8 Paragraphs module? Have you been using it for building your landing pages so far? 

We do Drupal development

Go to our Drupal page!

Visit page!

Recommended Stories

5 Drupal Blog Posts That Have Made It to the Favorites Lists of All the OPTASY Team Members this Month
This month's "surreal" events have shaken the world as we had known it. They have "closed" us safely inside our… (Read more)
Adriana Cacoveanu / Mar 31 '2020
You Have Your List of Web Accessibility Issues: What Do You Fix First? 8 Simple Ways to Prioritize Accessibility Problems
You've run your audit, you've got your list of web accessibility issues: now what? Where do you start? Before… (Read more)
Adriana Cacoveanu / Mar 27 '2020
Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 
Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your… (Read more)
Silviu Serdaru / Mar 25 '2020