Web theme design elements

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.

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 call to action

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.

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:

An outdoor art installation featuring an artist creating giant bubbles

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.

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

student in front of a mural

Column One

Hac rhoncus mi cras finibus adipiscing quam justo consectetur ante lectus, habitasse lobortis dis dignissim magna venenatis nibh natoque tempor.

student in front of a mural

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.

student in front of a mural

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.

A dirt road in the forest near UCSC

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.



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

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

News from UCSC rss news feed


Events