Creating Landing Pages with Drupal 8 and Paragraphs

Aug 4, 2016 · by Suzanne Kennedy Dergacheva

As Drupal themers and site builders, we often have to look for creative solutions to build landing pages. Landing pages are special pages often used for marketing campaigns, to attract particular audiences, or to aggregate content about a certain topics.

We want lading pages to be attractive and entice users to click, but we often also need them to be flexible so we can communicate different things. We want landing pages to look great the day we launch a website, but also to be flexible so that a site admin can change the content or add a new page and it still looks great.

Landing page layout

Creating Landing Pages with Paragraphs

There are many ways in Drupal to build landing pages. In this blog post, we'll look at a simple solution using a landing page content type and the Paragraphs module. Using this technique, we can create a template for a landing page content type that we can re-use every time we want to add a new one to our site.

First of all, you'll need to add the Paragraphs and Entity Reference Revisions modules. These will add a new entity type on your site called "Paragraphs". Even though the module is called paragraphs, you can use Paragraphs to build all different types of things: banners, buttons, advertissements, calls to action. Each of these would be a separate paragraph type with different fields.

Go to Structure > Paragraph types. Paragraph types are like content types. You can add fields to them, control the display, and theme them. 

The interface for adding paragraph types

To get started with our landing page, you can add a Paragraph type called Call to Action. Most calls to action need to display a title, text, link, and an image. So you can add these fields to the Paragraph type. Note that unlike with content types, you do need to add a title field.

Paragraph type manage fields interface

Create a landing page content type and a field of type "Paragraph", with the label "Calls to Action". Then, in the settings, you need to select which Paragraph types you want to reference. 

If you had more complex landing pages that need to display different components, like videos, ads, calls to action, galleries, you could create a paragraph type for each of these and then allow the user to reference more than one type. This is part of what makes the Paragraphs module such a powerful site building tool.

Reference types for the paragraph field

Now all you have to do is populate your landing page content type with some content and test out the results.

Interface for adding calls to action on the landing page content type

Once you have the content added, the only thing that's left is to fix up how the calls to action are displayed. You can use the Manage Display settings for the Paragraph type to update the field order and formatting.

Paragraph type manage display interface

And you can use standard theming techniques (adding CSS and overriding templates) to customize the look of the calls to action visually.

If you're interested in hands-on training on more topics like this, our Drupal 8 Site Building course covers techniques for using the Paragraphs module, building out landing pages, and many other Drupal site building topics. Or sign up for our training mailing list to find out about our webinars on all sorts of Drupal topics.

Suzanne Kennedy Dergacheva

About the author, Suzanne Dergacheva

As co-founder and front-end lead at Evolving Web for the past 9 years, Suzanne is responsible for defining and implementing both the information architecture and the visual elements of websites and web applications. She manages the creation of Drupal sites from module selection and configuration to integration and custom development.

More Articles by Suzanne Dergacheva »

Featured Articles