Newest Updates to the User Guide

Did an update in the Web Team Newsletter lead you to this Wiki? Or maybe you visit often and just want the latest scoop. However you got here, this is one place where you can find the latest and greatest additions and information. Another is the  home page of this Guide  under "Subdocs Recent Activity."
New Look to the Editing Interface: Paragraph Previews (Oct 16, 2024)Whether creating a new page or editing an existing one, you are accustomed to seeing a tiny thumbnail of an image alongside the name of the component type (e.g. Testimonial or Spotlight) and a single-line teaser of its content. The updated editing interface displays a visual preview of each component that matches what site visitors see.
﻿
Screenshot of the updated editing interface view. It will have expanded previews of each component that show the image (if an image is used) and will render the way site visitors see the content. For example, a Color Band component is displayed with the entire color band visible with the various styling options that have been selected.Screenshot of the updated editing interface view. It will have expanded previews of each component that show the image (if an image is used) and will render the way site visitors see the content. For example, a Color Band component is displayed with the entire color band visible with the various styling options that have been selected.
As you can see, the entire component, e.g. Color Band, is visible without clicking the “edit” button. This will be true for all of the components on your page, even those without images, such as Text Areas. The “Edit” button remains in its same location, and the reordering dots on the left (see screenshot above in the Testimonial region) also retain their function and location in the editing interface. 
Updates to Reorganizing Components within a Page (Oct 16, 2024)There are two ways to move components within a page: "grabbing" the 6-dot button at the left of a component and using the "Drag & Drop" option. We have made small updates to both:
.1The button within a component now includes up and down carets. To move a component up or down one space, simply click the up or down caret one time, respectively. 
.2Drag & Drop functions exactly the same as before. We moved the button to be easier to find. 
﻿ Learn more about reorganizing components on a page⁠ , which has updated screenshots for your reference. 
Additional Background Color Options for Collections (Oct 2, 2024)When setting up a Collection, you have the option to add a background color. Previously, doing so would add a gray background to a collection. In the latest update, you now have a choice of colors: default, gray, and vibrant. These colors will vary based on your website's theme and color palette. View them in action on  traditional  theme or  colorful .
﻿
Screenshot of the editing interface of a Collection. The dropdown for "Background Color" is outlined in yellow to indicate that users should click this option, which displays a dropdown list with options for none, default, gray, and vibrant.Screenshot of the editing interface of a Collection. The dropdown for "Background Color" is outlined in yellow to indicate that users should click this option, which displays a dropdown list with options for none, default, gray, and vibrant.
Updated Testimonial Styling (Oct 2, 2024)Last month, we released an update to the Block Quote styling within a Text Area. To further differentiate Block Quotes and Testimonials, we have updated the styling of Testimonials. With the new design, you’ll see a quote inside a box. The speaker’s name and other information can be added exactly as before. You will also see options for styling, including the option to add an image and/or a link and the ability to display the speaker’s information above or below the quote. Here is a preview of the new style on Traditional and Colorful:
﻿
Screenshot of the new testimonial styling on a traditional theme. The component is rendered with a red outline. An image of the speaker is included along with their name, position, and link. A red line separates the speaker's information from the quote below that reads, "This is the updated testimonial styling for the traditional theme. Options include adding an image and/or a link. If an image is used, it will appear as a square. The speaker's information can be added above or below the quote."Screenshot of the new testimonial styling on a traditional theme. The component is rendered with a red outline. An image of the speaker is included along with their name, position, and link. A red line separates the speaker's information from the quote below that reads, "This is the updated testimonial styling for the traditional theme. Options include adding an image and/or a link. If an image is used, it will appear as a square. The speaker's information can be added above or below the quote."
﻿
Screenshot of the new testimonial styling on a colorful theme. The component is rendered with a red outline. An image of the speaker is included along with their name, position, and link. A red line separates the speaker's information from the quote above that reads, "This is the updated testimonial styling for the colorful theme. Options include adding an image and/or a link. If an image is used, it will appear as a circle. The speaker's information can be added above or below the quote."Screenshot of the new testimonial styling on a colorful theme. The component is rendered with a red outline. An image of the speaker is included along with their name, position, and link. A red line separates the speaker's information from the quote above that reads, "This is the updated testimonial styling for the colorful theme. Options include adding an image and/or a link. If an image is used, it will appear as a circle. The speaker's information can be added above or below the quote."
New Guide on Image Sizing (August 21, 2024)Have you ever wondered what size or ratio your images should be? Check out our brand new  guide on optimal image sizes⁠ to learn more. 
New Spotlight Style: "Expanded" (August 21, 2024)Spotlights just got more exciting: introducing the new "expanded" style option! An additional dropdown menu now appears when adding a spotlight. In addition to the usual drop downs of "height" (tall or short), "background color" (default or gray), and "image alignment" (right or left), you can now choose between the original layout design you're used to, now called "classic" or the new design, "expanded."
﻿
This is the design on the Traditional theme. The image fills the entire height of the card and about one-third of the width. 
﻿
Screenshot of the new Spotlight style on Traditional theme.Screenshot of the new Spotlight style on Traditional theme.
﻿
This is how the new style appears on websites using the Colorful theme. The image fills the height of the spotlight, and nearly half of the width. A text box is layered over the spotlight.
﻿
Screenshot of the new Spotlight style on Colorful theme.Screenshot of the new Spotlight style on Colorful theme.
﻿
More Easily Edit an Image (August 21, 2024)You'll now have an easier time editing images and captions directly from a page that you're editing. Previously, if you wanted to update a caption, add alt text, or change the focal point of an image, you had to do so via the Manage Content → Manage Media shortcut. In the updated editing experience, you will now be able to change these image aspects directly on the page that you are editing. Simply click the pencil icon within the image to get started.
﻿
Screenshot of the editing interface. A pencil icon appears in the top right corner of an image on the page.Screenshot of the editing interface. A pencil icon appears in the top right corner of an image on the page.
﻿
New Postcard Style: "Vertical Button Card" (August 7, 2024)We are excited to present our newest Postcard style: The Vertical Button Card! Vertical Button Cards have the same layout characteristics as Vertical Cards, with two key differences. First, when a link is included, it is formatted as a button at the bottom of the card. The specific colors of these buttons are dictated by the theme and color palette of your website. Second, the entire card will have a raised appearance, similar to that of "raised cards" within a collection.
﻿
The new style will appear differently on websites with the Traditional Theme vs. those on Colorful. This is how they will render on Colorful. Notice the button is formatted as a primary button within the postcard.
﻿
Screenshot of two Vertical Button Cards on a website with the Colorful Theme. Screenshot of two Vertical Button Cards on a website with the Colorful Theme. 
﻿
This is how Vertical Button Cards will appear on the Traditional theme. Notice here the button is formatted as a secondary button and spans the entire postcard width.
﻿
Screenshot of two Vertical Button Cards on a website with the Traditional Theme. Screenshot of two Vertical Button Cards on a website with the Traditional Theme. 
﻿
Selecting this new style in the editing interface is straightforward. Simply scroll to the bottom of the Postcard component, and select “Vertical Button Card” from the “Style” dropdown. 
﻿
Screenshot of the editing interface. A postcard is open and the dropdown for Style shows Vertical Button Card as the 4th choice in the list.Screenshot of the editing interface. A postcard is open and the dropdown for Style shows Vertical Button Card as the 4th choice in the list.
Block Quote Styling Update (July 24, 2024)You may notice that Block Quotes, which are a text style within a Text Area, got a facelift. The styling no longer features italicized lettering between two horizontal lines. Instead, the quote now appears between an open quotation mark in the upper left and a closed quotation mark in the bottom right. These changes have automatically been applied to your sites; no work is needed on your end.
﻿
Screenshot of a Block Quote within a Text Area. The quote is in larger text that is not italicized and is surrounded by an open quotation mark in the upper left and a closed quotation mark in the lower right corner.Screenshot of a Block Quote within a Text Area. The quote is in larger text that is not italicized and is surrounded by an open quotation mark in the upper left and a closed quotation mark in the lower right corner.
Accordion Styling: "Light" style (May 29, 2024)We have added another new style for the Accordion component! The latest style is called "Light" and can be found in the Style dropdown menu.
﻿
Screenshot of the editing interface. An Accordion component was added, and the dropdown menu for "Style" is expanded. There are three options: Default, Secondary, and Light.Screenshot of the editing interface. An Accordion component was added, and the dropdown menu for "Style" is expanded. There are three options: Default, Secondary, and Light.
Traditional Theme﻿
Screenshot of the new "Light" accordion style on the Traditional theme.Screenshot of the new "Light" accordion style on the Traditional theme.
Colorful Theme﻿
Screenshot of the new "Light" accordion style on the Colorful theme.Screenshot of the new "Light" accordion style on the Colorful theme.
﻿
Importers that pull content into H&S sites (May 2024)We created a guide that explains how various content types are pulled into H&S websites. Check out ﻿ ⁠⁠Importers (for People, Courses, and Events)⁠  to learn more.
﻿
Collection Update (May 15, 2024)It's not Deja vu - there is another change to the Collection component! We previously updated this component to allow users to select from a few Title and Heading options. However, the rollout wasn't as intuitive as we would have liked so we made some changes to the layout of the editing experience. The functionality remains the same, while hopefully being easier for you to navigate. 
﻿
See the  Collection Guide⁠  to learn about the updates to the Collections Settings.
Accordion Styling: "Secondary" style (May 2024)Accordions can now be displayed with your choice of two style options: Default and Secondary. On your page, these will have a similar appearance to links styled as primary buttons and secondary buttons, respectively.
﻿
Screenshot of the editing interface with the Accordion component shown. There is a dropdown menu for Style that includes the options of "Default" and "Secondary."Screenshot of the editing interface with the Accordion component shown. There is a dropdown menu for Style that includes the options of "Default" and "Secondary."
The "default" style option is what you are accustomed to seeing: a dark background with white text. The background color is determined by your site's theme and color palette. A "Secondary" style option has been added, which will invert the colors: a white background with text in a color determined by your site's theme and color palette. 
﻿
All existing Accordions on your site are in the Default style. You can opt in to the Secondary style as you see fit.
﻿
Screenshot of a webpage with 2 sets of 2 Accordions. The first set use the default styling, where the first Accordion is collapsed and the second is expanded. The second set of Accordions use the secondary styling. The first Accordion is collapsed while the second is expanded.Screenshot of a webpage with 2 sets of 2 Accordions. The first set use the default styling, where the first Accordion is collapsed and the second is expanded. The second set of Accordions use the secondary styling. The first Accordion is collapsed while the second is expanded.
﻿
Update to the visual appearance of Vertical Postcards in a Collection (April 2024)In the coming days, you will notice changes to the way your Vertical Postcards display on your page. The changes will vary depending on whether or not your Postcard is housed within a Collection, and also depending on whether your site is on the  Colorful theme  or the  Traditional theme . 
These updates only impact the appearance of Vertical Postcards. There is no change in the way you create or edit this component.
Appearance on the Colorful ThemeIf your website uses the Colorful theme, you're accustomed to seeing an arrow at the bottom of Vertical Postcards that directs users to a linked URL. Users had to click either the arrow or the Title in order to visit the linked URL. This arrow will no longer appear, and the entire card will now be clickable. On the styling side of things, there will now be a line of color at the bottom of the card for visual styling. 
This is the "old" display:
﻿
Screenshot of the previous appearance of a Vertical Postcard within a Collection on the Colorful theme. There is no underlined linked text in the Title. Instead, there is an arrow at the bottom of the card that users can click to be taken to another page.Screenshot of the previous appearance of a Vertical Postcard within a Collection on the Colorful theme. There is no underlined linked text in the Title. Instead, there is an arrow at the bottom of the card that users can click to be taken to another page.
This is the "new" display:
﻿
Screenshot of the updated appearance of a Vertical Postcard within a Collection on the Colorful theme. The card title now displays as underlined. The link arrow no longer appears, but a small line of color does. Users can click anywhere within this Postcard to be taken to another page.Screenshot of the updated appearance of a Vertical Postcard within a Collection on the Colorful theme. The card title now displays as underlined. The link arrow no longer appears, but a small line of color does. Users can click anywhere within this Postcard to be taken to another page.
Appearance on the Traditional ThemeSimilar to the Colorful theme, the arrow, and in this case also the text, is being removed from Vertical Postcards. The title will now be underlined, and users can click anywhere in the Postcard to access the linked URL. 
This is the "old" display:
﻿
Screenshot of the previous appearance of a Vertical Postcard within a Collection on the Traditional theme. There is no underlined linked text in the Title. Instead, there is text and an arrow at the bottom of the card that users can click to be taken to another page.Screenshot of the previous appearance of a Vertical Postcard within a Collection on the Traditional theme. There is no underlined linked text in the Title. Instead, there is text and an arrow at the bottom of the card that users can click to be taken to another page.
This is the "new" display:
﻿
Screenshot of the updated appearance of a Vertical Postcard within a Collection on the Traditional theme. There is no text of the title is now underlined, and the text and an arrow at the bottom of the card are removed. Users can click anywhere in the postcard to be taken to another page.Screenshot of the updated appearance of a Vertical Postcard within a Collection on the Traditional theme. There is no text of the title is now underlined, and the text and an arrow at the bottom of the card are removed. Users can click anywhere in the postcard to be taken to another page.
﻿
February 2024 Newsletter (menu interface; color band and collection updates)Updates to the Menu InterfaceWe recently released an update that modified the interface for placing a page in the menu. Rather than choosing the menu location from one single, often very long, dropdown menu, you’re now able to select the location one level at a time from a series of shorter dropdowns. We hope this change simplifies menu placement and prevents errors due to excessive scrolling.
﻿
Learn more about  placing a page in your menu⁠ . 
Color Band UpdatesAdding or editing a Color Band now has a new look and feel. In addition to the regular Heading 2 text that you've already been able to add to your Color Band, you now have the options to add additional text - up to 180 characters formatted as normal text, and/or a link.
﻿
Check out the  Color Band Component⁠ .
Collection UpdateYou’ll notice new fields when you add or edit a Collection. The new fields relate to headings and heading structure, and have been added to bring our sites further into compliance with accessibility requirements. We hope the changes eliminate the need for an extra Text Area to add a heading, as well as provide additional flexibility when adding a Collection into different heading levels within your page.
﻿
Get all the details in our ﻿ ⁠⁠Collection Guide⁠ .
﻿