Web Style and Component Library

The Hermione theme features five page content sections, including:

1. Department Page Content
2. Page Content
3. In-Content Callouts
4. Sidebar Callouts
5. Full Width Callouts

Each section offers a number of different components to display and highlight information and media.

Department Page Content

The Department Page Content section is where to upload a header image for your page. It offers an option to display a short header.

Page Content

Page Content section contains the title, intro, and content fields. Content added in this section will display at the top of the page and before all other content added to the ‘In-Content Callouts’, ‘Sidebar Callouts’, and ‘Full Width Callouts.’ Add content by filling in each block.

In-Content Callouts

In-Content Callouts contain the majority of page components. To chose a component for your page, simply click on the blue “Add Content” button at the bottom of the In-Content Callouts section and pick a callout type from the pop-up menu. Each callout consists of multiple fields that you will fill in with your information and images. Most callouts allow a choice of color themes.

Sidebar Callouts

Sidebar Callouts are reserved for flexible buttons and a button that links to the campus calendar.

Full Width Callouts

The Full Width Callouts section contains components that will appear at the very bottom of the page. They fill the full width of the browser window and contain blocks to input information such as announcements, galleries, contact info, and social media among others. Click on the blue “Add Content” button on the bottom of the section to access a pop-up menu to pick a callout type.

Tips for Using the Page Content Sections

• Any field with an * next to it is a required field.
• Image blocks have a minimum size indicated next to the image block. Any image smaller than the minimum size will result in an error message in the media library.
• All images need to be 72 dpi.
• You may create a WordPress gallery on your page by using the “content” component in the pop-up menu. Be aware that the images for a gallery need to be 770 x 433px in order to fill the space correctly.

For consultation on manipulating images, contact the Communications Division or visit web.lafayette.edu.

In-Content Callouts

There are 22 different In-Content Callouts. They are shown below as they will appear in your browser. The Lafayette Web Style Guide PDF illustrates the WordPress admin area for each component.

Full Width Callouts

There are 8 Full Width Callouts. They are shown below as they will appear in your browser. View this PDF if you’d like to take a look at the WordPress admin area of each component.