top of page

Using the Wix Harmony Editor

Adding and customizing elements

Wix Harmony Editor: Editing and Customizing Images


Images help share your message visually and create a memorable experience. The editor tools and Wix Photo Studio let you shape and customize each image to match your brand and site layout.


Show off your images just the way you want - crop and resize them, play with filters to edit their look and feel, and choose what happens when visitors click them.


Tip:


Great images don't just fill space, they add personality and focus to your site. Try unique animations to make your pages feel dynamic and alive.



Cropping an image


Crop your image so that only the part you want is displayed on your site. You can manually crop an image or use ratios.


Note:


While you can crop most types of images, it is not possible to crop GIFs.


To crop an image:


  1. Go to your editor.

  2. Click the relevant image on your page.

  3. Choose how you want to crop your image:


  1. Click the Crop icon

    Wix Harmony Editor: Editing and Customizing Images

    on the action bar.

    Tip: You can also double-click the image to open the Crop option.

  2. Crop your image by doing one of the following:

    • Drag the crop handles to select the part of the image that you want to crop.

    • Move the crop window over the exact area you want to crop.

Tip: To restore an image to its original proportion and size, Click the Crop icon

Wix Harmony Editor: Editing and Customizing Images

on the action bar, and then click and drag the handles to the edge of the image.


Crop your image using predefined ratios or custom sizes in the Wix Photo Studio.

  1. Click Edit Image on the action bar.

  2. Click Crop & Extend on the left side.

  3. Choose what you want to do:

    • Use crop ratios: Click a predefined ratio to apply it to your image (e.g. 1:1, 9:16, 3:4).

      • Orientation: Select Portrait

        Wix Harmony Editor: Editing and Customizing Images

        or Landscape

        Wix Harmony Editor: Editing and Customizing Images

        orientation to change the ratio options.

        Tip: Once you've selected a ratio, you can drag the crop handles to select the part of the image that you want to crop or move the crop window over the exact area you want to crop.

    • Adjust the image size (px): Set the size your image will be cropped to, using the Width and Height fields. The maximum image size is 3000px x 3000px.

  4. Click Save.

Tip: If you want to start over while editing an image in the Wix Photo Studio, click Revert to Original at the top. Once you save the image, you will not be able to revert the changes.


A screenshot of the cropping options available.


Resizing and rotating an image


Adjust your image size and orientation to fit perfectly with your page’s design.


To resize or rotate an image:


  1. Go to your editor.

  2. Click the relevant image on your page.

  3. Choose what to do:


Make sure your images display the way you want by adjusting their dimensions. Drag the handles on the edges to resize the image.

Tip: To maintain the image's aspect ratio, press Shift on your keyboard and then drag the handles.


Rotate any image intuitively to match your design needs.

  1. Click the image.

  2. Click the Rotate icon

    Wix Harmony Editor: Editing and Customizing Images

    next to the image.

  3. Drag to the desired angle.

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.


A screenshot of an image rotated.


Designing an image


Enhance your image’s appearance to match your site’s style. Add borders, adjust corners, or choose a shadow effect so every image feels intentional and unique.


To design an image:


  1. Go to your editor.

  2. Click the relevant image on the page.

  3. Click the All design options icon

    Wix Harmony Editor: Editing and Customizing Images

    in the action bar.

  4. Design the image:

    • Fill colors

      Wix Harmony Editor: Editing and Customizing Images

      : Adjust the image's level of opacity to make it more or less visible.

    • Borders

      Wix Harmony Editor: Editing and Customizing Images

      : Define the borders of your image so it stands out, choosing a color, width and style. Click the Edit all borders icon

      Wix Harmony Editor: Editing and Customizing Images

      to design them all at once.

    • Corners

      Wix Harmony Editor: Editing and Customizing Images

      : Make the corners of your image more square or round by dragging the slider under Radius. Click the Edit individual corners icon

      Wix Harmony Editor: Editing and Customizing Images

      to design each corner separately.

    • Shadow

      Wix Harmony Editor: Editing and Customizing Images

      : Apply inner and outer shadow to give the image an interesting 3D effect, setting the position, blurriness, color and more.

    • Effects

      Wix Harmony Editor: Editing and Customizing Images

      : Decide how the image blends in with the background (i.e. the layer underneath the image).


