fbpx
LCC Logo

Module guide

A staff guide for how to place and format modules on the LCC site

Share

Module Guide

The modules on the site are designed to make the site as attractive and engaging as possible, and to make it possible to create thoughtful user journeys for readers.

To do that, we need to use the modules in the right way and avoid a few potential pitfalls. This guide is designed to help you do that. The examples shown here are based on our experience of using them across the site, what we found works well and what we found doesn’t.

What we don’t want to do is stifle your creativity. If you have a new idea, try it out in draft before publishing. If you’re not sure if it works, ask a colleague for advice or speak to the Marketing team.

General guidelines

Avoid having two modules with the same colour background next to each other. With the exception of the Text Body module, all modules have a variety of background colours. Please use them!

Before publishing, please proof (or ask someone else to) your content. And we recommend that you check the layout on both desktop and mobile too.

Make sure your images are not grainy or pixelated. Most phones and tablets have such good screens now, that what looks passable on your desktop may look awful elsewhere.

Hero module

Every page on the site MUST start with a Hero module. There are a number of fields that you’ll need to complete:

Title – Required: Make this short and snappy. No more than five words or two lines if possible.

Intro text – Required: A teaser or explanation of the page content. Again, make this short and snappy, no more than 25 words or three lines if possible

Social sharing or buttons – Optional: Although these are optional, your default position should be to include one or other of these. You can choose between one or two buttons OR social sharing icons.

Background image: This should be portrait orientation and a good quality image. This is not the place to have any grainy or pixelated shots! Dimensions do not need to be exact as the site will do some formatting, but if you use images that are 2:1 (width vs height) you should be OK. Bear in mind that a red circle covers the left portion of the screen so you should use images where the focus of the image is on the right.

Hero Title - required

Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text

Share

Text Body

This is covered in more detail in the Formatting Guide.

Flexible CTA (Calls to Action)

Flexible CTAs are primarily used where you want to give the reader the opportunity to do a particular thing. For example, complete an online advocacy action, sign up for membership, make a donation, download a document or visit another page.

They are also great tools for adding interest to a page, or for breaking up a large amount of copy that makes the page a bit text-heavy.

There are a number of different options you can select but please note that the ‘Sign a petition’ option is not currently functional.

Card with an image

You can put the card (the text part) on the left or right and choose a red background with white text or white background with black text. Choose whichever works best with the image but red tends to be more impactful. You can have up to 2 buttons.

Thin without an image

You can choose a red background with white text or orange background with black text. Choose whichever works best within the page context. You can have up to 2 buttons.

Impact

The impact module is a way of distilling a lot of information in a graphic way, saving large block of copy. They’re quite effective, but only work well in a few situations – use sparingly and keep the content relevant.

As well as the module title you’ll create three elements for each of the four blocks in the Impact module.

Title: This is the copy below the image.

Image: Selected from the Media library. When choosing images make sure they’re portrait and that the subject is clear of the top right hand corner as the Black Box text could obscure it (see images 2 and 3 below).

Black Box text: One short word or a number that appears over the image adding a significant piece of information. Avoid more than 10 characters, fewer would be better.

Buttons at the bottom are optional and you may use up to two.

Both colourways have black text, out of either a white or orange background. Choose whichever background works best within the context of your page.

Impact module

May 2021
Use this for a timeline
+ 79%
Or to show a %age increase
Cyclists
Or a short word
£22 million
Or a spending target

Map

The map module sits in the Groups and Events page but can also be inserted into any other page on the site.

At the moment, the map is somewhat glitchy, so we would be reluctant to include it anywhere else. If you feel there is a good reason to do so please check with Matthew or Rob.

Map Filter

Show me:

Story

The story module is used to display content in an engaging way, preventing the need for large blocks of text. Readers swipe or click through a set of slides with images and copy. Buttons give the reader the option to visit another page.

Used in the right context this can be effective, but it can be difficult to get the content right.

Your story title goes here

Each slide has it's own title

And the copy for the slide goes here. You'll want to include an image on each slide, plus a button linking off to an action or page.

With the exception of the final slide, images have been chosen that show the potential pitfalls that you may encounter.

Here, you can see how the circular frame slices through the LCC logo. Make sure that logos are kept well clear of the frame! Note that the white background looks poor. In this instance a white logo on a red background would look much more effective.

Back to top Go to this link

Use square images!

If you don't, you'll get an odd letter box shaped circle. Images must be at least 800x800px.

There is room for approximately 100 -150 words on each slide. The module doesn't work successfully when there is a lot of white space, so if you don't have much copy it may be worth considering a different format for your content.

Back to top Go to this link

Include a button on each slide

And keep the text length consistent, or the module starts to look a little odd. Without buttons or consistent text a slide looks broken and the reader may lose engagement.

On this slide you can see another potential problem with images. There is a circular cutout in the top right hand corner of the image frame. It's easy to lose a head if you're not careful.

You may be able to rectify this by editing or flipping the image

Back to top Go to this link
A woman cyclist is stopped at a light, straddling her bike with one foot on the ground A woman cyclist is stopped at a light, straddling her bike with one foot on the ground

No button here

Looks weird, doesn't it?

A man in a suit cycling South across Blackfriars Bridge A man in a suit cycling South across Blackfriars Bridge

Give your story an ending

Let the reader know they have reached the end and let them know what they should do next. Should they carry on scrolling down the page or do we really need them to click the button?

Here is an image that works really well. The subject is central and clear of the image frame.

Take action? Go to this link

Post Grid

Post Grids probably have the most flexibility (and therefore setup!) of all the modules.

They’re laid out in rows of three and you can choose to display three with a ‘Load more’ button or choose to show all at once, up to a maximum of twelve.

You can set up a post grid to link to:

Specified posts from the News and Advice section

OR

Any posts or pages of your choosing

OR

The latest posts of any choosen content type

Chosing either of the first two options will require you to manually create each tile with a title, image, teaser and link. The third option will automatically use the ‘Excerpt’ and ‘Thumbnail’ fields from the post to create the tile for you.

If you want to create tiles for pages, you will need to choose the second option.

An example grid

LCC Formatting Guide

Our guide to formatting text on the site is here.
formatting guide Go to this post

Link to a third party site

Although we would prefer people to stay on the LCC site, there may be a case for linking elsewhere.
Osbornes Law Go to this post
2019 LCC Coordinator Handbook

Download a document

We've also used the grids to display a range of handbooks that can be downloaded. Check out this page!
Local group resources Go to this post

Newsletter

In the example below, you’ll find the standard text that we use for the newsletter module so all you have to do is copy and paste the copy shown in the title and text fields. The data protection statement and data fields will automatically be added for you.

You will need to choose an image. As with the story module the image needs to be square and at leat 800x800px. The same guidelines about making sure the subject stays clear of the corners (especially the top right) apply here too.

As with all photos on the site, we’d like the images for this module to be varied, showing the full range of cyclists in London. So don’t use the same image every time and if you have a nice image to use in your personal library, please feel free to upload it if you have the subject’s consent!

 

Keep up to date

All the latest cycling news, campaigns and information straight to your inbox.
  • This field is for validation purposes and should be left unchanged.

Form builder

The Form Builder can be used for almost any kind of contact form, data collection, petition or Email to Target action. See the example below.

They’re a little complicated to set up and please be aware that at present the data is not automatically sent to CiviCRM. If you want to create CiviCRM contact records for people submitting the form you may prefer to create a Drupal webform.

Thanks for reading!

We hope you found this page useful and interesting. If there's anything you would like to discuss further then send us a quick message via this form. But, if it's an urgent request it may be quicker to call or text!