Implementing our main page structure

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>
 ...