Box Shadow

The Box Shadow option adds a complete box shadow control to your custom widget, allowing users to visually create and customize shadow effects (like depth, glow, or outline) for elements. It manages multiple CSS properties – horizontal/vertical position, blur, spread, and color – in one unified interface.

Why would someone use it in a custom widget? #

Use this control to give users professional design control over depth and lighting effects. It’s essential for creating modern card designs, floating buttons, image frames, or any element where you want to add visual separation, emphasis, or a sense of elevation directly from the Elementor editor.

2. Where This Option Appears #

• In Widget Builder: You add this control in the Content tab.
• In the Elementor Editor: Once saved, it appears as the standard, detailed Elementor box shadow panel. Users can adjust sliders for position and blur, choose a color (with opacity), and see a live preview.

3. Available Settings #

Here are the configurable settings for the Box Shadow control:

Basic Settings (Content Tab) #

• Label: The name of the control (e.g., “Container Shadow”, “Hover Shadow”).
• Name: The unique machine-readable ID (like container_shadow) for the dynamic shortcode.
• Description: Optional text to describe the effect.
• Selector: A crucial field. This defines the CSS class (e.g., .ma-element) of the HTML element within your widget that the shadow should be applied to. The system automatically prefixes it with {{WRAPPER}} to scope the styles.
• Default Shadow Type: You can pre-define a shadow style (options might include “light”, “deep”, “outline”).
• Default Shadow Values: Pre-sets for the four core properties in pixels:
  • Horizontal (X): The shadow’s horizontal offset.
  • Vertical (Y): The vertical offset.
  • Blur: How diffuse the shadow is.
  • Spread: How much the shadow expands or contracts.
• Default Shadow Color: The pre-set color (and opacity) of the shadow.

Advanced Settings (Advanced Tab) #

• Show Label, Label Block, Responsive Control: Standard options. Responsive Control allows different shadow settings per device.
• Dynamic Support, Frontend Available: These are less common for a style property but available.
• Separator, Conditions, Control Classes: Standard advanced options.

4. Generated Shortcode & Function #

When you add a Box Shadow control with the Name card_shadow, Widget Builder generates the shortcode: {{card_shadow}}.

• What it represents: Like the Typography control, this shortcode does not output a simple value. It is a dynamic tag that, when configured with a Selector, instructs the system to generate and inject the full set of CSS box-shadow rules for the targeted element.
• How it works: You define the Selector (e.g., .custom-card) in the control’s settings. The builder then automatically writes the necessary CSS to apply the user’s shadow settings to that selector. You do not need to manually place the shortcode in your CSS panel.

5. How to Use It: A Practical Example #

Let’s create a modern “Pricing Card” widget with a customizable shadow.

1. In Widget Builder’s Content tab, add a Box Shadow control.
2. Set the Label to Card Shadow.
3. In the Selector field, enter the class of your card’s main container, for example: .pricing-card.
4. Set some subtle Default Shadow Values: X=0, Y=5px, Blur=20px, Spread=0, Color=rgba(0,0,0,0.1).
5. In your HTML panel, ensure your card has the matching class:
   <div class="pricing-card"> <!-- Card content here --> </div>
6. The builder automatically generates the CSS. No need to write {{card_shadow}} manually.

In the Elementor editor, users will get the full shadow control panel. Any changes they make will automatically be applied to the .pricing-card element.

6. Common Use Cases #

• Card & Container Design: Adding depth to cards, pricing tables, or feature boxes.
• Button Effects: Creating “floating” buttons or buttons with hover shadow states.
• Image Frames: Applying subtle shadows to images to make them stand off the page.
• Modern Layouts: Implementing soft, layered shadow effects for contemporary designs.

7. Helpful Tips #

• The Selector is Key: This is the most important setting. The control must know exactly which element in your widget’s HTML to target. Ensure the class you enter matches the one in your HTML structure.
• Preview Defaults: Setting good Default Shadow Values (like a light, subtle shadow) makes your widget look professionally designed from the moment it’s placed.
• Use Responsive Control: Consider enabling Responsive Control so users can reduce or remove shadows on mobile devices for better performance and flatter design trends.
• It’s Automatic: Unlike most controls, you don’t manually place this shortcode. Its effect is applied automatically via the generated CSS based on the Selector.

The Box Shadow control seamlessly integrates a powerful design tool into your custom widgets, allowing users to apply professional visual effects without you having to write complex, dynamic CSS by hand.