Skip to main content

Gallery Sections

Gallery sections showcase collections of images in an organized, visually appealing grid layout. They're perfect for portfolios, product showcases, project galleries, or any situation where you need to display multiple images together. This guide shows you how to create stunning image galleries that engage your visitors.

Gallery sections display images in a responsive grid format that:

  • Showcases visual content in an organized layout
  • Adapts to screen sizes automatically for mobile, tablet, and desktop
  • Provides lightbox viewing for full-size image exploration
  • Maintains visual consistency across your image collection

Think of gallery sections as your visual portfolio - a professional way to display photos, project work, products, or any image-based content.

Perfect for:

  • Portfolio displays - Showcase design work, photography, or creative projects
  • Product galleries - Display product images from multiple angles
  • Project showcases - Show completed work or case study visuals
  • Team or event photos - Display company events, team activities, or locations
  • Before/after comparisons - Show transformation results

Best placement: After hero sections or as supporting visual content for your services and products.

Header Content​

Eyebrow Heading

  • Purpose: Context or category for your gallery
  • Examples: "Our Work", "Recent Projects", "Photo Gallery"
  • Keep brief: 1-3 words maximum

Main Heading

  • Purpose: Clear description of what the gallery shows
  • Examples: "Projects We're Proud Of", "See Our Work in Action"
  • Best practice: Focus on the value or story behind the images

Body Content

  • Purpose: Brief introduction or context for the gallery
  • Examples: "Browse our recent client work spanning web design, branding, and digital marketing"
  • Length: 1-2 sentences work best

Each gallery item contains:

Image

  • Purpose: The visual content you want to showcase
  • Requirements: High-quality images work best
  • Best practice: Use consistent aspect ratios or enable cropping for uniformity

Title (Optional)

  • Purpose: Name or description of the image
  • Examples: "Modern Office Rebrand", "Summer Collection 2026"
  • Display: Shows in lightbox view and optional image overlay

Description (Optional)

  • Purpose: Additional context about the image
  • Best practice: Keep brief - a sentence or two maximum
  • Display: Shows in lightbox view

Make individual gallery images actionable by adding CTA links. Each image can have its own link to guide visitors to related pages, project details, or product pages.

Link Text

  • Purpose: The clickable text displayed below the image title
  • Examples: "View project", "Learn more", "Shop now"
  • Best practice: Use action-oriented text that tells visitors what to expect

Link URL

  • Purpose: The destination when the link is clicked
  • Examples: /portfolio/project-name, https://example.com, /products/item

Open In

  • Purpose: Control how the link opens
  • Options:
    • Same tab: Keeps visitors on your site (default)
    • New tab: Opens in a new browser tab (good for external links)

Link Color

  • Purpose: Visual styling for the link
  • Options:
    • Primary: Uses your primary brand color
    • Secondary: Uses your secondary brand color
  • Appearance: Links include an arrow icon that animates on hover

When to use image links:

  • Link portfolio images to detailed case study pages
  • Link product photos to product pages or shopping cart
  • Link event photos to event details or registration pages
  • Link team photos to individual bio pages

Best practices for image links:

  • Only add links where deeper content exists
  • Keep link text concise (2-4 words)
  • Use consistent link colors across gallery items
  • Consider opening external resources in new tabs
  • Combine with image titles and descriptions for complete context

Footer Content​

Outro Content

  • Purpose: Closing message or call-to-action context
  • Examples: "Want to see more? Contact us for our full portfolio"
  • Keep brief: 1-2 sentences maximum

Buttons

  • Purpose: Direct visitors to take action
  • Examples: "View Full Portfolio", "Get a Quote", "Contact Us"

Layout and Design Options​

Grid Columns​

2 Columns

  • Best for: Large, detailed images that need viewing space
  • Good when: You have 2, 4, or 6 images
  • Appearance: Larger images with more visual impact

3 Columns (Default)

  • Most popular choice for balanced galleries
  • Good when: You have 3, 6, 9, or 12 images
  • Appearance: Medium-sized images, good balance

4 Columns

  • Best for: Showing many images in compact format
  • Good when: You have many images to display
  • Appearance: Smaller thumbnails, more images visible at once

Image Aspect Ratio​

Control how images are cropped and displayed:

Auto (Default)

  • Images display at their natural proportions
  • Best for: Mixed-aspect images where cropping would lose important content
  • Note: May create uneven grid alignment

