Add shadows on rows, columns and modules

Add fully customizable shadows on rows, columns and selected modules to create a layered effect that pronounces the impression of depth in your layout.

shdws.png

Adding shadows

In the Editor, shadows can be added on the following elements:

  • Button (both in Global Design and locally on individual modules)
  • Button 2 (both in Global Design and locally on individual modules)
  • Button 3 (both in Global Design and locally on individual modules)
  • Scheduling button (both in Global Design and locally on individual modules)
  • Image (both in Global Design and locally on individual modules)
  • Video (both in Global Design and locally on individual modules)
  • Submit button on Form and Form 2 (both in Global Design and locally on individual modules)
  • Column (only locally on individual columns)
  • Row (only locally on individual rows)

To add a shadow, click a module/column/row, navigate to Design > Shadow and toggle Show shadow on element.

toggleshdw.png

 

Styling shadows

Define the appearance of your shadow by adjusting the following five parameters:

 

Color

Pick the shadow color from the color picker. You can also adjust the level of opacity to make the shadow more or less pronounced. 

shdwcolors.png

Horizontal distance

A positive value places the shadow on the right side of the element while a negative value places the shadow on the left side of the element.

hdis.png

Vertical distance

A positive value places the shadow below the element while a negative value places the shadow above the element.

vdis.png

Blur

Blur determines the blurriness/sharpness of the shadow. Lower values create smaller, sharper shadows while higher values create bigger, blurrier shadows.

blur.png

Spread

Spread makes the shadow appear larger in all directions.

spread.png 

Troubleshooting

Q: Why am I seeing reset indicators on all five shadow parameters?

A: In the Editor, any element you are currently working on has a default blue shadow around it, regardless of whether you have enabled the Shadows feature. This makes it easier for you to see where you're currently working. The default shadow doesn't show on the published website. This also means that if you enable the Shadows feature, it will by default be set to blue color and 15px blur which are the default shadow's values.

Screen_Shot_2020-07-31_at_10.27.54.png

If you change any of the parameters, for example the color, the Editor will completely overwrite the default blue shadow as it detects you want to show another shadow. This automatically causes all parameters to give up their default values and therefore show a reset symbol (the small grey dots next to parameter labels).

Screen_Shot_2020-07-31_at_10.28.47.png

Clicking these reset symbols won't actually have any effect as the default blue shadow has been overwritten and can therefore not be defaulted back to.

Was this article helpful?
0 out of 1 found this helpful