Showcase of page elements

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


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.

Screenshot of the Blocks used in WordPress

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

A biker on a bikepath at UCSC

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.

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.

An outdoor art installation featuring an artist creating giant bubbles

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

A cabin in the woods

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.

Call to action link

A cabin on a mountain lake

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.

Call to action link


Three column layout, with images, text, and buttons

Ocean waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ocean waves

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ocean waves

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.



Image gallery with headers

Art Department

Water Testing, Elizabeth Stephens

Digital Arts New Media

Jacob Garbe: From Closed Rooms, Soft Whispers

Film & Digital Media

Adriana Yedidsion: Ballet Mechanique

History of Art and Visual Culture

Jocelyn Lozano: Hold You

Music

Student Name: Name of Work

Performance, Play & Design

Student Name: Name of Work

Events

Sandbags used in an art installation

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.


Sandbags used in an art installation

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