DROP SHADOWS

Drop shadows place emphasis on a widget or group of widgets by adding a subtle border. They are able to be added to the Text and Column Splitter widgets in just a couple of simple steps.


How to add a drop shadow

Drop shadows allow a sense of depth that can help prevent a site from feeling too 'flat' - they work particularly well when accentuating heading text. It's these small touches that can bring your site's design to the next level. 

Using drop shadows with the Text widget

To add a drop shadow, navigate to the Text Settings by clicking on the cog icon in the top right-hand corner of the Text widget, then tick the 'Apply drop shadow' check-box. Drop shadows are typically more effective when a text background colour other than white has been selected (when displayed on a white section background).

Drop shadows are a very subtle effect that are unlikely to be noticed outright by most site visitors. The below images show the difference between a Text widget with and without drop shadows.

Text widgets WITHOUT drop shadows

Text widgets WITH drop shadows

Using drop shadows with the Column Splitter widget

Adding a drop shadow to the Column Splitter widget places emphasis on the widget/s contained within. To add a drop shadow, navigate to the Column Splitter Settings by clicking on the cog icon in the top right-hand corner of the widget, then tick the 'Apply drop shadow' check-box. Change the padding as necesary - for this example the padding was switched to 'All widget borders' with the value of 10px, as this gave the best balance to the widget.

The example below shows how the drop shadow can help make the News Feed widget stand out on a page that has a lot of text. It is possible to house a single widget in the Column Splitter widget, as is done here, by selecting the single column option in the Column Splitter Settings layout. 

News Feed WITHOUT drop shadow

News Feed WITH drop shadow