Page History

...

• Guidelines:
  • Use to display a small amount of copy and an optional, small image (a headshot or icon) next to the post content.
    • Minimum photo size: 400x400px
  • Use the top-most text fields
    • Top level text goes in the "headline" field, even if it isn't a heading (e.g. person's name can go here)
    • If you have 2 levels of content, use the top two fields (headline and subtitle). Only use the 3rd field if you have already filled in the first two levels.
  • Aside blocks are meant to be used with a very small amount of copy, ~100 characters or fewer.
  • Asides should be used sparingly in a single article – use 3 asides max.
  • If using more than one aside, they should be separated by at least one paragraph. 
  • The aside block cannot be the last item in your post (this will push it down to overlap the footer content and mess up formatting on the page)
    
    • Move it above some of the copy to fix this issue
  • Be sure to preview your article to make sure there are no formatting issues
• How to edit/use asides in your article

...

• Guidelines:
  • Use a single callout box at the end of an article to display sidebar/endbar content
  • Content should not exceed 125 words.
  • Photo sizes can vary.
• Options:
  • Background style - light gray, light blue, or gray pattern
  • Image (optional) - add a photo, square headshot, or WSB icon
    • Alignment - default is left aligned or you can choose to center the image
    • Crop the image to a circle? Yes/No (Note: only choose Yes for a square image!)
  • Heading (recommended)
    • Heading size - most of the time this should be an H2 or an H3
    • Alignment - default is left aligned or you can choose to center the heading
  • Text - add your content and format it (e.g. add a hyperlink, paragraph breaks, or bullet points)
    • Text should remain left aligned in most cases
  • Button (optional)
    • Alignment - default is left aligned or you can choose to center the button

...

• Please reach out to a designer or web developer for assistance implementing this block.
  • A designer can help with appropriate image choices
  • A web developer can help ensure the content you have works with this block and that web accessibility standards are met (e.g. text color contrasts with the background and is readable)
• Guidelines:
  • Use this block sparingly (i.e. don't use it in most articles you write and you typically shouldn't use it more than once per article)
  • This block doesn't work with all images; it works best with large images with a subtle focus or subject (see example below).
  • Limit the amount of copy in this block – think pull quote length, rather than a full paragraph or more. (~50 words max)
  • Minimum photo size: 2400x1600px (this block will not let you select a smaller image)
• Options:
  • Background – can be a color pattern or a photo
    • For photo background:
      • Display a different image for mobile? Since the text will appear below the image on mobile screens, you can choose a different image
      • Hide image for mobile? Since the text will appear below the image on mobile screens, you can choose to hide the image if it makes sense to do so. (For example, the paintbrush image in the example below is a bit too plain without text on top, so it was hidden for mobile.)
    • Add parallax effect? An effect that makes the background pattern or photo appear static as other content scrolls past it. (See paintbrush example.)
    • Title + title heading size
    • Link
    • Custom content (supporting copy)
    • Text styles
      • Text color (only with photo background) - black, white, or default colors
        • Note: Be sure to choose a color that has high contrast with the background photo
      • Horizontal placement – place the text content where it overlaps with the least busy/detailed/important part of the photo
      • Vertical alignment (only with photo background) – place the text content where it overlaps with the least busy/detailed/important part of the photo
      • Add transparent background? (only with photo background)
        • If you cannot find a spot where the background is simple and dark or light enough to contrast with one of the text colors, toggle this to Yes and the text box will have a background color to help with contrast and readability.
      • Stretch link? (only if you have filled in the link fields) – makes the entire text area clickable
      • Animation: Add text fade-in? – adds an animation in which the text appears and moves upward as you scroll to the block on the page. Note: the animation will only happen the first time you scroll to the content. To view the animation again, refresh the page.

...

• Guidelines:
  • Use this to display an image next to text.
  • Works best with a vertical image with a width to height ratio greater than 2:3
  • Make sure to preview your article when using this block; you may need to change how much copy you place next to the image or choose a different size for the image to make the content heights as even with each other as possible
    • e.g. it doesn't look good to use a tall image with only a sentence of copy; you wouldn't want to put three paragraphs next to an image that doesn't take up a lot of space
  • Minimum photo size: 700px wide
• Options:
  • Image (must be at least 700px wide)
    • Image options
      • Alignment - select whether image appears on the right or left side
      • Column width - select the percentage of the entire width you want the image to take up (from 33% to 66%)
        • TIP: Once you've added your image and text, try a few different options here to find a ratio that looks best.
      • Show image caption? Find the image in the media library to add the caption. Check this box if you want the caption displayed here.
  • Text
    • Add your copy and format as needed (e.g. add heading, subheading, hyperlink)

...

• Guidelines:
  • Use for 2 or 3 images you want to display next to each otherin a group.
  • Minimum photo size: 750px wide
• Options:
  • Layout
    • For 2 images use the side-by-side layout
    • For 3 images choose the staggered or stacked layout
  • Images
    • caption
  • Introduction – a heading and/or text that will appear above the images
  • Footer – text and/or a button that will appear below the images

...

• Guidelines:
  • Use to display 1 image in your post
  • Photo sizes will vary, recommended minimum size is 500x500px
    • Large, full-width images should be 2400x1600px
• How to add an image block

Lazy Load Youtube Video

• Guidelines:
  • Use this block anytime you want to embed a Youtube video in your post.
    • Do not use the "Youtube" block – that block displays videos at a much smaller size and they take longer to load on the page, which could create problems for the user.
  • Photo size for image override: 1176x662px (you can use a larger image size, but if the proportions are different, the image will get cropped)
• How to embed YouTube videos in your article

...