How can I mask or crop an image in EverWeb?

Use Format > Mask to crop a picture on your page. A dashed box appears over the picture. Drag its edges to frame the part you want to keep, then press Return (Enter on Windows). The rest of the picture is hidden, not deleted, so you can change the crop later.

Crop a picture with Mask

  1. Click the picture once to select it.
  2. Choose Format > Mask. A white dashed box appears around the picture.
  3. Drag the handles on the box to frame the part you want to keep. Drag inside the box to move it.
  4. Press Return (Enter on Windows), or click somewhere else on the page. To cancel, press Esc.

To change the crop, select the picture and choose Format > Mask again. To show the whole picture again, choose Format > Unmask (Shift+Command+M on a Mac, Ctrl+Shift+M on Windows).

Mask is greyed out?

Format > Mask only works when all of these are true:

  • Only one object is selected.
  • The picture is set to Stretch. Go to Inspector > Shape Options and, under Image Fill, set the scaling menu to Stretch. Pictures you drag onto a page start as Stretch. A picture set to Scale to Fit, Scale to Fill, Original Size or Tile can't be masked.
  • It isn't Full width. Check Full width is unticked in Inspector > Metrics.
  • Its width and height are in pixels, not percent (%), in Inspector > Metrics.
  • It isn't locked. If it is, choose Arrange > Unlock.

Other ways to crop or shape a picture

  • On a responsive page, or for a picture that changes size with the browser: set the picture to Scale to Fill and click Adjust Focus Area… under Image Fill. Choose the part of the picture that matters, then click Apply. That part stays in view as the picture gets narrower on phones.
  • Fade a picture or give it a shape: use a Background Mask. See Make text readable on top of a photo: overlays, masks and image fill options.
  • Crop it before you add it: crop the photo in an app such as Photos or Preview on a Mac, or Photos on Windows, then drag it into EverWeb. A smaller file also helps your page load faster.

Video guide:

Related articles

  • 6 Users Found This Useful
Was this answer helpful?

Related Articles

Can EverWeb create drop down menus?

Yes. The Navigation Bar widget makes drop-down menus from your directories. A directory is a page...

When I changed my link colors, they don't appear changed when publishing

There are a few reasons why you may see the wrong colors for links after publishing your site:1....

My characters with accents are being converted, how do I include accented letters in the Navigation bar?

You are most likely entering text in the File name field in the Inspector. File names can only...

How do I move or drag objects into the header, a blue line appears that stops me

The blue lines mark the header, content and footer sections of a Centered Layout page. An object...

How do I add a navigation menu to every page of my website?

Drag the Navigation Bar widget onto a Master Page, then attach that Master Page to your pages....