A drop shadow is a visual effect that can be applied to the elements in your design. It creates an illusion of a shadow behind the elements it is added to and gives your creatives depth and dimension instead of a “flat” look. If your goal, on the other hand, is to draw attention to a particular element(s), drop shadows come in handy as well: they will create contrast between elements making them stand out from the rest. In short, drop shadow increases creativity and freedom when building your ads.
Drop shadow can be used in both Single and All View editors. In this article, we will explain how to use drop shadow in the All View editor, the properties linked to this functionality, and the different scenarios you can face when using this feature. Using drop shadow in the All View enables you to add and edit simultaneously across ad sizes the shadow of an element, which saves time.
For the sake of this article, we'll take for granted that you already have an adset built that includes at least two ad sizes. We will use a text element as an example to apply the drop shadow, however, this feature can be applied to the following element types for both dynamic and standard ads: images, logos, text elements, buttons, and shapes.
Scenario 1: Enable drop shadow to an element for all sizes.
When you want to enable drop shadow for an element in all sizes, and it's currently not enabled in any size.
Go to the "All View" editor and, from the menu on the left, select an element.
Under the "Style" tab, scroll down and toggle on Drop Shadow. A shadow will be added to this element in all ad sizes and slides that are present.
When the feature is enabled, the default values will display together with the 6 properties of the drop shadow. Adjust each of them to personalize the drop shadow to your needs:
X: Set the drop shadow horizontally.
Y: Set the drop shadow vertically.
Blur: Choose how sharp or blurry the shadow will be.
Spread: Define the size of the drop shadow. Used to apply box shadows to an element.
Color: Give the drop shadow color.
Opacity: Choose how opaque you want the shadow to be. You can start editing them to customize the look of the shadow.
It’s important to understand the difference between “drop shadow” and “box-shadow”.
Drop shadows create the illusion of a shadow behind an object as if it were lifted off the surface it's resting on. It is typically a darker shade than the object itself.
Box shadow applies a shadow to the entire box element. This type of shadow is applied, for example, to image assets without a transparent background and text elements with a background color.
IMPORTANT INFORMATION❗❗
The adjustments made to the drop shadow in the All View editor will affect all the ad sizes and the slide where the chosen element appears. If what you want is to only apply a drop shadow to specific ad sizes, please select the ad sizes from the drop-down menu shown below:
Scenario 2: Enabling drop shadow to an element for some sizes.
When you want to enable drop shadow for an element in all sizes, but it's currently only enabled for some sizes.
Go to the "All View" editor and, from the menu on the left, select the element you want to apply the drop shadow.
Under the tab "Style" scroll down, and you'll see the Drop Shadow toggle as follows:
💡 Good to know: When the toggle shows as the image above (green with a line in the middle), it means that the element selected doesn't have the drop shadow enabled in all sizes.
Click the "drop shadow toggle". The element selected will now display the drop shadow in all sizes with the default values:
You can now edit and customize all values that are needed so the shadow fits your needs.
Scenario 3: Drop shadow contains different values per ad size.
When drop shadow is enabled for an element in all sizes but the property values vary across ad sizes.
Since ad design is always adapted to the space the ad has, drop shadow might slightly contain different values across ad sizes. That can be done in the Single View when you're building the ad sizes one by one.
Go to the "All View" editor and, from the menu on the left, select the element you want to edit the drop shadow.
Under the tab "Style" scroll down, and you'll see the Drop Shadow enabled with its properties. In some of them, you might see the value "mixed". If a property is "mixed," it means it has different values across ad sizes.
IMPORTANT INFORMATION❗❗
Editing property values in the All View editor will overwrite the values previously set. Changes will apply to all ad sizes and slides in which the selected element is present.
Note the difference between “drop shadow” and “box shadow”.
Drop shadows create the illusion of a shadow behind an object as if it were lifted off the surface it's resting on. It is typically a darker shade than the object itself.
Box shadow applies a shadow to the entire box element. This type of shadow is applied, for example, to image assets without a transparent background and text elements with a background color.
We hope the information above solved your question. If there is anything else we can help you with, and you couldn't find it in our help center, don't hesitate to contact us by chat. We are always ready to help you!