Back
How to Add Photos

Using photos effectively on your website allows your visitors to visualize your product or service, and lets you instantly capture their attention — even before they’ve read a word or text.

The Photo Feature in Sitebeat makes it easy for you to add and customise photos to powerfully promote your brand. Add photos on your website pages and customise them using the steps below:

  1. Log In to access the Sitebeat dashboard.
  2. Under My Sites, click the Edit Site option of the website that you wish to manage.
  3. Note: If you want to edit a new site, you have to unpublish the current website and make your new site as your primary website.

    Under My Sites, click the [...] Ellipsis Icon on the top-right corner of the website to unpublish the current site. Click Unpublish Site, and then click Yes, Unpublish to confirm.

    Under My Domains, click the [...] Ellipsis Icon of the website that you want to replace as your primary website, then click Replace Primary. In the pop-up window, select the domain of the new website in the New Primary Domain list, then click Replace Primary. You can also click the Domains tab under My Sites to perform the necessary steps mentioned.

    You can now edit the new site that you wish to manage.

  4. On your Site Editor, click on an existing photo on your website to display the editing options above it, and then click the [>] Arrow Icon to view all options.

    You can also add a new Photo Feature, first:

    1. Click Build from the left-side menu, and then drag and drop the photo item onto a placeholder on your website.
    2. Click Add Photo to open the window where you can select, and then upload photos (refer to details under Replace Icon below for help).
    3. 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 then click the [>] Arrow Icon 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 Sitebeat — 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 then upload it to Sitebeat.
    • Access Sitebeat My Photos — If the photo was previously uploaded in Sitebeat, click the My Photos tab from the pop-up window, and then 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, and then navigate and select the picture.
    • Use Free Photos — If you want to use a free photo from Sitebeat, click the Free Photos tab from the pop-up window, and 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 a page from the second drop-down list.
    • Anchor — Select a 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 Sitebeat, 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 adddress in the space provided.
    • Phone number — Enter the specific phone number in the space provided.

    Enable the Open Link In New Tab option, if preferred.
    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 an alternative text, which informs Google and other search engines of your photo’s nature or content and boosts your SEO. This also appears when photos are unable to load due to slow internet connection.
    Settings Icon Click this to enable or 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.

Other Actions:

  • To Move a Photo, hover your mouse pointer over it. Click the moving tool on its upper edge, and then drag and drop it onto a different placeholder on your page.
  • To Resize a Photo vertically, hover your pointer over it. Click the resizing tool at the bottom, and then drag it up or down.
  • To Resize a Photo horizontally, hover your pointer over its left or right edge. Click the [↔] Arrow Icon that appears, and then drag it sideways.
  • To Delete a Photo, hover your mouse pointer over it, and then click the [x] Delete Icon on its top-right corner.

Hit the play button below to view the quick start guide we've prepared for you:

You can also check out more video guides by visiting our YouTube How-To Playlist.

Was this helpful?
70% of people found this helpful.
-