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 on the Isometric Grid Gallery Object to access the settings window
  • Stay in the Content section and click on Add so to open the File Selection window: import the image file you want to add in the gallery.
  • Repeat these steps so to add all the images you need. Remember, you can use the CTRL+click and SHIFT+click shortcuts to select multiple files at the same time.
  • All the images are added in the list reported below the toolbar: use the and  buttons to display big or small previews
  • Possibly use the Remove button to delete the selected file from the list, and arrange the order you prefer with the arrows.
  • For each image, you can add a brief text (for instance a title or a caption): select the image from the list, click on  and add the text on the window that opens.
  • Similarly, you can add a link for each image of the list: select the image, click on the button and set the link by selecting the action you prefer.
  • Having defined the Gallery content, you can move one to some general settings that apply to the whole Object:
    • First, set the Cell Size: in this way, you determine the space available for the Object on your page.
    • Set the Number of columns that will be available for the Gallery.
    • Finally, define the Grid proportion, namely the proportion ratio between the Object width and height.


How to define the Grid style

  • Access the Style section: here you will find all the necessary options to work on the Gallery layout.  
  • As to the Grid which the images are organized in, you can:
    • Define a Background color and, if you want to, create an upward or downward gradient with a second color or make it blend with the page: in this second case, set the Upper and lower shading as  "Transparent" 
    • Align the Grid according to the space available on the page.
    • Decide if you want to keep all the images aligned in the grid, or stagger even or odd columns.
    • Modify the Gallery orientation by working on the Rotation on the three axes x, y, z.     
  • You can of course define the way the images are displayed by setting the Rounded Corners, the Border and Shadow Color, as well as the Outer Margin.
  • You can make the gallery even more interesting by using the available Effects. Actually, you can:
    • Set a Display effect. More specifically, you can decide whether the Object should appear on the page with a Movement or a Parallax effect.
    • Choose a Mouseover effect: for instance, with the Zoom in effect, you can make the image slightly bigger when hovering the mouse. 
  • Finally, you can format the text associated to each image of the gallery. Other than the standard text format options (Font, Colors, Alignment and Margins), you can use the Effect option to make the text always visible, or to display/hide it when hovering the mouse.


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.