Skip to content

Content Type: Pattern page

Jump to bottom
Christopher Jones edited this page Jun 17, 2020 · 8 revisions

About the Pattern Page

The pattern page is the most common and versatile content type on the website. It is used for most content that you see on the site, though there a number of shared blocks used for the "Department" and "Degree" content types.

There are a few nuances to keep in mind when using the Pattern Page.

The first is that setting them as child pages to “Department” or “Degree” content types must be done manually using a WordPress plugin. This is a cumbersome process and is managed by the Communications Office. After creating any new pages, please alert the Communications Office so we can properly add them into the menu and set up the correct URL structure. See our guides on URL structure and menu/navigation for more information.

Another nuance is that there are several available blocks to editors that have not been styled as part of the new website redesign. Those blocks should not be used.

Finally, please note that while blocks let editors customize page layout, all of the styles associated with these blocks are hard-coded. This means that changing default sizes, font colors, borders, margins, etc. for any block would globally affect the website and cannot be accomplished easily.

Feel free to reach out to the Web Team if you have any questions or feedback regarding blocks.

Video Tutorials

Watch a video demo of Pattern Pages (part 1)

Watch a video demo of Pattern Pages (part 2)

List of blocks available

Unused blocks (please ignore)

Note: These blocks are WordPress default and have not been fully styled for our new website. Please do not use these on the website as they may display incorrectly.

  • Spacer
  • Columns
  • Social Icons
  • TikTok
  • All “Reusable” Blocks

Home Components

Note: While these blocks are technically available on Pattern Pages, they should only be used on the “Homepage” content type. There are alternative blocks that accomplish every function that these do, such as the “media gallery” or “image carousel” block which can be used instead of the “Home: Hero Space -- Carousel” block to display images in a gallery format.

  • Home: Hero Space -- Carousel
  • Home: Program CTA
  • Home: Featured Events
  • Home: Closing CTAs

Featured Image

The featured image or the top hero image displayed on pages, is not established using a block. This can be uploaded on the “featured image” option on the right-hand side of the content editor.

featured image

  • Required components:
    • Format: Format: .JPG, .GIF (including animation), .PNG
    • Size: 1840 x 998 px
    • Image must include “alt text”

Blocks in Detail

Paragraph

paragraph block icon

  • Required components: Text
  • Notes: This is a standard text block. You may change the alignment of text, bold, italicize and add hyperlinks to text. For quick access, WordPress gives the option to switch to a heading, quote or list block. If you encounter formatting issues when you copy and paste into WordPress, try cleaning the formatting of your content by first pasting it into a plaintext editor (such as TextEdit on Mac, or Notepad on PC). This shortcut wipes away any hidden formatting from your text.

paragraph block

Image

image block icon

  • Required components:
    • Format: Format: .JPG, .GIF (including animation), .PNG
    • Image must include “alt text”
  • Optional components:
    • Caption
    • Hyperlink
  • Notes: This should be used for displaying a single image.

image block

Heading

heading block icon

  • Required components:
    • Text should be short, as this is used for headline purposes. You may also bold, italicize, and add hyperlinks to headings.
  • Notes: For SEO purposes, h2 should only be used once on the page. Search engines use headings to determine content hierarchy, so an h4 should be used as a sub-heading to h3, etc.

heading block

List

list block icon

  • Text elements can be bolded, italicized, or hyperlinked.
  • Lists can be ordered or unordered.
  • Notes: Consider using lists on pages to break up large chunks of content to make pages read more easily.

list block

Quote

quote block icon

  • Required components:
    • Text elements can be bolded, italicized, or hyperlinked.
  • Optional components:
    • Citation
    • Notes: quote marks generated automatically when published.

quote

Classic

classic block icon

  • Notes: The classic block is a block-level version of the classic WordPress editor. It is not commonly used.

classic block

Table

table block icon

  • Notes: tables should never be used for website navigation or any other use that isn’t to display tabular data. At this time we are unable to import table content into the website from another file, such as a .xls or .csv file.

table block

Buttons

buttons block icon

  • Required components:
    • Short text
    • Hyperlink (can be to an internal page or external page)
  • Notes: Buttons can be displayed in-line or on top of each other. The button has two styles (fill) or (outline). Fill is the primary button style and should be used for “call-to-action” links that are the most important. Outline should be used for secondary “call-to-action” links. Please also note that while WordPress provides options for customizing colors in the back-end, these choices do not have an effect when published due to our custom website styles. It is best to ignore these options.

button block

button styles

Separator

separator block icon

  • Notes: The separator provides a small page break on the website, also considered a horizontal rule.

separator block

Form

form block icon

  • Notes: the form block embeds a form on a webpage that has been created separately. Due to security and privacy considerations, the Web Team manages the creation of all forms on the website. Please contact us if you would like assistance with a form.

form block

Embed

embed block icon

  • Notes: This is a “catch-all” block that WordPress uses to embed content that is uncommon. It does not always work, depending on the embed source. We recommend contacting us if you need to use this block.

embed block

YouTube

