Article Page

Last updated: April 12, 2023

 

Article pages provide greater flexibility in designing landing pages. Content can be displayed in a variety of custom blocks.

All available custom blocks can also be viewed in our pattern lab.

 

  1. Click Manage on the top black nav menu
     
  2. Click Content on the white sub-nav menu
     
  3. Click +Add Content at the top
     
  4. Click on Article
     

Page Metadata

You will first enter the page's metadata:

  1. Enter the page title
     
  2. Leave the Body, Tags and Image fields blank
     
  3. Uncheck the Published checkbox at the bottom of page if you want to work on page as a hidden draft
     
  4. Menu Settings: toggle and check off "Provide a menu link" if you want the new page to show up in site's navigation menu
     
  5. URL alias: only uncheck "Generate automatic url alias" if you want to manually enter a custom url: /name-of-page (Example: /brand-guidelines)

 

Page Content

After saving the Metadata page, click on the Edit Content tab to begin building out your page.

 

  1. Click +Add Section
     
    Add Section screen

     

  2. Click the column layout you want for this new page section.

    Note: One Column blocks run full width on the screen while Tailwind One Column Margined has narrow margins
     

    Column Layout screen

     

  3. Under Configure Section:

    Administrative Label -- optional name for the block to help a user identify blocks on the page (Example: Student Testimonial)

    Style List – leave blank (no choice selected).
    One exception would be if you'd like to use a Basic Block that has white text on a dark green background -- select Background Green option.
     

    Configure Section screen

     

  4. Click + Add block within your newly created section
     
    Add Block screen

     

  5. Click +Create Custom Block at top
     
    Add Custom Block screen

     

  6. Select the block type you want to use
    Custom Block Options screen

     

    Click +Add Section for every new block you add to your page.

    There should only be 1 block in each section.

    This will make it easier to keep track of your content and move sections up and down on the page as needed.

    Do not add empty blocks to your page and then click Save. This will break the Article page.

     

  7. To save the page, scroll back to top of page and click the green Save Layout button.
     
    Save Layout button screen

 

Editing Existing Content

  1. Click the Edit Content tab at the top of the page
     
  2. Scroll down to the block you want to edit and hover your mouse over the pencil icon at the top right of the block. Click the pencil icon and select "Configure" from the dropdown list
     
    Edit Block screen
  3. Click the blue Update button after making edits
     
  4. To save the page, scroll back to top of page and click the green Save Layout button.

 

Page Revisions

After your initial page creation, make sure that "Create New Revision" is checked off at top right of the Edit Metadata page every time you go back in and make edits to the page. In the Revision Log Message, you can enter info regarding the changes you're making to the existing page.

Under the page's Revisions tab, you can see the page's version history and can revert back to a previous version if needed.

 

Custom Blocks

Accordion

Accordions work well for breaking up long blocks of text into an expandable/collapsible view.

Example:

Basic

Basic blocks have the standard toolbar and can include text, images and template snippets.

Example:

Carousel

The Carousel block creates a slideshow of images that users can navigate through using arrows provided.

Example:

Content

Content blocks include some combination of an image, header, title, description and call to action link.

There are several "view modes" available -- each view mode provides a slightly different display of the content. Once the content is dropped into the fields, you can switch displays using the View Mode dropdown.

Images:

  • Using One Column layout: horizontal, vertical, square images work nicely in vast majority of the Content block views
     
  • Using Tailwind One Column Margined layout: vertical images work better with most Content block views due to the narrow margins
     

Examples of all view modes:

*Do not use Tailwind One Column Margined with Contentblock1, Contentblock4 or Contentblock9 view mode

CTA

Call to Action blocks allow for a prominent link button with optional descriptive text above it.

Example:

Hero

Hero blocks allow for a prominent banner/heading across the top of a page.

There are several "view modes" available -- each view mode provides a slightly different display of the content. Once the content is dropped into the fields, you can switch displays using the View Mode dropdown.

Hero images should be at least 1800 pixels wide for best quality. Please compress images before uploading to Drupal.

Examples of all view modes:

Image & Text

Image & Text blocks contain side by side image and text with optional small and main titles above them.

There are two "view modes" available -- each displays the content the same way but one has a dark green background and the other has a light blue background. Once the content is dropped into the fields, you can switch displays using the View Mode dropdown.

Examples of both view modes:

Image Content Grid

Image Content Grid blocks display photos in rows of 2, 3 or 4. Each photo in the grid can be hyperlinked (but it's not required). If you include an image description, it will appear below the photo.

Examples of all view modes:

Masonry Grid

The Masonry Grid block is a photo grid layout that does not have a fixed row height and places images based on available vertical space. This grid layout works best with a minimum of 12 photos.

Example:

Photogrid

Photogrid blocks display photos in rows of 3. Each photo in the grid can be hyperlinked (but it's not required). If you include an image description, it will appear in a green overlay when you hover over the photo.

Example:

Pulled Quote

Pulled Quote blocks display text on the page as an attention-grabbing visual element.

There is no need to include quotation marks in the Quote field or a dash in the Attribution field.

Example:

Quick Links

Quick Links blocks create a prominent grid of button links with a gold textured background.

Example:

Quote Images

Quote Images blocks display quotation text in white over an image. The quotation/attribution text can float either to the right or left.

Example:

Standalone Image

The Standalone Image block allows you to upload a single image on the page. 

If you'd like an image to run full width across the page, the compressed image must be at least 2000 pixels wide.
 

Example:

Standalone Text

Standalone text blocks provide three ways to display short blocks of text.

There are three "view modes" available -- each view mode provides a slightly different display of the content. Once the content is dropped into the fields, you can switch displays using the View Mode dropdown.

Examples of all view modes:

Statistics

Statistics blocks allow numerical data to be displayed in a visually appealing way.

There are several "view modes" available -- each view mode provides a slightly different display of the content. Once the content is dropped into the fields, you can switch displays using the View Mode dropdown.

Examples of all view modes:

Youtube Video

The Youtube video block allows you to embed a video on the page. Use One Column for a full-width video. Use Tailwind One Column Margined for a video with margins.

Example:

All available custom blocks can also be viewed in our pattern lab.