Set Image Focus and Focal Points: Complete Guide

Set Image Focus and Focal Points: Complete Guide

By Michael Turner

January 3, 2025 at 04:18 AM

Focal points help center images effectively across your website. Here's how to use them:

What Are Focal Points? Focal points define the focus of an image, controlling where the image is centered when displayed in different containers or screen sizes.

Supported Image Types (Version 7.1):

  • Image Blocks
  • Gallery Sections
  • Featured Images
  • Section Background Images

Supported Image Types (Version 7.0):

  • Image Blocks
  • Gallery Blocks
  • Gallery Pages
  • Featured Images
  • Banner Images

Not Optimized For:

  • Background images in Site Style (Version 7.0)
  • Parallax scroll images (limited effect)
  • Video content

How to Set a Focal Point:

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

Important Considerations:

  • Image dimensions and container shape affect focal point impact
  • Landscape images in square containers show more noticeable focal point changes
  • Images matching their container dimensions show minimal focal point effects

Gallery Image Tips:

  • Adjust focal points via gallery page or section editor
  • Use image editor for precise adjustments
  • For Gallery Blocks in 7.0, make changes on the Gallery Page

Image Quality Tips:

  • Follow recommended formatting guidelines
  • Consider responsive design impact
  • Adjust container sizes as needed for optimal display

This feature ensures your images remain properly centered and focused across different screen sizes and layouts, enhancing your website's visual appeal.

Related Articles

Previous Articles