Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using focal points to center images

Many image areas on your site have a built-in centering feature called the focal point. The focal point sets the focus of an image, giving you control over where the image is centered. 

You can adjust the focal point for most images, including:

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

Focal points aren't optimized for:

  • Background images uploaded in the Style Editor - These images don't have focal points. To adjust the image's focus and cropping, use the Position and Size Style Editor tweaks.
  • Images with parallax scrolling - These images have focal points. However, because of how parallax scrolling works, the changes may not have a noticeable impact on an image's position, especially for short, wide images.
Tip: You can crop and resize images using other built-in tools. 

Step 1 - Open the image editor

Open the Image Block, Gallery Page, Gallery Block, thumbnail image, or banner image

Hover over the image to display the focal point (a small circle). This example uses a thumbnail image, but the process is similar for all focal points.

  

Step 2 - Set the focal point

Click and drag the focal point to set the central focus area.

Step 3 - Save and refresh

Finish making any other changes to the image, then click Save to save all changes. Once you've finished working on the page, save and refresh the page.

The area set by the focal point will now appear as the center of your image.

More help

Image size and shape

The height and width of your image, and the shape of the container that it's filling, have a big impact on how much of an effect the focal point has. 

For example, if you add a landscape-oriented image to an Image Block that's set to display as a square, any horizontal changes you make to the focal point will make a big difference. The image is wider than the container, so there's room on either side for it to re-center.

On the other hand, if your image's container and the original image are the same basic shape and size, moving the focal point won't make a big difference.

Tip: To adjust the container height for Image Blocks, use the cropping handle

Gallery images

  • You can adjust the focal point in the main Gallery Page editor. However, to make fine-tuned changes, you can hover over any image and click the gear-icon to see a larger version of the image.
  • If you've set up a Gallery Block to pull images from a Gallery Page, make the focal point changes within the Gallery Page.

Image display

If your image looks fuzzy or distorted:

Was this article helpful?
15 out of 36 found this helpful
Using focal points to center images