To assign a custom CSS background gradient to a specific Section, follow these steps:
Create a new class under "Assets" In the Assets panel, create a new class, e.g.,
customBG.Select the SASS file Switch to the SASS tab and select the newly created file from the dropdown list in the top right corner (e.g.,
custombg.scss).Insert the CSS Paste your desired CSS there.
❗Important: The selector in your code must start with an ID so it can be exactly assigned to the desired Section later. For example, use the selector #radiantbg.
SCSS
#radiantbg { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }Then, save your changes by clicking Save.
Assign the Section ID Navigate back to your landing page and open the Section where the gradient should be applied. Go to the Advanced tab in the Component Settings.
Enter the exact same value in the Section ID field that you defined previously in the CSS selector. In our example, enter radiantbg (without the hash symbol).
As soon as the Section ID in the component matches the CSS selector from your SASS file, the styling is automatically applied, and your new background is immediately visible.