When you place an image or use other methods to add artwork to a page, you use the Selection tool and arrow keys to reposition it. As you move the image around, it moves in relation to the other elements (images, text, and media) that also exist on the page. You have the ability to move the other elements too, but the entire page behaves like a brochure or a poster. The items on the page exist on a single plane. If a page is long (contains a lot of vertical content) and the visitor scrolls down—they no longer see the images at the top of the page.
It’s likely that you’ve seen pinned objects when viewing websites; they are the “persistent” items that always display in one location. They appear to float above the rest of the page content.
When you use the Pin tool, you are essentially removing an image from the flow of the page. Rather than laying it out in relation to the other page elements, you set it to a specific location in relation to the browser. Pinned images appear to be “sticky” – always staying in one spot (such as the top right corner or hovering near the bottom) regardless of other scrolling page elements. If the visitor resizes their browser, pinned images always stay at their pinned location in relation to the browser window.
You can think of pinning as a way to “break the image out” of a page’s design, and affix it to the browser instead, like pinning a note to a corkboard. The pinned element will move to maintain its pinned position in relation to the browser if the visitor resizes the browser window, but the pinned element will not move if the visitor scrolls the page content horizontally or vertically.
Follow these steps to use the Pin tool:
- While the A-Master page is open in Design view, select the Facebook icon with the Selection tool.
- Click the top right pin position in the Pin interface in the Control panel. This setting "pins" the element by the current location of its top right corner.