Skip to main content

​
Photo Grids

Insert stunning image galleries with professional layouts directly in your content.

​
Overview

Photo grids allow you to display multiple images in visually appealing arrangements. Choose from 24 pre-designed layouts to showcase your work.

​
Inserting a Photo Grid

1

Open Editor

Go to any content editor (Blog, Project, Product)
2

Click Grid Button

Click the Grid icon (Grid3x3) in the toolbar
3

Choose Layout

Browse 24 layout options and click your preferred one
4

Add Images

For each cell:
  1. Click the empty cell
  2. Choose URL or Upload
  3. Add your image
  4. Click Add Image
5

Insert

Click Insert Grid when all cells are filled

​
Available Layouts

​
Simple Grids (1-5)

LayoutDescriptionImages
2 ColumnsSide by side2
3 ColumnsThree in a row3
4 ColumnsFour in a row4
2×2 GridSquare grid4
3×2 GridTwo rows of three6
Best for: Simple galleries, before/after comparisons, product showcases

​
Asymmetric Layouts (6-10)

LayoutDescriptionImages
Large Left + 2 RightFeatured image on left3
Large Right + 2 LeftFeatured image on right3
2 Top + 3 BottomWide top, small bottom5
3 Top + 2 BottomSmall top, wide bottom5
Large Center + 4 CornersCenter focus5
Best for: Highlighting a main image with supporting images

​
Creative Layouts (11-15)

LayoutDescriptionImages
Masonry 1Tall images on sides4-6
Masonry 2Alternating heights4-6
Featured + 3One large, three small4
Split + 4Two large top, 4 small bottom6
ShowcaseAlternating sizes5
Best for: Portfolio showcases, creative presentations
LayoutDescriptionImages
Gallery 1Tall left, wide right4
Gallery 2Large square with small images5
Portfolio 1Wide top, tall right4
Portfolio 2Mixed sizes5
MagazineEditorial style5
Best for: Professional portfolios, editorial content

​
Special Layouts (21-24)

LayoutDescriptionImages
Hero + GridHero image with thumbnails5
SpotlightWide feature with small images4
Collage 1Artistic arrangement5
Collage 2Creative mixed layout6
Best for: Hero sections, artistic presentations

​
Editing Photo Grids

​
Change Images

  1. Hover over the grid in the editor
  2. Click Settings icon (gear)
  3. Click on the image you want to change
  4. Upload or enter new image URL
  5. Click Update Grid

​
Change Layout

  1. Click Settings on the grid
  2. Click Change Layout
  3. Select new layout
  4. Rearrange images if needed
  5. Click Update Grid

​
Delete Grid

  1. Hover over the grid
  2. Click Delete icon (trash)
  3. Confirm deletion

​
Image Recommendations

​
Optimal Sizes

Use CaseRecommended Size
Thumbnail cells400×400px
Wide cells800×400px
Tall cells400×800px
Hero/Large cells1200×800px

​
File Formats

FormatBest For
JPGPhotos, complex images
PNGGraphics, transparency
WebPBest compression (modern browsers)

​
Tips for Best Results

Use images with similar color tones for a cohesive look.
Keep file sizes under 500KB per image for faster loading.
Use consistent aspect ratios within the same grid when possible.
Very large images (>2MB) will slow down page loading. Compress before uploading.

​
Use Cases

​
Portfolio Showcase

Use Gallery or Portfolio layouts to display your best work with a featured piece. 
┌─────────────────┬─────────┐
│                 │    2    │
│       1         ├─────────┤
│   (Featured)    │    3    │
│                 ├─────────┤
│                 │    4    │
└─────────────────┴─────────┘
Use 2×2 Grid or 3 Columns for product photos from different angles. 
┌─────────┬─────────┬─────────┐
│    1    │    2    │    3    │
└─────────┴─────────┴─────────┘

​
Before/After

Use 2 Columns for side-by-side comparisons. 
┌─────────────┬─────────────┐
│   Before    │    After    │
└─────────────┴─────────────┘

​
Photo Essay

Use Magazine or Collage layouts for storytelling. 
┌─────────────────────────────┐
│            Hero             │
├─────────┬─────────┬─────────┤
│    2    │    3    │    4    │
└─────────┴─────────┴─────────┘

​
Responsive Behavior

All photo grids are automatically responsive:
Screen SizeBehavior
DesktopFull grid layout
TabletAdjusted spacing, some stacking
MobileStacked or simplified layout
Complex layouts may simplify on mobile devices for better viewing experience.

​
Troubleshooting

​
Grid Not Appearing

  1. Ensure you clicked Insert Grid after adding images
  2. Check that all cells have images
  3. Refresh the editor

​
Images Not Loading

  1. Verify image URLs are correct and accessible
  2. Check file upload completed successfully
  3. Ensure images are publicly accessible

​
Layout Looks Wrong

  1. Check image aspect ratios match the cell shapes
  2. Try a different layout better suited to your images
  3. Ensure all cells are filled