How to add photos using the single image component, image gallery, or image and text section

These steps are applicable to both the SiteGround Website Builder and SiteGround Ecommerce.

If you want to add photos to a page, you’ll first need to choose and add sections. You can either choose a section with existing images and replace them or insert an image component into a section.

How to add a single image component

To add a single image, insert an image component into a new or existing page section. Here are the steps:

1. Open Edit Website in Site Admin to access the Website Builder.
   

   

2. Navigate to the Pages tab from the left menu toolbar.
3. Click on an existing page, or create a new one with the Add New button.
   

   

4. In the visual editor on the right, select an existing section or create a new one with the Add Section button, where you’ll add the image.
   

   

5. Click the Add button in the top-right corner of the selected section.
   

   

6. In the Add Component window, open the General tab, and select Image.
   

   

7. Drag and drop the image on the grid area to find the best position for the component in the section.
   

   

How to add a gallery component or section

In Website Builder, you can add an image gallery as an Image section or a Gallery component.

Gallery image section

To add an image gallery section:

1. Press the Add Section button on the page’s visual editor.
2. In the following pop-up screen, navigate to the Images category.
3. Then, hover over the chosen gallery template and press the Add Section button.

Galley component

Alternatively, you can add an image gallery component to a section. After you press the Add button for a new component, select the Gallery option to insert the gallery into the section.

Text and image section

Apart from image-only components or sections, there are plenty of section layouts (like Columns) that combine images and text. Once you’ve added such a section, you can customize it to change the images.

Depending on the selected layout, the text and images could be combined in the following ways:

• Sections, where text and image are side by side
• Text and image sections where the text overlays a background image

How to change an image or edit it

Once you’ve added an image section or component, you can replace the placeholder image with your own or edit it.

Single image

To edit a single image:

1. Click the image and select the Edit (pencil) icon.
   

   

2. In the Edit Image window, hover over the preview screen and press Update. You have several options for changing the image:

• Upload Image — select and upload an image from your device
• Open My Files — choose an image from your website’s gallery or select a free image from Unsplash gallery.
• Generate Image — prompt AI to generate an image.
• Add Frrom Link — embed an external image from another website.

Gallery section or component

Here is how to change and edit an image gallery section or component:

1. Click on the gallery and select the Edit (pencil) icon.
   

   

2. Then, in the Edit Gallery window, open the Content tab.
3. You can rearrange the order by dragging the images to change their order, delete existing images, or add a new image with the Add Images button.
   

   

4. For new images, you can either upload files from your device, select existing images from your gallery, or use free images from the “Unsplash” gallery. You can select and add multiple images to the gallery. Once you’ve selected the images, just click Update, and your new images will appear.
   

   

Background image

To change or edit a background image in a section:

1. In the Edit Section window, open the Design tab.
2. Hover over the background image preview, and press the Update button.
   

   

3. You can then upload a photo from your device, select an image from your website’s gallery, use a free image from the “Unsplash” gallery, embed an external image by adding a link, or use AI to generate an image.

How to Add Photos Using the Single Image, Image Gallery, Image and Text Section Options (Classic Builder)

These steps are applicable for both the SiteGround Website Builder and SiteGround Ecommerce.

If you want to add photos to a page, you’ll first need to choose and add sections, which include images.

Image Section

To add an image section, navigate to the Pages tab, click on an already existing page or create a new one.

Once the page is selected, go to the body of the page and click on Add Section.

Select the Images category from the left menu and then choose the section that best suits your needs.

To change the image, hover over it and click Update.

You can either upload your own image or select a free image from the integrated “Unsplash” gallery.

Once you’ve selected the image just click Update and your new image will appear.

Gallery Section

If you choose a gallery section from the Image Section list, in the left column, you will see options to delete and manage images.

Click on Add Image to change the images. You can either upload your own images or select free images from the “Unsplash” gallery. You can select and add multiple images to the gallery. Once you’ve selected the images, just click Update, and your new images will appear.

Text and Image Section

If you choose a Text and Image section, you will see layouts where text and image coexist.

• In sections where text and image are side by side:

Once you select the section that best suits your needs, hover over the image and click on Update to change it. You can either upload your own image, or select a free image from the Unsplash gallery. Once you’ve selected the image just click Update.

• For text and image sections where the text overlays the image:

Click on the section and from the left menu select Choose File to change the background image. You can either upload your own image, or select a free image from the Unsplash gallery. Once you’ve selected the image, just click Update.