The Image design options let you customize the way the image inside the module alongside your module's content.
These settings allow you to refine the image’s appearance with rounded corners, borders, shadows, and advanced visual effects, ensuring it aligns with your site’s design.
Where to Find the Image Options
Open the Audio Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Image option group.
Image Border Radius
Adjust the corner radius to create rounded edges for the album cover.
Linked Values: Keep all corners uniform by leaving the chainlink icon enabled.
Unlinked Values: Click the chainlink icon to set unique values for each corner.
Example: Use
50pxfor a circular cover or0pxfor sharp edges.
Image Border Styles
Border Width: Define the thickness of the border. A value of
1pxor higher is required for the border to appear.Border Color: Select a color for the border from your site’s palette or the color picker.
Border Style: Choose a border style, including:
Solid, Dashed, Dotted
Double, Groove, Ridge, Inset, Outset, or None.
Image Box Shadow
Add depth to the album cover by applying a shadow. Customize the following:
Horizontal Position: Move the shadow left or right.
Vertical Position: Move the shadow up or down.
Blur Strength: Increase for a softer shadow.
Spread Strength: Adjust the shadow's spread for more intensity.
Shadow Color: Pick a color to complement your design.
Box Shadow Position: Apply the shadow as inner or outer for different effects.
Image Filters
Hue: Shift the color tone of the album cover.
Saturation: Increase for bold colors or decrease for muted tones.
Brightness: Adjust how light or dark the album cover appears.
Contrast: Enhance differences between light and dark areas.
Invert: Reverse the album cover’s colors for dramatic effects.
Sepia: Apply a vintage yellow-brown tone.
Opacity: Control the transparency of the album cover.
Blur: Add a soft-focus effect with Gaussian blur.
Blend Mode: Set how the album cover blends with underlying elements. Options include:
Normal (default), Multiply, Screen, Overlay, and more.
Tips for Customizing the Album Cover
Showcase Your Design: Use Rounded Corners and Borders to make the album cover stand out.
Match Your Site’s Theme: Align colors and effects, such as Saturation and Brightness, with your overall site design.
Create Depth: Combine subtle Box Shadows with appropriate Blur settings for a polished, professional look.
Test Responsiveness: Preview your changes on different devices to ensure the album cover displays beautifully across all screen sizes.
The Image options in the Audio module allow you to refine your album cover’s visual impact, ensuring it complements your audio content while enhancing your site’s overall aesthetic.