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:
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.
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
Text Box Headline
– 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.
Text and Button
– button label
– button link
– background color blue or gold
January 01
Calendar Event
– starting date
– ending date (optional)
– background image (optional)
– shadow behind text (optional)
– text style dark or light
– optional button/button style
– background color blue or gold