Overlap

Potion Pack addon stack

Employ the Overlap stack to layer sections of content on top of one another to create unique layouts on your pages.

  • Overlap sections of content on top of one another to create layered effects
  • Select either a fixed-width or flexible layout for your inner content
  • Overlap content in vertical or horizontal direction -- or both.
  • Add background and border styling for each breakpoint
  • Set different overlap distances at each of the three breakpoints
  • Include rounded corners and drop shadows, which are also adjustable at each breakpoint

Example

In order to best showcase what the Overlap stack can do we’ve built a separate example page. Check out the example page to see how you can make use of the Overlap stack in your projects.

Using Overlap

General

Dark Mode
When enabled you'll be given additional options throughout the Overlap stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

Type
Choose which type of inner area you’d like to have in the Overlap stack. You can choose from a Fixed-Width or Fluid container.

  • Fixed-Width: Allows you to set a maximum width for your Overlap content. At the smaller breakpoints the inner area automatically adjusts becoming a Fluid section to best fit mobile devices.
  • Fluid: The inner content area remains flexible at all breakpoints, filling out the entire width of any space it is placed within.

Max-Wdith
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of the Overlap stack’s inner content area to be.

Distance - Vertical

You are able to choose how Overlap handles the top and bottom distance adjustments. When an element is moved upwards with Overlap it leaves a space below that element that is equal to the amount it was moved upward.

You can choose to use the Unified method, where the stack applies a negative margin to the bottom of the element that is equal to the distance you moved it upwards. This eliminates the bottom gap. Or you can opt to set different values for the top and bottom distances. This is more advanced. Most users will only need and use the Unified option.

Unified
Set the distance that the Overlap stack will move upwards, overlapping the content on the page above it. You can set a different distance for each of the three breakpoints.

Non-Unified
Allows you to set the distance that the Overlap stack will move upwards, was well as setting a different distance for below the Overlap stack. It too can be adjusted at each of the three breakpoints. The non-unified setting is less likely to be used in most layouts.

Distance - Horizontal

Direction
Allows you to choose to have the Overlap stack overlap its contents to the left- or right-hand side. If you're only looking to overlap in the vertical direction you can set this setting to Off.

Mobile, Tablet & Desktop
These are the overlap values for the horizontal distance. You can set a different overlap distance at each of the three responsive breakpoints.

Styling

Background
Set the background color for the inner content area of the Overlap stack. You can set a different background color for each of the 3 breakpoints.

Rounded Corners
You are able to round the corners of the inner content area, setting different border radii at each of the breakpoints.

Shadow

Shadow
Enable to add a drop shadow to the inner content area of the Overlap stack. You’re also able to have the drop shadow be disabled at the Mobile breakpoint.

Vertical Offset
Set the distance you wish for the shadow to go in the vertical direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Horizontal Offset
Set the distance you wish for the shadow to go in the horizontal direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.

Blur
Use this setting to adjust the size of the drop shadow at each of the three breakpoints.

Color
You are able to adjust the color of your drop shadow to match your site’s styling. You can also use the opacity slider to adjust the shadow’s density.

Border

Width
Set the width of the inner content area’s border for each of the three breakpoints.

Color
Choose what color you wish your border to be using a color picker to help match it to the style of the rest of your site.

Advanced

Z-Index
Choose a custom Z-Index value for your overlapped content. This is for more advanced layering of content.

Insight
To Unify or Not Unify

For 99% of the time you'll likely use the Unified settings option in the Overlap stack. This ensures that a negative margin is applied to the bottom of the Overlap stack that matches the distance you're moving the stack upwards. This maintains an expected spacing on your page. You can set your own bottom margin however by using the non-unified settings.