CERN Accelerating science

Close menu
Landing Page

Useful Info

The Landing Page is a content type that gives you the opportunity to build your own pages piece by piece using pre-designed components like Hero Headers, Image Galleries, Banners etc. In other words if you want to have a predefined content type in order to build beautiful pages and you don't want to mess with HTML and CSS, the Landing Page module is your answer.

Package Maintainers:
The CERN Web Team
Package Version:


The main characteristic of Landing Pages are the Web Components, which constitute Paragraph types that re-use some of the CERN Components. Hero Header, Image Galleries, Banners etc. are all web components. You can find a complete list of all web components of CERN in the Asset Library page of webtools website.


All web components are encapsulated inside sets of components called Sections. 

Basic settings

Every Section has a predefined set of options, which give the opportunity to render it in different ways. The available settings are the following:

Setting Description
Style Description
Has header?

This option is meant to be used with the Hero Header component. More specifically when this option is checked, the menu is displayed on the Hero Header instead of above the Hero Header.

Title/ Title color/ Show title

The title of the section along with settings regarding it's color and whether you want it to be rendered or not.

Scrolling Menu Title / Show Scrolling Menu Title

This is meant to be used with the Scrolling Menu component. More specifically, in this setting you can set the title that you want this section to have on the Scrolling Menu and whether you want it be rendered it or not.


This setting sets the width of the Section:

  • Centered Content: The content and the background of the section are centered.
  • Fluid width: The content and the background of the section cover the full width of the page.
  • Fluid BG Center content: The background of the section covers the full width of the page but the content is centered.
Section height

 This setting sets the height of the Section:

  • -None-: In this case the section will cover as much content as necessary for the content to be displayed
  • Half Height: The Section forcely covers half of the viewport.
  • Full Height: The Section forcely covers the whole viewport.

This setting provides a set of effects for the sections, mostly related to the parallax scrolling effect.

  • Background parallax: while scrolling the section will move behind the next section.
  • Cover parallax: while scrolling the section will cover the next section.
  • Cover parallax video compatible: the same as cover parallax but includes compatibility for CDS videos.
  • Background rotation: while scrolling the background will be rotating.
Lazy Section

This setting makes the section appear while scrolling

Box effects

This setting is meant to be used for the 4 box elements: Article Box, Thumbnail Box, Resource Box and Agenda Box.

More specifically it provides an effect that expands each box when hovering. In order to be used, all the components inside this section need to be of box type.

Background Settings

Every section can have a background. This background can be an image, a video or a color. In the cases of images and videos, they can be either local resources that you upload from your machine or CDS resources.


The main content of Landing Pages constitute of Web Components. You can find the full list of the components in the Asset Library page. 

The content can be placed in any of the three columns: Left, Center or Right. Based on where you will place your content, the columns will cover specific amount of the section. 

The following table shows the section coverage based on which columns you have chosen:

Setting Description
Style Description
Only left column

The content of the left column will cover 50% of the section.

Only right column 

The content of the right column will cover 50% of the section.

Only left and right column (without center column)

The content of the left column will cover 50% of the section while the content of the right column will cover the rest 50% of the section.

Only center column

The content of the center column will cover 100% of the section.

Left & center column

The content of the left column will cover 25% while the content of the center column will cover the rest 75% of the section.

Center & right column

The content of the center column will cover 75% of the section while the right column will cover the rest 25% of the section.


Web Components / Views / Blocks

Inside each column of a section in a Landing Page, you have the option to add either one or more Web Components and/or one view and/or one block.

Offered Web Components

The following table presents all the available Web Components along with a short description and some useful usage tips. If you want more information on each component and how they look like, click on the title of the component.

Component Description Usage Tips
Hero Header

A hero component mostly used as the first component in order to introduce the reader to the topic of your page. You can add multiple frames with different backgrounds and text in order to look like a slideshow.

  • Use it as the first component in your Landing Page
  • Use it either with Full Height or Half Height. 
  • Use it with Full Width
  • Very useful to use it with Has Header setting since it looks nice when the main menu appears on top of the Hero Image
Featured Banner Informative component used in order to provide more information regarding a section. Each Featured Banner can have a background image, a link and a box with information.  
Image Gallery A gallery component presenting images either local ones or from CDS. Each image has a download button for different sizes.  
Slider Similar as Image Gallery. The main difference is that the images change by sliding.  
Boxes There are 4 different types of boxes: Article Box, Thumbnail Box, Resource Box, Agenda Box
  • For more information regarding the boxes and how you can shape them, have a look in the paragraph regarding box shapes and configurations.
  • Use boxes with box effects in order to make your page more intuitive and playful.
Text Component Adds formatted text in a section in order to write paragraphs.
  • You can use Text Component with Lazy Section to make the text appear while scrolling.
Timeline Used in order to append a timeline from the CERN Timelines website.  
Featured Quote Presents a quote along with the name of the person who mentioned it.  
Margin  Can be used to add margins between Components. The component offers 3 sizes of margins: small, medium, large.
Call to Action Button Button component used to redirect reader to another page. The button supports different colors, links and texts.  



Within a section, you can also add Views. For each view you can choose different displays (red in screenshot below) and also pass arguments to the view (blue in screenshot below).

View example in a section


You also have the option to add custom blocks and/or blocks from block layout. In order to have a block from block layout appear in the search box, you need to first add it in the block layout page. Its better to add it in the hidden section.

Adding blocks in sections

Box Shapes and Configurations

The web components are pretty straight forward. You can find a definition of all the web components in the Components page. However, the boxes can be aligned in a specific configurations based on their display. The size of the boxes is pre-defined based on the display you will choose.

The boxes offer 3 types of displays:

  • Portrait: The box has a vertical orientation. [red-bordered box in the image below]
  • Simple: The box has a small parallelogram shape [green-bordered boxes in the image below]
  • Landscape: The box has a horizontal orientation [blue-bordered boxes in the image below]

There are different configurations to format the boxes:


1 Portrait and 4 simple next to each other


Shows an example of how boxes can be shaped using settings

  1. Display: Portrait [red box]
  2. Display: Simple [green box]
  3. Display: Simple [green box]
  4. Display: Simple [green box]
  5. Display: Simple [green box]
  6. Display: Landscape [blue box]

In general if you start the section with a portrait and then place 4 simple the one after the other then you will have the format with the red and green boxes.


3 portraits in a row

Image showing how 3 boxes with display "portrait" render

The image above shows how 3 boxes with display: portrait would render if they were placed in a section. So the configuration would be:

  1. Display: Portrait
  2. Display: Portrait
  3. Display: Portrait


3 simple in a row

Image showing 3 boxes of display: simple in a row

In a similar way we can have 3 boxes of type simple in a row. 

  1. Display: Simple
  2. Display: Simple
  3. Display: Simple


Combinations of configurations

Every configuration can be placed in a separate section but you can also place them under one section, given that each unique configuration is correct.