Page History

...

...

Use Cases

Use to showcase a high quality image on a Page or Post.

...

• Choose Photo or one of the Pattern options. Do not use photo with Stat Layout. 
  • For Photo type:
    • Background image
      • Make sure the image is high-quality and at least 2400px wide.
      • The subject should be vertically centered in the image to avoid important features getting cropped out. You may need to request a different crop of the image from a designer.
      • The content will display on top of the image for desktop and tablet screens, but will drop below the image for mobile. (see screenshots above)
    • Display a different image for mobile? Toggle to Yes if you want to select a different image to display for mobile screens
      • See example of a full-width background block that displays a different image on mobile.
    • Hide image for mobile? Toggle to Yes if you prefer to hide the image for mobile
      • See example of a full-width background block that hides the image on mobile.
  • For Pattern types:  
    • Choose between a Gray, Blue or Red background. 
    • The content will display on top of the pattern for all screen sizes. (see screenshots above)
  • For Video type:
    • Video should be short, 16:9 video, and center the most important content. 
    • Ideally, the video should be around 6-8 seconds.
    • Pause/Play button on the right bottom of the component 
    • Poster image
      • Make sure the image is high-quality and at least 2400px wide.
      • See Background image for Photo type for more information.
• Add parallax effect?
  • Creates a special type of scrolling effect, where the background image moves slower than the foreground objects.
    • See example with a background photo.
  • Note: This effect is removed for users who have turned on an OS setting to reduce motion. Learn more about reduced motion and accessibility.
  • Note: This effect will not work for video, so it's hidden when video type is selected.
• Stat Layout

  • Changes the fields to support a ranking/statistic layout

...

• Text Color*
  • Options: Default colors, Black, White
  • Be sure to choose a color that meets color contrast standards. 
• Horizontal Placement
  • Options: Left, Center, Right
• Vertical Alignment*
  • Options: Center, Bottom
• Add transparent background?*
  • If the background photo has a lot of color variation, add a transparent background behind the text to ensure all of it is legible.
• Stretch link?
  • Options: Yes or No;
  • Toggle to yes if you want all text in the block to be clickable; this field only appears if you have added a link
• Animation: add text fade-in?
  • This animation is triggered when the user scrolls to the block on the page. The content fades in and moves up slightly.
  • Note: This effect is minimized for users who have turned on an OS setting to reduce motion. The fade-in effect occurs with no vertical movement. 
    • Learn more about reduced motion and accessibility.
• Keep copy on image on mobile?
  • Works for photo and video type
  • The copy will remain on the photo/video on smaller screen sizes

Text Content Styles (Non-stat layout)

...