Elementor is a great tool to create a website with WordPress. It comes with a visual editor that offers a live editing experience. There are lots of design elements offered by Elementor (called widgets) you can use on your pages. You can decorate each element to make it more compelling. You can add some effects, set the borders, set the size, and so on. Elementor also comes with a styling option to add a shadow to an element. In this article, we will show you how to use this feature to add a drop shadow to an element.
The styling option to add a shadow itself in available on both versions of Elementor (read: Elementor Free vs Elementor Pro). However, not all widgets have this styling option. The Form widget is one of the widgets that doesn’t come with this styling option. If you want to add a shadow to a widget that has no option to add a shadow, you can outsmart it by adding a shadow to a column belong to the associated widget. Here is the example:
Adding a Shadow to a Widget in Elementor
First, add a widget to the canvas area just like usual. Or you can edit an existing widget on the canvas area if you are currently on the canvas area already.
Next, go to the Style tab on the settings panel and open the Box Shadow option.
Set the color, vertical position, horizontal position, blur level, and spread level. On the Position option, you can set the position of the shadow (outline/insert). To create a drop shadow, you can set the vertical value to 1 or higher. The horizontal value will determine the horizontal position of the shadow. If you set the horizontal position to -1 or lower, the shadow will be on the left. Conversely, if you set the horizontal position to 1 or higher, the shadow will be on the right. To make the shadow clearer, you can lower down the blur level.
That’s it. You can publish/update your page once you are done editing it. If you are new to Elementor, you can read our previous article to learn how to use Elementor.
