How We Built This Site

A collection of articles, podcasts, modules, and other information about how we recreated Lullabot.com on Drupal 8 using the new core Layout Builder module.

Wall of Tools

Lullabot has been around the Drupal community since the beginning. Every few years, we rework our website using the latest tools available. In 2015, we built a fully-decoupled front end using Drupal 7 as the back end of the site. This year, we decided to recreate the site as a monolithic Drupal 8 site, exploiting the capabilities of the new Layout Builder functionality.

goals for this project

Give the editor total control of landing pages, with the ability to create new one-off landing pages on-demand.

Contribute back wherever possible, as Drupal modules or code shared in our public GitHub repo.

Build a site that is as simple and out-of-the-box as possible, to minimize maintenance requirements.

Articles, podcasts, and presentations

Seattle skyline

DrupalCon Seattle 2019

Is the Drupal 8’s new Layout Builder UI the holy grail of editor user experience?  We had some successes and learned some lessons. We’ll talk about some of them.

Modules we contributed back

Block Blacklist

Remove unnecessary blocks from the block list for better system performance.

Views Layout

A simple module to arrange Views results in a grid defined by a layout.


Podcast

Create a Podcast feed for your site using Views.

Quicklink

Enable faster subsequent page-loads by prefetching in-viewport links during idle time.

Key Contributed Modules

  • Chosen - turn any select list, like the list of classes we use in layouts, into a handy tags-style selector.
  • DropzoneJS - an alternative to a simple file upload widget which allows us to drag and drop files into a landing zone.
  • Inline Entity Form - allows us to embed one entity form inside another so we can create a referenced entity and select it in one step.
  • Entity Embed - embed references to related content inside a WYSIWYG editor.
  • Entity Usage - add a tab to each entity showing where it has been referenced by other content.
  • Twig Tweak - provides additional Twig options and functions.
  • Warmer - improve performance by warming the cache.
  • Webform - create customized forms and manage submissions.

custom code examples

Block Dashboard

Creates a view that displays an overview of both reusable and nonreusable custom blocks, and where they are used.

Custom Layouts

Adds custom layouts to Layout Builder, which contain options to add css classes and titles to each section, also change some category names and block titles.

Entity Browser Block Layout

UX and CSS improvements to make it easier to use Entity Browser blocks in Layout Builder.

Ease of use

To enable our marketing team to easily build landing pages, we implemented Drupal’s new experimental Layout Builder module. This enables a slick drag-and-drop interface to quickly compose and control layouts and content.