The Power of Paragraphs

Posted by: Michael Girgis on Apr 12, 2017 9:54:47 AM in Development Services

I have to start with a disclaimer. This post is all about the Paragraphs module for Drupal. When I talk about the power of paragraphs, I’m talking about the module, which is an incredible asset for any Drupal website — I’m not talking about a grouping of multiple sentences.

OK, now that we have that out of the way, let me introduce you to Paragraphs. This module is a game changer when it comes to your website’s appearance, and it’s one that we’re using more and more here at Duo. Paragraphs provides a new way for site owners to create content on their website, and it unlocks an infinite number of new possibilities for how to design a site.
Here are five reasons why we think you should be using the Paragraphs module on your Drupal website.

  1. Adding content in Paragraphs is foolproof — seriously

    I know saying anything is foolproof is a lofty claim, but really, building out your content in Paragraphs could not be easier. Designers at Duo subscribe to the atomic design philosophy, which basically states that you don’t design a page — you design the individual elements on a page.

    That is exactly how Paragraphs works.

    When you add content in Paragraphs, you add it as a component. Then you piece together components to make a page. It’s that simple. Imagine stacking blocks to build a tower; Paragraphs is really the same thing. You define your text fields explicitly. You define your images explicitly. Then, you are able to lay things out in a nice, clean way. What Paragraphs does is eliminate the areas where a nontechnical user could go in and unintentionally mess things up.

  2. Paragraphs offers much more flexibility than a WYSIWYG editor

    I know a WYSIWYG interface — which comes standard as part of Drupal core — is easy to manage in theory, but there are significant design limitations.

    Let’s say you insert an image into your WYSIWYG content; it’s aligned to the right and it’s set at 300 pixels wide. You preview your page, and it looks great. The text wraps around the image, and the picture takes up the exact amount of space you wanted. But what happens when that page is being viewed on a mobile phone, instead of a desktop? That image, which fit so nicely on the larger screen, now floats in white space, and the text now falls below the image. It looks amateurish.

    Paragraphs prevents that from happening.

    In Paragraphs, you have separate fields for text, images, videos, and just about any other content medium you can think of. As a result, content items no longer have to compete with one another. Additionally, Paragraphs offers the flexibility to manage how a site looks on different screen size.

    Paragraphs can quickly move your site from amateurish to professional.

    Let’s take a look at a page I worked on for Verizon’s official website. The page is Verizon’s “Our company” page, and I think it really shows this idea of piecing content together and stacking it on top of each other.

    Take a look about one-third of the way down the page. There is a section about “Innovating for tomorrow,” and it features a text section on the left side of the page — including a call to action —and an image on the right side. That is a component. Now look just below that, and you’ll see that the “Building on our Heritage” section flip-flopped the “Innovating for Tomorrow” component.

    Here is another example. Toward the top of the page is a section of statistics, and toward the bottom of the page is a section about Verizon being proud of its principles and values. You would need to be a coding expert to create either of those layouts with a WYSIWYG editor, but in Paragraphs, developing that visual is painless.

  3. The number of design options available is infinite

    Several of my colleagues here at Duo have written about Drupal’s flexibility in the past, but with Paragraphs, you really are only limited by your creativity and your own imagination. Whether you want a parallax background or an accordion of content, a Pinterest-type gallery of cascading images or a standard slideshow, you can make it happen with Paragraphs.

    Here are some innovative examples:
       > http://paragraphs.site-showcase.com/demos/creme-caramel
       > http://paragraphs.site-showcase.com/demos/alpha-geometry
       > http://paragraphs.site-showcase.com/demos/journey-great-wall

    One common theme across these example sites that they generally separate the content into horizontal sections. For these types of section-by-section “landing pages,” Paragraphs offers a great way for content creators to easily add flexible sections. These types of layouts are very popular.

    The Creme caramel example also implements a parallax scrolling effect in some of the sections, another popular front-end feature.

  4. Paragraphs looks and works like Drupal core

    One thing that makes Paragraphs easy to use is that it features the standard Drupal interface to edit a page. There are other modules we’ve seen and used that could really be thought of as living in a different part of the Drupal ecosystem. By that I mean that they feature different interfaces that can be jarring to users — it means users have to learn one more interface, and that’s not user-friendly.

    With Paragraphs, it is straightforward. You don’t have to learn a new interface because it resembles what you’ve already been working with.

  5. You can reuse Paragraphs components on new projects

    We’re just starting to experiment with this at Duo, but it has the potential to save hours of work time. Paragraphs allows you to export the code for individual components or complete pages, and then import that same code to a new or pre-existing project.

    For example, I just reused code that a colleague wrote for a new project I’m working on, and it gave me a huge head start on my project. I’m confident my colleagues and I will be taking advantage of this aspect a lot moving forward.

    As you can see, we’re excited about the potential Paragraphs bring to Drupal websites. What about you? Are you using Paragraphs, or have you seen creative ways websites have taken advantage of the module? If so, or if you have questions about Paragraphs, let us know.
Let's Talk!