How To Add a Photo in Website Builder
Easily add or customize photos in Website Builder to enhance your website’s appearance. Follow the steps below to upload and edit images as needed.
Steps to Add and Customize a Photo in Website Builder:
- Log in to your Account Manager..
- Select the domain linked to your Website Builder.
- Click Manage.
- In the top-right corner, select Manage Product to open the Website Builder dashboard.
- On the Sites page, hover over the website you want to edit and click Edit.
- To customize an existing photo, double-click on it to reveal editing options.
IMPORTANT. If you need to add a new Photo Feature first, follow the steps below:
- Click Add Element from the left side options.
- Drag and drop the photo icon onto a placeholder on your website page.
- Click Add Photo to open the window where you can select and upload photos (refer to details under Replace Icon below for help.)
- Crop or resize the Photo (refer to details under Crop Icon below for help.)
Editing Options for Photos in Website Builder
Below are the available editing options and how to use them:
1) Replace Icon- Use this option to replace the current photo with a new one from different sources:
- Upload from your computer – Drag and drop the image into the pop-up window or click Browse to manually select a file.
- Use a previously uploaded photo – Click the My Photos tab and select an image from your uploaded files.
- Import from an online account – Click the Clouds tab, connect to your online storage, and choose an image.
- Select a free stock photo – Click the Free Photos tab, browse categories, and choose an image from Website Builder’s collection.
2) Crop Icon- Adjust your photo’s size and composition using the cropping tool:
- 1:1 Aspect Ratio – Automatically fits the image to the available space.
- Resize Option – Use the resizing bar to zoom in/out, drag the image to reposition it, and select the desired portion.
- Cancel Changes (✖) – Click ✖ to discard edits.
- Apply Changes (✔) – Click the ✔ icon to save edits.
3) Link Icon- Attach a link to your photo by selecting the link type from the dropdown menu:
- Page – Link to another page on your website.
- Anchor – Link to a specific section (anchor) on a page.
- URL – Enter an external website address.
- File – Upload a file from your computer or select an existing one from My Documents or Clouds storage.
- If the file has already been uploaded in Website Builder, click on the My Documents tab at the top to select it.
- If the file is on another online service, click on the Clouds tab at the top to connect to the service and locate the file.
- Email Address – Enter an email address to open an email client when clicked.
- Phone Number – Enter a phone number for direct calling.
4) Overlay Icon - Apply a color overlay to your photo and adjust its opacity:
- Use the opacity slider to control the effect.
- To remove the overlay, drag the opacity slider to the left-most side.
5) Alt Text Icon - Add alternative text to describe the photo. This helps:
- Provide context when images don’t load (e.g., slow internet).
- Improve accessibility for visually impaired users.
- Enhance SEO by helping search engines understand the image content.
6) Settings Icon- Use this option to enable or disable additional photo display options:
- Show Caption – Displays a caption below the photo.
- On Click Enlarge – Allows users to enlarge the image on click, with a choice of dark or light theme.