One of the best ways to make your Funnel/Website more interesting is by adding dimension and movement to it. Shadows are one of the ways you can add that depth to your pages. Shadows help you highlight your elements, show that an element is interactive, and separate elements from one another.

Navigate to Advanced Settings in Your Page #

To add shadows, start by adding or selecting an element on your page, and going to the Advanced settings.

Depending on the selected element, you can add two types of shadows.

• Box Shadow: It applies to the whole element, similarly to a border. You can use this for all elements, including videos or images.
• Text Shadow: It applies only to the text within the selected element. For example, if you select a button and apply text shadow, your Text and Subtext will be affected.

How to Add Shadows #

To add a shadow, click the + sign button, then click on the box to further customize it.

Once you open the customization parameters, you can select between Outer and Inner Shadow. Outer Shadows create a lifting effect. Inner Shadows give the illusion of the element being lower or sinking.

The X and Y axes define how big the shadow will be and to which side of the element it should be. The X-axis controls the horizontal and the Y-axis controls the vertical sides of the shadow.

Blur controls how solid or soft the shadow will be, and Spread expands or contracts the shadow’s size.

With Color, you can keep the shadow within your branding colors and make the most of it.

You can add more than one shadow to the same element by clicking on the + icon again.

These steps are the same for Box and Text Shadows, with the minor difference that Text shadow only allows Outer Shadows. Now you can start using this feature in your Funnels/Website.

Shadows can create a sense of hierarchy and add depth, movement, and realism to a design, so this will surely help you drive more traffic.

Frequently Asked Questions #

What is the difference between a Box Shadow and a Text Shadow? #

A Box Shadow applies to the whole element like a border and works on all elements including videos and images. A Text Shadow applies only to the text within the selected element, such as the Text and Subtext of a button.

Where do I find the shadow controls? #

Select or add an element on your page, then open the Advanced settings to access the shadow options.

What is the difference between an Outer and Inner Shadow? #

Outer Shadows create a lifting effect, making the element appear raised. Inner Shadows give the illusion of the element being lower or sinking.

What do the X and Y axes control? #

The X-axis controls the horizontal position of the shadow and the Y-axis controls the vertical position, together defining the shadow’s size and direction relative to the element.

Can I add more than one shadow to an element? #

Yes. Click the + icon again to stack additional shadows on the same element.

Does Text Shadow support Inner Shadows? #

No. Text shadow only allows Outer Shadows, while Box Shadow supports both Outer and Inner Shadows.