Getting started
Sample content
The page demonstrates some of the features you can use to start building high-impact content. The new Layouts tool allows users to create and edit web content using a visual, drag-and-drop editor. You can see your page take shape in real time, preview layout ideas, and easily adjust and move blocks of content.
Using Layout Builder
To use the Layouts tool, simply log in to the site from the user login, visit any content page, and click "Layouts" in the top menu. This will bring you to the Layout Builder editor. From there, you can click "Add section" anywhere on the page, choose some basic configuration options, and start adding content.
If you see something you like, you can use this page as a reference and recreate that layout anywhere on the site. From the Layout menu, hover over a content block you'd like to use, click the gray pencil icon that shows in the top right, and then "Configure". This will bring up a menu that contains every setting required to create this content.
Everything on this page can be built without coding knowledge or web design expertise. All of the styling and formatting are pre-configured.
Typography styles
Here are some headline and typography options that you can use in copy. Click the "Configure" link at the top right of this block, copy your preferred style from the editor, paste to the page you're working on, and edit the text to suit your message.
Bold Headline
Bold headline serif
Bold headline serif underline
Light intro type for body and paragraph text
Bold intro type for body and paragraph text.
You can also use the Text Area component to add videos, images, and social links using the "Add media" tool.
Cards, columns, and calls-to-action
Cards are a very flexible content block. They can call out featured content, make lists of links more appealing, and help organize content. They can even serve as a call-to-action.
Card example 1
You can use the Card block with an image and headline, using the "Excerpt" field to introduce the destination page's content and "Link Text" to add a clickable link button.
Here, you can see cards used in a three-column variant. As with all other Layout Builder components, Cards will automatically adjust their formatting to suit whatever column arrangement or block size you'd like to use.
Card example 3
Or, you can introduce feature or blog content with a full image, headline, byline, and teaser.
Card example 3
Or, you can introduce feature or blog content with a full image, headline, byline, and teaser.
Horizontal variant
You can also stack cards vertically, which can be helpful when linking to child pages within a section of your site.
Call to action
If Cards aren't prominent enough, the Call to Action block can be used to more directly drive your users to interact with a link. Background and button color, as well as button text, are changeable from the blocks' Configure menu.
Event and news feeds
You can use the Events block to pull a feed of events directly from events.uiowa.edu. Use the Configure menu to select content tags you'd like to use to filter content, how many events you'd like to display, and how you'd like them presented.
The example Articles block on the right pulls a feed from content added to your site using the "Article" page type. The Events feed below is pulled from content marked relevant to Students.
Events
Articles
CAMBUS earns multiple awards at state public transit conference and bus roadeo
Construction begins on new road connecting Newton Road to UI Health Care university campus
Pedestrian detour: Evashevski Drive sidewalk closure June 22 - 23
Traffic alert: Evashevski Road closure and detour Saturday, June 22
CAMBUS service alert: VA Loop bus stop to close for one day on Wednesday, June 26
CAMBUS service alert: Route 34 Research Park to detour East Lot beginning Friday, June 21
Parking alert: Hospital Parking Ramp 4 partial weekend closures
Maintenance alert: Sidewalk closure near Lots 65 and 75, June 19 – July 3, 2024
John Underwood recognized as 2024 CAMBUS Support Person of the Year
Stats and rankings
Use the Statistics content block to highlight everything that makes your department or unit stand out. You can place them next to body content by adding them to an adjacent column. You can also place a series of stats side-by-side.
# 34
Best public university in the country (U.S. News & World Report)
Top 3 %
of universities worldwide (U.S. News & World Report)
95 %
job/graduate school placement rate
The "prefix" and "suffix" fields allow for placement of smaller text before or after the primary number or statistic being highlighted. Each stat can also be left- or center-aligned within the column.