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.
Think of each Block as a specific kind of content brick used to build a solid, high-quality website.
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.
Layout Builder is the visual editing environment where you’ll assemble the Blocks best suited to your content needs. Getting started is easy!
Each content type uses a unique template that supports its specific use case. For example, Posts display a publish date and author byline, while Pages do not.
Manage Settings is where you’ll provide a title, optionally publish your content, and enter tags and “teaser” details. Some content types require additional fields, like Post’s author byline or Event’s logistics. Advanced settings can also be found in the Manage Settings sidebar, like options to include your new content in the site’s menu.
Your Teaser details display in Views, search engine result pages, and social sharing cards. By including Teaser details, you increase the chances of capturing your audience’s attention so they engage with your content.
Content types are set to Publish by default, but you can toggle the Publish switch to the off position before saving to work in draft mode.
After completing the required fields, use Save to continue to Layout Builder. Before you add your first Block, use Save once more to complete the initial setup process.
The “Add Block” menu is filterable and organized by type to speed up the design process.
Select Edit Layout and Content in the top toolbar to enter building mode. This reveals the Add Block buttons. The number and placement of buttons will depend on the content type, while the region determines which Blocks are available.
When in Layout Builder, the Blocks you add are outlined with dashes to help you visualize where they begin and end.
The first field for each Block is the Administrative label. By default, Layout Builder previews content in real time as you build. This can be adjusted in the Display options or sidebar to show labels instead.
The default editing experience in Layout Builder provides a preview of how Blocks look on the page
The Administrative labels for Blocks will display when Preview Content is turned off
Once you’ve added a Block to your page in Layout Builder, additional options will become available. Use Configure to edit the Block, drag and drop your Blocks to change the order content appears on your page, and continue to add or remove Blocks, refining your content as needed.
We’ve included several pathways to simplify the process for editors. You can use the Publish link in the top toolbar, use the More Actions menu to switch between publish states, or publish on the Manage Settings screen.
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.
We’ve designed the YaleSites Blocks to help you build confidently! Learn more about best practices and use cases for the Blocks.
Already familiar with the Blocks? Download the reference sheet to speed up the Block selection process as you build.
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 content, including headings, paragraphs, lists, and tables.
Use the Image Block to add a single, standalone image to your content.
If you’d like to present an image alongside text, select the Wrapped Image Block instead.
Use the Video Block to add a YouTube or Vimeo video to your website. When using Add Media, enter the URL for your video, adjust the imported name if necessary, and use Save to add the video to your Media Library.
Use the Wrapped Image Block to add an inline image to your content. The text entered in this Block flows around your selected image.
Use the Quote Block to emphasize or highlight text, such as a key point from an article, a statement on a profile, a testimonial, or another type of quotation.
The Quote Block works well for interviews or lengthy news articles, as it helps break up long blocks of text.
The Button Link Block helps to emphasize the importance of a call to action on your page. A user can scan your page and quickly determine where they can take action.
The Callout Block is designed to draw attention to an important call to action on your page. Consider what actions users need to take next when deciding where to place the Callout Block.
The Divider Block adds a horizontal line between Blocks to create a visual break. Dividers can make it easier to scan and navigate your content.
The Content Spotlight Block combines an image, adjacent text, and a call to action. Use this Block to highlight or promote your featured content.
The Quick Links Block is designed to highlight a group of related calls to action in an eye-catching way. Consider what actions users need to take next when deciding where to place the Quick Links Block.
The Gallery Block allows you to easily display a collection of images on your website. Add items as needed. You can drag and drop to rearrange them or adjust their order by numerical weight.
If your media assets do not require attribution or interaction, use the Media Grid Block instead.
The Media Grid Block allows you to easily display a collection of images on your website. Add items as needed. You can drag and drop to rearrange them or adjust their order by numerical weight.
If your media assets require attribution or you would like users to be able to interact with media items, use the Gallery Block instead.
Accordion is an interactive Block that allows users to choose which sections of content to expand and explore further. Accordion Blocks work best when your content falls into natural groupings that only some users will need to access.
Both Tabs and Accordions help organize and consolidate content but have different use cases.
Use the Embed Block to display external resources within your site, such as a Microsoft Power BI report.
When using Add Media, enter an embed code or URL, provide a Title, and use Save to add the external content to your Media Library.
The Custom Card Block creates a collection of easy-to-scan, visually engaging pathways to additional content. This Block can be used to guide visitors deeper into your own website or to link your audience to external resources.
The Action Banner is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.
The Grand Hero is designed to capture your audience’s attention. Use this Block to promote key messaging and calls to action.
When using this Block, it’s important to plan for regular updates to keep your users engaged.
Use the Post Feed Block to quickly add a dynamic list of all published Posts to your site. This Block is an excellent choice when creating a landing page for your Posts.
Use the View Block when you need to control how many Posts are displayed, show Posts in a grid, or refine your content by Tag.
Use the Calendar List Block to quickly add a dynamic list of all published Events to your site. This Block is an excellent choice when creating a landing page for your Events.
Use the View Block when you need to include Past Events, control the number of Events shown, or otherwise refine your displayed content.
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 for your YaleSite.
Use the View Block when you need to control the number of Profiles shown or otherwise refine the display of your directory.
At a basic level, the View Block can quickly add dynamic Post, Event, and Profile feeds to your site.
While the View Block features a variety of settings and options, you’re only required to provide an Administrative Label, select the content type to show, and how you would like it displayed.
When combined with tags, View empowers you to create and display groups of dynamically updated content on your website.
Consider your content organization needs before you begin building. This will help you apply tags accordingly.
Example: You want to build a Resources section. During Setup, apply a ‘resources’ tag to each Resource page. To create a Resources landing page, add a View Block, select Pages, and opt only to include content that uses the term ‘resources.’ Your landing page will automatically update whenever you publish a new page using the ‘resources’ tag.
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.
Tabs are another interactive Block used to organize related groups of content into distinct categories. Unlike Accordions, only one Tab can be viewed at a time.
Both Tabs and Accordions help organize and consolidate content but have different use cases.
Hands-on training is available for anyone who has requested a YaleSite or is responsible for building a YaleSite.