Tragic Tragic Software & Cloud Solutions | San Diego • Seattle Blog

Drupal 8 Empowers Marketers to Build Dynamic Top-Level Pages With Ease

Reading Time:< 3 Min
Published:July 20, 2017
Last Modified:July 20, 2022

Google's search-rank preferences towards pillar-based content, combined with the growing design trend of creating long easy-to-scroll web pages broken up by sections, has led to an increase in the need for highly configurable, yet expertly designed top-level landing pages. A top-level page is any page that is at the top of your website navigation, or is the top-level of a section, and contains child pages underneath it. These pages need to promote the latest content from within their section, as well as give users a way to easy navigate deeper into their child pages. Creating top-level pages that pull in various types of content from the site is not a new approach, but in the past these pages had to be custom developed and would often be very difficult to manage in the admin. Creating new sections for the site, or changing what content showed on a particular top-level page would traditionally require both design and development work to accomplish.

Using Drupal 8's new Paragraphs module has allowed us to build highly configurable pages that our clients can use to make their own dynamic top-level pages with ease. Now marketers and site admins can easily build new dynamic pages, or update what content is displayed on existing pages, without needing the help of design or development teams.

The most common example of a top-level page that contains dynamic content that is often difficult to manage, is the average homepage. The latest design trends break up the homepage into sections to highlight and provide navigation for the rest of the content on your site. Since Tragic builds many large content managed (CMS) websites, we have many clients who want to be able to create pseudo-homepage landing pages for the top level of each section of their site. These section landing pages pull in various featured content from the child pages underneath them, and provide links for the user to dive further into the site. The top-level pages of a site are very specific in terms of both the design and the type of information that needs to be displayed for each page. Building a unique content types for each type of page is not a scalable solution, but we need a reasonable way to allow site admins to manage these dynamic pages.

A little history of building dynamic pages with Drupal

Creating pages like this can be a challenge in any CMS, but we are going to talk about how this experience has evolved for Drupal. In Drupal 6 and early Drupal 7, creating these pages was not too difficult. You could build a few different views or custom blocks and then use Context to place them on a particular page based on its path. However, making these pages easily content managed was a lot harder. Often in order to accomplish the design or functionality, a client would need to go to a few different sections of the admin in order to update all of the content on a single page. Many of these dynamic pages required custom work, and sometimes the content was not even manageable by the client.

As Drupal 7 evolved, we started developing some really cool techniques for allowing clients to create and manage configurable pages using Drupal's Entity Reference module. We used this module to allow clients to create and manage a dynamic top-level pages all in one place in the admin. We would configure different types of content blocks that the client could choose from, and then they could add and arrange those blocks as needed. This greatly increased the capabilities of the client, and also made their job of managing complicated top-level pages a lot easier. Admins could simply choose the type of block or entity reference that they wanted, and then could re-arrange the chosen blocks in any order on the page. Below is an example of what that looked like in Drupal 7. 

Entity Reference

Entity Reference, combined with the Fieldset module, allowed us to create complex field configurations referencing multiple fields or types of data with ease, so admins could easily create different blocks of content that pulled in related or featured content in a multitude of ways. We could even add additional fields to allow the admins to customize the design treatment of the content block. Once again pushing the capabilities of the admins and allowing them to create and manage new complex pages with ease.

It should be pointed out that none of these blocks use WYSIWYG layouts, or other hacky implementations to allow clients to create complex layouts. Instead the client is given fields to fill in content, or reference other content. Additional select boxes and checkboxes are used to provide design options regarding the color or layout of the block. The output of the fields are then sent to a custom theme which in in charge of controlling the display and style of the content. This allows complex pages to remain expertly designed and intuitively responsive, and allow our clients to focus on their content instead of forcing them to try and become designers.

The only downfall to this approach in Drupal 7 is that it was very heavy on both the admin load and the front-end markup. Larger pages were very load heavy, and the front-end was a bit unwieldy at times.

Drupal 8 

In Drupal 8, everything has become an entity, so creating cross-referenced content (for instance pulling in related blog articles, or referencing a specific block on a particular section landing page) is easier than ever. Additionally, the new Paragraphs module makes referencing other entities simple and light-weight. We are now able to take the approach we developed in Drupal 7 and make it smoother and more lightweight for admins in Drupal 8.

Drupal 8 Paragraphs

Building a configurable content type that leverages the Paragraphs module to reference other entities on the site empowers admins to build and manage complex pages on their own. It offers marketers an easy way to promote and cross-pollinate content on their sites, while also allowing for the easy creation of complex layouts that uphold the design and responsive integrity of your website.

Don't let your CMS hold you back! Contact us today to learn how our expertly crafted Drupal projects can empower your marketing team to grow your brand online.

#Scale View All