Skip to Content
Save 20% on our Theme Bundle $199 instead of $249
DocsMomentSite WideGallery Layout & Effects

Gallery Layout & Effects

Moment theme offers multiple gallery layouts and customizable effects to showcase your images beautifully. Choose from grid-based layouts, masonry styles, or interactive designs, each with their own visual effects and animation options.

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Site wide
  3. Select your preferred Gallery layout from the dropdown menu

Grid

Grid gallery layout

A clean, organized grid layout that displays images in equal-sized cards with consistent spacing between them. Perfect for portfolios and uniform image collections.

Masonry

Masonry gallery layout

A dynamic Pinterest-style layout where images are arranged in columns based on their natural dimensions. Taller images stack vertically while maintaining optimal spacing, creating an organic, flowing appearance.

Interactive links gallery layout

A unique layout featuring clickable text links with images that appear as background elements when you hover over each link. This creates an engaging, interactive browsing experience.

Control the number of columns displayed in your Grid and Masonry layouts to optimize viewing on different screen sizes:

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Site wide
  3. Choose your preferred number of columns in Gallery columns setting

The column count automatically adjusts on smaller screens to maintain optimal readability and visual balance.

Scroll Effects

Enhance user experience with subtle scroll-based animations (available for Grid and Masonry layouts):

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Site wide
  3. Choose your preferred effect in Gallery scroll effect setting

Shift gallery scroll effect

Available scroll effects:

  • None - Static gallery with no scroll animations
  • Shift - Images gently shift left and right alternately as you scroll
  • Shift Start - All images shift towards the left side during scroll
  • Shift End - All images shift towards the right side during scroll

Create engaging entrance animations that trigger when images scroll into the viewport (available for Grid, Masonry, Horizontal, and Photo Film layouts):

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Site wide
  3. Choose your animation in Gallery reveal setting

Shift gallery reveal effect

Available reveal effects:

  • Basic Animations: None, Fade (opacity change), Shift (slide movement), Zoom (scale effect), Slide (directional entrance)
  • Advanced Animations: Flip effects (3D rotations), Clip animations (geometric reveals), and directional variants
  • Scroll-Based Variants: Enhanced versions triggered by scroll position (Scroll Fade, Scroll Shift, etc.)

Customize how background images respond when visitors hover over links in the Interactive Links layout:

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Site wide
  3. Choose your hover animation in Gallery links effect setting

Available hover effects:

  • Fade - Images smoothly fade in and out during hover transitions
  • Zoom - Images gradually scale up when hovered, creating a subtle zoom effect

Code Injection is required to add custom CSS.

Fine-tune the spacing between gallery images by overriding the default gap values with custom CSS variables:

<style>
   :root {
      --gallery--gap-v: 8px;  /* Vertical spacing between rows */
      --gallery--gap-h: 8px;  /* Horizontal spacing between columns */
   }
</style>

Adjust the pixel values to increase or decrease spacing as needed. For example, use 16px for wider gaps or 4px for tighter spacing.

Home LayoutPhoto Parallax