Uploading, Cropping and Sizing Images

Using the Legacy Customizer? Legacy Customizer steps

Every image on your website comes from your Media Library. You open the Media Library from an image field in Site Edit. There you can upload an image, choose one, and crop it with the built-in Edit Image tool.

Choose or upload an image

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.
  3. Open the panel of the module or setting that has the image. For example, point at a module and select its Customize button.
  4. Find the image field. In a module, the background image is in the Media section of the Design tab.

An image field in a module panel

  1. Upload image: The image of this field. Select it to open the Media Library.
  2. Image size: Cover fills the space. Contain shows the whole image on smaller screens.
  3. Image position: The part of the image that stays in view when the image is cut to fit.

Select the image. The Media Library opens over Site Edit.

The Media Library

  1. UPLOAD MEDIA: Adds an image from your computer to the Media Library.
  2. Search for images: Finds an image by name.
  3. SELECT IMAGE: Puts the selected image in the field. Available after you select an image.

To use an image:

  1. Select an image in the list. A check mark shows on it, and its details show at the right.
  2. Select SELECT IMAGE.

You can also drop image files on the Media Library to upload them. The list at the left also has Collections, Trash, Unsplash and AI media.

Crop, zoom or rotate an image

  1. In the Media Library, select the image.
  2. In the details at the right, under Image actions, select Edit image. The Edit Image screen opens.
  3. Drag the box on the image to choose the part to keep. Drag its corners to change its size.
  4. Use the tools at the right:
    • Ratio: Custom (any shape), 1:1, 2:3, 3:2, 4:3, 3:4, 9:16 or 16:9.
    • Zoom: OUT and IN.
    • Rotate: The two arrow buttons turn the image left or right.
    • Effects: Make Transparent.
  5. Select SAVE to keep the changes, or CANCEL to close without them.

RESET, under the image, undoes your changes on this screen.

The details at the right of the Media Library also show the Dimensions of the selected image in pixels. Use them to check that the image is large enough before you use it.

Fit the image to its space

After you choose an image, set how it fills its space with Image size and Image position in the same panel:

  • Cover fills the whole space and cuts off the parts that do not fit.
  • Contain shows the whole image. It applies on smaller screens only. On a desktop screen, the image always uses Cover.
  • Image position keeps one part of the image in view, for example Top or Center.

Publish your changes

Changes in the panel go into your draft. The draft bar at the bottom of Site Edit shows your changes with Discard and Publish. Close the panel, then select Publish to show the changes to visitors.

For more about drafts, see Publishing and Discarding Drafts.

How did we do?

Creating a New Page

Site Design and Branding
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support