🖋️How to style a specific component element (E.g. buttons image)
Some components have various sub-elements that you can style separately. E.g. options selectors have buttons, list, images, etc. Here you'll learn how style a specific sub-element.
Styling a sub-element:
In the "Edit" sub-menu, open the "Designer" card and then select a component from your page.
Click on "+ Sub-Elements" to get the selected component's sub-elements list.
From the "Elements" dropdown menu select the specific part of the component you want to add styles to. E.g. buttons checkbox.
Add your styles.
Applying styles to a specific button in an Options Selector:
In the "Edit" sub-menu, open the "Designer" card and then select a component from your page.
Click on "+ Sub-Elements" to get the selected component's sub-elements list.
Click on "+ By Button" and select the button key of the one you want to style.
Add your styles.
Applying styles on a specific component state (hover, selected, etc):
In the "Edit" sub-menu, open the "Designer" card and then select a component from your page.
Click on "+ Filter".
From the "When" dropdown menu, select the state you want to apply styles to. These options are going to be different depending on the kind of component you have selected.
Add your styles.
Limiting the tag's reach:
Tags in out builder work like CSS classes. As you know, if you add styles to a tag, every component that has that tag would then get that styling. Here you'll learn how to limit a tag's reach.
In the "Edit" sub-menu, open the "Designer" card and then select a component from your page.
Click on "+ Filter".
From the "In" dropdown menu, you can choose to limit to components with this tag but only on this page, or components with this tag but only on pages with a specific tag.
Add your styling.
Related docs:
Last updated
