Flexible content blocks

The Flexible Content Block content types are designed to allow you to mix and match different types of content in a grid on your page. As the name suggests these blocks are very flexible and can include a combination of content like General content, Column blocks (link lists), Column colour blocks, News and events manual block sidebar, and a single event listing.

Flexible Content items automatically organise in rows of two and/or three depending on a) how many are added to the page and the b) device screen size (mobile, tablet, desktop etc.).

You can use any combination and number (up to 12) using the following items: 

• Flexible image and text cards
  Add a linkable image block with overlapping heading and text. This flexible item should not be mixed with any other type of flexible content, as it will not display correctly.
• Flexible item - Column block
  This allows you to add a block of links similar to one of the columns on a 3 Column block
• Flexible item - Column colour block
  Add a single block containing an optional image, heading with a single paragraph of text and a link. This is the similar to a column in a 2 Column colour block.
• Flexible item - General content block
  Add a block with an optional image and some general text. This is similar to a single column in a 2 column general content block.
• Flexible item - manual News & Events
  Adds a single manual news and events item. This is similar to the News and events manual block sidebar
• Flexible item - Twitter
  Adds a block with a twitter feed.>
• Flexible item - single Event listing
  Allows you to pull through the details of a single event

See an example of the Flexible content block using all the options at the foot of this page.

Instructions

Adding Flexible content blocks to your page consists of 3 main steps - creating the folder structure, adding your flexible items and adding a widget to the page where you want to display the content.

Step one: create the folder structure for your Flexible Content

1. Add a hidden sub-section to the page where you want your Flexible content block to appear and call it FlexibleContent - this must be spelt correctly, with the capitalised 'F' and 'C' and no additional characters such as spaces or fullstops.

The combination of hiding this and giving it the precise name prompts the system to not treat it as a page. Instead, it treats it and any sub-pages as special repository folders. Do not place content in this 'FlexibleContent' folder. See No. 2.

2. Next, create another hidden sub-section under the FlexibleContent section you've just created. Call this second subsection something to help you identify what it is about - for example, 'FAQ' or 'Safety procedure'. I've called mine 'Example items'. However, it MUST NOT be called FlexibleContent.

It should look like this:

Step two: add your Flexible items to the folder you created

The subfolder you created under FlexibleContent (in my example it is called Example items) is where you add the individual Flexible items to build your Flexible Content block.

At present there are 6 different flexible item content types available. You can add them in any combination you like.

• Flexible item - Column block
• Flexible item - Column colour block
• Flexible item - General content block
• Flexible item - manual News & Events
• Flexible item - single Event listing
• Flexible item - Twitter

1. On the site structure screen, navigate to the sub folder (mine is 'Example items') click the blue Actions button on the right of the screen and select Create content from the menu

2. Find the 'Flexible item' you want from the complete list of content types as shown below. You can do this by filtering the list by 'flexible item'.

3. Click on your chosen content type.

4. Complete the fields as required within the Flexible item.

Please note: The Up and Down ordering arrows do not work in the Flexible items so you need to use letters to order your items. This is similar to the ay you would name accordion or slideshow items. The Name*: field for the first item should start with a - e.g. a - research centres , the second item should start with b - e.g. b - research networks, and the third should start with c - and so on.

5. Select Save and approve.

The image below shows the items used in the real example at the foot of this page.

There are a maximum of 12 items for each sub folder, if you want more than 12 items on a page, create a second sub folder next to your first one and use a separate widget for each separate sub-folder.

Step three: add the Flexible Content block to the page where it will display

Now that the items are in their sub folder you need to add the Flexible content block onto the page. To do this you will use a widget. This is similar to accordions, slideshows and people lists.

1. Open t4 Site structure (click on the terminalfour logo in the top left of the screen), find the page where you want the Flexible content block to appear, click the blue Actions button and select Create content.

2. Select the Flexible content widget content type and complete the form as instructed below:

Your completed form will look like this:

3. Select Save and approve.

4. When you publish your page, remember to publish the entire branch to include both the items and widget, otherwise your content will not show.

Further guidance

You can get more examples and understand the benefits of using the flexible content block.

If you need more help please Contact us.