How to Use Offset/Overlapping Views

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)
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)
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, 04 Jan 2024 at 02:26 PM