Advanced Components Library: Configuring Global Settings
The Advanced Component Library provides flexible and powerful styling and configuration options. Due to its high level of customization, more time and effort are often needed to ensure that component configurations are precise and consistent with the theme's style. This guide will introduce how to synchronize theme styles with the advanced component styles.
Global Settings: One-click synchronization
Follow the steps to synchronize the theme's style configurations with the advanced component:
For existing advanced components, click on the component, find Global component settings under the Style section, and click the use immediately button to go to the Global Settings page for the advanced component.
For newly added advanced components, click on the Global Settings icon directly.
On the Global Settings page, click the one-click synchronization button to synchronize the theme's style settings with the advanced component's configuration.
If you only want to synchronize a specific section, expand that section, click the Get theme style icon in the upper right corner, and ensure all settings are successfully changed to theme style. Then, click the Update and preview button at the bottom to synchronize and apply the theme style configuration.
Supported style configurations for synchronization
Currently, not all style configurations are compatible with synchronization. Please refer to the table below for a list of supported configurations.
| Advanced Component Configuration Section | Advanced Component Configuration Property | Corresponding Theme Configuration Section | Corresponding Theme Configuration Property |
| Base | Component background color | Color > Basics | Background |
| Title | Typography | Typography > Title | Typography |
| Color | Color > Basics | Texts | |
| Font size on PC | Typography > Title | Font size | |
| Spacing | Typography > Title | Font-spacing | |
| Line height | Typography > Title | Font line height | |
| Text | Typography | Typography > Main text | Typography |
| Color | Color > Basics | Texts | |
| Font size on PC | Typography > Main text | Font size | |
| Spacing | Typography > Main text | Font-spacing | |
| Line height | Typography > Main text | Font line height | |
| Button | Typography | Typography > Main text | Typography |
| Spacing | Typography > Main text | Font-spacing | |
| Line height | Typography > Main text | Font line height | |
| Advanced settings > Button border | Thickness | Button > Border | Thickness |
| Opacity | Button > Border | Opacity | |
| Corner radius | Button > Border | Corner radius | |
| Advanced settings > Button shadow | Opacity | Button > Shadow | Opacity |
| Vertical offset | Button > Shadow | Vertical offset | |
| Horizontal offset | Button > Shadow | Horizontal offset | |
| Blur | Button > Shadow | Blur | |
| Advanced settings > Video border | Thickness | Media > Border | Thickness |
| Opacity | Media > Border | Opacity | |
| Corner radius | Media > Border | Corner radius | |
| Border color | Color > Basics | Lines and borders | |
| Advanced settings > Video shadow | Opacity | Media > Shadow | Opacity |
| Vertical offset | Media > Shadow | Vertical offset | |
| Horizontal offset | Media > Shadow | Horizontal offset | |
| Blur | Media > Shadow | Blur | |
| Advanced settings > Content border | Thickness | Content Containers > Border | Thickness |
| Opacity | Content Containers > Border | Opacity | |
| Corner radius | Content Containers > Border | Corner radius | |
| Border color | Color > Basics | Lines and borders | |
| Advanced settings > Content shadow | Opacity | Content Containers > Shadow | Opacity |
| Vertical offset | Content Containers > Shadow | Vertical offset | |
| Horizontal offset | Content Containers > Shadow | Horizontal offset | |
| Blur | Content Containers > Shadow | Blur | |
| Advanced settings > Card border | Thickness | Other cards > Border | Thickness |
| Opacity | Other cards > Border | Opacity | |
| Corner radius | Other cards > Border | Corner radius | |
| Border color | Color > Basics | Lines and borders | |
| Advanced settings > Card shadow | Opacity | Other cards > Shadow | Opacity |
| Vertical offset | Other cards > Shadow | Vertical offset | |
| Horizontal offset | Other cards > Shadow | Horizontal offset | |
| Blur | Other cards > Shadow | Blur | |
| Advanced settings > Media border | Thickness | Media > Border | Thickness |
| Opacity | Media > Border | Opacity | |
| Corner radius | Media > Border | Corner radius | |
| Border color | Color > Basics | Lines and borders | |
| Advanced settings > Media shadow | Opacity | Media > Shadow | Opacity |
| Vertical offset | Media > Shadow | Vertical offset | |
| Horizontal offset | Media > Shadow | Horizontal offset | |
| Blur | Media > Shadow | Blur |
Theme style configurations can only be synchronized with advanced components; syncing with subcomponents is not currently supported.