Exercise: Override the Main Page Template for Drupal 8, Drupal 9

Last updated January 8, 2021
Theming8.9.x/9.0.x

In order to change Drupal's default markup you need to override template files. The page template controls the overall layout of your theme, including the placement of regions. You should complete the exercise just following the written instructions and you can use the video to help if you get stuck.

If you want to try and do this on your own first you'll need to:

  • Override the currently used page.html.twig template file.
  • Modify the content of the file to include the regions defined in the theme's .info.yml file.
  • Wrap the regions in the page template file with HTML markup using CSS classes from Bootstrap to achieve the example layout below.

Illustration of layout with header, menu, breadcrumb, and higlighted regions all full width, content and both sidebars as 3 columns, and one column for each of the two footer regions.

Note: At the end of this exercise, you'll find a video walk-through of the solution.