You can add a drop shadow in Elementor by using the Elementor editor to customize the appearance settings of elements like sections, columns, widgets, and containers. Here's a step-by-step guide:
Steps to Add a Drop Shadow:
-
Open the Page with Elementor: Start by opening the WordPress page or post you want to edit with the Elementor page builder.
-
Select the Element: Click on the element to which you want to apply the drop shadow effect. This could be a section, column, widget (like an image or button), or a container. Clicking the element will open its settings in the Elementor panel on the left.
-
Navigate to Style Tab: In the Elementor panel, locate and click the "Style" tab. This is where you'll find the options for customizing the element's appearance.
-
Find the Box Shadow Option: Look for the "Box Shadow" option. It's commonly found under the "Border" or "Background" sections, or directly within the element's style settings. Sometimes, if you are trying to add a shadow to text, you would choose "Text Shadow."
-
Customize the Shadow: Once you've found the "Box Shadow" option, you'll see several settings to control the shadow's appearance:
- Color: Choose the color of the shadow. Black is common, but you can use any color.
- Horizontal: Adjust the horizontal offset of the shadow (positive values shift it to the right, negative to the left).
- Vertical: Adjust the vertical offset of the shadow (positive values shift it downwards, negative upwards).
- Blur: Control the amount of blur applied to the shadow. Higher values create a softer, more diffused shadow.
- Spread: Determine how far the shadow extends beyond the element. Positive values increase the shadow's size, negative values decrease it.
- Position: This lets you set the shadow to be "Outline" (shadow appears outside the element) or "Inset" (shadow appears inside the element).
-
Adjust to Your Preference: Experiment with the settings until you achieve the desired drop shadow effect. Elementor's live preview allows you to see the changes in real-time.
-
Update/Publish: Once you're satisfied with the shadow, click the "Update" or "Publish" button to save your changes.
By following these steps, you can easily add drop shadows to various elements in your WordPress website using Elementor. The "Text Shadow" option follows the same steps, but applies to text specifically.
