Compatibility:

WebSite X5 Evo and Pro

This name evokes memories of technical drawing and tables showing cubes, parallelepipeds and pyramids arranged in isometric axonometric. But don't worry: with the Isometric Grid Layout Optional Object, you won't have to go back in memory. Actually, creating a gallery where images are organized according to a neat isometric grid layout will be very easy.  


Check out some examples on the Preview page, so to have a clearer picture of what effect you can recreate with this Object and when you could use it.   



Isometric projection

For many years, the Web has been a two-dimensional world, where elements could only be placed horizontally on the x-axis and vertically on the y-axis. In the 90s, people started looking for new ways to represent objects in 3 dimensions and, given the still limited computing power available, the solution was to employ the isometric projection, which uses a third axis, the z-axis, to represent depth. 


More specifically, in the isometric projection the three axes create equal angles, so that the projection frame is inclined equally with respect to the three main planes.


The isometric perspective is still considered a good solution to create the illusion of three-dimensionality for the elements of a web page. 


Now that you know how it works, it will be easier for you to understand how to proceed to create your own gallery in isometric perspective.


How to create the image gallery

  • Double-click the inserted Isometric Grid Gallery Object to access the window with all available options.
  • Stay in the Content section and click the Add button to import the image file you want to insert. By clicking the arrow on the Add button, you can choose whether to search for a  Local file or use the  Online Library (for more information, see How do I import a file?).   
  • Repeat the operation to add all the images you need. Remember that you can use the CTRL+click and SHIFT+click combinations to make a multiple selection of images.
  • All inserted images are listed below the toolbar: use the and  buttons to switch between small or large previews.
  • If necessary, use the  button to remove the selected file from the list, and the arrow buttons to change the order of the images.
  • For each image you can:
    • use the button to enter a title and alternative text, useful for accessibility and SEO optimization of the page (see Image accessibility: the importance of alternative text);
    • click the  button and, in the dialog that opens, enter a short text (for example, a title or caption);
    • click the button and set the link by choosing the most appropriate action.


How to define the Grid style

Now that you have defined the actual content of the Gallery, you can focus on its graphic style:

  • Go to the Style section: here you will find all the options you need to adjust the appearance of the Gallery you are building. 
  • As for the Gridwhere the images are arranged, you can:
    • Set the Number of columns of the grid used to arrange the Gallery.
    • Define the Grid proportion, that is, the ratio between the width and height of the Object.
    • Set a Background color and, if you wish, make it fade upwards and downwards into a second color or blend with the page background: in this second case, choose 'Transparent' for Top and bottom gradient.
    • Align the Grid within the available space on the page.
    • Decide whether to keep all images aligned in the grid or to offset the even or odd columns.
    • Change the orientation of the Gallery by adjusting the Rotation along the X, Y, and Z axes.      
  • Of course, you can also adjust the appearance of the individual Cellsof the layout grid used in the gallery:
    • First, set the Cell size: this is equivalent to defining the space available for the Object within your page.
    • Finally, set the Bevel factor, the Border and Shadow color, and define the Outer margin.


How to refine the Gallery appearance

To further customize the appearance of the gallery and make it even more interesting, you can complete it by defining the style of the descriptions and enabling effects:

  • Go to the Options section and use the formatting options (Font, Text and background color, Alignment, Margins) available to define how the description that may be associated with the images should be displayed. 
  • You can choose whether the descriptions are always visible or are shown/hidden on mouseover using the Effect option.
  • You can also set an Appearance effect for the entire gallery. Specifically, you can choose whether the Object should enter the page with a Movement effect or a Parallax effect. 
  • Finally, you can choose a Hover effect: for example, with the Zoom In effect you can get a slight enlargement of the image when you move the mouse over it.



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


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