How to Use Offset/Overlapping Views

1. You will want to be in Site Planner and add a new Basic Wrapper to a demo site page (for testing purposes)

• • Position: Body
  • New View: Offset Container
  • You will see new View Classes:
  • • For Positioning: Offset Bottom, Left, Right, and Top classes
    • For Sizing: Fixed Height (400px) and (650px)

2. Depending on the content you are trying to create the Overlap effects for, you can choose a combination of these different View Classes

• • Ex: Offset Top -50%, Offset Left (90px), Fixed Height (650px)

3. Once you have structured your first Offset Container wrapper, you will add another Basic Wrapper inside

• • View: Basic
  • “Special Padding” View Class (Padding Bottom - 150px, 200px, 325px and 550px)
  • • These View Classes counter-balance the Offset containers
    • Ex: Padding Bottom (150px) - This is used for our previous example
  • You can have fun and be creative with these new Views and View Classes by trying out different combinations!

Updated on: 14/04/2026