An image and its design panel in the Wix Harmony Editor, showing the blend mode is set to multiply


Editing an image with AI


Use AI to edit an image without leaving the Harmony Editor. Click an image on your page and the image editing toolbar appears beside it, ready with the tools below.


You can also click Ask Aria on the image editing toolbar or the action bar at the top of the editor to describe the change you want in your own words.


Note:


The new images are automatically saved to your Media Manager.


To edit an image with AI:


  1. Go to your editor.

  2. Click the relevant image on your page.

  3. Choose how you want to edit the image:


Click the Remove Background icon

Wix Harmony Editor: Editing and Customizing Images

on the image editing toolbar to remove the image's background in one click.


Change a specific part of an image by selecting the object and describing the change you want. For example, swap an object, change a color, or remove a detail.

  1. Click the Edit with AI icon

    Wix Harmony Editor: Editing and Customizing Images

    on the image editing toolbar.

  2. Manually brush over the area you want to change.

    Tip: Adjust the Brush Size slider for more precision, and click the Deselect icon

    Wix Harmony Editor: Editing and Customizing Images

    to refine any areas you've brushed over.

  3. Describe in the textbox how you want to change the image (e.g. "Change the shirt color to blue").

  4. Click the Send icon

    Wix Harmony Editor: Editing and Customizing Images

    .


Create a new version of your image using your current image as a starting point. The image's prompt is filled in for you so you can tweak it, and you can pick a different style from the chat.

  1. Click the Regenerate Image icon

    Wix Harmony Editor: Editing and Customizing Images

    on the image editing toolbar.

  2. In the chat with Aria, review the text that was filled in for you, and edit it if needed.

  3. Select a style from the chat.

  4. Click the Send icon

    Wix Harmony Editor: Editing and Customizing Images

    .


Automatically improve the image's lighting and color.

Click the More actions icon

Wix Harmony Editor: Editing and Customizing Images

on the image editing toolbar and select Enhance Image.


Replace the background of an image with a custom design of your choice. Pick from existing images or describe what you want to create.

  1. Click the More actions icon

    Wix Harmony Editor: Editing and Customizing Images

    on the image editing toolbar and select Replace background.

  2. Choose what to do:

    • Use a reference image: Select a background image from the chat.

    • Describe the background: Enter a description in the prompt (e.g. "a sunny beach at golden hour").

  3. Click the Send icon

    Wix Harmony Editor: Editing and Customizing Images

    .


Expand your image in any direction, and let AI fill in realistic details to complete the picture.

  1. Click the More actions icon

    Wix Harmony Editor: Editing and Customizing Images

    on the image editing toolbar and select Expand.

  2. Choose how to extend your image:

    • Extend ratio: Extend your image to a predefined size and ratio (e.g. 1:1, 9:16, 3:4).

      Tip: Select portrait

      Wix Harmony Editor: Editing and Customizing Images

      or landscape

      Wix Harmony Editor: Editing and Customizing Images

      orientation to change the ratio options.

    • Image size (px): Adjust the size of your image using the Width and Height fields.

    • Free hand: Manually drag the corners of the image with your mouse.

  3. Click Expand.

  4. Click Save.


Pick a ready-made AI action and get a new design for your image. Choose from actions like placing an object in a scene, changing an object's color, or turning a product photo into a packshot.

  1. Click the More actions icon

    Wix Harmony Editor: Editing and Customizing Images

    on the image editing toolbar and select Smart Edits.

  2. Find the action you want:

    • Search for an action: Enter what you want to do in the search bar (e.g. change expression).

    • Browse by category: Click All, Person, Product or Enhance & Style.

  3. Click the action you want to apply.

  4. Enter the details the action asks for. Depending on the action, you may need to upload an image, describe what you want, or choose a scene or style.

  5. Click Generate.


