Use the scratch component to increase engagement on your page.
🎰 🎁 📈
Scratch components are dynamic elements. Scratch components, and all other elements, are contained within columns.
A scratch component is comprised of two images: one on top (the "cover" image) and one on bottom (the "hidden" image). A visitor scratches away the cover image on top - using their mouse - until a percentage of the top image is erased - revealing the hidden image on bottom. Click and see the potential that scratch components have to engage visitors on your pages. When the bottom is revealed a call to action is presented to the visitor:
The scratch component is located in the Right Pane - it looks like this:
Adding a Scratch Component
Like all components in Landing Lion, you can add a scratch component to any page variant or page template by dragging it from the Right Pane and dropping it on the Canvas. There is no limit to the number of scratch components you can add.
⚠️ Caution: each scratch component requires two images. The more images you add the heavier your page gets - causing your page to load slowly.
Selecting a Scratch Component
To select a scratch component - in Landing Lion - the Selection Tool must be set to "Auto" or "Element".
Editing a Scratch Component
Edit a selected scratch component in the Right Pane of the Page Editor.
- Full Width On Mobile - toggle this to dictate whether your scratch component should occupy the entire width of its column or maintain the size set under "Width" - when its viewed on a mobile device. Switch your Viewing Mode to see what your scratch component will look like on a mobile device.
- Width - adjust the width of your scratch component here. Width is either relative (a percentage) or absolute (by the pixel). By default, it's set to be relative (%). Click the "%" in the input field if you want to change it to absolute.
- Cover Image - the image on top that can be scratched off. You must upload your image before you can use it.
- Hidden Image - the image on bottom that is revealed by scratching away the cover image.
- Amount to Erase - percent of the cover image on top that must be scratched off before the hidden image is shown. Possible values range from 50% to 100%.
- Offer Id - this value will be included with the lead's form submission as "offer". You can use this to identify which scratch components were responsible for lead captures.
- Popup Headline - headline thats revealed at the same time of the "Hidden Image" on bottom.
- Button Label - label of the button revealed after the cover image has been scratched off the "Amount to Erase".
- Border - borders can be set by either px or %. You can choose which sides have borders and set a radius. You can pick one of the three types of borders: solid, dashed, dotted. Initially, it is set to solid.
- Drop Shadow - add as many drop shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Shadow - add as many inner shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
🦁🔑⚠️ Lion Key Alert: we do not recommended setting the "Amount to Erase" at 100% - that's a lot of scratching.
Duplicating a Scratch Component
Duplicate a selected scratch component by clicking this duplicate icon in the Top Right Bar:
🦁🔑⚠️ Lion Key Alert: use the keyboard shortcut to duplicate a scratch component (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing a Scratch Component
Remove a selected scratch component by pressing backspace or clicking this trash icon in the Top Right Bar: