XClose

Information Services Division

Home
Menu

Drupal CMS: Create a landing page

Learn to create a landing page in Drupal. The landing page template is flexible and can support a huge range of different layouts depending on the choices that suit your content.

This guide is aimed at

  • Staff
  • PG students

Before you start

You need to be Senior Editor, Editor or Author to be able to create or edit a page.
When editing use Chrome, Firefox or Safari, but NOT Internet Explorer.

Instructions

Before you create the landing page, you need to consider the layout you would like to use although you can change the layout any time you like. 

Keep in mind

You can use the text editor formatting and rich content options that you would use on any page above your teasers e.g. carousel, columns, embedded video, etc.

Teaser layout options

Teaser typeWhen to use
boxes 2 columnsThe 2-column teasers are good if you are using a sidebar and left-hand navigation. You can add these in rows of two up to a max of eight.
boxes 3 columnsThis tends to look better without both a sidebar AND a left nav as it can be cramped. It's fine with one or the other. Add in threes up to a max of 12.
listYou should use this if you have a long list of teasers that's likely to extend further beyond 12 teasers.
hybridThis combines boxes and a list. The boxes come first.
You should use this if you have a couple of main Teasers followed by other less important Teasers. Note that the main teasers are visually signalled as being more important than the others.

Examples from UCL websites:

  1. From the content menu, click on Add content > Landing Page
  2. Decide if you would like to use a banner. If you do, browse for a banner image and add this
  3. Decide if you would like to use a hero image - we don't recommend you use both a banner AND a hero image
  4. Add a title
  5. If you don't want left-hand navigation, take the tick out of the 'Left Nav' box under Layout
  6. Choose your Layout: Boxes 2 columns, Boxes 3 columns, List or Hybrid - see table below for advice
  7. If you want to use a Sidebar, tick the box 'Show sidebar'
  8. Add some descriptive text in 'Content intro/summary'
  9. Add some text in the Body if so required

You now need to start adding Teasers:

Keep images the same size and aspect ratio for all teasers; landscape images are best.

  1. Add a teaser title e.g. Project01
  2. Add the relevant URL for Project01 - if internal, click on the Title URL button and search for the page. If external, paste the URL in the available space
  3. Add some teaser text - make sure you have the same length of text for all teasers if you want it to look neat
  4. Add an image - make sure the images are all the same size and landscape rather than portrait
  5. Continue until you've done all the teasers
  6. Depending on your role:
    if you are a Senior Editor: click on 'Publishing options - Draft (Current)' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Editor: click on 'Revision information' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Author: click on 'Revision information' in the left-hand menu, choose 'needs review' from the drop-down menu
  7. Save

Take note: 'Flags' if used will appear in the top left-hand corner of an image and allow users to click on them to be taken to the relevant URL. They're really for linking to a main content area from a specific piece of content e.g. to Research landing page from a research piece of content or to the main News page from a news article.

Add a feed landing page

If you want to add a landing page with your feed on it please visit the funnelback feed how to for full instructions. 

Help and support

web-support@ucl.ac.uk

Feedback

We are continually improving our site, so please provide us any feedback on this web page using the form below. It would also be really useful if we could discuss your feedback with you, so if you are happy to be contacted please include your UCL email address in 'Email' field below.

Please note: We can only respond to UCL email addresses

Help us improve this page