Wix Studio Explained - Image Settings, Options, and SEO

This article explains the right use of images in #Wix_Studio along with all relevant settings. You will learn how to add images in Wix Studio, how to generate image using Wix's in built AI image generator, basic image settings, and best practices.

You will also learn how to be creative using the image to create more visually appealing designs.

How to Add Images in Wix Studio?

You can use different approaches to add images in Wix Studio. Depending on whether you want to use images in dynamic pages, own images, generate an image using AI, or use Wix's image library, you should choose the right approach.

Here are different methods to add images in Wix Studio Editor -

1. Add Image from Media Manager - In a recent update, Wix Studio has added the media manager in the main Editor menu. You can access the media manager from this option and access the media manager.

2. Add Single Image and Replace it - Another method is to add a single image from the media options. Wix Studio has some pre-designed image elements. You can use them in the editor and later on replace them with images from the Wix library or your own uploads.

3. Quick Add Image Element - If you want to edit your image settings from the default, then the quick add is the best way to add the image in Wix Studio Editor. In this method, you can access the image element from the Quick Add library. It will load the default Wix Image without any prior effects or settings.

4. Using My Uploads - The final option is to use the My Upload option. This option will open the upload windows where you can upload your media and other files.

Wix Studio Image Settings Explained

This section will explain all the settings associated with the image elements in Wix Studio.

1. Change Image - This option allows you to change the existing image. You can either upload your own image or choose one from the Wix Stock media library.

2. Create AI Image - This option will open Wix's AI image generator where you can create any image or illustration using a text prompt.

3. Settings - Opens the Image settings with the following options. Refer to the following image.

   1. Display Mode - Decides how the image fits within the boundary of the image scale. It has following options -

      1. Fill Bounding Box - Fills up the entire image boundary, may overflow the image sides.

      2. Fit to Bounding Box - Fits the entire image within the boundary.

      3. Keep Image ratio - Prioritise the image ratio and keep the original dimensions of the image.

   2. When image is clicked - This option decides the behavior of the image when visitors click on it. You can choose either "Nothing happens" or "A link opens". The later option would give you another setting to add external or internal links.

   3. What's in the image - This is the SEO setting of the image. Here you can add the alternative text of the image which is crucial for SEO and accessibility. People who use screen readers to access the page will access the image using the alt text.

   
   

4. Mask - Mask is the design utility setting of the image. This option allows users to add unique basic shapes as image masks. Mask is a great tool to add unique visual candy to your website designs. You can use shapes from the Wix library or your own shapes.

5. #CMS Connection - This option helps you connect your image to a CMS collection item. It is useful when creating dynamic items or list pages.

6. Crop - This option allows users to crop the image within the editor. It is useful in trimming out empty or unnecessary space within the image.

7. Focal Point - The focal point decides the main focus point of the image. This option makes sure that the focused point of the image is always visible disregarding the resizing of the image across different breakpoints.

8. Link - Adds Internal or external links to the image. Please note that the links from the settings option and setting bar are connected.

Settings tab in Wix Studio image settings

Inspector Panel Settings for Wix Studio Image

While the configuration bar holds the macro settings of the image, still most of the design and effects for the image are nested within the #inspector_panel. In this section, you will learn about all the inspector panel settings for the image.

SETTING	Options	WHAT IT DOES	WHEN TO USE IT
Align	Left, Right, Horizontal Center, Verticle center, Top, Bottom, Center	Align the image to the sides or center.	When you want to align the image to a particular side or center horizontally, vertically or both.
Size	Basic, Advance(Alt+I)	Controls all size and position options of the image.	While the basic option will give you the x and y position along with the size in pixels, The advanced sizing will enable more advanced settings. In advanced settings, you can choose from pixel, percentage, vh, vw, and calculation units and control the default, minimum, and maximum width and height of the image.
Scale Properties		Keeps the image properties proportional.	If you want to keep the proportion of image properties like border width, shadow, etc turn this option on.
Fill Color and Opacity	Background, Opacity	Sets the image background and visibility	Use these options when you want to add a solid color background and increase or decrease the opacity of the image. Together they will give you an overlay effect.
Blend Modes	Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion	Adds a blend mode to the image. The effect depends on the element behind the image(section background or other element)	Blend modes are an excellent way to add unique color animations to the image. Place any element behind the image and choose the blend mode of your choice to add unique color effects to the image.
Border	Color, Width, Opacity	Adds a solid color border around the image	Use this option when you want to add a border around the image. Maximum border width is 15px. You can set the color as well as the opacity of the border.
Corner	Linked, Unlinked Corner	Adds a smooth corner effect	Use this option when you want to make your image corners round-shaped. You can edit each corner individually or link them together.
Shadow	Angle, Distance, Size, Blur, Opacity, Color	Adds a shadow effect to the image	Use this setting when you want to add a shadow effect to your image. The angle decides the direction, Distance sets the distance between the image an shadow, Size sets the size of shadow, Blur adds a grain effect and makes the shadow smoother, Opacity sets the visibility and Color sets the color of the shadow.
Position	Default, Sticky, Pinned	Sets the position type of image within the layout	The default position makes the image static in its position. Sticky will make the image stick to either the bottom, top, or both depending on the option chosen. There is another setting associated with Sticky called Offset that adds some distance between the image and the side to which it sticks. The Pinned option pins the image to any of the nested layouts (container, cell, section, page). It frees the image from the boundary of the layout and scroll.
Margin and Docking	Auto Dock + Left, Right, Top, and Bottom Margin and Docking.	Helps create distance between the image and the sides of the layout	This is a crucial setting that helps you make your website responsive. Docking will help you set relevant positions respective to the side while the margin will create a specific distance between the image and the sides.
Adjust	Opacity, Rotate, Scale, Skew, Translate	Helps adjust the size, orientation, and position of the image	Use the opacity to set the visibility, size to set the horizontal and verticle size of the image, skew to add a tilt effect, Rotate to rotate the image on its axis, and Translate to shift the X and Y position of the image.
Cursor	Media, Size	Replace the default cursor with a custom cursor.	Use this option to set a unique cursor. This option uses svg files and has a size limit of 16px to 128px.
Anchor	Enable/Disable, Anchor Name	Adds an anchor link to the image.	This option will help you jump to the current position of the image from anywhere on your website. Give the image a unique name and link it to any button, text, image, or other element.

These were all the inspector panel settings of the image in Wix Studio. You can use these to further modify your images however you like.

Conclusion

Thanks for reading! I hope now you understand everything about the image elements in Wix Studio. If you have any questions or feedback related to this article, write them in the comments below.

The image element in Wix Studio has lots of amazing settings that can add new life t your designs. Play around with shadow, blend modes, and adjust settings and you will be able to make beautiful websites in no time.