DigiFlash includes a collection of shadow presets that add depth and visual hierarchy to your website elements through the Site Editor.
Accessing Shadow Settings
Navigate to Appearance → Editor and click the Styles icon in the top-right corner. In the Styles panel, scroll down to find the Shadows section or access shadow controls within individual element style categories.
Understanding Shadow Types
DigiFlash provides several predefined shadow styles:
Natural – Subtle, realistic shadows mimicking natural light
Deep – Prominent shadows for strong elevation effects
Sharp – Well-defined shadows with minimal blur for crisp edges
Outlined – Border-like shadows that create definition without depth
Crisp – Clean, defined shadows with balanced blur and spread
Each shadow preset creates a different visual effect suitable for various design purposes.
Applying Shadows to Elements
Shadow controls appear in different locations depending on what you’re customizing. When editing global styles, shadows can be applied to buttons, containers, and other interactive elements.
To apply a shadow, locate the Shadow dropdown in the element’s style settings. Click the dropdown to view all available shadow presets.
Click any shadow preset name to apply it. The preview updates immediately, showing how the shadow affects the selected element’s appearance.
Configuring Button Shadows
In the Styles panel, scroll to the Blocks section and click on Buttons. Within button settings, you’ll find shadow controls specifically for button elements.
Button shadows can be applied to:
Default State – Shadow appearance when buttons are inactive
Hover State – Shadow changes when users move their cursor over buttons
Applying different shadows to hover states creates interactive feedback, making buttons feel more responsive and engaging.
Setting Container Shadows
When working with group blocks, columns, and other container elements, shadow settings appear in the block’s style panel. Select any container block and open its settings.
In the Styles tab, look for the Shadow option. Container shadows help separate content sections and create visual layers within your page layouts.
Resetting Shadow Settings
To revert shadow changes to theme defaults, click the three-dot menu next to the shadow control and select Reset. This removes custom shadow values and restores the original DigiFlash configuration.