Note: You’ll see three sections in the page block editor – Top Components/Main Components and Bottom Components. Use Top components for your head and possible a Call to Action component if you’re using one. Putting components in the Top or Bottom positions means they go full page width, whereas the Main Component section is pre-set for 

The rest of your content should go in the Main Component section. This is set to a pre-set content width.

The Content (WYSIWYG) block component is your main content block for text on the page. It stands for What You See Is What You Get because you can see how your text will format before publishing.

• Bullets are automatically styled on the page.
• It’s a rich text editor so you can insert hyperlinks, bullets, numbered lists.

Some general pointers for adding content:

• Click ‘Add component’ to start building content using the block editor. Each component is one block, and you create content by stacking blocks on top of each other.
• Blocks appear on the page in the order you lay them out in the block editor.
• Click and drag blocks to reshuffle the order they appear.
• Be careful not to start adding components in the Top Component section, it’s easy to do and annoying if you’ve added a lot of components as they can’t be dragged into the Main Content section.
• You can duplicate content blocks using the copy icon in the top-right-hand of the block.
• Minimise or maximise content blocks using the drop-down icon on the right-hand side of the block.
• Remove a block you don’t want anymore using the ‘-‘ icon.
• Use the ‘Update’ button to save your progress.
• Use the ‘Preview’ button to check what your page looks like before publishing.
• When ready, publish the page.
• If appropriate, select the correct ‘Parent’ page under the Page Attributes box on the right-hand menu. Parent pages are the main page that a number of subpages (or ‘child pages’) belongs. So for example, on our website ‘Our Networks’ would be the parent page, and each of the individual pages for each network would be child pages. If unsure, speak to Eddie.

Id interdum velit laoreet id donec ultrices tincidunt arcu non. Eget gravida cum sociis natoque penatibus et magnis dis. Imperdiet sed euismod nisi porta lorem. Nulla facilisi nullam vehicula ipsum a. Sit amet purus gravida quis blandit turpis cursus in. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Lobortis elementum nibh tellus molestie nunc.

1. Feugiat in fermentum posuere urna nec. Ipsum a arcu cursus vitae congue mauris.
2. Blandit volutpat maecenas volutpat blandit aliquam etiam.

Use Heading 2 to break up text

When you use Heading 2 with clear headings about each section, Google is able to better understand what the page is all about, and it  is good for our Google rankings, meaning we’re more likely to appear on page one of search results. Using good keywords for headings is another way to improve our search engine optimisation. Speak to the comms team if you have any questions and we’ll help you make sure your page is laid out in a way that makes sense to Google.

Feugiat in fermentum posuere urna nec. Ipsum a arcu cursus vitae congue mauris. Blandit volutpat maecenas volutpat blandit aliquam etiam. Faucibus a pellentesque sit amet porttitor eget dolor. Hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Proin fermentum leo vel orci.

Heading 3 is useful for sub-sections in longer content pages

Keep Heading 3 headers clear and relevant, but you don’t have to worry so much about keywords. H1 and H2 are your main tools for optimising the page for Google. That, and quality content on the page.

Sit amet purus gravida quis blandit turpis cursus in. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Lobortis elementum nibh tellus molestie nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Eget gravida cum sociis natoque penatibus et magnis dis. Imperdiet sed euismod nisi porta lorem. Quis blandit turpis cursus in hac habitasse platea dictumst quisque.

You’ll notice a navigation bar on the left-hand side of the page. This is called ‘Anchor Navigation’, where you can quickly skip to the section of the page using an internal hyperlink.

Use this if you’re laying out some long-form content that has a number of sections to help people find the content they’re looking for easily.

To set this up you need to do a couple of things:

1. In the Main Components section of the block editor, add a ‘Content Navigation’ component at the top of your stack of components. You only need to do this once
2. After that, you can add individual ‘Content Navigation Anchor’ components to act as H2 headers throughout the page. Once an anchor is added, it’ll automatically be added into the left-hand anchor navigation menu.
3. In the Content Navigation Anchor, make sure that ‘Include in Anchor Links’ switch is toggled to Yes if you want it to appear in navigation.
4. Note: The anchor components are only for headings, you’ll need to add WYSIWYG text blocks either side of it. You’ll notice the H2 above (Use H2 to break up text) doesn’t appear in the navigation menu. That’s because it was inserted into the body of a WYSIWYG text block, rather than being inserted as a Navigation Anchor component.

The above image is a standard image using the Media component. When you add images using this component, it will automatically size them to the width of the text on the page, so try to use landscape images where possible to avoid images looking a bit weird and taking up too much space on the page.

You can also add videos using the Media component, see below. You have the option to upload a video direct via the media library, or to use an embededd video. This just means the video is pulled through from YouTube or Vimeo using a url. We strongly advise using an embedded video as this is better for page loading times. If you need support having video content uploaded to YouTube or Vimeo, please speak to the comms team.

The Letterbox Image content block differs from a standard Media content block in that the image stretches across the full width of the page. For this reason,  landscape images are especially recommended. Square or portrait orientation photos are likely to look odd using Letterbox component.

The Content with Media block is a great way to highlight key content for your page. This could be a publication, a resource, or a specific page you want to drive people to. To use the Content with Media block:

• Add the component to your stack.
• Choose the content alignment using the toggle button to determine if the text will appear on the left-hand side or right-hand side.
• Use the Buttons tab to add up to two buttons for hyperlinks. Could be call to actions/pdfs/separate pages, whatever.
• Add a striking image under the ‘Media’ tab. Also got the option to add video for more dynamic content. Again, embedded video recommended.
• You can also stack multiple Content with Media blocks on top of each other with alternating alignments to create a striking page layout.