1:1 (Square)

  • Perfect squares for uniform appearance
  • Best for: Profile photos, products, icon-style images
  • Creates: Clean, organized grid layout

16:9 (Widescreen)

  • Landscape format matching video proportions
  • Best for: Landscape photography, video thumbnails, scene images
  • Creates: Cinematic, modern feel

4:3 (Standard)

  • Traditional photo ratio
  • Best for: Most photography, balanced composition
  • Creates: Classic, professional appearance

3:2 (Photo)

  • Classic camera ratio
  • Best for: Professional photography
  • Creates: Natural photographic feel

Image Positioning Controls​

When images are cropped to a specific aspect ratio, you can control which part of the image is visible:

Object Fit Options

  • Cover (Default): Image fills the entire area, cropping as needed
  • Contain: Entire image visible, may show background
  • Fill: Stretches image to fill (may distort)

Object Position Options Control the focal point when images are cropped:

  • Center: Focus on the middle of the image
  • Top: Focus on the top portion (great for headshots)
  • Bottom: Focus on the bottom portion
  • Left/Right: Focus on specific sides
  • Combinations: Top-left, top-right, bottom-left, bottom-right

When to Adjust Position:

  • People's faces cut off - Use "top" to focus on upper portion
  • Important elements cropped - Adjust to show key content
  • Text or logos at edges - Position to keep them visible

Layout Variants​

Standard Layouts

  • Left: Header content aligned to the left
  • Center: Header content centered
  • Right: Header content aligned to the right

Gallery images open in a lightbox when clicked:

Lightbox Features:

  • Full-size viewing without leaving the page
  • Navigation arrows to browse between images
  • Keyboard navigation (arrow keys, Escape to close)
  • Image titles and descriptions displayed below images
  • Touch-friendly swipe navigation on mobile

Lightbox Best Practices:

  • Use high-resolution images for best lightbox experience
  • Add titles and descriptions for context
  • Ensure images look good at both thumbnail and full size

Video Lightbox​

Display videos in an elegant lightbox overlay. Videos can be embedded from YouTube, Vimeo, or self-hosted sources.

Supported Video Sources:

  • YouTube: Paste any YouTube video URL
  • Vimeo: Paste any Vimeo video URL
  • HTML5 Video: Use direct video file URLs (MP4, WebM)

How Video Lightbox Works:

  1. Add a button to any section with a video URL
  2. Configure the button as a "Video Lightbox" button type
  3. When clicked, the video opens in a centered overlay
  4. Visitors can close by clicking outside, pressing Escape, or clicking the close button

Video Lightbox Features:

  • Responsive sizing adapts to screen size
  • Keyboard accessibility full keyboard navigation support
  • Focus trap keeps keyboard focus within the lightbox
  • Auto-pause video stops when lightbox closes
  • Click-outside-to-close intuitive dismissal behavior

When to Use Video Lightbox:

  • Product demo videos on landing pages
  • Testimonial videos that support written reviews
  • Tutorial or explainer videos
  • Company introduction or about videos
  • Portfolio showcase videos

Best Practices for Video Lightbox:

  • Keep videos under 2-3 minutes for best engagement
  • Use compelling thumbnail images on buttons
  • Provide clear button text like "Watch Video" or "See Demo"
  • Test video playback across different devices
  • Ensure videos are optimized for web streaming

Theme Variants​

Light Theme​

  • Light background with natural image presentation
  • Professional appearance for most use cases
  • Best for: Clean, minimal designs

Dark Theme​

  • Dark background makes images pop
  • Modern, dramatic appearance
  • Best for: Photography portfolios, creative work

Custom Background​

When to use custom backgrounds:

  • Brand color coordination for specific campaigns
  • Visual hierarchy to make gallery stand out
  • Seasonal themes or special promotions

How custom backgrounds work:

  1. Enable "Use Custom Background" in Layout tab
  2. Choose background color with color picker
  3. Smart colors automatically adjust text for readability
  4. Preview updates immediately

Creating Effective Gallery Content​

Selecting Images​

Quality Standards:

  • High resolution - At least 1200px wide for best results
  • Consistent style - Similar lighting, color treatment, or theme
  • Relevant content - Images that support your message
  • Optimized files - Compressed for web without losing quality

