Set a Custom Image Focal Point

Set a Custom Image Focal Point

By Michael Chen

January 3, 2025 at 04:18 AM

Focal points allow you to control how images are centered on your website by defining their focus area. This feature ensures important elements remain visible regardless of screen size or container dimensions.

Supported Image Areas:

Version 7.1:

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

Version 7.0:

  • Image Blocks
  • Gallery Blocks
  • Gallery Pages
  • Featured images
  • Most banner images

Not Optimized For:

  • Background images in version 7.0 (Site Style)
  • Parallax scrolling images
  • Videos

How to Set a Focal Point:

  1. Open the block, section, or image
  2. Locate the focal point circle that appears when hovering over the image
  3. Click and drag to reposition the focal point

Asian noodle soup in a bowl

Asian noodle soup in a bowl

Two bowls with food on wood

Two bowls with food on wood

The focal point automatically saves in its new position without requiring manual saving.

Impact Factors:

Image dimensions and container format significantly affect focal point effectiveness:

  • Landscape images in square containers allow for more horizontal adjustment
  • Similarly sized images and containers limit focal point impact

Plate and fork with food leftovers

Plate and fork with food leftovers

Meal with bread and cheese

Meal with bread and cheese

Gallery Management:

  • Adjust focal points on the main gallery page or in the section editor
  • For Gallery Blocks in version 7.0, make changes on the Gallery Page

Troubleshooting Blurry Images:

  • Follow recommended formatting guidelines
  • Consider responsive design effects
  • Check image container size settings in respective blocks or sections

Related Articles

Previous Articles