New year, new release

The YaleSites team has implemented a variety of new features, as well as fixes and improvements impacting the display, authoring, and editing experiences for creators.

We used the new text style variation, Emphasized, in the first Text Block of this Post. It offers a larger, stronger text treatment to provide a visual boost to introductory text. To use this feature, change the Text Style Variation from Default to Emphasized while editing a Text Block.
 

Introducing the new Spotlight Blocks

Looking for the Content Spotlight? We’ve boosted this Block’s usability and impact by creating a second version. Editors can now choose between the Spotlight - Landscape, which behaves like the original Content Spotlight, or the new Spotlight - Portrait, which is ideal for vertical, portrait-style images.

To maximize the usability of Spotlights, we’ve added a new dial to the Block, allowing you to select a background color based on your site’s Theme. You can see each of these Block variations in action below.
 

 
Guide users with anchor links

Site editors can now add anchor links through the WYSIWYG editor. When a visitor clicks on an anchor link, the browser scrolls to the designated section, providing a convenient way to access referenced content without requiring you to describe where users can find what they’re looking for.

In addition to these new features, we’ve made a variety of fixes and improvements, which can be found in the Release Notes.

Tips and tricks: Using Anchor Links

Anchor links are clickable shortcuts that allow you to jump to different sections on a page.

How it works

This navigation technique is an easy way to improve the user experience for your audience, as it facilitates seamless movement within longer web pages. Here’s how to add an anchor link:

1. Set your destination by creating an anchor name.
   1. Click the Anchor Button (flag icon) while editing text in the WYSIWYG editor. It reveals a field to enter your anchor name. 
   2. If you need to have more than one word for your anchor name, use dashes or underscores to keep the words connected, or your anchors won’t work. (E.g. using-lists.)
   3. Once you’ve successfully added your anchor name, you’ll see [INVISIBLE ANCHOR: your-anchor-name] in the WYSIWYG. This text is hidden from users visiting your page. You’ll see it when editing, allowing you to manage your anchor links.
   4. Update or add your Block to the page.
2. Add your anchor link.
   1. Highlight the text you’d like to use for your anchor link and click the Link Button in the WYSIWYG editor.
   2. Add a hash mark followed by your anchor name. (E.g. #using-lists) Once again, make certain there are no spaces in your link text.
   3. Update the Block, Save the page, and now your anchor link is in place.

Since anchor links are added in the same way as standard links, you can use them anywhere else you’d place a link, like the Button Block! Instead of searching for a link destination in the URL field, just add the hash mark and your anchor name.

Bonus tip: Copy your anchor name text before updating your Block. It will save you time later, as you can paste your anchor name into the link field to avoid inadvertent typos!