LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Create an LWR Site
Create Custom Pages
Create Theme Layouts in an LWR Site
Create Components for LWR Sites
Create Custom Layout Components
Create a Custom Navigation Menu Component
Publish Your LWR Site
Brand Your LWR Site
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
Experience Delivery (Beta)
PDF

Create Theme Layouts in an LWR Site

Theme layouts and theme layout components define the shared regions of LWR site pages. A theme layout component determines the header and footer for a site page and often includes navigation, search, and a user profile menu. You use the theme layout component in a theme layout and then assign the theme layout to a page. That way, every site page that you assign the theme layout to shows the same header and footer. LWR sites come with some theme layouts and theme layout components, and you can create your own.

Let’s say that you have a primary theme layout for your site that uses the Scoped Header and Footer theme layout component. The Scoped Header and Footer component includes your logo, a navigation menu, and a user profile menu in the header, and contact links in the footer. Now you want to add a Create Case button to the header on your knowledge base page only. You can create a theme layout called Knowledge Base, apply it to the knowledge base page, and add the button to the header.

  1. In Settings | Theme, click New Theme Layout.
  2. Enter the name of the new theme layout, assign your chosen theme layout component to the new layout, and save the change.
    In this example, you add the Scoped Header and Footer theme layout component to your new Knowledge Base theme layout. Because Scoped Header and Footer includes your logo, the navigation menu, and the user profile menu in the page header, the new theme layout also includes those elements.
    Theme panel in Experience Builder showing Theme Layouts
  3. From the Pages menu in Experience Builder, select the page where you want to apply the new theme layout. In this example, you choose your site’s knowledge base page.
  4. In the page settings, select Override the default theme layout for this page, and then select your new theme layout.
  5. On the page itself, add your desired component or components to the header or footer. In this example, you add a Button component to the header.
    Now the header with the button appears on your knowledge base page, and the other pages on your site show the header without the button.

To create your own theme layout component, see the Theme Layout section in Create Custom Layout Components.

Tip

On sites created with the Build Your Own (LWR) template, additional layout options are available on pages whose theme layout uses the Scoped Header and Footer theme layout component. In Theme | Theme Layout Settings, select

  • Fix theme header when you want the entire header region to always remain visible at the top of the page.
  • Hide theme footer when you want to hide the footer from view.
  • Position theme footer at page bottom when you want the footer region to sit at the bottom of the page. Depending on the page length, site visitors could be required to scroll down to see the footer.
Theme Layout Settings panel in the Experience Builder Theme tab

These choices are also available in Settings | Theme in the property settings for any theme layout component of the type Scoped Header and Footer.

When you change a theme layout, for example by fixing the theme header, that change appears on every page where this theme layout is assigned.

Note