Examples of visual elements available in the UCSC WordPress theme including guidance on how you might use them in laying out a page.
Examples of content layout in WordPress
Web pages are built in the UCSC WordPress environment 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.
“Patterns” are pre-designed layouts that are made up of blocks.
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 call to action
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.
Example 1:
Media with text, full width
Eros erat semper quisque magna sed vestibulum tincidunt nulla mollis suspendisse mus, cubilia ultricies placerat arcu praesent lacinia potenti pretium justo vel.
Dictum molestie mollis vestibulum aptent conubia eu metus sagittis proin lobortis primis, habitant morbi cursus tortor nascetur lorem natoque convallis nisl nisi. Proin imperdiet eu lectus platea dictum habitant phasellus litora consectetur, parturient facilisis eleifend arcu aliquam donec natoque.
Example 2:
Media with text, fixed width and centered
Eros erat semper quisque magna sed vestibulum tincidunt nulla mollis suspendisse mus, cubilia ultricies placerat arcu praesent lacinia potenti pretium justo vel.
Dictum molestie mollis vestibulum aptent conubia eu metus sagittis proin lobortis primis, habitant morbi cursus tortor nascetur lorem natoque convallis nisl nisi. Proin imperdiet eu lectus platea dictum habitant phasellus litora consectetur, parturient facilisis eleifend arcu aliquam donec natoque.
Example 3:
Media with text
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
Use to callout two items that have equal weight on your page.
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
Column One
Hac rhoncus mi cras finibus adipiscing quam justo consectetur ante lectus, habitasse lobortis dis dignissim magna venenatis nibh natoque tempor.
Column Two
Porttitor fringilla varius velit tristique parturient ad interdum facilisis viverra himenaeos pellentesque conubia aptent, commodo primis habitant tincidunt quisque justo vulputate sodales nulla placerat pretium dui.
Column Three
Mauris himenaeos dapibus torquent malesuada neque curabitur aenean pharetra penatibus, tellus congue sociosqu parturient tempor diam vitae consequat.
Cover block, for creating heroes / billboards
Similar to a column, the Cover Block allows you to create a large image with a text overlay. If you use the text overlay, choose an image where the text won’t cover people’s faces, or hide the meaning of the image.
Web theme design elements
Featured image, with heading and text
Use for specific information that you want to highlight on your website, that could include an image.
Block heading
Block text. luctus laoreet rutrum aliquam tempus mauris fermentum mi mattis vehicula enim efficitur, fusce justo curae natoque torquent lectus phasellus volutpat ad semper in. Dui lacinia duis parturient viverra tempus primis consectetur nostra morbi mattis nam ipsum, fringilla penatibus sociosqu nulla maecenas tincidunt phasellus risus praesent elit.
Featured video, with heading, text, and call to action
Use for specific information that you want to highlight on your website, that could include video.
Block heading
Block text. Be sure to change the video. tempus mauris fermentum mi mattis vehicula enim efficitur, fusce justo curae natoque torquent lectus phasellus volutpat ad semper in. Dui lacinia duis parturient viverra tempus primis consectetur nostra morbi mattis nam ipsum, fringilla penatibus sociosqu nulla maecenas tincidunt phasellus risus praesent elit.
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
Use when emphasizing a single call out of information.
Interstitial Heading
Add your interstitial body content here.
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
Similar to the image gallery block, this layout was created in a three column layout using a heading and image paired together. In this case, the caption is also shown on the image.
Art Department
Digital Arts New Media
Film & Digital Media
History of Art and Visual Culture
Music
Performance, Play & Design
News from UCSC rss news feed
- More than 200 students gathered on November 28 for Slug Stories, an annual College Nine and John R. Lewis College tradition. Live and in-person for the first time in three years, the event showcased nine impassioned students who told stories of life experiences that have shaped who they are today.
- For the first time, remote education tools have allowed undergraduate students to gain direct experience experimenting with cortical organoids grown at UC Santa Cruz.
- An innovative Public Fellowship Program at the Humanities Institute (THI) is showing the important real-world impact of doctoral students’ humanities skills and expertise and offering exciting possibilities for the future of graduate education and career pathways.
- The University of California, Santa Cruz, an institution renowned for innovation, social justice, and sustainability, announces a unique Premed Postbaccalaureate Program focused on bridging looming healthcare gaps in California.
Events
- ALL ARE WELCOME! Come by the Stevenson Garden for a moment with your community. Snacks, music, & all tools are provided. […]
- ALL ARE WELCOME! Come by the Stevenson Garden for a moment with your community. Snacks, music, & all tools are provided. […]
- ALL ARE WELCOME! Come by the Stevenson Garden for a moment with your community. Snacks, music, & all tools are provided. […]