Page Layouts

In Princeton Site Builder, you can create customize page layouts using the Layout Builder tool. Only the main content region (the area between the header and footer) can be modified with the Layout Builder.

The only content type you can modify the layout for is Page. This means pages serve a dual purpose. On one hand, you may have a page that simply has a few paragraphs of text, perhaps with an image of two embedded within the body field. On the other hand, you may have another page with the body text left empty, but a customized layout that lists latest news and upcoming events in your department.

The layout builder tool is flexible and allows a wide range of display options.

Accessing the Layout Builder

You can customize the layout of any Page content item by viewing the page and clicking the "Layout" tab:

layout tab highlighted among the other tabs

From here, the page loads with the main content region now becoming an editable interface split up into sections and blocks.

Sections

Sections are the top-level containers for your layout that make up horizontal "slices". Each section has a set of columns where you can place one or more blocks. You can have multiple sections in your layout, each with a different number of columns and blocks. This allows great flexibility in building unique page layouts.

By default, Page content items have a single one-column section with three blocks:

Adding New Sections

  1. Click +Add section in the content area
  2. Choose a section type depending on how many columns you want and how large you want them.
  3. Configure the section (see below)
  4. Click Add section to add it to the page

Section Configuration Options

Most sections have several configurable options:

  1. Block grouping: Use this feature to optionally display all blocks in a section's column as tabs instead of stacked vertically. The block titles added to the section will be used as the tab names.
  2. Background image: Some themes support selecting an image from the media library to serve as a background image for all blocks placed in the section.
  3. Background image overlay: Choose a dark or light shade to present over the selected background image. This can help improve contrast and legibility of text  placed in this section.
  4. Background color: Instead of specifying an image for the background, choose from various solid color options.
  5. Background width: Select from various options to control the width of the background and content placed in this section. The full width options will not have any effect if a sidebar menu is present on the page.
  6. Override block padding: Override the default value set by your theme that controls how much space to pad around blocks in this section.
  7. Style: Some sites may have style options available for the section to alter its appearance. Refer to Styling with CSS Injector for more information.

Please note that many of these section options are designed only to work with the unmodified Tiger theme. They may not behave as expected if WDS created a custom theme for your site or if your site has CSS modifications.

Editing and Removing Sections

After a section has been added, you can easily edit or remove it by using the "Edit" and "Remove" links on the top left of the section contents:

section edit links highlighted

Once a section has been removed, all blocks within it will also be removed. However, the changes are not actually saved until you click the "Save Layout" button at the top of the page.

Blocks

Blocks are what are placed inside sections. Each column in a section can have any number of blocks. Examples of blocks include Billboard, Feature, and News List. Blocks are split into several high level categories to help quickly find what you're looking for when adding a new block to a section.

Adding Blocks to a Section

    1. Click the "Add block" link at the bottom of the section where you want to add the block.
    2. A sidebar slides in from the right side of the browser. Find and click the block type you want to add.
    3. Fill out the configuration form for the block, and then press the Add block button at the bottom of the form to add it to the layout.

    Block Configuration

    After blocks are added to a section, you can configure them. Each block has its own unique configuration options, the details of which are typically described in the blocks reference documentation. However, all blocks share some common configuration.

    Titles

    They all have a Title field which by default will be populated by the label of the block type you're adding (e.g. Page List). The title is output as a large heading above the content of the block, and you can control if it should be a Level 2 or Level 3 heading, an important setting related to accessibility

    You also have the ability to hide the block title so it's not output at all. This may be useful if the heading the content of the block is already provided in some other way, but it's important to keep accessibility in mind when omitting the heading.

    You can also optionally link the block title to another page on your website.

    Jump Link IDs

    All blocks also have a field to enter a jump link ID. This field can be used if you want to be able to link visitors directly to this block on your page.

    Styles

    Some block types may have a "Style" option. You may see this if WDS has created a custom design for your site and is a way of selecting between a few predefined styles for the block. Many sites using the Tiger theme have some default style options available for certain blocks as well.

    Editing, Removing, and Rearranging Blocks

    To edit existing blocks added to a section, hover your mouse over the block to reveal a round pencil icon in the top right corner of the block:

    Pencil icon highlighted when hovering over a block

    This opens a small menu where you can edit, delete, or rearrange the block.

    In addition to using this option to rearrange blocks, you can also drag and drop blocks.

    Remember to Save!

    Changes made to a page's layout are not saved until you press the "Save Layout" button at the top of the page. This includes blocks that were added, removed, edited, or rearranged. If you browse away from the layout page and return later, your unsaved changes will remain, but only up to a certain amount of time.

    Matching a Block with the Correct Layout

    Not every block works well with every column layout. Some columns are too wide or too narrow for your placed content.

    For example, a newly created page only has a section with one column, which may be a poor fit for a text-only block. If your site is using the Tiger theme, and you place a text block into a one-column section, a paragraph of text would be over 1400 pixels wide. For many people, especially those with reading or vision disabilities, wide text blocks are a significant barrier. Your readers may have trouble keeping their place and following the flow of text.

    You could alleviate this by adding a Section and choosing a three-column layout for that Section. The "Three columns - 16/68/16" layout might be an appropriate choice for this example. With this layout, that middle column has a maximum width of 940 pixels. 

    With the new section placed into the Layout Builder, you can move your text block from the old section to the new section by clicking the pencil icon in the top right corner of your text block and choosing “Move.” When the "Move" sidebar appears, the Region names for each Section will display in the Layout Builder. You can then move your content to your desired Region. If your original section no longer has any blocks, you can Remove that section.

    Screenshot of the Drupal Layout Builder with a text block placed into the middle column of a 3-column layout.