Options for Landing Page Layout

Owned by Deborah Sykes (Unlicensed)
Last updated: May 06, 2024 by Ericca Rowe
5 min read

Landing Pages are a powerful tool within the Drupal system. They are a content type that allows for the layout to be laid out in a customized way. This provides a great opportunity to effectively direct site traffic, make a good first impression, and set the right tone for the site.

Your homepage is a Landing Page, and you can also create unique Landing Pages to introduce a sections of content. They are designed to:

  • Introduce and link to sub-pages

  • Highlight the most important information

  • Group content in a logical way

Structure of a Landing Page

Landing Pages are structured in three nesting components:

  • Sections – The full-width content groupings. Sections define which chunks of content stay together when the page is resized from desktop to mobile, and they can have a background color, background image, and title.

  • Regions – Containers for the Blocks which determine the layout within each Section.

  • Blocks – The actual pieces of content with text, images, links, etc.

Section layout options

At the Section level, you can set:

  • Title – The title will display at the top of the Section. A title is not required but since most Sections will consist only of related content, you may find it helpful to title a Section at times.

  • Background color – The background color will cover the entire width of the page within that section. Using a different color from one Section to the next helps users understand what content goes together. You can also help important content stand out by placing it on a background color that is high contrast with that of surrounding Sections. Be careful not to overuse especially vibrant or dark background colors. You will choose from a list of colors in your site’s palette.

  • Background image – Background images will, like background colors, stretch to display across the entire width of the section. You can only add background images to full-width Sections, and should only use them when there will be only one Block in the Section. You will choose a background image from the system library.

You can edit these settings after creating a Section.

Region layout options

You choose the layout to a Section when you first create it. The Section layout will be created with Regions.

Each Section will have its own layout, which can be any one of the following:

  1. Featured intro, with 1/2 width region on the left and 1/2 width region on the right.

  2. One full-width column.

  3. Two columns, with a 2/3-width region on the left and a 1/3-width region on the right.

  4. Two columns, with a 1/3-width region on the left and a 2/3-width region on the right.

  5. Three equally-sized columns.

You cannot edit a Section’s layout after it has been created. If you need to change the layout of the blocks in a region, insert a new Section with the correct layout, then move the content into the new Regions before deleting the original Section.

Regions can contain multiple blocks, stacked on-top of each other.

  • A block in one region cannot affect blocks in another region or section. (So side-by-side blocks might be different heights.)

  • Blocks automatically fit the width of its region, as designed.

Blocks layout options

When you place a block into a Region, you will select the Block Type. This includes Micro-content (blocks like Promos and Link Collections which are created specifically for the purpose of embedding on other pages) and automatic Content teasers (like an Event teaser which pulls content directly from the full content node).

When you select a block type, you can choose either an existing block or create a new one. When you create or place the block, there are a few attributes you can use to adjust the display of the block. You can edit all of these attributes can be edited at any time:

  • Display Options – Certain block types come with a few different display options. For example:

    • Link Collections can display as a regular list or as a datatable

    • Promos can display with normal styling or with a big description.

  • Image – Many block types can include an image. Use imagery to draw attention, aid quick recognition, and set a mood. Imagery should support the overall tone of the site.

  • Card – Most block types can be displayed in a card. This sets the content block in a box with an accent bar at the top. Use cards to draw attention, clarify block boundaries, and balance content in the section. Side-by-side cards can work for parallel content, but don’t overdo it. In most cases, use no more than one card per section.

    • Card Icon – Most blocks displayed in a card can also include an icon. This icon will display in a circle at the top of the card.

Learn about Micro-Content Types and Content Types in our extended training on each type.

You sure you need a Landing Page?

Consider an alternative: embedding Blocks inside the text editor.

Landing Pages work great if you need:

  • Drag and drop

  • Full-width of page

  • Defined sections

But if you’re just looking to place one or two blocks on a page otherwise filled with text, another content type might be more appropriate.

Certain content types (Book Page, Events, FAQ, How Do I, News, and Topic Page) allow for blocks to be embedded within the text editor. This can be a useful approach if you want to highlight related content or break up a “wall of text” on a particular page.

Learn more: Embedding Content in the WYSIWYG Text Editor