Create a beautiful visual experience on your mobile site by refining the images carried over from your desktop version, as well as customizing the images you add from the mobile editor.
Customization of images carried over from desktop is limited - you can adjust your image settings, crop the image and add fun animations. With images added from the mobile editor, you have full control over customization - add filters and frames, customize what happens when an image is clicked, and even add links.
In this article, learn more about images:
Images carried over from your desktop version
Images you add to the desktop version of your site are automatically carried over to your mobile site. You can customize the image's settings, crop it, and add an animation to make it different from the desktop version.
To customize images carried over from desktop:
- Click the image in your mobile Editor.
- Depending on what you want to customize, do the following:
Customize how your visitors interact with your images as well as what happens when images are resized on different mobile devices.
To change your image settings:
- Click the Settings icon .
- Customize the following:
- Image Behaviors: Decide how your visitors interact with images.
- When an image is tapped:
- Nothing happens: The image is not clickable, nothing happens when it's clicked.
- A link opens: The image acts as a button and can be linked to a page, anchor on your site, an external URL, and more.
- It opens in a popup: The image opens in a pop-up window.
- Image Resizing: Decide what happens when your images are resized.
- Keep Proportions: The image and shape stay at the original proportions when resized.
- Auto-fill: The image automatically adjusts to fill the space on your visitor's device.
Present a new version of your image in your mobile view by manually cropping your image or use a shape crop.
To manually crop an image:
- Click the Crop icon .
- Drag the slider to zoom the image in and out.
- Move the image to display the part you want.
- Click Apply.
To crop an image using shapes:
- Click the Crop icon .
- Drag the slider to zoom the image in and out.
- Click the Shape Crop icon and choose a shape.
- Click Apply.
Add a fun animation to your image on mobile to liven up your site.
To add an animation:
- Click the Animation icon .
- Select the animation you want to apply.
- Click Customize to adjust your animation.
Images added from the mobile Editor
Choose from a variety of image types to add to your site, directly from the mobile editor. Images added inside the mobile editor are fully customizable. Adjust your image settings and design, add filters, crop and even add animations.
What types of images can I add in the mobile Editor?
- My Uploads: Upload your own image files to use on your site.
- Image Collections: Choose from hundreds of stock pictures and illustrations available from Wix, Shutterstock, and Unsplash.
- My Social Images: Connect your social media accounts to display images from platforms such as Facebook and Instagram.
To add and customize mobile-only images:
- Click Add to Mobile on the left of the mobile Editor.
- Click Image.
- Select the image type you want to add.
- Click the image you want to upload and click Add to Page.
- Depending on what you want to customize, do the following:
Refine what happens when your image is clicked, add a tooltip and / or Alt text to help Google read your image. You can also choose what happens to your images when they're resized.
To set what happens when an image is clicked:
- Click the Settings icon .
- Click the When image is clicked drop-down menu and select an option:
- 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.
- It opens in a popup: The image opens in a pop-up window.
- It can be magnified: The cursor becomes a magnifying glass when a visitor hovers over the image. Clicking the image magnifies it.
To add Alt text to your image:
- Click the Settings icon .
- Enter the text in the What's in the Image? Tell Google text field.
To add a tooltip to an image:
- Click the Settings icon .
- Enter the text in the Does this image have a tooltip? text field.
To resize your images:
- Click the Settings icon .
- Click the relevant toggle to choose what happens to your images when they're resized.
- Keep proportions: The image and shape stay at the original proportions when resized.
- Auto fill: The image automatically adjusts to fill the space.
Note: Auto fill can only be enabled after Keep Proportions is enabled.
Add an image frame design
Change your image's design and customize how your image frame looks on your mobile site.
To customize your image frame design:
- Click the image.
- Click the Design icon .
- Select a preset design or click Customize Design.
- Customize the image:
- Fill Color & Opacity: Select the image's colors and opacity.
- Border: Design your image's borders.
- Corners: Round your image's corners.
- Shadow: Design a shadow for your image.
Present a new version of your image in your mobile view by manually cropping your image or use a shape crop.
To crop an image:
- Click the Crop icon .
- Drag the slider to zoom the image in and out.
- Move the image to display the part you want.
- Click Apply.
To crop an image using shapes:
- Click the Crop icon .
- Drag the slider to zoom the image in and out.
- Click the Shape Crop icon and choose a shape.
- Click Apply.
Add filters and animations
Transform your image by applying one of our filters and add a cool animation to liven up your mobile site.
To add a filter
- Click the Filters icon .
- Click any filter to add it to your image.
To add an animation:
- Click the Animation icon .
- Select the animation you want to apply.
- Click Customize to adjust your animation.
Add links to your images to encourage visitor interaction on your site.
To add a link to an image:
- Click the Link icon .
- Select the link type and enter the details.
- Click Done.
Learn more about the types of links you can add to an image.