Drupal Paragraphs Module & Flex Pages

One of Drupal’s greatest strengths is its variety of modules that help users and developers to customize the platform to their specific needs. As part of an ongoing series, we asked Duo team members to spotlight one module they think is a must-have for any Drupal site.

What does the module do?

The Paragraphs module gives clients the ability to design their own “flexible pages” without needing to know how to code. A “flexible page” — or “Flex Page” — is a page that has different components that can be arranged or rearranged in whatever way the site owner wants.

editing experience
Photo by Andrew Neel

Why is the module important?

When Drupal first launched, there was one body content field for site owners to insert all their content for a page. Technically, that site owner could put HTML into the field and customize it in a lot of ways. There was a lot of flexibility and a lot of opportunities for customization — if you knew what you were doing. There were also a lot of pitfalls that could unintentionally break things when content was coded incorrectly. Unfortunately, taking full advantage of the opportunities required advanced technical knowledge that many website clients haven’t spent the time to acquire.

As Drupal evolved, so too did the content editor. A new WYSIWYG interface that provided a Microsoft Word experience was introduced. Site builders were able to add fields to content types that would display in certain predefined ways, creating an important separation between the content itself and the markup that would style the content. While these increased the client’s ability to add well-styled content easily, there were still a number of downfalls. Perhaps the biggest complaint was that editors were locked into pre-defined fields for content, with little flexibility.

Enter Paragraphs. Paragraphs, much like other interfaces on platforms like WordPress or Squarespace, gives back-end users the opportunity to design complex page layouts with no coding necessary using Drupal. The design options are essentially limitless. You could create a Paragraph with just a single text field. You could have a Paragraph with only an image field, or an image field with a caption. You could create Paragraphs within Paragraphs, like a three-column row, with each column being its own Paragraph. You can define certain characteristics for your paragraphs, like background images or color options.

CTA 2 - UX Design & Drupal

UX Design Makes a Difference

3 Key UX Design trends in 2019

How can this module impact clients?

At Duo, we always talk about Drupal’s flexibility being one of its biggest differentiators, but Paragraphs truly brings that flexibility to a whole new level. This module gives back-end users the ability to create Flex pages the way they want with minimal input from outside vendors.

To be perfectly honest, we now include Flex pages for projects involving a new site build.. When we begin a new project, we talk to the client about the types of pages they think they’re going to need on their site. We then build a template of Flex pages for them to have at their disposal. Say, for example, that the client wants to introduce a series of video backgrounds at the top of a series of pages on their new site, but they don’t think they’ll have the videos ready until well after launch. We’ll take that information and go ahead and build that type of Paragraph for them, so that when the videos are ready, the client can go ahead and drop it into the page.

Our goal is to make the lives of our clients easier, and Paragraphs and Flex pages definitely helps do that.

What also is great about Paragraphs is that you can use them as templates and reuse them throughout your site. If the client mentioned above decided they wanted to bring the same type of video background into another section of the site, they would be able to do it in no time at all.

What are some examples of this module in action?

One of my favorite examples is the work we did with Figo Pet Insurance. In that instance, the company’s website content was actually in good shape when they approached us, but the structure of the site — particularly on the back end — just didn’t work. We gave the insurance agency a collection of FlexPages that gave them the flexibility and content ownership they were looking for.

Other examples of sites we’ve worked on that leverage the Flex pages are:

What are is one tip to make the module work even better for clients?

Keep the paragraphs you design generic. That way, it makes it much easier for you to be able to reuse them. Imagine you have a page that you’re designing. Theoretically, you could make one paragraph with every specific field that you want on the page included within it, but that’s not reusable. The more generic, the easier they are to reuse.

CTA 3 - Download Accessibility Checklist

How Accessible is Your Site?

Download our free accessibility checklist.