Your website is the most important marketing and information channel for our primary audiences. As such, your website plays an important role in advancing and supporting the Lafayette College brand.
The Hermione theme features five page content sections, including:
Each section offers a number of different components to display and highlight information and media.
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 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 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 are reserved for flexible buttons and a button that links to the campus calendar.
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, and contact info, 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.
Images are a important part of your website design in some areas. At the highest level, images help your visitors connect and feel comfortable on your site. You want to capitalize on the amount of information presented in a photograph.
Depending on the Callout being displayed, one of the following sizes will used:
When adding images to callouts, the best strategy is to create an image at the highest size because When you add an image to your site it will create a version of that image at each of the above sizes. This leaves you the option of using the image in multiple places if needed and not have to worry about not having the right size or end up with something with poor resolution. For the most part you will be dealing with an aspect ration of 16:9. There are a few callouts that use an aspect ratio of 1:1, but if your image has it’s content centrally positioned, it will crop properly. You may also refer to examples below to see the minimum image size required for each callout.
Some basic guidelines to follow when creating or choosing images to use on your site:
Our site is responsive, the images will scale in size depending on the device it is being viewed on. However, it is not perfect, so playing with image placement helps, you want your image to have strong central positioning after cropping.
If you don’t have Photoshop, optimize images with https://pixlr.com/ – a free photo editing and design tools
Other tools compress and optimize images
For consultation on manipulating images, contact the Communications Division or visit web.lafayette.edu.
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.
Details
Details
Details
Minimum image size: 770px x 433px
Minimum image size: 770px x 433px
Minimum image size: 770px x 433px
Minimum image size: 770px x 433px
Intro paragraph goes here, but is not necessary.
Minimum image size: 770px x 433px
Minimum image size: 160px x 160px
Minimum image size: 470px x 540px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum velit euismod in pellentesque massa. Faucibus interdum posuere lorem ipsum dolor sit amet.
Minimum image size: 770px x 433px
Vivamus ullamcorper cursus mi, vitae malesuada nulla consectetur in. Aliquam erat volutpat. Pellentesque a erat eros. Etiam at turpis nec lectus dictum rhoncus.
Minimum image size: 770px x 433px
Overall Description goes here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus placerat eros ut finibus. Curabitur porta, nisi a elementum viverra, arcu tellus finibus velit, vel lacinia mi lacus a justo. Maecenas vitae quam urna. Nulla eu consectetur mauris. Ut ex nibh, varius nec nisl at, fringilla placerat leo. Nulla nec efficitur diam, vitae semper nis
Link TextLorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus placerat eros ut finibus. Curabitur porta, nisi a elementum viverra, arcu tellus finibus velit, vel lacinia mi lacus a justo. Maecenas vitae quam urna. Nulla eu consectetur mauris. Ut ex nibh, varius nec nisl at, fringilla placerat leo. Nulla nec efficitur diam, vitae semper nis
Title LinkMinimum image size: 470px x 300px
Description goes here.
Minimum image size: 770px x 433px
At the invitation of the White House, Prof. Caroline Lee gathered with students, policy experts, and political engagement professionals from across the…
Hosted by Lafayette College Libraries, the lecture will take place Nov. 18 at 4:30 p.m. in the Gendebien Room of Skillman Library.
As the keynote speaker delivering the Thomas Roy and Lura Forrest Jones Faculty Lecture Tuesday, Nov. 12, Gordon will introduce how nature can serve as…
NPR Chip Bergh ’79: employees want to know where their leaders stand
EXPRESS TIMES He is among presidents, candidates to visit Lehigh Valley
MORNING CALL Saxophonist is MacArthur, Guggenheim honoree
Minimum image size: 770px x 433px
Aliquam erat volutpat. Fusce vulputate dui enim, eget volutpat orci eleifend eget. Nulla id vulputate sem. Sed sit amet felis in sapien pulvinar vulputate. Curabitur ut eros in mauris porttitor laoreet. Duis a molestie nunc.
Vestibulum quis ullamcorper risus, eu fermentum est. Vivamus ac accumsan magna. Curabitur sed arcu nisi. Sed ut ultrices sapien, sit amet porta dui.
Pellentesque blandit ipsum elit, quis pretium nisi venenatis ac. Nulla facilisi. Sed eget ornare lacus. Curabitur pulvinar tristique bibendum. Maecenas pharetra, velit ac imperdiet laoreet, turpis erat volutpat orci, id consectetur augue magna tristique nibh.
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.
Minimum image size: 770px x 433px
Announcement content will go here.
Description will go here.
Minimum image size: 770px x 433px