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!



Modified on Thu, 4 Jan at 2:26 PM

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article

Make sure these features are added to your Site Stacker installation by learning how to run updates here!