Pin

Pin content of your choosing to the edge of your page. Place it along the top, bottom, left or right.

Examples

We have not created an example for Pin on the documentation page, as we wanted to ensure we were not covering important information that you may be referencing.

57_air force Fighter 2

You can be my wingman anytime.

Pinning content to a browser's edge can be useful to make information always visible to your visitors. Just be sure not to overdo it. Too much content stuck to a browser's edge can quickly take up a lot of space – especially on small mobile devices.

Settings

Edit Mode

Edit Mode Title

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.

Positioning

Vertical & Horizontal

Used to choose the area of the page you'd like to have your content stuck to. Combine these two settings to get the perfect location on the page.

Setting both to center / middle will disable the pin tool positioning as it would cover the main content of your page, and the pin tool is not user dismissable.

Offset

Here you can specify how far from the browser edge, in both the horizontal and vertical directions, that you'd like to offset your pinned content.

Sizing

Width

Adjust the width of your pinned content using this field. The height of the pinned content will vary depending on the content you place within it.

Units

Choose the unit of measure for the width of your pinned content.

HTML Comment

HTML Comment

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.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

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.