Mini Site Landing Page Example

Hero Slide

A hero image or slide is an optional component, but a highly recommended one for this page type.

Mini Site Landing Page Example

Mini site landing pages are used on Barnard's mini sites as home pages for departments or centers. See how to set up a mini site landing page on Barnard's Website Resources site.

About this example page

This page type has many visually engaging components. We've grouped similar components together so you can more easily compare them.

Large, full-width image components

Several components use an image that fills the whole width of the browser window. They include the following:

  • Full Screen Spotlight (the same example image is used here and in the Single Feature component for comparison)
  • Full Screen Video Player (video must be on YouTube)
  • Single Feature (the image is automatically darkened a bit so the text shows up well)
  • Voices & Stories

Images for these components should be at least 1600 pixels wide. They are cropped automatically, so be sure to use the focus and preview functions when uploading a new image.

Full Screen Spotlight

Required fields include the title, description, image, link, link text, and align.

Align "normal" places a white box over the left side of the image. "Reverse" puts it on the right side.

Images should be at least 1600 pixels wide.

Full Screen Video Player Links to YouTube
students at big sub posing with sandwich

Single Feature Image

Keep the text brief. It will be displayed over the image. The link must be internal, not to an external site.

Voices & Stories

Join the Movement

Jamiyla Chisolm

Components with smaller images

  • Flexible Text and Image Slider (great for images of different sizes, accommodates horizontal or vertical photo orientation)
  • Split Screen Feature (can stack this component to show more than one "row" of image/text or text/image pairs)
  • Bits & Pieces Grid (usually used in groups of 3 text/image pairs; this component accommodates less text than the Split Screen Feature)
  • Three Across Featured (can be used with or without images and links)

Flexible Text and Image Slider

Slide Title, this is optional

Slide description is also optional. What makes this component flexible is that it can use images that are horizontal or vertical and larger or smaller. People often don't go past the first few slides, however, so don't add a whole bunch.

Vertical image

Split Screen Feature

Here's the description text, which is optional.

Note: The image is also optional, but the point of this component is to juxtapose an image on one side with text on the other.

Title, orientation, and color theme are required.

Bits & Pieces Grid

residential building with grass

Short text description. This field is required, as is the associated image field.

If you use only 2 images, they'll display larger than 3 will.

green chairs milstein center

Another short description. This component works well with 2 or 3 "bites" or text-image pairs.

green chairs

Third section of text.

Events-focused components

These components are great options for showcasing events in your department if you don't have enough to create an individual event page.

  • Three Featured Events (choose a "category" of events, e.g. economics, to narrow down what's displayed)
  • Three Featured Events Manual (choose 3 specific events to display)
  • Event Content Listing (choose a "category" of events, display in a list)

How to set up these components

Event Content Listing

Story-focused components

These components allow you to link to already created stories on Barnard's website.

  • Three Recent Stories (automatically selects the 3 most recent)
  • Three Manual Stories (includes the associated images automatically)
  • Three Manual Stories - No Images (requires that the stories not have associated images)
  • News Listing (select a "category" of news items from the Taxonomy)

How to set up these components

Short text components

  • Full Descriptive Text Links (how to set up)
  • Contextual Giving CTA (we recommend you use the beige Barnard logo pictured below as your background images. It is named "logo-barnard-monogram-beige_1.png" in the CMS media library; how to set up)
  • Numbers & Stats (how to set up)

This component requires a title, description, background image, link, and link text.

The background is beige and covers the full width, but the image does not.

Numbers & Stats

11

Number of visual-heavy components available, including this one.

Available components not demonstrated here

These components require special code to be inserted, so they are not shown as examples:

  • Email Sign Up
  • Social Media Feed

How to set them up

Columns is another component not demonstrated here. It's better used on pages with fewer visually rich options. See the Basic Page Example