youtube block icon

  • Notes: This embeds a single YouTube video. Videos must be public or unlisted. You may add a caption with this block.

youtube block

SoundCloud

soundcloud block icon

  • Notes: This is used for a SoundCloud embed.

soundcloud block

Vimeo

vimeo block icon

  • Notes: This embeds a single Vimeo video. Videos must be public or unlisted. You may add a caption with this block.

vimeo block

Accordion

accordion block icon

  • Required components:
    • Individual accordion choice title text
    • Individual accordion choice body text
  • Optional components:
    • Main title text
    • Body text
  • Notes: You can add multiple accordion sections. This is used frequently on the website for Q&A content -- featuring the question as the title and the answer as the body. If you would like to break up rows of accordions with headings, please create a new accordion block.

accordion block

Short Event List

short event list icon

  • Required components:
    • Heading
    • Category (or) Organizer
    • CTA Label (This is text for the link that leads to the event type list on the calendar, often “More events”)
  • Notes: this is a feed of events from either a category or an organizer on the main events calendar. Events must be added separately into the calendar to display in this feed. Please see the “calendar and events” section for more information on how to add events to the calendar. This requires at least three future events to be displayed correctly.

shorteventlist block

Short News List

shortnewslist block icon

  • Required components:
    • Heading
    • Category
    • CTA Label (This is text for the link that leads to the news category list on the website, often “Read more”)
  • Notes: this is a feed of the most recent news stories associated with a single category on the website. News stories are added as separate content types. Please see the “news” documentation for more information about how to add news stories to the website. This feed requires at least three news stories to be displayed correctly.

shortnewslist block

Image Carousel

image carousel block icon

  • Required components:
    • Format: Format: .JPG, .GIF (no animation), .PNG
    • Size: Any size can be displayed but we recommend landscape orientation images at a 16:9 aspect ratio
    • Image must include “alt text”
  • Optional components:
    • Caption
  • Notes: This can be used to display a carousel of images. This requires at least two images to function properly but we recommend having at least 3-5.

image carousel block

Media Gallery

media gallery block icon

  • Required components:
    • Images
      • Format: .JPG, .GIF (no animation), .PNG
      • Size: Any size can be displayed but we recommend landscape orientation images at a 16:9 aspect ratio
      • Image must include “alt text”
    • Video
      • This can support public and unlisted YouTube video embeds. Please note that you must enter the YouTube ID, and not the full address of the video.
      • This requires a separately uploaded thumbnail image. An easy solution is to take a screenshot of a frame from your YouTube video.
  • Notes: you can display multiple videos or videos and images in this gallery. You must have four images or videos at a minimum for this to function correctly.

media gallery block

Columns Component

columns component block icon

  • Optional components:

    • Section heading text (be brief, no more than a few words)
    • Introduction text (be brief, no more than one or two sentences)

  • Two columns content

    • Required components:
      • Image
        • Format: Format: .JPG, .GIF (no animation), .PNG
        • Size: 1072 x 708 px
        • Alt text
      • Caption
      • Title
    • Optional components:
      • Hyperlinked title

two column example

  • Three columns content

    • Required components:

      • Image
        • Format: Format: .JPG, .GIF (no animation), .PNG
        • Size: 1072 x 708 px
        • Alt text
      • Caption
      • Title

    • Optional components:

      • Hyperlinked title

      three column example

  • Vertical columns content

    • Required components:
      • Image
        • Format: Format: .JPG, .GIF (no animation), .PNG
        • Size: 558 x 378 px
        • Alt text
      • Caption
      • Title
    • Optional components:
      • Hyperlinked title

vertical column example

  • Notes: The “columns component” is one of the most dynamic on the website and the way it is displayed varies depending on which “columns type” is selected. Please note that the “columns component” block is a separate block from the default “columns” block, which is not styled for the website and should not be used.

columns component

Contact Block

contact block icon

  • Notes: This block can display contact information and social media links. We recommend using a “Contact Us” heading and including an email address at the minimum. Most social media platforms are included in this block -- simply type the URL for the social media account in the block editor to make the icon appear. For example, for Instagram, type in “http://www.instagram.com/vcuarts/"

contact block

Instagram Feed

instagram feed block icon

  • Notes: Displays a feed from a public Instagram account. Simply put the account name in the “User Name” field. (I.e., “vcuarts”). Paste the full link to the account in the “link” field, (I.e., http:///www.instagram.com/vcuarts/”). We recommend “Follow Us” for the corresponding text.

instagram feed

Twitter Feed

twitter feed block icon

  • Notes: Displays a feed from a public Twitter account. Simply put the account name in the “User Name” field. (I.e., “vcuarts”). Paste the full link to the account in the “link” field, (I.e., http:///www.twitter.com/vcuarts/”). We recommend “Follow Us” for the corresponding text.

twitterfeed block

Back to the top

If you require assistance or have additional questions not covered in this guide, please visit: arts.vcu.edu/newwebsite

Main Navigation

Home

Content Governance

Website access, roles and guidelines

Website tutorials and image specs by content type

Additional Web Resources

Clone this wiki locally