Login

Mosaic Gallery

8 MIN READ

Summary: Get inspiration for your next mosaic gallery layout.

Table of Contents

  1. Showcase Products/Services
  2. Image Navigation
  3. Product Features
  4. Photo Gallery
  5. Instructions
  6. Testimonials - Soon
  7. News
  8. Team


1. Showcase Products & Services

Use the Masonry layout to create a well balanced, minimalist gallery.


Embed code:

<widgetic-embed id="5bd88ca2ecb2a158298b4568" resize="fill-width" width="1046" height="470" autoscale="on" adaptive="414"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


2. Image Navigation

Use the Mosaic layout with a CTA button to inspire users to explore.


Embed code:

<widgetic-embed id="5bd8f02aecb2a1df3d8b4567" resize="fill-width" width="898" height="721" autoscale="on" adaptive="414"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


3. Product Features

Use the Alternate property in the List layout, to showcase your product features.


Embed code:

<widgetic-embed id="5bd883e0ecb2a16e278b4569" resize="allow-scale-down" width="1178" height="492" autoscale="on" adaptive="414" align="center"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


Display your photos in detail with a lightbox preview on click.


Embed code:

<widgetic-embed id="5bd8f511ecb2a1e13e8b4567" resize="fill-width" width="720" height="450" autoscale="on" adaptive="414"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


5. Instructions

With the List layout, it's easy to describe a step by step process.


Embed code:

<widgetic-embed id="5bd86261ecb2a1901f8b456e" resize="allow-scale-down" width="900" height="450" autoscale="on" adaptive="414" align="center"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


6. Testimonials

Coming soon...


back up ↑


7. News

Use the List layout, to create a hero image followed by scrolling items.


Embed code:

<widgetic-embed id="5bdb109decb2a1181e8b456a" resize="allow-scale-down" align="center" width="400" height="575" autoscale="on"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑


8. Team

Use the Grid Layout with image radius to create a beautiful team gallery.


Embed code:

<widgetic-embed id="5bdafd8becb2a15c1a8b4568" resize="fill-width" width="1240" height="450" align="center" autoscale="on"></widgetic-embed><script async src="https://widgetic.com/sdk/sdk.js"></script>


back up ↑

Further Reading

Have more questions? Contact a human at support@widgetic.com.

Still need help? Get in touch!
Last updated on 6th Nov 2018