A screenshot of the AI images editing options in the Wix Harmony Editor.


Adding a link to an image


Make your images interactive by linking them to another page, website, document, or popup. A clickable image guides visitors where you want them to go with ease.


To add a link to an image:


  1. Go to your editor.

  2. Click the relevant image on your page.

  3. Click the Link icon

    Wix Harmony Editor: Editing and Customizing Images

    on the action bar.

  4. Select the link type and enter the details.

  5. Enter the link details.

  6. Click Done.


A screenshot of the Link to panel.

Tip:


Learn more about the types of links available.



Customizing an image's settings


Fine-tune how your images appear and behave on your site. Control whether an image is decorative, set its display mode, add alt text for accessibility, or manage what happens when someone clicks it.


To customize the image settings:


  1. Go to your editor.

  2. Click the relevant image on your page.

  3. Click the Settings icon

    Wix Harmony Editor: Editing and Customizing Images

    on the action bar.

  4. Choose what to customize:

    • Display Mode: Choose how the image fits on the page: fill, fit, by aspect ratio.

    • Links to: Choose what this image should link to (e.g. a site page, email, document).

    • Accessibility: Click the dropdown and customize the following:

      • Alt text: Enter a short description of the image to make it accessible to your visitors and help search engines (such as Google) understand it. Learn more about preparing images for accessibility.

      • Set as decorative: Enable the toggle if the image does not contain important information for screen readers and it's only meant to decorate the page.


A screenshot of the Settings panel.

Note:


Currently, it is not possible to add alt text to images / galleries in bulk. If you would like to see this feature, you can vote for it here.



FAQs


Click a question below to learn more about editing and customizing images:


Protect images on the site by adding watermark text in the Wix Photo Studio. The text can be designed and customized to suit your client, and cannot be removed from the file if downloaded. Learn how to add a watermark to an image.

A screenshot of adding a text watermark to an image of a woman running in the Wix Photo Studio.

You can set your image to open in a larger window when it is clicked.

To set your image to expand when clicked:

  1. Go to your editor.

  2. Click the relevant image.

  3. Click the Settings icon

    Wix Harmony Editor: Editing and Customizing Images

    on the action bar.

  4. Click the Link

    Wix Harmony Editor: Editing and Customizing Images

    icon on the action bar.

  5. Click the More Actions icon

    Wix Harmony Editor: Editing and Customizing Images

    and click Popup.

  6. Click the Popup dropdown and select the relevant popup.

  7. Click Done.


It depends on how you edit the image. Standard edits, like changing the opacity, are not saved in the Media Manager. AI edits, like removing the background, are save as a new image.


Yes, you can access the Wix Photo Studio from the Media Manager in the Wix Harmony Editor:

  1. Go to your editor.

  2. Click the Wix dropdown at the top left of the editor.

  3. Select Media Manager.

  4. Select an image

  5. Click any of the following on the right side to open the Photo Studio: Crop & Edit, Adjust, or Cut Out Background.


You can delete any images you no longer want from your site at any time.

  1. Go to your editor.

  2. Click the image in the editor.

  3. Press Delete on your keyboard.

Note: If you have uploaded your own images, deleting them from your editor does not remove them from your Media Storage. You can add these images again at any time.


If you are experiencing issues with your images on your site, please follow the steps below:

  1. Make sure that the files you are uploading meet the requirements.

  2. Try viewing your site on another device to see if the image issue occurs there as well.

  3. Click any "?" inside the editor and type your problem. You might find the answer you are looking for.

  4. Use the Wix Technical Assistant.


Need A Professional Website?
Contact Us 
Today!

I'm a paragraph. I'm connected 

I'm a paragraph. I'm connected 

I'm a paragraph. I'm connected 

I'm a paragraph. I'm connected 

I'm a paragraph. I'm connected 

I'm a paragraph. I'm connected 

wix experts
Graphic2Traffic web design
©
bottom of page