The Classic Builder doesn't include a drop shadow setting, but you can add shadows with a small amount of custom CSS. This works for any element with an ID, such as a button, box, or text element.
This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Replace the sample element IDs with your own.
Add a shadow to an element
Add the following to your page's Stylesheets section. This example uses the box-shadow property and shows the shadow when a visitor hovers over a button:
<style>
#lp-pom-button-723:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
To show the shadow at all times, remove :hover from the selector.
Add a shadow to text
For a text element, use the text-shadow property instead:
<style>
#lp-pom-text-248 {
text-shadow: 1px 1px 1px #000;
}
</style>
To find an element's ID, publish the page and inspect the element in your browser's developer tools. The ID follows the pattern lp-pom-button-, lp-pom-box-, or lp-pom-text- followed by a number.