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:
page.html.twig
and delete the entire contents.page--front.html.twig
and copy the following markup:<footer id="id2245footer" 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>
page.html.twig
.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.