Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Building Landing Pages faster

Parent Feed: 

The paragraphs module makes it easy to arrange content on your site, but it limits your creative freedom. First, we’ll explain how we use the module and then why creative constraints are actually a good thing, because they make you more productive, and paradoxically help you be more creative...

What is the Paragraphs Module ?

Previously, we listed some tips on targeted web content. Here, we want to share what we’ve learned building landing pages using the paragraphs module in Drupal.

“The Paragraphs module comes with a new "paragraphs" field type that works like Entity Reference’s. Simply add a new paragraphs field on any Content Type you want and choose which Paragraph Types should be available to end-users. They can then add as many Paragraph items as you allowed them to and reorder them at will. Paragraphs module does not come with any default Paragraph Types but since they are basic Drupal Entities you can have complete control over what fields they should be composed of and what they should look like through the typical Drupal Manage Fields and Manage Display screens.” (drupal.org)

Paragraphs can be anything you want, e.g. an image with a text block, a headline with a call to action, a slideshow. Paragraphs are predefined and you can use them independently from one another.

Developers create paragraphs depending on the customer’s needs. The number of paragraph types is usually limited to increase workflow efficiency, but can be extended at will.

We’ve been using paragraphs to create long form landing pages, with the kind of single page responsive layouts that gained prominence in the startup world. With this technology it is quick and easy to set up layout formats starting from your textual content.

For Pronovix.com, currently we use these paragraph types to construct a landing page:

Paragraph types for pronovix.com landing pages

Let’s take a closer look at three examples: 1. “Hero shot with a call to action”, 2. “Three Column Benefits”, 3. “Tips”.

  1. The paragraph type “Hero shot with a call to action” helps you to grab the attention of your readers and to activate them. For this paragraph, we can fill out the following fields:
  2. Example of a Hero shot with a call to action paragraph from the WalkHub landing page.
  3. The “Three Column Benefits” paragraph type shows three advantages of your product side-by-side. The benefits are brief and to the point, in three columns, combined with catchy icons. For pronovix.com, we’ve built a bootstrap icon library into our paragraphs implementation, you can use any of the glyphicons without having to search and upload them into the site. This single feature saves us a lot of time.
  4. Example of a Three Column Benefits paragraph from the WalkHub landing page.
  5. When we select “Tips” we can combine an icon with a headline and a short text to point out specific characteristics of the product. Within this paragraph type we have an icon field - a headline field - a text field. The icon field contains entity references. We can choose icons from the already uploaded icon collection, but it is also possible to create a new icon entity and add it to the existing collection.
  6. Example of a Tips paragraph from the WalkHub landing page.

Intelligent Constraints = Increasing Efficiency

When we got the green light for our Apigee Developer Portals Workshop, there were only three weeks left before the event. We had to construct a landing page quickly to be able to announce the workshop in time.

By then we already had our workflow refined for creating a simple landing page:

  1. Collect and organize the relevant information, then fill out our landing page content form.
  2. Pick a paragraph type for each chunk of content on the fly.
  3. Add the design elements required by each paragraph form.
  4. Rearrange/change/edit paragraph entities if needed.

Once we have this, creating the actual landing page is mostly filling forms: the configuration options and required fields for each paragraph type are predefined. Just enough to create a visually pleasing result - all the while dramatically shortening the process by limiting the options, leaving the focus on content. Because of this workflow, all parties involved are less reluctant to run further iterations on the copy and the layout/design elements.

Limited options that lead to a creativity boost

With too many options to choose from, people find it very difficult to choose at all (The Paradox of Choice - TED Talk). Embracing our constraints (Creative constraints can lead to amazing work, Boosting creativity through constraints, Embracing constraints) may indeed boost our creativity. Though even MacGyver would need more than his Swiss knife to make a landing page, the principle remains… Having less options sharpens your mind: it makes you efficient.

Combining possibilities and limitations

The paragraphs module...

  • … helps you to focus. Too much choice can paralyze you - the module guides you through your ideas.
  • ... will help you to meet that deadline.
  • ... fits into the corporate style guide. This saves editing time and fastens the publication process.
  • ... helps you to be efficient.

At Pronovix, we use the paragraphs module almost every day to create new web pages. We continuously evaluate and improve our landing page creation process: we were already able to shorten the feedback process and reduce the number of editing rounds before publishing. Two remarks, though. 1. The paragraphs module claims to be giving back the power to the content editors. But without developer skills editors are not able to change the paragraph types to meet their needs themselves. Close co-operation between developer and editor is still necessary to define and customize the paragraph types that will be available to editors on your site. 2. Post-editing could use a handier interface. Now several of the same paragraph types on one page are indistinguishable in edit mode unless unfolded.

We are working on an audience-focused landing page canvas (that we will publish under a Creative Commons license in the near future) to complement the form we published earlier. To be continued…

Do you also use the paragraphs module? Leave us a comment!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web