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? 

Recommended Stories

How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make
What can you do to speed up your Magento 2 store on mobile devices? For let's face it: Magento 2's “ecosystem” of… (Read more)
Silviu Serdaru / May 23 '2018
How to Integrate Alexa with Your Drupal 8 Website: A Step-by-Step Guide
Just imagine: a user asks Amazon Alexa to read out loud to him/her the headline of your latest blog post! Or maybe… (Read more)
RADU SIMILEANU / May 18 '2018
When Should You Not Consider Using Node.js? 3 Unsuitable Use Cases
It's undebatable: Node.js has practically laid the foundation of the real-time web! The real-time, two-way… (Read more)
RADU SIMILEANU / May 17 '2018