Valpo Samples Page

The Valparaiso website uses the WordPress Gutenberg editor. Gutenberg is structured around the idea of “Blocks.”

A “Block” is a single unit of content that is formatted in a specific style.

There are many blocks types that you will see in the Block Palette. Samples of the most commonly used block types are shown below.

Block: Intro

The “Intro” Block is typically used at the top of a page or section and contains introductory material for the content that follows. The “Intro” is wider than a default paragraph (see below), the font size is larger, and the text is centered.

Block: paragraph

Paragraph is the default block type for the Gutenberg editor. If you open a new page and start typing in the editor, you are creating a paragraph block. While composing a paragraph, hitting “Enter” will create a new paragraph block.

Block: Headers

There are different header types numbered 1 to 6 and how they are used is important for both SEO and the logical structuring of page content.

The H1 and H2 types are built in to the Valpo page templates so you will usually be using H3-H6 which you can see listed below between the two horizontal lines:


Header 3

Header 4

Header 5
Header 6

Block: spacer

If you examine this page in the editor you’ll see that we’re using the built-in Gutenberg “Spacer” block to give a little extra vertical room between each of these examples. You can adjust the size of a spacer. On this page, all spacers are set to 32 pixels tall, though they may appear a little larger depending on whether the blocks above or below them have their own top/bottom margins.

Block: CTA Row

This block displays a row of Call-to-Action buttons in different styles.

Primary (Large-size) buttons:

Secondary (Small-size) buttons:

Two column layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra, nulla in dignissim pellentesque, ante felis suscipit neque, in lobortis est erat a massa. Nunc mollis, erat nec bibendum tristique, est purus tincidunt magna, vel vulputate tellus urna a lectus. Vestibulum sit amet tellus tortor. Sed sodales, augue vel lobortis tincidunt, elit ante rutrum lacus, et tempor libero lectus at erat. Suspendisse et odio nec libero commodo congue sit amet vel tellus.

Nunc mollis, erat nec bibendum tristique, est purus tincidunt magna, vel vulputate tellus urna a lectus. Vestibulum sit amet tellus tortor. Sed sodales, augue vel lobortis tincidunt, elit ante rutrum lacus, et tempor libero lectus at erat. Suspendisse et odio nec libero commodo congue sit amet vel tellus.

Three column layout

Quisque luctus eros at cursus fermentum. Maecenas finibus lectus a lectus interdum, non gravida justo tempor. In ipsum dolor, pretium vel faucibus eu, molestie quis turpis. Integer id suscipit tortor. Aenean et iaculis diam. In sit amet elit sollicitudin diam scelerisque luctus.

Nunc mollis, erat nec bibendum tristique, est purus tincidunt magna, vel vulputate tellus urna a lectus. Vestibulum sit amet tellus tortor. Sed sodales, augue vel lobortis tincidunt, elit ante rutrum lacus, et tempor libero lectus at erat. Suspendisse et odio nec libero commodo congue sit amet vel tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra, nulla in dignissim pellentesque, ante felis suscipit neque, in lobortis est erat a massa. Nunc mollis, erat nec bibendum tristique, est purus tincidunt magna, vel vulputate tellus urna a lectus.

Full-width Band with either Blue or Gold background:

Block: Number Row

Displays a row of formatted numbers with labels. Used for displaying statistics. Typically displayed with four columns.

100%
Students who love Valpo
5
Colleges
$4
Typical student lunch cost
3600
students

Block: Accordion

Creates a section of content that can be displayed/hidden by toggling a button with a custom label.

Nulla ac maximus metus, sed finibus enim. Nunc vitae massa laoreet, ultricies eros in, maximus sapien. Curabitur vel ornare augue. Donec nec eros dictum, iaculis velit vel, mattis diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut malesuada at urna id rhoncus. Fusce sapien justo, gravida sed nunc ut, tempor sodales lectus. Morbi rutrum mauris at sapien commodo, maximus varius urna iaculis. Quisque dignissim diam id sapien laoreet malesuada. Phasellus vitae odio a elit porta lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur tincidunt est, vehicula imperdiet purus. Quisque vel dapibus velit.

Vestibulum feugiat est ornare elit gravida molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla in sem eget tortor scelerisque facilisis. Aenean molestie, est et euismod viverra, leo massa venenatis elit, gravida laoreet mi velit et ipsum. Nulla facilisi. Proin sed dapibus dui, eget maximus lorem. In erat dui, pretium a imperdiet a, placerat luctus nisi. Morbi lorem sapien, mattis sit amet ligula nec, interdum pharetra sapien. Pellentesque pulvinar, lacus eget suscipit eleifend, sapien magna commodo leo, vitae laoreet turpis velit non dui. Vivamus finibus convallis orci vitae sollicitudin. Duis justo tellus, accumsan id dignissim sed, pellentesque sed erat. Praesent felis neque, feugiat quis imperdiet et, vehicula sit amet metus.

Block: CTA Slider

Creates a slider of images with Call-to-Action buttons on them.

Block: Full-Width Image

praying
Text Box Headline
Full width image with three styles:
– Image only
– Image with Video Link (see below)
– Image with Text box (like this)
– Text box options:
– align to Left or Right
– Background color (Blue or Gold)

Block: Image/Content Double-Panel

The Content Area has a Headline

Options:

  • Image to the Left or to the Right
  • Image links to Video
  • Content area background color: White/Blue/Gold/Off-White

 

Block: Calendar Event Syndication

Choose an event category (“International Dates” in this case) and the number of events to show (“3” in this case).

Block: 3-Square Row

Displays a row of 2-3 elements that break evenly across a 3-block grid and stack neatly on top of each other.

Contact a Counselor

Contact Andrew Ortolano at aortolano@lipmanhearne.com or at 312-809-0029