LWR Sites for Experience Cloud

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Brand Your LWR Site
How Branding Works in LWR Sites
Enable --dxp Styling Hooks
--dxp Styling Hooks in LWR Sites
How --dxp Styling Hooks Map to Theme Panel Properties
Use --dxp Styling Hooks in Custom Components
Override Component Branding in LWR Sites with Custom CSS
Create a Color Palette for Page Sections and Columns
Create a Configurable Site Logo Component
Add Custom Fonts
Remove SLDS
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
Improve Performance with Experience Delivery
PDF

Create a Color Palette for Page Sections and Columns

On many websites, it’s common to have sections of a page, such as the header, footer, or columns and banners, that use different colors from the overall site. For example, perhaps you want to create a header with a dark background and a light foreground, whereas the rest of your site does the opposite. To achieve this, you can create separate color palettes and apply them to these page areas.
  1. To create a color palette, in Experience Builder, open the Colors tab of the Theme panel and click Menu icon | Manage Color Palettes.
  2. Click New Palette and give the palette a name.

    The new palette is created and selected in the Color Palette theme panel.

    Color Palette theme panel and Manage Color Palettes panel
  3. Update the palette’s color properties as needed in the Colors section of the Color Palette theme panel.
  4. To use the palette, select a Section or Columns component on the page and then choose the palette from the Color Palette menu on the component property panel.
    Color Palette menu on Section component property panel

You can also create a color palette directly from a Section or Columns component. In the Color Palette menu in the component property panel, click New. After you name and save the palette, the palette is assigned to that component, and the Color Palette theme panel opens. Edit the palette’s color properties in the theme panel as in step 3, and your changes are immediately applied to the component.