Skip to main content

Enhancing Your Design with Shadows in Stack's Website Builder

Welcome to an exciting update in Stack's Funnels and Websites Builder Editor—the ability to effortlessly add shadows to your elements. This feature lets you enhance your website's visual appeal with customizable box and text shadows.

Table of Contents​

What's New?​

Add Box and Text Shadows​

  • Versatile Shadow Options: Apply box shadows to various elements like text, headings, paragraphs, images, and buttons. Text shadows can be added to text-based elements for added depth and dimension.
  • Advanced Customization: Access shadow settings through the advanced tab to tailor shadows to your design needs.

User-Friendly Shadow Editor​

  • Two Sections: Choose between box shadow and text shadow using simple dropdowns.
  • Easy Default Settings: Click the plus button to apply a default outer shadow with preset values. Customize further with specific settings.
  • Multiple Shadows: Add multiple shadows to any element by clicking the plus button, allowing for more complex designs.
  • Detailed Customization: Edit each shadow by selecting whether it’s outer or inner, and adjust the X value, Y value, Blur, Spread, and Color.

Enhanced Customization Parameters​

  • Outer vs Inner Shadow: Outer shadows create a sense of elevation and depth, making elements appear raised. Inner shadows add a recessed effect, giving an illusion of depth within the element.
  • X Value: Controls horizontal shadow offset.
  • Y Value: Controls vertical shadow offset.
  • Blur: Determines the sharpness or softness of the shadow.
  • Spread: Expands or contracts the shadow size.
  • Color: Choose the shadow color to match your design palette.

How to Use Shadows​

  1. Access the Advanced Tab: Open the funnel or website builder editor and navigate to the advanced tab.
  2. Open the Shadow Dropdown: Click on the shadow heading at the top to reveal the shadow editor dropdowns.
  3. Select Shadow Type: Choose between box shadow or text shadow by clicking the plus button next to each title. (Note: Text shadow is only applicable to text-based elements.)
  4. Apply Default Shadows: A default outer shadow will be applied with preset values. Adjust as needed.
  5. Add Multiple Shadows: Click the plus button to add more shadows to a single element.
  6. Edit Shadows: Click on the title of each shadow to customize settings like outer/inner, X value, Y value, Blur, Spread, and Color.
  7. Combine Shadows: Experiment with different combinations for unique visual effects.

By integrating shadows into your web design, you can create more engaging and visually appealing websites and funnels. Shadows enhance the depth and dimension of elements, making them stand out and improving the overall user experience. With customizable options, you have the flexibility to design your funnels and websites exactly as you envision, adding sophistication and professionalism.