Examples of visual elements available in the UCSC WordPress theme including guidance on how you might use them in laying out a page.
Page examples
Examples of pages that have built in the UCSC WordPress theme that you can use to draw inspiration from.
Full website examples coming soon
Using a hero image with page content
Using a Hero image with an event
Examples of content layout in WordPress
WordPress web pages are created by using what WordPress calls a “Block Editor.”
“Blocks” are the components used for adding content to the Block Editor. Blocks are things like: headings, paragraph text, lists, images, columns, and more.
This page includes visual examples of how you can pair blocks together in order to create your page layout.
Columns
The columns block allows you to insert text, media, and other types of content on your page, up to six columns.
You can choose several column width size variations to start with: 100, 50/50, 30/70, 70/30, 33/33/33, 25/50/25.
One column layout
A one column layout can be used to call out and prioritize a specific idea on your page. It can show priority in being the only content you want to highlight.
Two column layout
A two column layout splits the priority of two ideas on your page. You can choose to split the columns 50/50, 30/70 or 70/30.
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Two column layout
A two column layout splits the priority of two ideas on your page. You can choose to split the columns 50/50, 30/70 or 70/30.
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Three column layout
A three column layout splits the priority of three ideas on your page. You can choose to split columns 33/33/33, or 25/50/25.
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Three column layout
A three column layout splits the priority of three ideas on your page. You can choose to split columns 33/33/33, or 25/50/25.
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Three column layout
A three column layout splits the priority of three ideas on your page. You can choose to split columns 33/33/33, or 25/50/25.
In mobile, the columns will stack on top of each other, with the columns presented left to right.
A three column layout, using the (bulleted) list block, with a headline
When there are several content ideas to present at an equal priority, group common ideas together with a clear headline. This can be completed in a one, two, or three column layout to show association. Try to keep lists short to reduce the volume of content users have to interact with.
Types of cheeses
- Mozzarella
- Havarti
- Limburger
Types of breezes
- Moderate
- Light
- Gusts
Types of sneezes
- Explosive
- Loud
- Quiet
Icons
Icons are visual cues that help communicate an idea. They can call out an idea, or break up text on a page. When you use icons make sure you base them on metaphors that people understand, or introduce them together with more descriptive text.
Color: for consistency use the “Medium Grey” icon color.
Right arrow
Calendar
Pencil/Edit
Laptop
Two column layout, with left image, text, and button
This layout splits the columns 33% – 66%, allowing you flexibility and control over how your image is placed alongside the text.
In mobile, the stacking order would be: heading, image, text, call to action link.
Media and text block
The Media & Text block allows you to place an image or video side-by-side with text.
Heading
Similar to the visuals provided in the two column layout with image, the Media and Text block gives you even more control over how your image is placed alongside the text.
Initially using a 50% – 50% column split, this block allows you to easily change the column widths.
Two column layout, with images
First column heading
A two column layout splits the priority of two ideas on your page. Leading with an image can break up long text, and provide context to the heading and descriptive text associated with the image
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Second column heading
A two column layout splits the priority of two ideas on your page. Leading with an image can break up long text, and provide context to the heading and descriptive text associated with the image
In mobile, the columns will stack on top of each other, with the columns presented left to right.
Three column layout, with images, text, and buttons
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cover block, for creating heroes / billboards
Similar to a column, the Cover Block allows you to create a large image with a text overlay.
Create real, lasting change
Video embed in a 1,2,3 column layout
Quotes
An example of the quote block in a three column layout with the quote placed in the center column.
“This is an art quote.”
– art person
Text with action button
An example how to highlight a specific call to action. Using a three column layout with a heading, text, and button in the center column.
Make a Gift
Together we can break down the barriers that keep underrepresented students from taking part in the creative economy and diversify the next generation of artists and creative professionals.
Using an image gallery
Photos should have some context to the content that they are placed with on a page. They should always have alt text that describes what is going on in the photo, connected in context to the words on the page. These random photos are being used to show how an image gallery displays.
This gallery is created using the gallery block in a one column layout
Image gallery with headers
Art Department
Digital Arts New Media
Film & Digital Media
History of Art and Visual Culture
Music
Performance, Play & Design
Events
Irwin 2022: Emulsion
June 1 – 30, 2022
Mary Porter Sesnon Art Gallery
The 36th annual Irwin Scholarship exhibition, showcasing the work of a select group of UC Santa Cruz’s accomplished young artists from the Art Department.
Irwin 2022: Emulsion
June 1 – 30, 2022
Mary Porter Sesnon Art Gallery
The 36th annual Irwin Scholarship exhibition, showcasing the work of a select group of UC Santa Cruz’s accomplished young artists from the Art Department.
Events
- Come check out all the Arboretum has to offer on one of our guided tours! Tours will be held the first […]
- Come check out all the Arboretum has to offer on one of our guided tours! Tours will be held the first […]
- Organized by Profs. Banu Bargu & Massimiliano Tomba View on site | Email this event