Working with Drupal’s “Paragraphs”

Certain roles have the ability to place content on Basic pages in addition to the standard Body formatted text field. There are three regions into which a variety of content paragraphs can be placed: Top Content, Main Content, and Bottom Content. This functionality extends the presentation possibilities of the 'Basic page' and gives site editors tools to create interesting and media-rich pages.

For example, an editor with sufficient privileges could place an image displaying a parallax effect at the top of their page, followed by the standard Body field, followed by a narrow image as a graphical divider, then a set of tabbed content that allows a user to quickly scan content with minimum scrolling, perhaps a second image divider, and lastly a video or image gallery.

The content paragraph types are listed below, along with a brief description and the region(s) into which they can be placed.

Formatted Text

The Formatted Text paragraph is simply a rich text field with the same formatting options that are available in the standard 'Body' field. This paragraph can be placed in the 'Main' and 'Bottom Content' regions. To add a Formatted Text paragraph, simply click 'Add Formatted Text', which is the first option in the paragraph selection menu.

Image Feature 500px Parallax

This paragraph is used to add a 500-pixel high, full width image that is 'pinned' to the page creating a parallax effect: as the user scrolls the page, the content above and below the image reveals a different area of the image. This paragraph also includes a 'Copy' field where formatted text can be added. This paragraph can be placed in the 'Top' and 'Bottom Content' regions.

Working with the Image Feature 500px Parallax paragraph

Image Feature 500px Static

This paragraph is used to add a 500-pixel high, full width image; it does not require as 'tall' of an image as the Image Feature 500px Parallax paragraph. This paragraph also includes a 'Copy' field where formatted text can be added. This paragraph can be placed in the 'Top' and 'Bottom Content' regions.

Working with the Image Feature 500px Static paragraph

Image Feature 200px

This paragraph is used to add a 200-pixel high, full-width image; useful for breaking up blocks of text with a graphic element. Only available to place in the 'Bottom Content' region.

Working with the Image Feature 200px paragraph

Accordion

The Accordion paragraph is used to add one or more collapsible sections of content to a page. Each 'Accordion Section' consists of an 'Accordion Section Title' and one or more paragraphs within the 'Accordion Section Body'. The paragraphs that can be added to the body section include Formatted Text, Tabs, Photo Gallery, and Video Gallery. This paragraph type is only available to place in the 'Main Content' region.

Working with the Accordion paragraph

Tabs

Similar to the Accordion paragraph, but instead of headers with accompanying expanding/collapsing content, each 'Tab Section' consists of a 'Tab Name' accompanied by a 'Tab Body'; when a 'Tab Name' is selected, its accompanying 'Tab Body' is displayed. The paragraphs that can be added to the body include Formatted Text, Accordion, Photo Gallery, and Video Gallery. This paragraph type can only be placed in the 'Main Content' region.

Working with the Tabs paragraph

Photo Gallery

The Photo Gallery paragraph can be used to add an unlimited number of images to a user-controlled slideshow. The images are selected from the media library, and new images may be added at the time of selection. The title, or name, of the image in the media library is displayed as the caption for each. Options are available for setting the size (Tiny, Narrow, Medium, Wide, Full Width) as well as adding a margin (above, below, or both). Only available to place in the 'Main Content' region.

Working with the Photo Gallery paragraph

Video Gallery - 1 Column

Provides the same functionality as the Photo Gallery paragraph with the exception that videos are selected from the media library instead of images. The same size and margin options are available. Only available to place in the 'Main Content' region.

Working with the Video Gallery paragraph

Video Gallery - 2 Column

Provides the same functionality as the Video Gallery - 1 Column, but two videos are shown per slide instead of one. Only available to place in the 'Main Content' region.

Working with the Video Gallery paragraph