Center Images with Custom Focus: A Guide to Image Focal Points

Center Images with Custom Focus: A Guide to Image Focal Points

By Michael Chen

January 3, 2025 at 03:16 AM

Precise instructions for using image focal points to control centering:

Focal points let you control how images center and crop across different areas of your website. This feature is essential for maintaining visual focus as images display in various containers and screen sizes.

Supported Areas in v7.1:

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

Supported Areas in v7.0:

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

Limitations:

  • Background images in v7.0 (Site styles) don't support focal points
  • Parallax scrolling images may show limited focal point effects
  • Videos don't support focal points

How to Set a Focal Point:

  1. Open the block, section, or image
  2. Hover over the image to reveal the focal point circle
  3. Click and drag the circle to set the central focus area
  4. Changes save automatically

Important Considerations:

  • Image orientation affects focal point impact
  • Container shape influences centering options
  • Match container size/shape to image for best results
  • Adjust gallery images in main gallery page or section editor
  • For v7.0 Gallery Blocks pulling from Gallery Pages, make adjustments within Gallery Page

Troubleshooting Blurry/Distorted Images:

  • Follow standard image formatting guidelines
  • Consider responsive design impacts
  • Adjust container sizes as needed
  • Review specific image block/section settings

For optimal results, ensure your images are properly formatted and sized for web display before applying focal points.

Note: Precise focal point effectiveness depends on the relationship between original image dimensions and display container specifications.

Related Articles

Previous Articles