How to Customize Component Decorations and Styling?
Questions:
- How do I change the title text case?
- How do I add a background gradient or shadow?
- How do I apply rounded corners and frames to my banner?
Description:
This guide explains how to apply decorative styles to your banner component using the Decoration settings panel. You can easily customize text presentation, add background effects, and adjust media borders to match your brand's visual identity.
We'll show you, step by step, how to:
- Style Text: Control the capitalization of your main titles.
- Enhance Backgrounds: Apply gradients and shadows behind your content.
- Modify Media Edge Details: Add rounded corners and frames to structure the banner.
Solution:
-
Component Decorations are located at the bottom of the component settings. Scroll down to access the Component Decorations section. The available decoration options are displayed based on the selected component.
-
Format the Title Presentation
Choose how your text appears by selecting the uppercase (ABC), lowercase (abc), or capitalized (Abc) formatting options.
-
Apply a Background Gradient
Select between linear styles (Linear 1, Linear 2) or a radial style (Radial 1) to add depth to your component background.
-
Add Background and Media Shadows
Activate "Shadow 1" under the Background Shadow section to create depth behind the banner, or use "Shadow 1" under Media Shadows to apply an effect directly to your visual assets.
-
Select Media Filters and Overlays
Enhance your images by choosing one of the six available Media Filters (Filter 1 through Filter 6). You can also apply stylized coloring using Media Overlay Type 1 or Type 2.
-
Adjust Banner Corners
Soften the edges of your media by selecting one of the five rounded corner variations, ranging from Corners 1 through Corners 5.
-
Set the Frame Thickness
Add a distinct border to your banner slides by selecting a Thin, Medium, or Thick frame style.
Tips and Tricks:
Pro-Tips:
- Click the reset icon (the circular arrow button) next to any setting row to instantly clear your configurations and return to the default styling.
- Combine a thin frame with slightly rounded corners (e.g., Corners 2) for a modern, polished look.
Warnings:
- Be cautious when stacking Media Filters and Media Overlays simultaneously, as this can degrade the original image quality.
- Avoid applying thick frames if you are using an automated Aspect Ratio that is highly constrained, as it reduces the visible area of your media.