Drupal 7 layout builder solution for International Alert

There is understandable excitement in the Drupal community at the moment about the new wave of content creation/editing tools available in Drupal 8 which give website editors much greater flexibility when it comes to creating different page layouts via the Drupal CMS, without the need to resort to HTML code or additional content types/templates.

Drupal 8 now ships with Layout Builder as core and the Drupal content editing and page building experience can be further transformed with tools/modules such as Elementor, Glazed Builder and the new Gutenberg Editor for Drupal.

However, for those with Drupal 7 sites, the options are somewhat more limited. The Panels module - as well as Drupal distributions such as Panopoly - have paved the way for a more flexible editing experience in earlier versions of Drupal. For some clients however, we've found Panels to be somewhat overkill (and over complicated) for what they want to achieve with their page layouts.

We've therefore been working with a number of clients in recent months on flexible but easy-to-use tools to provide more options and variety when building website pages in Drupal 7, but without adding unnecessary complexity to the process.

One such example is the recent work we've completed for our client, International Alert, a peace building charity working with people around the world directly affected by conflict to build lasting peace.

Example page built using the Drupal 7 flexible layout tools developed for International Alert

The International Alert team were looking to be able to add more variety to a number of pages of the website such as key landing pages for the website as well as special campaign and feature pages. 

Utilising a number of contributed Drupal modules, primarily Paragraphs, along with custom code and theming, we've produced simple but effective tools which enable the creation of pages with various layout options. 

Each page is built up, row by row, by selecting the layout you wish to use for that row. Each layout contains specific text, image and file fields to enable the site editor to easily build up the content for that section, with additional options to give precise control over how the section will look. Rows can also be drag and dropped to reorder them as required. 

Additional tools include simple carousel creation, a call-to-action builder and easy YouTube video embedding. Editors can also add Drupal Views to a page too, choosing from simple pre-filter options to pull in relevant content of the correct type, category etc.

Another flexible layout page example

The team at International Alert have already put the new tools to good use in rebuilding some of their most visited pages of the website and are also utilising the functionality for a series of special feature pages too. Examples include:

To find out more about this project and how we could help to deliver flexible layout builder tools for your Drupal 7 site, please get in touch