Our website has several global components that were present on our homepage that don't currently exist on our interior pages. One such item is the global header, which consists of the utility menu, logo, main menu, and search form block.
To add this section to our template, we need to simply copy the footer markup from the page--front.html.twig template:
- Open
page.html.twigand delete the entire contents. - Open
page--front.html.twigand copy the following markup:<footer id="footer" role="contentinfo"> <div class="container main-footer"> <div class="row"> <div class="col-md-4"> {{ page.footer_first }} </div> <div class="col-md-4"> {{ page.footer_second }} </div> <div class="col-md-4"> {{ page.footer_third }} </div> </div> </div> <div class="footer-copyright"> <div class="container"> <div class="row"> <div class="col-md-8"> {{ page.footer_bottom_left }} </div> <div class="col-md-4"> {{ page.footer_bottom_right }} </div> </div> </div> </div> </footer> - Paste the markup into
page.html.twig. - Save
page.html.twig.
Make sure you clear Drupal's cache and refresh the About Us page within your browser. Our footer is now in place, and it is functioning as we would expect.
We have successfully completed theming our About Us page and in the process created our interior page template. The remaining pages we will be creating can take advantage of our new page.html.twig template, but before we wrap up this lesson I want to address one more item.