Wix Editor: Editing and Customizing Images

6 min read
Customize your images to give your site a splash of personality and capture the attention of your visitors. Explore the range of tools available to create unique, eye catching images, specially designed for your site. 
In this article, learn more about: 

Resizing your images

Resize images so they are displayed in the size you desire on your site. 
Tip:
You can also crop your image in a variety of ways. 

To resize your images:

  1. Click the image.
  2. Drag the handles on the edges of the image to the size you want.
Note:
The image and shape stay at the original proportions when resized using the handles at each corner of the image. 
A screenshot of a selected image with the blue visual indicators showing the edges. Resize handles highlighted.

Rotating your images

You can rotate your images with one click with the Wix Editor. 

To rotate your images:

  1. Click the image.
  2. Click the Rotate icon at the top left.
  3. Drag the image to the desired angle.
Gif of selected image being rotated anticlockwise.
Tip:
You may find that your images are automatically rotated when you upload them to the Media Manager. This is because images taken with digital cameras have embedded metadata that relates to the orientation of the image. You can follow the steps above to rotate your images after you have uploaded them.

Choosing what happens when an image is clicked

Choose what happens when your site visitors click an image on your site. When clicked, your image can be magnified, open a link or open a popup.

To set what happens when an image is clicked:

  1. Click the image.
  2. Click the Settings icon .
  3. Select an option from the When image is clicked drop-down:
    • Nothing happens: Nothing happens when the image is clicked.
    • A link opens: The image acts as a button and can be linked to a page, position or anchor on your site, an external URL, a document or an email address. Click Choose a link to set it up. 
    • It opens in a popup: The image opens in a pop-up window. The image is displayed in its original size on a dark overlay, with the image name underneath. Learn more about renaming your image
    • It can be magnified: The cursor becomes a magnifying glass when a visitor hovers over the image. Clicking the image magnifies it.
Screenshot of image and image settings panel. When an image is clicked drop down is highlighted.

Applying filter effects to images

Choose from tons of stunning traditional filters like Sepia and Blur, or our unique filters such as Kennedy and Orca to add vibrant, visual appeal. 

To apply a filter to an image:

  1. Click the image.
  2. Click the Filters icon .
  3. Click a filter to apply it to the image.
Filters icon selected, Choose a Filter panel showing filter options.
Note:
Once you've applied a filter to an image, the Filters icon will turn green  .
You can always click None in the panel to remove the filter, and revert the image back to the original.

Adding and customizing image frames

Make your image stand out by adding a customizable frame. With a variety of preset frames to choose from, change the color or choose a specific shadow to create the perfect frame for your image. 
Note:
The available customization options depend on the frame design that you select.

To add and customize an image frame:

  1. Click the image.
  2. Click the Design icon .
  3. Select the frame design you like. 
  4. (Optional) Customize the design further:
    1. Click Customize Design.
    2. Choose what to do next:
      • Frame preset: Choose a new preset at the top. These presets offer different shapes and effects to enhance the frame even more.  
      • Fill Color & Opacity: Select the frame's colors and opacity.
      • Border: Design your frame's borders.
      • Corners: Round your frame's corners.
      • Shadow: Design a shadow for your frame.
Tip:
Some image designs have a Regular and Hover view. Click these tabs to customize them.

Adding elements to an image

Need to display text or other elements on an image? Attach them to a transparent container box that appears on top of the image.

To add elements to an image in a container box:

  1. Click Add Elements on the left side of the Editor.
  2. Click Box and select the box you want to add.
  3. Drag the container box onto the relevant image to attach it.
    Note: Make sure the container box is the same size or bigger than the image. 
  4. Make the container box transparent:
    1. Click Change Design.
    2. Click Customize Design.
    3. Click Fill Color & Opacity and drag the Background slider to 0% so that the box cannot be seen.
  5. Drag the relevant elements onto the container box to attach them.
Tip:
Move this group of elements around by clicking the transparent container box and dragging them to the desired position. 
Gif of container box being added with text box being attached to image with text and image then moving as one.

FAQs

Click a question below to learn more. 

Did this help?

|