Center Images with Custom Focus: A Guide to Image Focal Points
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:
- Open the block, section, or image
- Hover over the image to reveal the focal point circle
- Click and drag the circle to set the central focus area
- 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.