Employ the Overlap tool as an easy way to layer sections of content on top of one another to create unique layouts for your page designs.
Here we've created a simple, faux-banner area with some overlapping content to show off how easy, and effective this sort of design can be for layering your page elements.
Quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Layering content gives our pages a feeling of depth and continuity. The Overlap tool has been a popular way to do this in Foundry for quite some time. With this version we've made it easier to use and given it more versaility for your designs by utilizing more responsive breakpoints and offset units.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Here you'll find the controls for adjusting the overlap distance in the vertical direction. This can be changed at each of the 6 responsive breakpoints individually. You can also opt for some breakpoints to inherit their offset value from the next smallest breakpoint above them if needbe.
Allows you to choose the units that the offset value(s) are measured in. By default this is Pixels (px), but you can also choose from Root EM (rem) as well as View Height (vh).
Here you'll find the controls for adjusting the overlap distance in the horizontal direction. This can be changed at each of the 6 responsive breakpoints individually. You can also opt for some breakpoints to inherit their offset value from the next smallest breakpoint above them if needbe.
Horizontal overlap is less commonly used and thus is set to None by default for the Extra Small breakpoint, with all other breakpoints inheriting that setting.
Allows you to choose the units that the offset value(s) are measured in. By default this is Pixels (px), but you can also choose from Root EM (rem) as well as View Height (vh).
Allows you to adjust the layering of elements using a custom z-index value.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.