Element Settings: Shadow

This article will discuss Shadow settings available for elements on your pages. A shadow can help soften the edges and area around an element, providing a specific style or design.

Important Note: The Shadow settings must be enabled by clicking the toggle.

Requirements:

• An active ClickFunnels 2.0 account.
• A page.
• At least one of the supported elements on the page.

TABLE OF CONTENTS

• Style:
• Shadow Style:
• X-direction:
• Y-direction:
• Blur:
• Spread:
• Color:
• Supported Elements:

Style:

Pick between one of the preset styles that are defined in your active Style Guide.

Choosing a preset style will disable all manual settings. However, you will have the option to edit the style for the whole Style Guide.

Back to Top

Shadow Style:

This setting will determine if the shadow is applied outside or inside the element.

1. Outset: This is the normal shadow that most people are familiar with. The shadow is applied outward and away from the element.
   
   Example:
   
   
   
2. Inset: The shadow is applied inward and inside the element.
   

   Important Note: Because the shadow is behind the element, you will only see it on elements that have some transparency inside of them.

   
   
   Example:
   
   
   

Back to Top

X-direction:

This setting offsets the shadow horizontally, moving it to the left or right.

Example:

Back to Top

Y-direction:

This setting offsets the shadow vertically, moving it up or down.

Example:

Back to Top

Blur:

This setting controls how the shadow will fade by blurring the edges of the shadow.

Example:

Back to Top

Spread:

This setting controls how far the shadow will extend beyond the size of the element.

Example:

Back to Top

Color:

Click on the color bar to adjust the shadow color and opacity.

Example:

Back to Top

Supported Elements:

This setting can be found in the following Elements: 

• General: Image
• General: Video
• General: Video Popup
• General: Input
• General: Divider
• General: Navigation
• General: TextArea
• General: Countdown
• Content Blocks: Progress Bar
• Order: Summary
• Order: Confirmation
• Order: Checkout
• Order: Checkout 2-step
• Blog: Posts: Image
• Download: Download Image
• Course: Image
• Course: Course Sidebar
• Course: Modules: Image
• Course: Lessons: Image
• Course: Lessons: Video
• Products: Image
• Blank: Flex Containers

Back to Top