A Web.com Partner
Sign Up / Log In
Online Support Website Builder

How to Add a Photo in Website Builder

You can easily customise a Photo in Website Builder, or add a new Photo Feature and customise it according to how you want for it to appear on your actual website.

To add and customise a Photo in Website Builder, follow the steps below:

  1. Click Sign Up / Log In at the top of this page.
  2. Select Account Manager from the drop-down menu.
  3. Enter your username and password then, click Log In.
  4. Click the Visit My Account button.
  5. Click Website Builder from the menu at the top of the page.
  6. Click on the Website Builder plan that you wish to manage.
    If you only have one Website Builder plan, you will automatically be redirected to its management page.
  7. Hover your mouse pointer over the [+] Icon at the upper right-hand section of the page and click Build Now.
  8. On the Sites page of your Website Builder Dashboard, hover your mouse pointer over the project/website that you would like to customise and click EDIT.
  9. Click on an existing Photo on your website to display the editing options above it and click the [>] symbol to view all options.

    If you need to add a new Photo Feature first:

    1. Click Build from the left-side menu.
    2. Drag and drop the Photo icon onto a placeholder on your website page.
    3. Click Add Photo to open the window where you can select and upload photos (refer to details under Replace Icon below for help.)
    4. Crop or resize the Photo (refer to details under Crop Icon below for help.)

    Once done, click on the Photo to display the editing options above it and click the [>] symbol to view all options.

    Below is a description of each editing option:
    Replace Icon Click this to replace the current Photo using any of the following methods:

    • Upload to Website Builder
      If the Photo is in your computer, drag and drop it into the pop-up window or click browse to manually look for the image from your list of folders and upload it to Website Builder.
    • Access Website Builder My Photos
      If the Photo was previously uploaded in Website Builder, click the My Photos tab from the pop-up window and select the picture.
    • Access the Cloud
      If the Photo is in another online account, click the Clouds tab from the pop-up window, connect to your online account, then navigate and select the picture.
    • Use Free Photos
      If you want to use a free photo from Website Builder, click the Free Photos tab from the pop-up window, then navigate through the categories and select the picture.
    Crop Icon Click this to crop or resize the Photo using the tools that will show:

    • 1:1 Icon
      Click to automatically fit the original aspect ratio of the image to the available space.
    • Resize Icon
      Click to display a resizing bar at the bottom. Use the bar to zoom in and out of the image, click and drag the image to move it around and select which part of it you would like to use.
    • X Icon
      Click to Cancel the changes made.
    • Check Icon
      Click to Apply the changes made.
    Link Icon Click this to add a Link to your Photo.
    Select the type of Link from the drop-down list and specify where you would like to connect it:

    • Page - Select the Page from the second drop-down list.
    • Anchor - Select the Page and Anchor from the second drop-down list.
    • URL - Enter the specific URL in the space provided.
    • File - Click Select your file then drag and drop the file or browse your computer's folders to upload it.
      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 the specific Email address in the space provided.
    • Phone number - Enter the specific Phone number in the space provided.

    Enable the Open Link In New Tab option according to preference.
    Overlay Icon Click this to add color over the Photo and adjust its opacity.
    To remove it, simply adjust the opacity to the left-most side of the bar.
    Alt Text Icon Click this to add a an alternative text to display when Photos are unable to load, such as when viewers are experiencing slow internet connection, to give an idea of the Photo's nature/contents.
    Settings Icon Click this to enable/disable the following options:

    • Show Caption - To show caption at the bottom of the Photo.
    • On Click Enlarge - To enlarge Photo on click with dark or light theme.

Congratulations! You just added and customised a Photo in Website Builder.

Other Actions:

  • To delete a Photo Feature, hover your mouse pointer over it and click the [x] icon that appears on the upper-right corner of its placeholder.
  • To move a Photo Feature to another placeholder, hover your mouse pointer over it and click the bar that appears above it, then drag and drop it to a new placeholder.
  • To resize the Photo Feature's placeholder horizontally, hover your mouse pointer over its left or right vertical lines until it becomes [↔], click on the line then drag to the left or right to adjust and release when done.
  • To resize the Photo Feature's placeholder vertically, hover your mouse pointer over it and click on the resizing control that appears below; drag it up or down to resize and release when done.
Was this helpful? Yes No 62% of people found this helpful.
{"message":""}