How To Create A Lightning Community Template

What You lot'll Exercise

In the previous step, we talked nigh how theme layout components work from the Feel Builder perspective. Now permit'south wait at how theme layout components work from the Programmer Console perspective.

In this step, you create a basic theme layout component in the Programmer Console, and use it in Experience Builder to transform the overall structure of your Experience Builder site's pages.

You'll:

Add an interface to your theme layout component and define its regions.
Add a pattern resources to the theme layout component.
Test your component in Feel Builder.

Define Your Theme Layout Component

Add a Pattern Resources

A design resource controls which component attributes, such as UI labels or configuration backdrop, are exposed in Experience Builder. The pattern resource lives in the aforementioned binder every bit your .cmp resource, and describes the design-time behavior of the Lightning component—data that visual tools need to display the component in a page or app.

Create a .design resource for condensedThemeLayout.cmp by clicking Design on the right-hand side of the Developer Panel.
To give the component a UI characterization, replace the contents with this code.
```
<design:component label="Condensed Theme Layout"> </design:component>
```
Save condensedThemeLayout.design.

Verify the Condensed Theme Layout

Nice work then far! Let's quickly test the new theme layout component to see how its construction looks on the page.

In Experience Architect, refresh the browser page.
Click Settings | Theme | Configure.
Click New Theme Layout, name it Home, and select the Condensed Theme Layout component.
Click Save.
Open the Folio Properties for the Home page by clicking the settings cog ( ) on the pinnacle toolbar.
Change the content layout to 2 columns; 1:1 ratio and click OK in the dialog that appears.
Select Override the default theme layout for this folio.
Select Home in the Theme Layout dropdown.

The page refreshes, and now you can run across your new theme layout component in action! Let'due south take a closer look at the layout of the page. You no longer have a header (i), which used to comprise the navigation, search, profile menu, and logo. And you have two new regions on the left-hand side—search (2) and sidebarFooter (three). New theme layout in action

Notice how the template's default search component appears in the search region? Information technology appears there because search is a special, designated region name. When yous declare search as an attribute name value, your custom theme layout component automatically reuses the template's default search component.

Whenever you or other users switch the theme layout component of a template, the value of the search region's content sticks around (as long every bit the new theme layout component as well includes a search region, that is). It also means that you can bandy the default search component with a custom search component. Simply let'due south not become ahead of ourselves...we'll embrace that in a later stride.