Our footer is a little different to what we have been implementing so far. The footer consists of multiple regions and custom blocks to easily match our mockup, and will mean us following these steps:
- First, we will need to create five custom blocks for our Newsletter, About Us, Contact Us, Copyright, and Social Icons content. Once the blocks are created, they will need to be assigned to their respective regions.
- Finally, we will need to refactor the markup in our footer to accommodate the various Twig variables to print out each region.
We will begin with creating the five custom blocks as well as assigning them to the regions they need to be placed in. This will be somewhat repetitive, but is needed in order for us to complete our footer. We will start by navigating to the Block layout page at /admin/structure/block and following these steps.
Newsletter block:
- Click on the Place block button in the Footer first region.
- Click on the Add custom block button.
- Enter a Block description of Newsletter.
- Select HTML No Editor from the Text format dropdown.
- Add the markup located in the
Chatper06/start/content/Newsletter.txtfile to the Body field. - Click on the Save button to proceed to the Configure block screen.
- Choose Footer first from the Region field.
- Click on the Save block button.
About Us block:
- Click on the Place block button in the Footer second region.
- Click on the Add custom block button.
- Enter a Block description of About Us.
- Select HTML No Editor from the Text format dropdown.
- Add the markup located in the
Chatper06/start/content/AboutUs.txtfile to the Body field. - Click on the Save button to proceed to the Configure block screen.
- Choose Footer second from the Region field.
- Click on the Save block button.
Footer Contact block:
- Click on the Place block button in the Footer third region.
- Click on the Add custom block button.
- Enter a Block description of Footer Contact.
- Select HTML No Editor from the Text format dropdown.
- Add the markup located in the
Chatper06/start/content/FooterContact.txtfile to the Body field. - Click on the Save button to proceed to the Configure block screen.
- Enter a title of Contact Us in the Title field.
- Choose Footer third from the Region field.
- Click on the Save block button.
Copyright block:
- Click on the Place block button in the Footer Bottom Left region.
- Click on the Add custom block button.
- Enter a Block description of copyright.
- Select HTML No Editor from the Text format dropdown.
- Add the markup located in the
Chatper06/start/content/Copyright.txtfile to the Body field. - Click on the Save button to proceed to the Configure block screen.
- Uncheck the Display title checkbox.
- Choose Footer Bottom Left from the Region field.
- Click on the Save block button.
Social Icons block:
- Click on the Place block button in the Footer Bottom Right region.
- Click on the Place block button next to the Social Icons block. We don't need to recreate this block since blocks are now reusable.
- Uncheck the Display title checkbox.
- Footer Bottom Right should already be selected for us from the Region field.
- Click on the Save block button.
We have successfully added all five blocks and assigned them to their respective regions. Now we just need to refactor the markup for each region, and we should be all set.
We will be refactoring the markup for each section of our main footer by replacing the static markup with the Twig variable for each region. We should be comfortable with this process by now, so let's start.
Begin by opening page--front.html.twig and locating the main-footer section of our markup. Within the main footer, we will see individual sections of content for each of the blocks we just created.
Locate the following markup and replace the content between with the Twig variable that represents the page region.
Current markup
<div class="col-md-4">
... content ...
</div>New markup
<div class="col-md-4">
{{ page.footer_first }}
</div>Locate the following markup and replace the content between with the Twig variable that represents the page region.
Current markup
<div class="col-md-4">
... content ...
</div>New markup
<div class="col-md-4">
{{ page.footer_second }}
</div>Locate the following markup and replace the content between with the Twig variable that represents the page region.
Current markup
<div class="col-md-4">
... content ...
</div>New markup
<div class="col-md-4">
{{ page.footer_third }}
</div>With our markup now refactored, if we look at the main-footer section of our homepage, the complete markup should look like the following:
<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>Make sure to save our changes and then clear Drupal's cache. If we browse our homepage, we should see our static content has been replaced with the three custom blocks.
Now, let's refactor the two remaining blocks of content by locating the footer-copyright section of our markup. Within the footer copyright, we will see individual sections of content for the two blocks we just created.
Locate the following markup and replace the content between with the Twig variable that represents the page region.
Current markup
<div class="col-md-8">
... content ...
</div>New markup
<div class="col-md-8">
{{ page.footer_bottom_left }}
</div>Locate the following markup and replace the content between with the Twig variable that represents the page region.
Current markup
<div class="col-md-4">
... content ...
</div>New markup
<div class="col-md-4">
{{ page.footer_bottom_right }}
</div>With our markup now refactored, if we look at the footer-copyright section of our homepage, the complete markup should look like the following:
<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>Make sure to save our changes and then clear Drupal's cache. If we browse our homepage, we should see our static content has been replaced with the two custom blocks. Our footer is complete, and should look like the following image:
