Shadows on elements in unbounce?

  • 6 September 2018
  • 4 replies
  • 86 views

Ive noticed that when selecting items in the editor, you see a nice shadow around that element.
Why isnt this implemented so you can add shadows to your elements?

Is there a hack on this?

Thanks!


4 replies

Userlevel 7
Badge +3

Hi @livinglars,

The shadows in the editor are there so you can more easily recognized the selected element.

As far as having shadows on your published page, you can always add them yourself through the CSS panel.

Best,
Hristian

Userlevel 6
Badge +4

Hi @livinglars. You can add shadows to elements by adding this code under stylesheets. Identify the element you want to add shadow to with it’s unique ID in the editor. Below you will see shadow added to box with id #lp-pom-box-3

<style>

     #lp-pom-box-3 {-webkit-border-radius:3px;-webkit-box-shadow:0 2px 10px 0 rgba(142,154,173,0.6)}

</style>

oh nice! That worked!

Follow up question: Is it possible to add shadows to something thats masked.

Example: A square picture thats masked so its now a circle.

Right now it applies the shadow outside the mask (the original shape).

Thanks!

Userlevel 6
Badge +4

@livinglars I got the same result as you. In your case I would do the masking in Photoshop.

Reply