Our main page structure can be considered anything below the global header and page title and anything above the global footer. In our case, the main page structure for our About Us page consists of three regions—Before Content, Content, and After Content. Currently, we are already printing the main content region, but we have yet to add our structural layout or the other two regions.

Begin by opening page.html.twig, located in our themes/octo folder, and replace the following markup section with the new markup.

Current markup

<main role="main" class="main">
  {{ page.title_bar }}
</main>

{{ page.content }}

New markup

<main role="main" class="main">
  {{ page.title_bar }}
  {{ page.before_content }}
  <div id="content" class="content full">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          {{ page.content }}
        </div>
      </div>
    </div>
  </div>
  {{ page.after_content }}
</main>

Make sure to save our changes and then clear Drupal's cache to ensure the theme registry has picked up our new layout.

While reviewing the markup earlier, we are adding the Before Content region followed by the structural markup for our main content and then our After Content region. These two new regions will allow our layout to be flexible enough to add block content above and below our main content area. We will be using both these regions as we continue to implement our theme.

In the meantime, let's preview our About Us page in the browser and compare it to our mockup. We want to make sure that we haven't lost any styling during our refactoring of markup.

In comparing our About Us page side by side with the mockup, we will note that our h3 and h4 elements are missing some CSS. Upon closer inspection, our design is expecting our Landing page content type to include a CSS class of landing. Including this CSS class would ensure that our h3 has the adequate bottom margin and our h4 would be colored gray and include the bottom border separating the Headings from the content.

So how would we go about adding a CSS class to our About Us page? Actually, we can create a Twig template for any specific node or content type using the same methods we have for any other page.

Creating a Node template

If we inspect the About Us page, we can determine exactly what Twig template we should use. By default, Drupal will use the node.html.twig template. However, we can create our own copy of the template based on the multiple file name suggestions. This will result in all of our Landing Page content types using this new template:

Begin by navigating to the core/modules/node/templates folder and following these steps:

1. Copy the node.html.twig template to our themes/octo/templates folder.
2. Rename node.html.twig to node--landing-page.html.twig.
3. Replace the content with the following markup:

      {% set classes = ['landing'] %}
   
      <article{{ attributes.addClass(classes) }}>
          <div{{ content_attributes }}>
          {{ content }}
        </div>
      </article>

4. Save node--landing-page.html.twig.

In the earlier-mentioned markup, we are adding the minimal structure that our landing page content type needs to output any fields that have been enabled. We also take advantage of Twig to create a variable named classes that allows us to add CSS class names to any existing classes that Drupal may be adding using the attributes.addClass() function. This is a simple technique, but one that will be used often to add CSS classes to our markup.

Make sure to clear Drupal's cache and then refresh the browser. If we take a look at the About Us page again, we will see that our H3 and H4 headings are styled to match our mockup.