Accordions are a great component for embedding content within clear headings. They use a dropdown function so that content is hidden until you click to expand it. Use cases could include FAQs for delivery of youth work or specific funds; individual outcomes or indicators for the Youth Work & Skills Framework; adding in explainers to longer-form content. Very useful and flexible though.

To use them, add the component into your stack and add a row for each dropdown you want included. Enter the text you want to appear as a header into the title field, and use the rich text editor in the Description field to enter all the content you want to appear in the dropdown. You can even add images to an accordion, but I would recommend against this as it looks untidy.

Add a link in the right-hand column to add a button.

The Stats content block is a lift from the Impact Hub page. Brilliant tool for breaking up content, brightening up the page and pulling focus on the impact of youth work.

You could use these on project pages like #IWill, #YouthVIP, Digital Youth Work etc to demonstrate impact, or also good for writing content about the impact of a fund. We’ve also got the option to build specific impact hub pages for each thematic area of youth work eg youthlink.scot/impact/youth-work-and-schools etc.

To use the Stat content block:

• Add the main headline figure or statistic to the value field
• Add a short line about the figure, or finish the sentence the stat features in, e.g. ‘90%’ would go in the Value field, and ‘of  young people reported improved confidence after taking part in the project.’ would go in the Label field.
• Add a link to the publication or source of the statistic or impact quote. This helps drive traffic to our ‘legacy’ resources and keeps them in the public eye so to speak.
• You’ve got the option to choose colours from our primary and secondary colour palette to add vibrancy to the page. Mix things up to keep content engaging but try not to go absolutely hog wild and blind people.

Note: When adding links to resources using the Stat content block, make sure you check the ‘Open in new tab’ box to stop people navigating away from the primary content page.

The Download content block is great if you’ve got a bunch of files you need to quickly and clearly lay out on the page. Think National Grants programmes laying out a bunch of application forms, guidance, list of recipients etc, or for Job Description/Person Description etc on job listings.

Documents are neatly styled depending on which type of file you select from the media library.

Supported formats:

• Word
• PDF
• PowerPoint
• Excel

Note: This component is specifically for documents, so you’re not able to include media files such as images, video etc in the list.

Use the Call to Action component to really bring an important piece of content to a user’s attention. They’re particularly effective right underneath the header or at the bottom of your page.

Leave the Super Title field blank. Still thinking about the use case of this, it might be that we use it for highlighting certain content belongs to a specific campaign or thematic area. TBC.

Suggested use cases for Call to Action component:

• Nominate someone for Awards
• Book your place at upcoming event
• Sign up to the #PowerOfYouth Charter
• Download our campaign pack
• National Grants fund status banner (see example)

The Large Call to Action component can be used when you’re wanting to include some images to a call to action. Either add a similar image and it’ll be formatted to round the corners in keeping with the rest of the website’s image style.

If you want an image grid (see below) then simply add six images using the Image Grid tab in the component, rather than using the Media tab.

You can also select from our full colour palette to brighten up the page.

The Call to Action Split component is another great tool for breaking up content or text on the page with some engaging media. Similar to Large Call to Action but just styled differently. Again, the alignment of the component can be switched in the Layout tab so you can alternate on the page to create a nice effect on the page.

Use of the Smart Filter component is reserved to the communications team as it only really relates to our main landing pages which are based on filterable models (Funding/News & Events/Resources etc).

The Selected Listing component is handy for cherry-picking some related content you want for your audience. You can choose from news articles, blogs, events, funding opportunities and resources, giving you a great opportunity to quickly and easily showcase related content and materials.

If a selected item doesn’t have an associated image, it will simply appear as a styled card on a solid background.

Note: Although the component gives you the opportunity to add different categories of content – be aware that the styling for each card may differ from category to category, so try to avoid listings looking messy and uneven.

The Custom Listing component is what you would use to lay out a grid of cards to direct website users to different pages or content. For example, this is what’s used on the main landing pages (Education & Skills, National Grants Programmes etc) to lay out all the available subpages.

A few things to note:

• There are two overriding styles to use as presets for the cards: horizontal and vertical – each displaying slightly differently.
• For each style (horizontal and vertical) there are also a number of different ways for these cards to be presented, depending on how many items per row you select under the Layout tab; whether or not you add an image; whether or not you add display text for the link.
• If you’re using them for child pages, you wouldn’t need display text saying ‘Find out more’, and you wouldn’t want the link to open in a new tab.
• You might add display text if it is a document or publication you’re linking to with the card, however, and want it to open in a new tab.
• How many rows you select also determines how the image will be cropped to fit into the card style, so aim to choose pictures where the focus on the picture is fairly central, otherwise you mind end up with a dodgy crop job.
• Anything beyond two per row tends to end in badly cropped images, so avoid having rows of 3 or more in horizontal style with media attached.

Horizontal

See various examples of cards laid out on the page, depending on how many rows have been selected and whether or not an image has been applied. You can see how this ends up in us having a wide range of options in terms of laying out content on the page, so we’ll need to make sure we stick to a consistent pattern for this going forward.

Horizontal – one per row

Horizontal – two per row

Horizontal – three per row

Horizontal – four per row

Vertical

Styling the cards vertically creates almost a listing effect with the cards.

Vertical – one per row

Vertical – two per row

Vertical – three per row

Vertical – four per row

Use the Embed/Shortcode component if you need to paste an embed link into a block to generate content. For example, the contact form below (generated using the WP Forms plugin) is an embed code that I’ve copied from WP Forms and pasted into the Embed/Shortcode content block, which then recreates the following form on the page with appropriate styling.