Compatibility:
WebSite X5 Evo and Pro
A board where your favorite Polaroids are hung with pins: you open the window and a blow of air makes them swing slightly. That's the effect you can get on your web page with the Polaroid Grid Optional Object. There will be no wind online, of course: you will just have to scroll down the page to see the Polaroids move.
Do you want to see some examples for getting inspired? Check out the Preview page.
Create the Polaroid list
Now that you know what you results you can get, create your own gallery, starting by defining the list of images you want to display with a "Polaroid" style:
- Double-click on the Polaroid Grid Object you added on the page to access the settings window.
- Stay in the List section and click the Add button to import photos and videos. By clicking the arrow on the Add button, you can choose whether to search for a
Local file or use an 
Online library (for more information, see How do I import a file?). The imported files make up the list that you can freely sort and edit.
#tip – Multi-selection. Hold down the CTRL key and click on all the files you want to select so you can import them in one go.
- With the buttons
you can decide whether the image previews in the list are shown in small or medium size, making your work easier. - Once the list of images is created, you can edit it at any time: in addition to adding new images, you can remove those you no longer need or rearrange them. To do this, simply select the image from the list and click
to remove it or use the arrow buttons to move it. - Similarly, for each inserted image/video you can use the following buttons to:
– insert a title and alternative text useful for accessibility as well as SEO optimization (see Image accessibility: the importance of alternative text).
– define a Description that will be shown below the polaroid image;
– proceed with adding a link.
Define the gallery style
Now you can move on to more graphic aspects:
- Open the Style section.
- Start by defining the style of the single Polaroids using the settings available in the Photography section. You can:
- define the Width in pixel for each Polaroid;
- set the Distance between the Polaroids;
- choose a Color or import an Image for the Polaroid frame;
- add a Shadow: if you prefer not to, you can set the shadow as 'Transparent'.
- Now you can move on to the Pins with which the Polaroid is hung. You can decide whether to display this element or not, and if you choose to, you can define its color.
- As we said, the descriptions you add are displayed at the bottom of the Polaroid. With the options available in the Description section, you can format this text by defining the Font Type, the Text Color and the Alignment.
- In the Effects section, on the other hand, you can find the option to activate or disable the Scroll Animation (namely the slight swinging of the Polaroids) and the one to display them randomly.
- Finally, you can decide that, by clicking on a Polaroid, users can access to an enlarged version of the same image: in this case, you need to activate the Display enlarged image on click in ShowBox option and define the enlarged image Maximum size. You can also decide whether to display the thumbnails for the gallery images (Show thumbnails in the ShowBox).
#tip - You can customize the ShowBox window style, see: How to set the style of the pop-up window ShowBox Consider that, even if the option to display the enlarged image is active, if a link is set on an image, the action intended for the link is performed upon click.
Are you curious to use this Object on your website pages? Install Polaroid Grid now
You don't have enough Credits to buy this Object? Check out our Credit packs