...
- Guidelines:
- Use a single callout box at the end of an article to display sidebar/endbar content
- Content should not exceed 125 words.
- 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 use this with 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 donyou 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)
- Options:
- Background – can be a color pattern or a photo
- Background – can be a color pattern or a photo
- Appearance
- Background image with parallax effect (view the article to see the effect)
- Background pattern with text animation (view the article to see the animation effect)
source: https://business.wisc.edu/news/example/ (This is a private post; you must login to WordPress in order to view it.)
- 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 the least busy/detailed/important part of the photo
- Vertical alignment (only with photo background)
- Place the text content where it overlaps 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 a text box will be displayed to help with contrast and readability.
- Stretch link? (only if you have filled in the link fields)
- Makes the whole text area clickable
- Animation: Add text fade-in?
- Adds an animation where 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.
- Text color (only with photo background) - black, white, or default colors
- For photo background:
source: https://business.wisc.edu/news/example/ (This is a private post; you must login to WordPress in order to view it.) |
|---|
Horizontal Image Text
- 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
- 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.
- Image options
- Text
- Add your copy and format as needed (e.g. add heading, subheading, hyperlink)
- Image (must be at least 700px wide)
Horizontal Image Text
- Guidelines:
- Use this to display an image next to text.
- Works best with a vertical image (an image with a height greater than its width)
- 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 and you wouldn't want to put three paragraphs next to an image that doesn't take up a lot of space
- Options:
...