How to add a gallery to your website

With SendPulse’s website builder, you can add a gallery to display several images as a carousel, grid, or collage. For example, you can use a gallery as your portfolio or show your products and their reviews.

Let’s talk about how to add a gallery to your website and set up its display.

Add an element

Add the Gallery widget to a part of your website.

Upload images

Click Choose file.

To add new files, click Upload files, and select files from your device or drag and drop them. Click Upload.

Website images are automatically resized to match the screen size of the visitor's device (720, 1080, or 1920 px) and converted to the webp format. If the required size is not available, the website visitor will see the original image, which is stored in the file manager.

Once you upload your files, close the window. Select the image you just uploaded from your file manager.

You can upload files in bulk, but you can only add them to the gallery one by one.

To add more images, click Add.

To replace or delete an image, hover over it, and click the corresponding icon.

To rearrange images on the grid, drag and drop them to the necessary location.

Set up your gallery

Select your gallery type (carousel, grid, or collage), and click Customize.

Carousel

Used to create a slideshow that rotates through various images.

For this gallery type, you can choose how many images you want to add to the row and set up its appearance (show all images in the row at once or show them one by one with the row displayed below).

Customize the appearance of your carousel — set the spacing between images in the row, round your image corners, and select your slider buttons’ color.

You can also set up additional options for user interaction by enabling or disabling image opening after a click* and automating slide transitions.

*When this option is enabled, the image will be opened in a modal window in its original size.

Grid

Used to present all images at once in one block and in the same size.

For this gallery type, you can choose how many images you want to add to the row.

Customize the appearance of your grid — set the spacing between images, and round your image corners.

You can also set up additional options for user interaction by enabling or disabling image opening after a click.

Collage

Used to present all images at once in one block using the selected collage form.

You can customize the appearance of the Collage gallery type based on different templates.

Customize the appearance of your collage — set the spacing between images, and round your image corners.

You can also set up additional options for user interaction by enabling or disabling image opening after a click.

Edit your images

You can customize your image size and add a focal point (an image part to which you want to draw more attention) to bring out the main object in a large photo.

Click an image in the widget, and drag the sizing handle to resize your image. Click the center of your image to set its focal point.

Copy your element ID

Every element has an ID that distinguishes it on the page. With it, you can add styles and scripts, show pop-ups, and track events for this element.

To copy an ID, click it. To edit an ID, click the pencil icon.

Read more: Block and widget ID.

Last Updated: 30.10.2024