Compatibility:

WebSite X5 Evo and Pro

In a "regular" gallery, images simply flow one after the other. It's a nice and functional solution to display many images using little space, and the result is always guaranteed. 


But can we do a little more? Make these galleries even more engaging and interesting? The answer is: "Yes".


For instance, we can have the images flow in the background while an element stays fixed in the foreground: it could be a person with his back turned, so to give the effect of a tourist watching some landscapes. Or it could be a frame, within which images are displayed in turn. There are many effects you can create, and you can check out some examples on this Preview page.


If you're wondering how to create this kind of gallery for your web pages, the answer is simple: with the Frame Gallery Optional Object.



How it works

The gallery you can create with the Frame Gallery object is divided into two levels:

  • the 1st level displays the central element that stays fixed in the foreground;
  • the 2nd level displays the images flowing in the background.


For our hero image, namely the element in the foreground, you should use a .PNG or .SVG image with transparent background: in this way, the final effect will look way more natural. 


Please consider this fixed element always stays in the center with respect to the background galley. To get particular alignments, you will then have to prepare the images with an eternal tool before importing them.


How to add contents

Now that you know how Frame Gallery works, you can move on and create your own gallery. Let's start by adding contents:

  • Double-click on the Frame Gallery Object you just added on the page to access the settings window.
  • Import the Image File you want to use as Frame, namely the central fixed element in the foreground, then define its size in pixels. 
  • As far as the Gallery goes, import all the image files you want to add and arrange the order. Don't forget that you can click on the button for each and every image to define some SEO parameters (Title and Alt Text), as well as on  to add a link. 
  • You can define the size of the gallery images too, again in pixels, which can also differ from the size set for the frame, Moreover, you can also set the distance between the images of your gallery.


How to define the style

Finally, you can define the style for your gallery and how to navigate between images:

  • Start by choosing the Arrangement for the gallery images: you can have more images or just one image displayed at once. The effect will change accordingly. 
  • As far as the navigation is concerned, decide whether you want to display the navigation commands and the wished color of the respective buttons. If you don't activate them, users will be able to browser through your gallery by dragging the images with their mouse. 
  • Finally, decide if you want to activate the Autoplay function, namely if the images should automatically start flowing, and set the waiting time Interval between one image and the next.


Are you curious to use this Object on your website pages? Install Frame Gallery now.


You don't have enough Credits to buy this Object? Check out our Credit Packs.