Skip to content

Build a homepage from a landing page

This tutorial builds a homepage on a site installed from Drupal, without any Display Builder recipes. You create a Landing page content type, build its display, set a landing page as the front page, then add a page layout that only takes over the front page.

Steps 1 to 4 alone build any landing page: stop there if you don't need a homepage.

It combines two builders: the page layout places the page's main content, and the node's own display fills it. See How displays nest.

By the end, visitors to / see a page you built entirely in Display Builder, while every other page keeps its current layout.

Prerequisites

  • A Drupal 11.4+ site installed with the Standard profile, and Display Builder installed. See Installation.
  • The core workflow of Build your first display: this tutorial reuses it and doesn't repeat every step.
  • An administrator account, or a role with these permissions (see Security model):
    • Administer content types (administer content types).
    • Content: Administer display (administer node display).
    • Administer page layouts (administer page_layout).
    • Administer site configuration (administer site configuration), to set the front page.
    • Use the Default Display Builder profile (use display builder default), to open the builder.

Step 1: Enable the modules

Enable the entity view and page layout sub-modules:

drush -y en display_builder_entity_view display_builder_page_layout
drush cache:rebuild

You can also enable them from Administration > Extend (/admin/modules).

Verify: drush pm:list --status=enabled | grep display_builder lists display_builder_entity_view and display_builder_page_layout.

Step 2: Create the content type

  1. Go to Administration > Structure > Content types > Add content type (/admin/structure/types/add).
  2. Enter Landing page as the Name. The machine name derives from it: landing_page.
  3. Select Save and manage fields.
  4. Add the fields your homepage needs. The title alone is enough to follow this tutorial.

Verify: Landing page is listed on Administration > Structure > Content types (/admin/structure/types).

Step 3: Build the Landing page display

This is the workflow of Build your first display, applied to the new content type:

  1. Go to Manage display of Landing page (/admin/structure/types/manage/landing_page/display).
  2. In the Display builder fieldset, pick Default under Enable with profile, then select Save.
  3. Select the Display builder button.
  4. From the Libraries panel, drag the Title and the components you want onto the Canvas, and configure them.
  5. Select Publish in the toolbar's State buttons.

Verify: after publishing, Publish is disabled until you change something again.

Step 4: Create the homepage content

  1. Go to Administration > Content > Add content > Landing page (/node/add/landing_page).
  2. Enter Home as the Title, keep Published selected, and select Save.

Verify: the node page shows the display you built in Step 3. Note its path, for example /node/1.

Step 5: Set it as the front page

  1. Go to Administration > Configuration > System > Basic site settings (/admin/config/system/site-information).
  2. Enter the node path, for example /node/1, in Default front page.
  3. Select Save configuration.

Verify: / shows the Home node, still inside the theme's usual page: header, regions and blocks from Block Layout.

Step 6: Create the homepage page layout

Go to Administration > Structure > Page layouts (/admin/structure/page-layout), select Add page layout, then:

  1. Enter Homepage as the Label.
  2. Keep Minimal Drupal page as the Starting point.
  3. Select Default as the Profile.
  4. In Conditions, open the Pages tab, enter <front>, and keep Activate on the listed pages selected.
  5. Keep Enabled selected.
  6. Select Save.

Verify: Homepage is listed on the overview page.

Note

You don't need a default page layout for this. The Homepage layout only matches the front page, and every other page keeps being built by Block Layout and your theme. See Default and conditional page layouts.

Tip

If the site already has other conditional page layouts, drag Homepage to the top of the list and save the order: the first matching layout wins.

Step 7: Build the page

Select Build on the Homepage row.

The Minimal Drupal page starting point placed what a Drupal page needs to keep working: breadcrumbs, status messages, page title, tabs, primary actions and the main content. The [Page] Main content source renders the Home node, with the display you built in Step 3.

Arrange the page around it: drag layout components from the Components tab, move the placed blocks into them, and add what the homepage needs, a header or a hero section for example.

Verify: the Canvas shows the Home node's content inside your arrangement.

Note

Minimal Drupal page leaves out your theme's page template, so the page is unstyled until you add layout components. To keep the theme's regions instead, place the Theme page (from active theme) source and put the main content into one of its regions. See Starting points.

Step 8: Publish and check the front page

  1. Select Publish in the toolbar's State buttons.
  2. Visit / in a private window, as an anonymous visitor.

Verify: the front page is built by your Homepage layout, with the Home node inside it. Any other page, /user/login for example, still looks as before.

Warning

A page layout takes over pages only once it is both enabled and built. Until you publish, the front page keeps its previous layout.

You built a homepage with Display Builder, without touching the rest of the site.

Next steps

  • Page layout: the reference for page layouts, including the default layout that takes over every other page.
  • How displays nest: which builder owns what on the page you just built.
  • Pattern presets: reuse the arrangement of your homepage sections elsewhere.
  • Configuring Display Builder: give content editors a profile with a restricted component library.