The Image & Icon design options allow you to customize the placement, alignment, and styling of images and icons within a module. These settings provide full control over borders, shadows, filters, and effects to match your site’s aesthetic.
Where to Find the Image & Icon Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Image & Icon option group.
Image & Icon Customization Settings
Image/Icon Placement: Choose where the image or icon appears in relation to the content:
Top: Displays the image or icon above the content.
Left: Displays the image or icon to the left of the content.
Image/Icon Alignment: Align the image or icon to the left, center, or right. This option is available only when the placement is set to Top.
Image Rounded Corners: Set a numerical value to round the image’s corners.
Linked Values: Keeps all corners the same by default.
Unlinked Values: Click the chainlink icon to set different values for each corner.
Image Border Styles:
Border Width: Define the thickness of the border (minimum
1px).Border Color: Choose a border color from the palette or use the color picker.
Border Style: Select from options like solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
Image Box Shadow: Add a shadow effect to the image. Customize:
Horizontal Position: Adjust the shadow’s horizontal placement.
Vertical Position: Adjust the shadow’s vertical placement.
Blur Strength: Soften the shadow with higher values.
Spread Strength: Expand or contract the shadow’s spread.
Shadow Color: Set a custom color for the shadow.
Box Shadow Position: Choose an inner or outer shadow.
Image Filters:
Hue: Shift the color tone of the image.
Saturation: Control the vibrancy of colors.
Brightness: Adjust the lightness or darkness of the image.
Contrast: Increase the difference between light and dark areas.
Invert: Reverse the image’s colors.
Sepia: Add a vintage yellow-brown tone.
Opacity: Adjust transparency. Lower values make the image see-through.
Blur: Apply a Gaussian blur for a soft-focus effect.
Blend Mode: Set how the image blends with underlying elements, with options like multiply, screen, overlay, and more.
Tips for Using Image & Icon Options
Balance Layouts: Use Placement and Alignment settings to ensure images and icons are positioned harmoniously with content.
Create Emphasis: Use bold Borders or Shadows to highlight key images or icons.
Maintain Brand Consistency: Adjust Hue, Saturation, and Contrast to align visuals with your site’s theme.
Test Responsiveness: Preview changes on multiple devices to ensure alignment and styling remain intact across screen sizes.