Close
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.
Before you start
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 type | When to use |
|---|---|
| boxes 2 columns | The 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 columns | This 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. |
| list | You should use this if you have a long list of teasers that's likely to extend further beyond 12 teasers. |
| hybrid | This 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:
- 2-columns and a sidebar
- 2-columns,sidebar and left-hand navigation
- 3-columns no left nav, no sidebar plus carousel at the top
- 3-columns with left nav, no sidebar
- From the content menu, click on Add content > Landing Page
- Decide if you would like to use a banner. If you do, browse for a banner image and add this
- Decide if you would like to use a hero image - we don't recommend you use both a banner AND a hero image
- Add a title
- If you don't want left-hand navigation, take the tick out of the 'Left Nav' box under Layout
- Choose your Layout: Boxes 2 columns, Boxes 3 columns, List or Hybrid - see table below for advice
- If you want to use a Sidebar, tick the box 'Show sidebar'
- Add some descriptive text in 'Content intro/summary'
- 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.
- Add a teaser title e.g. Project01
- 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
- Add some teaser text - make sure you have the same length of text for all teasers if you want it to look neat
- Add an image - make sure the images are all the same size and landscape rather than portrait
- Continue until you've done all the teasers
- 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 team (web-support@ucl.ac.uk)
- Drupal training and drop-in sessions
Feedback
We are continually improving our website. Please provide any feedback using the feedback form.
Please note: This form is only to provide feedback. If you require IT support please contact the IT Services Help desk. We can only respond to UCL email addresses.