Working with Layers and Z-Index

When your template has multiple elements — photos, text, images, overlays — they stack on top of each other. Layers and z-index control which elements appear in front and which sit behind.

What Is Z-Index?

Z-index is the "depth" of an element. Higher z-index = closer to the front. Lower z-index = further back.

Think of it like a stack of cards:

• Background — Always at the bottom
• Photo slots — In the middle
• Text and logos — On top
• Overlays — Can be on top or behind photos, depending on your design

How to Change Layer Order

1. Select an element in the editor
2. Use the layer controls to move it forward or backward
3. Options typically include:

• Bring to Front — Move to the top of the stack
• Send to Back — Move to the bottom
• Move Forward — One layer up
• Move Backward — One layer down

[screenshot: Layer controls in editor]

Common Layer Arrangements

Standard Layout

1. Background (bottom)
2. Photo slots
3. Text
4. Logos / graphics (top)

Overlay on Top of Photos

1. Background (bottom)
2. Photo slots
3. Decorative elements (top — logos, borders, graphics over the photos)

Frame Effect

1. Background (bottom)
2. Photo slots
3. Frame / border graphics (top — creates a framing effect around photos)

Tips

• Photos should usually be behind text and logos — So branding and info are always visible
• Use overlays strategically — A semi-transparent texture on top of photos can add a vintage or artistic feel
• Preview your layers — Check with actual photos to make sure important elements aren't hidden behind others

Updated on: 21/03/2026