ATLAS Web Framework V2- Paragraph Types

A listing of paragraph types in V2 of the ATLAS Framework and how to use them.

Paragraphs can be added to a content page by selecting a paragraph type from this dropdown menu:

Paragraph dropdown

When you edit an existing page by either clicking the Edit tab or editing from the Content page, you will notice that your paragraphs are collapsed. This is to save space and make it easier to find the elements you need to edit. To expand the paragraph in order to make edits, click the Edit button next to the paragraph you want to edit. Then make your edits and hit Save as normal. If there are multiple paragraph types on a page, you can also click Edit All to expand them all at once.

Collapsed paragraph fields


Expand/Collapse

collapsed text
expanded text

To add an Expand/Collapse field

1.       Select Add Expand/Collapse from the paragraph dropdown

2.       Add Collapsed text. This is the title of the collapsible section

3.       Add Expanded text. This is the body of the collapsible section. You can use the format toolbar to add bullets, tables, images, links, and files as well as basic formatting. For more information about formatting body content, see the Text Formatting in Drupal page.

4.       To add multiple Expand/Collapse fields, select Add Expand/Collapse from the paragraph dropdown. 


Photo Grid

photo grid
opened photo grid example

To create a Photo Grid

1.       Select Add Photo Grid from the paragraph dropdown

2.       Choose the image to upload from your machine.

3.       Add Alternative Text. The alternative text field will be displayed as a caption when the user expands the image as well as for screen readers, search engines, or when the image cannot be loaded.

4.       You can add images individually, or select multiple images at a time. Please note that if you upload multiple images you will still need to create alternative text for each image uploaded.


Call to Action

Call to action blocks are made of a combination of fields including Image (1), Heading (2), Text (3), and URL and Link text (which combine to create a call to action button (4)). You can use any combination to create custom and unique blocks within your page, with 1, 2, or 3 blocks per row.

call to action 2-column example

call to action one-column example

call to action 3-column example header with text and button

To create a Call to Action

call to action field item

1.       Select Add Call to Action from the paragraph dropdown

2.       Choose an image to upload (1), add a heading (2), text (3) or any combination of those fields.

3.       To add a link, either type in a link to an external website in the URL field (4), or start typing the name of an existing page on your site to select it as a link.

4.       Type in the Link text (5) that will be displayed on your button

5.       To add another call to action item, click the Add Call to Action Content button (6). You can add up to three Call to Action elements per row.

6.       To start a new row, select Add Call to Action from the paragraph dropdown


Rich text

In V2, Rich text has been combined with the previous Header with Image and Two-column Text paragraph types for more versatility and ease of editing.

rich text example with header image and text

To create a Rich text element

rich text field items

1.       Select Add Rich Text from the paragraph dropdown

2.       Add an optional heading and image through the Heading (1) and Image (2) fields. The uploaded image can be floated to the left or right (or no float) with the Image float (3) dropdown. The default value is float left.

3.       Or use the rich text field (4) to format text .

4.       Use the format toolbar (5) to add headings, bullets, tables, images, links, and files as well as basic formatting. 

5.       You can further format the rich text field by toggling the Text format (6) field to either One-column or Two-column. The default value is one-column. 


Menu Block 2.0

Menu blocks are comprised of an image (1) and a URL and Link Text field that will combine to create a clickable link (2). You can create rows containing 1, 2 or 3 blocks per row.

menu block image with link example

To create a Menu Block

menu block field items

1.       Select Add Menu Block 2.0 from the paragraph dropdown

2.       Choose an image to upload (1)

3.       To add a link, either type in a link to an external website in the URL field (2), or start typing the name of an existing page on your site to select it as a link.

4.       To add another Menu block item, click the Add Menu block content button (3). You can add up to three Menu block items per row.

5.       To start a new row, select Add Menu Block 2.0 from the paragraph dropdown.




Keywords:drupal   Doc ID:96998
Owner:Maggie J.Group:University of Illinois Liberal Arts and Sciences
Created:2020-01-09 11:58 CSTUpdated:2020-01-10 09:24 CST
Sites:University of Illinois Liberal Arts and Sciences
Feedback:  0   0