Floating Gallery

This appropriately–named widget displays a gallery of thumbnail images that appear to float on the page. As you move your cursor, the entire gallery reacts by gently moving images in harmony with the cursor movements.

Clicking on any gallery item opens a new focus page with a full-size image, title, description, and button to link site visitors to other pages to learn more. This widget offers an interesting and beautiful self-contained gallery that's perfect for grabbing some serious attention!

Preview: https://demo.wocode.com/floating-gallery

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the gallery to appear. 

WIDGET OPTIONS

  • Open the widget option panel.
  • Background Text First Line: This is the top line of text that you’ll see behind the gallery.
  • Background Text Second Line: This is the bottom line of text that you’ll see behind the gallery.
  • Gallery Items: This is where you will add your items.

From within each list item, you will find the option to add the list item image. As well as the option for each item to add a title, subtitle, content, and enable or disable the button.

  • “Back” Button Label: This allows you to change the text that is shown for the back button within the gallery.

DESIGN SETTINGS

  • Mobile Grid Item Height (%): This option allows you to adjust the height of the gallery's thumbnail images for the mobile layout.

Within the Background Text Styling you will find the text styling for the background text. You will also find the option for:

  • Text Vertical Margin: This option is used to apply a margin between the first and second lines of background text

Within the Image Styling you will find the text styling for the back button, title, content and button text. You will also find the option for:

  • Subtitle Vertical Padding: This option applies a padding between the subtitle text, and the title and content text.

  • Content Vertical Padding: This option applies a padding between the subtitle, content text, and the title.

  • Button Vertical Padding: This option applies padding between the button and content text, and the title.

Helpful Tips

Here are a few helpful tips regarding the sizing of the images in the gallery.

  • Images will be displayed as a square, but they are responsive so they will narrow depending on the size of your screen. On an average 15" Macbook, the image thumbnails will be displayed in portrait-type aspect ratio.
  • Regardless of the aspect ratio of the image added to the gallery, the images will all be displayed the same. If you load a wider landscape style image, the site visitor will see the left and right edges reduced since they will see the image displayed as portrait instead of landscape.
  • We recommend selecting images that look good as a square or portrait layout.