How do I add an image to my Website Builder site?
This guide explains how to add an image to your one.com Website Builder website and customise its settings, including appearance, link conversion, and alt text.
- Log in to your one.com Control Panel and click Website Builder.
- Drag the Image component from the menu to the left into your workspace.
- Select the image you want to add or upload one from your computer or an external URL.
- Adjust the size and placement of the image component to your liking.
- Select the image and click Edit image to adjust the properties of the image.
- Click Save and Publish to make the image visible on your site.
Properties of the image component
You can adjust how your image is displayed on your website using the menu above or below the image and the floating menu that you can move around on your workspace.
1 - Top/bottom menu
- Link - You can turn an image into a link. Click the chain icon and set the location you want to link to.
- Rotate - Rotate an image left or right.
- Scale image - You can use this slider to zoom in and out of an image without changing the component size.
- Replace image - Click this button to select another image.
2 - Floating menu
-
Scaling - Choose how you want your image to behave when you change the size of the component.
- Crop keeps the scaling of your image, regardless of the size of the component.
- Fit adjusts the size of your component so it fits with the image.
- Stretch changes the scaling of the image with the component. - Border - Click this to add a border to your image. You can set the colour, opacity and width. You can also add rounded corners to the image.
- On click - Select what should happen when the user clicks the image: do nothing, show a larger image, or open a link.
- SEO - Here, you can enter an alternative (alt) title for your image. This is shown when the image can't be displayed and serves as alt text. Adding alt text is crucial for SEO. Providing descriptive information about images helps search engines understand the content and context of the images, improving your website's visibility in search results. Alt texts also enhance accessibility for users who cannot view images.
- Mobile view - Here, you can hide an image in mobile view or move it to the bottom of the page if the image is part of your template.
- Animation - Add an animation effect to make the image stand out even more on your site. You can choose between 'fade in', 'slide in', or 'bounce'.
Related articles:
Was this article helpful?