Skip to main content
All CollectionsWebsite
Photos in the Website Builder
Photos in the Website Builder

Editing/formatting photos for your landing pages

Jonathan Johnson avatar
Written by Jonathan Johnson
Updated over a year ago

When adding photos to certain elements in the website builder, there are two options for formatting. Those two options are:

  • Fill

  • Shrink to Fit

The option will appear in the element editor below the photo, as shown below.

These photo formatting options are available on these elements:

  • Left Aside

  • Right Aside

  • Carousels

  • Large Card Gallery

Let's go into those formatting options in more detail.

Fill

When adding a photo to an element and using the Fill formatting option, this will allow you to select an Area of Focus for the picture. This means that the photo is not static, but will change what is visible in the photo according to the size of the window viewing the webpage.

What is an Area of Focus?

An Area of Focus is the box that appears when clicking on the Edit button in the photo modal.


The Area of Focus is not a way to crop the image, but highlighting the area that you want the window to prioritize showing regardless of window size.

In the example below, I am changing the window size while using the Fill formatting option. You can see how the image changes slightly, showing more of the image when the window is bigger, and less when the window is smaller, all the while maintaining the Area of Focus in frame.

Shrink to Fit

The Shrink to Fit formatting option is a more traditional crop tool.

When selecting an Area of Focus, rather than the photo staying the same size and shifting to show more of itself, the image will shrink or stretch to fit the space outlined in the Area of Focus. Any part of the image outside of the selected area will not appear in the element.

For example, let's say I've cropped the same photo from above to only show the waterfall.

When this image is highlighted as shown when using the Shrink to Fit option:


It will appear in the element like this:

When the window size is changed, the image will stretch to fill the space as best it can, only showing what's inside the selected area.

Did this answer your question?