Creating a box shadow


#1

Hello!

I have a landing page with several boxes, which indicates videos and the regarding text.

http://learn.protel.net/protel-air-tutorials-en/

Now I want to add a shadow behind each box. Does anybody know if this is possible and if, how I can do this?

Thank you in advance!

Kind regards
Marion


#2

Hi @Marion, let’s see if I can help. Using shadows behind boxes and pictures seems to be a trending style right now, and we could not resist using them ourselves.

Here’s what you need to do.

  1. Click the box to find the unique ID of your box, in this example #lp-pom-box-1098

  2. Create a new stylesheet that specifies the style of this box.

     /* Stylesheet by ConversionLab. Update #lp-pom-box-1098 with the ID of your landing page's box element. */
    
     #lp-pom-box-1098 {-webkit-border-radius:22px;-webkit-box-shadow:0 2px 10px 0 rgba(142,154,173,0.6)}
    

As an alternative you can apply the same style to all boxes on the page. To do that you replace “lp-pom-box-1098” with “.lp-pom-box”

  1. Play around with the values of the shadow and color to your own preference

#3

Hi Finge,

thank you for your response! Would you be so kind to explain how do I add the stylesheet?

Kind regards
Marion


#4

Hi there!

Simply click on the “Stylesheet” tab at the very bottom.

Let me know if this helps!


#5

Hi Marion,

To add a stylesheet in Unbounce, here’s what to do:

  1. Click on the “stylesheets” tab at the bottom of the builder window.
  2. Paste in the code.
  3. Make sure you are wrapping the code in <style> </style> tags.

Here’s a GIF showing the process:


#6

Hi Stefano and Nicholas,

thank you very much! I really didn’t get that Finges Stylesheet was the stylesheet I need to add…sorry. But now it worked and it looks pretty good, I think.

Thanks for you help!!

Kind regards
Marion


#7

Happy to help :wink: