Focal Points: How to Perfectly Center Images in Your Design

Focal Points: How to Perfectly Center Images in Your Design

By Michael Chen

January 3, 2025 at 01:40 AM

Control how images are centered by setting focal points to establish the focus area and manage image positioning. Not all website areas support focal points, so it's important to know where and how to use them effectively.

Supported Areas for Focal Points (v7.1):

  • Image blocks
  • Gallery sections
  • Featured images
  • Section background images

Supported Areas for Focal Points (v7.0):

  • Image blocks
  • Gallery blocks
  • Gallery pages
  • Featured images
  • Most banner images

Areas Without Focal Point Support:

  • Background images in Site Styles (v7.0)
  • Videos
  • Parallax scrolling images (limited effectiveness)

How to Set a Focal Point:

  1. Open the image container (block, section, or image)
  2. Hover over the image to reveal the focal point circle
  3. Click and drag the circle to your desired focus area
  4. Changes save automatically

Important Considerations:

Image Container Impact:

  • The effectiveness of focal points depends on image and container dimensions
  • Landscape images in square containers show more noticeable focal point adjustments
  • Similar image and container shapes limit focal point effectiveness

Gallery Management:

  • Adjust focal points on the main gallery page or in the section editor
  • For gallery blocks pulling from gallery pages (v7.0), make changes within the gallery page
  • Use the image editor for precise adjustments

Troubleshooting Display Issues:

  • Follow recommended formatting guidelines
  • Consider responsive design effects
  • Review specific container settings for optimal display

Note: Focal points work best when there's a clear subject in your image and enough surrounding space to allow for different cropping scenarios across various screen sizes.

Related Articles

Previous Articles