Inner shadows

```mediawiki Navigation: Main_Page > Design > Page Blocks > inner shadows

How to Add Inner Shadows to Your Page Blocks

Introduction

Inner shadows are a vital design feature that add depth to your page blocks in ActiveCampaign. This effect enhances the overall visual appeal of your designs by creating a sense of layering within a block. Utilized effectively, inner shadows can make content stand out and improve user engagement. This guide will walk you through the steps of adding and customizing inner shadows within your page blocks.

How to Access This Feature

To access the inner shadow feature, you need to navigate to the specific page block you want to edit. Inner shadows can be applied only after selection of the block within the design interface. Once selected, the details of the block will be displayed in the right-side pane, allowing you to proceed with adding or adjusting shadows.

Step-by-Step Instructions

1. **Select a Block**: Click on the desired page block that you want to edit. This will present the block's details in the right pane.

2. **Add Inner Shadow**: Click the grey + button to add an inner shadow. Each block does not have default inner shadows, but you can add as many as you like.

3. **Remove Inner Shadow**: If you decide that you no longer want an inner shadow, click the red x button to remove it.

4. **Managing Stacking Order**: Inner shadows can be layered. To change the stacking order of the shadows, click and drag the handle on the left of the inner shadow up or down and release it at your desired position.

Configuration Options and Settings

When configuring inner shadows, you have several options available to get the precise look you desire:

- **Color**: The default color of the inner shadow will match the first color from your theme’s palette. Click on the left circle to access different options:

 - Pick another color
 - Adjust gradient
 - Adjust opacity

- **Offset**: This controls how far the shadow is spread towards the direction of the caret on the color widget. Increasing the offset moves the shadow outward.

- **Blur**: Adjusting this value will expand and soften the shadow, making it appear larger and lighter.

- **Spread**: This option increases the size of the shadow uniformly, making the entire shadow appear more pronounced.

You can manipulate the direction of the inner shadow by dragging the caret around the circular color widget.

Best Practices and Tips

- **Consistency**: Keep the use of inner shadows consistent across your blocks to maintain a cohesive design.

- **Subtlety**: Utilize inner shadows subtly to enhance sections without overwhelming the viewer. Excessive shadows can distract from the content.

- **Test Different Combinations**: Experiment with different blends of offset, blur, and spread values to find combinations that best enhance your design.

- **Preview Your Changes**: Always preview how your inner shadows appear within the context of your overall design. Adjust as necessary to achieve the intended effect.

Common Use Cases with Examples

1. **Highlighting Important Content**: Use inner shadows to draw attention to key information within a block, such as promotional messages or important updates.

2. **Creating Depth in Images**: When incorporating images within blocks, apply inner shadows to create an illusion of depth, making the images appear embedded rather than flat.

3. **Contrasting Background Colors**: Effective use of inner shadows can help contrast foreground text against various background colors, increasing readability and visual interest.

Troubleshooting

- **Shadow Not Appearing**: Ensure that you have clicked the grey + button to add the inner shadow. If shadows are still not visible, verify your design settings and ensure you are in the appropriate block.

- **Shadow Overpowers Content**: If the shadow appears too strong or distracting, return to the configuration options and adjust the blur or opacity settings.

- **Ordering Issues**: If inner shadows do not appear in the correct order, use the drag-and-drop feature in the left handle to rearrange them.

FAQ

Q1: Can I apply multiple inner shadows to a single block? A1: Yes, you can add as many inner shadows as desired to a single block.

Q2: How do I remove an inner shadow? A2: Click the red x button next to the inner shadow you wish to remove.

Q3: What happens if I don’t adjust the default color? A3: If you don’t make any adjustments, the inner shadow will default to the first color from your theme’s palette.

Q4: Can I adjust the inner shadow after adding it? A4: Yes, you can modify the color, offset, blur, and spread of an inner shadow even after it has been added.

Q5: Are inner shadows available on all ActiveCampaign plans? A5: Inner shadows can be accessed with Plus, Pro, and Enterprise plans.

Q6: What effect does increasing the blur have? A6: Increasing the blur will make the shadow larger and lighter, creating a softer effect.

Q7: How can I change the direction of the inner shadow? A7: You can change the direction by dragging the caret around the inner shadow's left circle.

For further details on designing page blocks, refer to the categories on Design and Page Blocks. This will enhance your design skills and enable effective use of inner shadows for better visual outcomes. ```