Adding Backgrounds to Layout Builder Sections

The modules we have looked at so far allow for adding predefined styles by adding classes to the sections, regions, or blocks (AKA components).

We looked at how to add classes to sections and regions, in part one, Styling Layout Builder Pages in Drupal, and in part two Styling Layout Builder Components in Drupal, we learnt how we can add classes to components, the build blocks of Layout builder.

What we learned is great and allows developers and designers to design, build, and configure Layout Builder themes based on design systems. The themes created should have enough flexibility built-in to get variations but also keep the overall look of the individual pages on brand or within a certain style; exactly what we want.

As pointed out in the get started article on Layout builder, layout builder isn't a no-code website builder; it is a page or layout builder, so having restrictions is great. However, sometimes you will want to allow more flexibility, especially when adding backgrounds on sections, and this is where the Layout Builder Backgrounds comes in. 

Layout Builder Backgrounds

https://www.drupal.org/project/layout_builder_backgrounds

The Layout Builder Backgrounds module enables you to add a background colour and an image background to a section. 
It add a form to the configure section UI as illustrated below. 

Image

Adding Gradients to Layout Builder Backgrounds

Even though this is great, I found it limiting for what I wanted, so I have opened a feature request and added a patch and issue branch.

The new feature I have added enables the use of gradients. It is one field where you can add a CSS gradient. You can add these by themselves, or if you add a background image, the gradient is placed on top of the image. You can see from the following image the UI hasn't changed much, but it allows for much more flexibility.

Image

This is an excellent addition; you can use the patch or check out the issue branch from the previous link. 

If you are using composer to manage your site using the patch is easiest. You can  add this line to you composer and run install.

"patches": {
            "drupal/layout_builder_backgrounds": {
                "Add Gradient": "https://www.drupal.org/files/issues/2024-12-12/layout_builder_backgrounds-3493451-1.patch"
            }
        },

You also need to have the cweagans/composer-patches package installed and add a few more lines to you composer file if you haven't set it up for adding patches. More detail on the full process on Drupal.org.

That's it for this Layout Builder Backgrounds module. It's a good module for adding background colours, images, and CSS gradients to your sections. You can check the demo page I created to see an example of some gradients.

Layout BG Module

https://www.drupal.org/project/layout_bg

There is also the Layout BG module for adding backgrounds. I haven't used the Layout BG module, however, it uses a different approach, it allows you to add any component in the background. This opens up the ability to add video backgrounds or SVG animations, for example. So if you want to add more than a simple colour,  image, or image CSS gradient, you should check out the Layout BG module.

Summary

In this article, we have looked at how you can add backgrounds to your Layout Builder sections. 

We first looked at the Layout Builder Backgrounds module to add custom colours and images. Then we looked at how the to add gradients as well by patching the Layout Builder Backgrounds module. 

Finally, I introduced the Layout BG module and how this can add pretty much anything to the background of a section.

With the few modules I have introduced in the Styling Layout Builder section, a good design and design system, you can set up a fairly powerful page builder for landing pages or articles or any other type of website page you want to make.

I hope this was useful. If you are looking to get better at designing and developing website using amazing tools such as Drupal and Vue.js. Be sure to sign up for my dev design newsletter below. 

Until then, adios, and keep creating.