Task 9: Build the Volunteering landing page
https://england.shelter.org.uk/support_us/volunteer
Add a new content page, add your title, set your slug and put your page into Test and demos in the tree
Look at the live page and set the content width accordingly
You’ll be using the brand hero component and you’ll need to add a CTA using the primary colouring into it
Because this is a primary brand hero, you’ll need to set it as such within the hero component, while also removing any overlay padding
Back in the page entry, you’ll need to start adding in content straight into the Assemblies field
Add a Component – Byline banner. To make the red brush mark appear, you’ll need to choose Yes on the Decorated toggle
Use a Component – Two Column Generic Block for the next section (general rule is to avoid the similar sounding Component – Two column text and image block as this is an older iteration of the same component)
You’ll need two more Component – Two Column Generic Blocks to create the Ways you can volunteer section. For each block of content, all content - the heading (H2), the embedded image, the lower copy and hyperkline – goes into the left or right intro body copy field.
For the FAQs, use another Component – Two Column Generic Block. This time you only need to use the left column copy field. To create each FAQ point, click embed > entry > create new Component – Accordion. You will need to embed three of these, one after another in that lefthand column.
For the View all FAQs link, click embed > entry > create new Component – Inline callout. This should be embedded below your final FAQ with a line of spacing between.
Last up is the Assembly – Cards Links Banner – have a go at making one from scratch but remember you can often use existing content cards to personalise a banner that mixes and matches content already being used in other content card banners
Add the live page’s existing metadata component by searching through the library and preview your page.