![]() Of course, they are still great and relevant but the Layout Builder is a built-in solution that is created with a focus on user-friendliness. The module is meant to replace the developers’ favorite page building tools such as the Paragraphs, the Panels, the Panelizer, or the Display Suite contributed modules. By content pages we do not mean specifically content nodes - the module is used for all kinds of structured, or fieldable Drupal entities. Welcome to take a look at how the Layout Builder works! What is the Layout Builder module in Drupal 8 and 9?ĭrupal’s Layout Builder module is a drag-and-drop core tool for creating the layout of content pages on Drupal websites. Since then, it has become stable and enriched with more capabilities for both editors and developers. The Layout Builder jumped into the Drupal core in version 8.5 as an experimental module. Open up package.Today, we will discuss one of the powerful tools that transformed authoring experiences in Drupal 8 and 9. In the sub-theme create another file called and add the following to it: let mix = require('laravel-mix') Ĥ. Then install Laravel Mix with the following command: npm install laravel-mix cross-env -save-devģ. Just follow the prompts and you should end up with a package.json file.Ģ. Go into your sub-theme and run the following command: npm init -y We’ll use Laravel Mix to compile Sass which I find the easiest to set up.īefore you begin, make sure you download and install Node.js and you can run the npm command.ġ. You’ll need to add the correct blocks into the right regions or the site will look broken. Once the sub-theme has been generated go and install and set as default.Ĭonfigure the settings like the image below then click on “Save configuration”. The only way I was able to get this library was by installing Drush using Composer, composer require drush/drush. NOTE: In the video, this step didn’t work because I got a fatal error because I didn’t have the Symfon圜omponentFilesystemFilesystem library. Enter in details into the form, then click on the Create link. Click on Settings, and scroll to the bottom and expand the “Subtheme” section.ģ. We’re going to look at using it via the settings form.Ģ. The Bootstrap 4 theme allows you to create a sub-theme in two ways using a script or via the settings form. lando init -source cwd -recipe drupal8 -name bs-build -webroot web -full Download Modules and ThemesĬomposer require drupal/ds drupal/field_group drupal/bootstrap4 drush/drush Install Modulesĭrush en ds field_group media_library layout_builder Sub-theme Generate Sub-theme In this video, we used Lando for our local environment. composer create-project drupal/recommended-project FOLDER_NAME -no-interaction Set Up Lando Create Card Row Section in Layout Builderįirst go download Drupal using Composer.Enable Layout Builder “Basic page” Content Type.Get a copy of the built site from GitHub. So here are the show notes for the video. ![]() We’re not using paragraphs in this video. We built the three-card components using a custom block type and layout builder. In this first video, we’re focusing on the three-card components below the homepage carousel. To help with the build process we’re going to follow a template and in each live stream session, we’ll build a component from the template.Īnd the plan is to have a semi-complete website after a few live streams. Drupal Live Site Build (Part 3) – Create Bootstrap Grid using Views and Display Related Contentīelow are the show notes for the first video in a series on building a Drupal site using layout builder and Bootstrap.Drupal Live Site Build (Part 2) – Create Layout Builder Section, Bootstrap Carousel.Drupal Live Site Build (Part 1) – Project Set Up, Build Bootstrap Card Component using Layout Builder.01:48:30 Add custom styling for card component.01:20:32 Switch on Field Templates in Display Suite.56:33 Configure Layout Builder on “Basic page” content type.52:28 Create card block type and attach fields.Don’t forget to subscribe to our YouTube channel to stay up-to-date.
0 Comments
Leave a Reply. |