In this page are general instructions on using blocks to edit pages, more detailed instructions for bespoke block items such as accordians and also details on how to manage and update specific pages. Please click on a topic below to read the details. If there is anything not covered by this that needs more explanation, please let me know and I will update it accordingly.
Topics
General Page Settings & Block Editing:
- General page settings and site menus
- The Block Editor
- Selecting the correct part of a block
- Grouping Block Content
- Page Previews
Page-Specific Content:
Page Tools, Forms and Reusable Blocks:
- Forms
- Reusable Block: PDF Download Panels
- Reusable Block: Page Bottom ‘Link’ Blocks
- Side Link Panels
- Accordions
General Page Settings & Block Editing:
General page settings and site menus (back to topics)
When you create a new page, there are a few standard settings that need to be set depending on how the page should be displayed. These are set in the right hand panel under ‘page’ (click the settings cog icon top right if the side panel isn’t visible:
Featured Image – this is the image at the top of the page behind the text. There are currently 7 images options for these in the media library to choose from – ‘Header-Image-1.jpg, Header-Image-2.jpg’ etc.. If you want to upload a new image, this should be 2000 x 280 pixels.
- Template: This should be set to 8 cols, Offset 2
- Parent Page: Should be set if a sub-page of an existing section
- Show Title: Determines whether the page title is displayed over the header image
- Has Sidebar?: If ticked, this will add the option to ‘Add Widget’ to create the sidebar naivgation links.
The Block Editor (back to topics)
The Block Editor allows you to add rich content to pages on the site quickly and easily and in some cases the type of block can be changed after content has been added. For example, if you are copying in a lot of text for a page, the easiest way to do it is to paste in all of it and then change the block type.
There are two places where the main block types and controls appear – the first is when you click on a block and you see a short selection of options for the block. Alternatively, you can click the blue ‘+’ at the top left of the screen to view the full list of blocks available. To change from one type of block to another, simply click the icon on the left side of the block panel that appears (it will be displaying the current block type).
Here are a few examples of block types:
This is a heading block set to H2
This is a heading block set to H3
This is a heading block set to H4
This is a paragraph block and is the main type of block for text content. You can also have bullet pointed ‘List’ blocks or numbered blocks (for a numbered block, you can set it to a list block first and then change it to numbered):
- Bullet Point
- Bullet Point
- Bullet Point
- Bullet Point 1
- Bullet Point 2
- Bullet Point 3 etc.
There are many different types of block. This block is a Paragraph block. The last block was a Heading block.
This is an example of an image and text block.
The text in the right hand side can be set to heading or paragraph
In many cases, blocks can also be nested inside other blocks. This is particulary useful where you want to do specific layouts and is used to create content such as the download panels and link blocks. Content can also be nested in columns by using the column block:
Columns Block
Columns can contain other blocks such as headings, paragraphs, lists, etcetera… You can choose from various default splits – e.g. 50 / 50, 70 / 30, 30 / 70, 33 / 33 / 33 – or set the number of columns using the Block panel in the sidebar.
Nested Columns
Columns can also be nested. This column has been split 50 / 50.
Try not to nest columns too deeply though as they may not render as expected.
Selecting the correct part of a block (back to topics)
Sometimes it can be hard to select by clicking the relevant part of a block especially when content is nested. If you need to select a particular part of a block (maybe a specific column to change the column order for example), you can click on the Outline tool top left (circled in the image below) and this gives a breakdown of the different parts of the block and you can select them directly. For example, shown below is how you can easily select the image as part of a PDF download block.
Grouping Block Content (back to topics)
When a page has a lot of content that you may want to move together or when building an accordion, you may need to use the ‘Group’ function. This is a way to select multiple blocks and group them together so that they move as a single block when changing the page order etc. To do this, shift click on the relevant blocks (these need to be consecutive), click the block ‘Options’ button and select Group:
Page Previews (back to topics)
Whilst the block editor gives a better idea of how the page will look than the old WordPress classic editor, it is still not an accurate representation of the page. This is particularly relevant when building an accordion where the content is put together in its ‘expanded’ state. To get a better idea of how the page will look, you can use the preview tool which will show the page with the content shown in a more representative style. Use the ‘Preview in new tab’ option:
Page-Specific Content:
Homepage (back to topics)
The homepage is broken down in to 4 areas for editing:
- The top panels: To change the content for each panel, click on the panel in the main editor. The contents, text and link is changed in the right hand panel where you can also change the picture (the front) and the background (the reverse). The order of the panels can be changed using the ‘up and down’ arrows and the panels will auto-resize to maintain the large and small panel format.
- 6 x Cards: The image for each card is set in the right hand panel whereas the text and the button is set in the main editor. If you want to change the order of the cards, you can use the ‘up and down’ arrows to move it.
- The slider images are set using a block called ‘Slide’. To edit the text, you can simply edit in the main area of the page. To change the image, make sure you have the Slide block selected and the image is set in the right hand panel (images are 896 x 516 pixels). NOTE: The block can be hard to select by clicking. The easiest way to select the Slide block is to click on the heading ofthe slider you want to amend and then use the Outline tool and select ‘Slide’:
4. Our Sponsors and Supporters: This uses the same image block style as the Sponsors and Supporters page with logos set at 250 x 250 pixels. To add a new logo, click the ‘+’ at the bottom of the block, select the image and set the link if required. To change the order use the ‘up and down’ arrows.
Our People (back to topics)
This page using bespoke blocks to add or edit the various people within the 3 sections.
To edit a person’s details:
- Click on the top left area of the person to select the image block. The image is set in the right hand panel and are 150 x 150 pixels. The biography is also added in the right hand side in the visual editor underneath the Picture. (make sure you have ‘Block’ selected here not ‘Page’)
- To edit their name or job title, simply click on the text in the block and edit accordingly
New people can be added can also be added in one of two ways:
- If a row already exists with blank spaces available, simply click the ‘+’ area and select the block type ‘Person’ and then add their details, upload the image etc.
- If a new row is required, click the plus that appears under the last row and click the ‘+’ and select the block type ‘Personnel’ and then proceed to add as above. Alternatively you can select the row above, click on the 3 dots (for more settings) and select duplicate.
The row order can be swapped by clicking the relevant row and using the up / down arrows. To swap the order of people within a row, you need to select the column within the row and then use the left and right arrow to swap the order. The easiest way to select the column is to use the Outline tool in top left bar and select ‘column’.
Our Sponsors and Supporters (back to topics)
This page uses a block called ‘Image Grid’ that is set at 4 coloumns wide. To add a new image, click on the ‘+’ at the bottom of the block of images (but within the image grid block). Form here you can select the image you need. Click on the image to set the link address.
If you want to change the order, you can click on an individual image block and use the up and down arrows in the block controls to move the image to where you want it in the list. Logos are 250 x 250 pixels positioned in a white square so that each logo has roughly the same amount of white space.
Resource Library (back to topics)
The resource library is managed differently than a normal page. Instead of each item being added to the same page, each resource has its own custom post in the same way that they did on the old site. To add a new resource:
- Click on Resources in the side bar and ‘Add New’
- Set the title for the resource in the header of the page (this is what will appear in the mouseover text)
- Set the category using the tick boxes in the right hand side (make sure you have ‘Resource’ selected here not ‘Block’)
- Set the thumbnail using the ‘Set cover image’ option in the right hand menu. These images are 420 x 594 or 594 x 420.
- Add any text to the post that may be needed and then add a button block (under design). The button text can then be added and the link set. To add the link, upload the relevant document seperately in to the media library and click on edit to get the file URL for the document. This can then be pasted in to the link for the button.
- Publish the page
The new resource will be added to the correct category and be listed first (the documents are listed in date order – newest first).
Live Programmes (back to topics)
Programmes are laid out using the Columns and Programme blocks. Add a new Columns block and add the class programmes under Advanced > Additional CSS class(es) in the Block sidebar. Add Programme blocks to the columns and enter content, add images and set the button URL.
When you want to create a new row, create a new Columns block. This will ensure that Programmes always fill the height of their container row.
Safeguarding and Risk Management Hub (back to topics)
The safeguarding resources section of the page is easy to manage and uses the same image block method as other areas of the site. To add a new document, simply click the ‘+’ in the relevant section, upload the thumbnail file (which are 1200 x 1706 pixels) and set the link to the relvant document in the media library.
It is also possible to add more sections and sub-sections to this part of the site, all through the main editor. If this is something that you are likely to need, please let me know and I will add details on how this is done.
Page Tools, Forms and Reuseable Blocks:
Forms (back to topics)
Forms can be created using Gravity forms as normal and added to pages using the forms block. However, some features don’t currently work so either need to be excluded or done in a different way. The ones we are currently aware of are as follows:
- Section: Use an HTML block with tags added in the HTML to divide up content (for example: <h2>Section Title</h2>)
- Advanced Fields / Name: Use single line text fields
- Advanced Fields / Email: This works but ‘Enable Email Confirmtion’ does not so this needs to be unselected
- Advanced Fields / Consent: Instead I have used a Checkbox field with a single check box
Reusable Block: PDF Download Panels (back to topics)
IMPORTANT: Reusable blocks are shared assets that can be added across the site. This means that an amend to the asset on one page will also affect another page UNLESS the block is converted to a regular block first. To do this:
- Click on Add Block and select ‘Reusable’
- Select the block you need
- Once the block is added, click convert to regular block:
PDF downloads can be added to the page in a few different ways depending on whether you want the full version or just a thumbnail and download button.
- A full panel: select ‘PDF Download Panel’
- 3 Thumbnails with link: select ‘3 PDF Download Thumbnails’
- 1 Thumbnail with link: ‘1 PDF Download with Thumbnail’
You can now change the image, and update the text and download link as required.
Reusable Block: Page Bottom ‘Link’ Blocks (back to topics)
IMPORTANT: Reusable blocks are shared assets that can be added across the site. This means that an amend to the asset on one page will also affect another page UNLESS the block is converted to a regular block first.
To add link panels to the bottom of the page, there are 3 reusable blocks currently available.
- Bottom Links – 3 Panels with Text
- Bottom Links – 3 Panels no Text
- Bottom Links – 4 Panels no Text
You can now change the image, and update the text and download link as required.
Side Link Panels (back to topics)
Side link panels are set on a page by page basis using the controls on the right hand side of the page. In the editor make sure ‘Page’ is selected and tick ‘Has Sidebar?’. This will bring up the option to add a widget which can be an image, quote or card. For, cards the image is 416 x 570 pixels and the text and link details are set in the various available fields:
Accordions (back to topics)
Accordions can be used to group content and hide it on pages where it would otherwise be too overwhelming to view everything at once. Further details are provided within the sections below:
Accordion 1
The Accordion block can be used to create content areas that only open one at a time. Opening one accordion section will collapse the others at the same level.
You can change the colour of a section’s headers by adding utility classes in the Block sidebar Advanced panel. Using these classes ensures that the correct brand colours are used.
| Text Color | Background Colour |
|---|---|
| text-color-purple | background-color-purple |
| text-color-light-blue | background-color-light-blue |
| text-color-dark-blue | background-color-dark-blue |
| text-color-green | background-color-green |
| text-color-grey | background-color-grey |
| text-color-light-grey | background-color-light-grey |
| text-color-dark-grey | background-color-dark-grey |
| text-color-white | background-color-white |
Just like other blocks, the Accordion block can be nested. You can only nest one level deep but you can have as many sub accordion items as you like. Nested Accordion blocks must be wrapped in a Group block. If you don’t want any padding don’t set a background colour. You must also add an accordion class under the Block sidebar Advanced panel.
Sub Accordion 1
You can use nested content such as columns in accordions too.
- Lists can be used as well
- Make sure you always wrap accordion items with a Group block and add the accordion class in the Block sidebar advanced panel.
Sub Accordion 2
Fusce non nulla ut ipsum pretium venenatis eu eget neque.
Accordion 2
Fusce blandit ut velit vitae fringilla. Proin scelerisque ex in justo gravida, eu tempus turpis consectetur. Curabitur sollicitudin hendrerit augue, at dignissim quam commodo ut. Curabitur faucibus malesuada turpis, gravida venenatis arcu semper non. Curabitur hendrerit viverra turpis. Nulla mattis libero ex, eu dapibus tortor aliquam in. Vivamus nec nibh efficitur, iaculis orci sit amet, vulputate nunc.
Accordion 3
Fusce blandit ut velit vitae fringilla. Proin scelerisque ex in justo gravida, eu tempus turpis consectetur. Curabitur sollicitudin hendrerit augue, at dignissim quam commodo ut. Curabitur faucibus malesuada turpis, gravida venenatis arcu semper non. Curabitur hendrerit viverra turpis. Nulla mattis libero ex, eu dapibus tortor aliquam in. Vivamus nec nibh efficitur, iaculis orci sit amet, vulputate nunc.
Columns in accordion
It can be done…
Jackdaws love my big sphinx of quartz…
Accordion 1
Curabitur sit amet lacinia ante. Vivamus auctor egestas vestibulum. Pellentesque auctor tortor vitae tortor semper, id finibus diam auctor. Quisque quis ante erat. Quisque at urna in libero semper tincidunt id ac dui. Pellentesque malesuada efficitur vestibulum.
Duis scelerisque, elit et eleifend viverra, urna ante hendrerit odio, quis eleifend eros odio ut lacus. Suspendisse malesuada in purus ut ornare. Pellentesque ut mattis enim, non imperdiet magna. In vel mollis nisi. Integer eu quam elementum, fringilla nisi sed, semper orci. Quisque in bibendum urna. Cras et nisi tellus.
Sub Accordion 1
Fusce non nulla ut ipsum pretium venenatis eu eget neque.
Sub Accordion 2
Pellentesque ut mattis enim, non imperdiet magna. In vel mollis nisi. Integer eu quam elementum, fringilla nisi sed, semper orci.
Nested columns are fine to use.
But don’t nest accordions more than 1 deep.
Sub Accordion 3
Fusce non nulla ut ipsum pretium venenatis eu eget neque.
Accordion 2
Fusce blandit ut velit vitae fringilla. Proin scelerisque ex in justo gravida, eu tempus turpis consectetur. Curabitur sollicitudin hendrerit augue, at dignissim quam commodo ut. Curabitur faucibus malesuada turpis, gravida venenatis arcu semper non. Curabitur hendrerit viverra turpis. Nulla mattis libero ex, eu dapibus tortor aliquam in. Vivamus nec nibh efficitur, iaculis orci sit amet, vulputate nunc.
Accordion 3
Columns in accordion
It can be done…
Jackdaws love my big sphinx of quartz…