Add fully customizable shadows on rows, columns and selected modules to create a layered effect that pronounces the impression of depth in your layout.
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.
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.
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.
Vertical distance
A positive value places the shadow below the element while a negative value places the shadow above the element.
Blur
Blur determines the blurriness/sharpness of the shadow. Lower values create smaller, sharper shadows while higher values create bigger, blurrier shadows.
Spread
Spread makes the shadow appear larger in all directions.
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.
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).
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.