Building with Blocks

The new YaleSites platform features a variety of specialized content containers called Blocks designed to help site builders, editors, and content creators organize information.

Building with Blocks differs from writing in a Word document or using a traditional page-centric approach. This resource will help you understand the Blocks available and how to use them to make your content shine.

Content Types: Content blocks work on all YaleSite content types. Selecting the appropriate Content Type is key in building and managing your website content. Each content type has different attributes and functionality. Learn about the YaleSites content types before building with content blocks.

Layout Builder: Layout Builder is the visual editing environment where you’ll assemble the Blocks best suited to your content needs. Learn how to use the layout builder before building with content blocks.

Content Blocks

What are blocks?

Working with content in Blocks

Basic Content Blocks

Media Content Blocks 

Advanced Content Blocks

Content Block Resources

Illustration of a site layout

What are Blocks?

Blocks are robust, pre-designed components used to display and customize the content on your website.

We already break web pages into sections, such as the header, body, and footer. Blocks extend this by breaking your content into individual, self-contained pieces. A heading and paragraph become a Text Block, a photo becomes an Image Block, and so on. Embracing this new approach empowers editors to shift their focus to content rather than creating and maintaining code.

  • Blocks are designed to be combined, mixed, and matched based on your goals and objectives
  • Your content becomes easier to add, remove, manage, or rearrange
  • Content can be restyled with ease without impacting brand compliance or web accessibility
  • You’ll build your YaleSite with Blocks in an exciting new intuitive, visual editing environment

Working with content in Blocks

Transitioning from a page-centric mindset may be challenging at first but can yield exemplary results. Understanding your goals, objectives, and user needs before you build simplifies the process and helps set you up for success.

  1. Center your goals, objectives, and user needs. This helps to inform your overall site structure, as well as where to place Blocks and which Blocks to use.
    • Outline your content before you start building
    • Prioritize your most important information and calls to action
    • Consider what you’d like your users to do next and guide them along this path
    • Know what success looks like so you’re prepared to evaluate your approach
       
  2. Consider your content requirements before selecting a Block. 
    • Will you need to feature a call to action, and if so, what level of prominence is appropriate?
    • Do you need to attach media assets, and if so,  do those media assets require captions or attribution?
    • Can you apply Tags and use the View Block to display content efficiently?
       
  3. Consider the relationship and proximity of Blocks. Just as excessive, unstructured text can lead to page abandonment, too many visual elements in close proximity can yield the same results.
    • Give your Blocks room to breathe
    • Keep your calls to action focused so they’re not in competition with each other
       
  4. Don’t be afraid to experiment!
    • Create a clone of your content and switch up your Block selections when you’re uncertain which Block best supports your needs. Then, share both versions of your content with colleagues to gather feedback on which works best.
    • Adjust your theme settings to unlock alternate style options for Blocks

Basic Content Blocks

  • Button Link Block

    The Button Link Block helps to emphasize the importance of a call to action on your page.

  • Callout Block

    The Callout Block is designed to draw attention to an important call to action on your page.

  • Divider Block

    The Divider Block adds a horizontal line between Blocks to create a visual break.

  • Image Block

    The Image Block allows you to easily showcase standalone images on your website, with optional captions for added context.

  • Link Grid Block

    Display columns of important links, such as resources and related content, in a clean and organized layout.

  • Quick Links Block

    The Quick Links Block is designed to highlight a group of related calls to action in an eye-catching way.

  • Quote Block

    Use the Quote Block to emphasize or highlight text, such as a key information, a statement, a testimonial, or another type of quotation.

  • Quote Callout Block

    Display a featured quote from a person or organization, accompanied by an image and banner-like background.

  • Reference Card Block

    The Reference Card block lets you take an existing piece of content and show it off with an eye-catching card.

  • Spotlight - Landscape Block

    The Stoplight Landscape Block combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.

  • Spotlight - Portrait Block

    The Stoplight Portrait Block combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.

  • Text Block

    The Text Block features a What You See Is What You Get (WYSIWYG) editor that behaves like word processing software. Text is your go-to Block for text.

  • Video Block

    Add YouTube or Vimeo videos to your website with the Video Block. Enter the URL, adjust the name, and save to the Media Library.

  • Wrapped Image

    Add an inline image to your content with the Wrapped Image Block. The text entered in this Block will flow around your selected image.

Media Content Blocks

  • Gallery Block

    The Gallery Block allows you to easily display a collection of images on your website.

  • Image Block

    The Image Block allows you to easily showcase standalone images on your website, with optional captions for added context.

  • Media Grid Block

    The Media Grid Block allows you to easily display a collection of images on your website.

  • Video Block

    Add YouTube or Vimeo videos to your website with the Video Block. Enter the URL, adjust the name, and save to the Media Library.

Advanced Content Blocks

  • Accordion Block

    Accordion is an interactive Block that allows users to choose which sections of content to expand and explore further.

  • Action Banner Block

    The Action Banner is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.

  • Calendar Block

    Use the Calendar List Block to quickly add a dynamic list of all published Events to your site.

  • Custom Cards Block

    The Custom Card Block creates a collection of easy-to-scan, visually engaging pathways to additional content.

  • Embed Block

    Use the Embed Block to display external resources within your site, such as a Microsoft Power BI report.

  • Facts and Figures Block

    Use the Facts and Figures Block to present key content in an organized grid with a visually appealing banner-like background.

  • Grand Hero Block

    The Grand Hero is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.

  • In-line Message Block

    The In-Line Message block allows you to highlight crucial information, instructions and deadlines directly on the page.

  • Post Feed Block

    Use the Post Feed Block to quickly add a dynamic list of all published Posts to your site.

  • Pre-Built Form Block

    Quickly add a form to your site using the Pre-Built Form Block. Simply select your preferred form, provide a title, and add the Block to your page.

  • Profile Directory Block

    Use the Profile Directory Block to easily add a dynamic directory to your site. This Block is an excellent choice when creating a Contact page.

  • Tabs Block

    Tabs are another interactive Block used to organize content into distinct categories. Unlike Accordions, only one Tab can be viewed at a time.

  • Tiles Block

    Easily showcase short content in a captivating grid of Tile cards with branded background colors and images.

  • View Block

    At a basic level, the View Block can quickly add dynamic Post, Event, and Profile feeds to your site.

Content Block Resources

Already familiar with the Blocks? Download the reference sheet to speed up the Block selection process as you build.

Blocks Reference Sheet

Community Trainings

Hands-on training is available for anyone who has requested a YaleSite or is responsible for building a YaleSite.

Upcoming Trainings