Cover Block Full-Width Hero Image
Welcome to PRI’s Web Documentation & Help site. This site describes and provides instructions on how to use the elements in the 2020 University of Illinois WordPress theme (toolkit 2 + header and footer from toolkit 3) and some custom styling to keep your site consistent with other PRI microsites. This page is a sample home page, with a full-width hero image just under the navigation menu (which usually has the title of the site across the image).
How to Use This Site
This site is evolving and will be updated frequently, but we hope it will serve as documentation and a guide to update content on your site. The Updates page includes the most recent posts, usually short descriptions for how to set something up on a WordPress site, and it also has a sidebar that lists all the categories.
As always, if you’re unsure how to do something or don’t have time to figure it out, email web@prairie.illinois.edu for assistance.
Cover Block with “Fixed Background” checked
The “parallax” cover block above is set to Full width in the popup menu and Fixed Background checked under Settings in the right-side Block menu. The text over the image is an H2 with its Text Color set to white (#FFFFFF) — if you use white text over an image, you MUST add the CSS style “text-shadow” in the “Additional CSS Class(es)” field of the Advanced tab at the bottom of the right sidebar. To align it in the bottom left, select the Cover block and choose the bottom left square where it says, “Change Content Position.”
There is a 24px spacer between the image and this text. This text is grouped with the spacer above it to control its maximum width. If the image is the last thing on the page, use the “img-bottom” CSS class to remove the margin between it and the footer, as shown next.