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 layout builder tool is flexible and allows a wide range of display options.

Accessing the Layout Builder

Each individual Page can have its layout customized by anyone with the content manager or site admin roles. To access the layout builder for pages, click the "Layout" tab when viewing the page:

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 (described in Sections and Blocks below).

Layout Builder for News, Events, People, and Posts

It is also possible to modify the layout for News, Events, People, and Posts, but it works a bit differently than Pages. For these content types, changes to the layout will apply to all content of that type. For example, if you added a text block to the News detail page layout, every news article on your site would have that same block on it.

There is no "Layout" tab (as shown above) when viewing these content items like there is for Pages. To access the layout builder for these content types, site admins can visit the module settings page, and then click the Settings button for the A collection of features or functionality that can be enabled on sites. WDS has made several optional modules available to site administrators to enable on their site. For example, the "News" module enables the News content type and provide a News List Block for displaying news on a page. that corresponds with the A collection of fields that describe a specific type of content, like a news article, a person, or an event. Site admins can add additional content types by enabling optional modules. WDS can also create custom content types for a site. . There is a button to access the layout builder at the bottom of this form. For example, here's the settings form for Events with the button circled:

Event module settings form with button to access the layout builder circled

In most cases, you cannot modify the arrangement or layout of the main fields for content types, but you can add blocks around those fields. The collection of fields for the A individual item of content. For example, a page, a news article, and an event are all content items, which correspond to the Page, News, and Event content types, respectively. are represented by the special Content Fields block which you will see in the layout builder interface.

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:

  • The Content Fields block, which represents the fields that are input in the content entry form for that content item. For example, for Page, this contains the Lede, Body, and Featured Image fields.
  • The Related Documents block, which shows a list of any related documents added to a page.
  • The Related Links block, which shows a list of any related links added to a page.

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.