Number of Images:

  • 4-6 images: Clean, focused showcase
  • 9-12 images: Comprehensive portfolio display
  • 12+ images: Consider pagination or multiple gallery sections

By Project or Category:

  • Group related images together
  • Create separate galleries for different work types
  • Organize by client, industry, or time period

By Visual Flow:

  • Start with strongest images
  • Alternate between different types
  • End with compelling images

By Importance:

  • Feature best work prominently
  • Place key images in top-left (first viewed)
  • Use consistent quality throughout

Image Optimization​

Before Uploading:

  • Compress images using tools like TinyPNG or ImageOptim
  • Resize to appropriate dimensions (2000px max width recommended)
  • Use JPG for photos, PNG for graphics with transparency

Recommended Sizes:

  • Thumbnail display: 600-800px wide
  • Lightbox display: 1600-2000px wide
  • File size: Under 500KB per image

Performance Considerations​

Loading Speed Factors:

  • Number of images affects initial page load
  • Image file sizes impact loading time
  • Consider lazy loading for large galleries

Best Practices:

  • Limit galleries to 12-15 images per section
  • Optimize all images before uploading
  • Use appropriate image formats
  • Test page load speed after adding galleries

Mobile Optimization​

Responsive Behavior​

Desktop (1024px+):

  • Full grid layout (2, 3, or 4 columns)
  • Images at optimal display size
  • Lightbox with full navigation

Tablet (768-1023px):

  • Reduced to 2-3 columns typically
  • Touch-friendly image tapping
  • Swipe navigation in lightbox

Mobile (under 768px):

  • Single column or 2-column layout
  • Larger touch targets
  • Optimized lightbox for small screens

Mobile-Specific Considerations​

Image Selection:

  • Ensure images look good when smaller
  • Avoid images with small important details
  • Test how images crop on narrow screens

Touch Interaction:

  • Images should be easily tappable
  • Lightbox supports swipe gestures
  • Navigation remains accessible

Photographer Example:

  • High-quality photos grouped by style or genre
  • Consistent aspect ratios for professional look
  • Lightbox enabled for full image viewing

Designer Example:

  • Project screenshots and mockups
  • Before/after comparisons
  • Multiple views of same project

E-commerce Example:

  • Product photos from multiple angles
  • Consistent backgrounds and lighting
  • Square aspect ratio for uniformity

Service Provider Example:

  • Photos of completed work
  • Process documentation
  • Results and transformations

Corporate Event Example:

  • Highlights from conferences or meetings
  • Team activities and celebrations
  • Venue and setup photos

Wedding/Social Example:

  • Key moments and highlights
  • Venue and decoration showcase
  • Guest and family photos

Common Image Issues​

Images Not Loading

  • Check file sizes (should be under 10MB)
  • Verify file formats (JPG, PNG, WebP supported)
  • Test image URLs for accessibility
  • Clear browser cache

Images Look Distorted

  • Check aspect ratio settings
  • Adjust object-fit option
  • Use "auto" aspect ratio if images vary significantly
  • Ensure source images are high quality

Layout Problems

  • Verify grid column setting matches image count
  • Check for very different image aspect ratios
  • Test on different screen sizes
  • Review custom background settings

Performance Issues​

Gallery Loading Slowly

  • Reduce number of images
  • Compress images before uploading
  • Use appropriate dimensions (not oversized)
  • Consider multiple smaller galleries

Lightbox Not Working

  • Check for JavaScript conflicts
  • Verify images have valid URLs
  • Test in different browsers
  • Clear browser cache

Best Practices Summary​

Do's​

  • Use high-quality images that represent your best work
  • Maintain consistency in style and quality
  • Optimize images before uploading
  • Add titles/descriptions for context
  • Test on mobile devices
  • Keep galleries focused on a theme or purpose

Don'ts​

  • Overload galleries with too many images
  • Mix drastically different image styles
  • Use low-resolution or blurry images
  • Forget mobile users when selecting images
  • Skip image optimization - it affects load time

Next Steps​

Now that you understand gallery sections:

  1. Practice creating galleries with different layouts
  2. Learn about Hero Sections for page headers
  3. Explore Features Sections for content presentation
  4. Study successful portfolio sites for inspiration

Need More Help?​

Gallery sections are your visual showcase - use them to let your work speak for itself and create a lasting impression on visitors!