Create Custom Page Layout Components for Communities

Community Builder includes several ready-to-use layouts that let you quickly change the look of your community’s pages. However, if you need a layout that’s customized for your community, create a custom layout component to use when building new pages in Community Builder. You can also update the layout of the default pages that come with your community template.

When you create a custom layout component in the Developer Console, it appears in Community Builder in:

The Create New Page dialog box. To view the custom layout, select the Custom view in the Layouts tab.
The Change Layout dialog box. To view the custom layout, select the Custom tab.

1. Add a New Interface to Your Layout Component

To appear in the Create New Page and Change Layout dialog boxes in Community Builder, a custom layout component must implement the forceCommunity:layout interface.

Here’s the sample code for a simple two-column layout.

1<aura:component implements="forceCommunity:layout" access="global">
2    <aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute>
3    <aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute>
4
5    <div class="container">
6        <div class='contentPanel'>
7            <div class='left'>
8                {!v.column1}
9            </div>
10            <div class='right'>
11                {!v.column2}
12            </div>
13        </div>
14    </div>
15</aura:component>

Mark your resources with access="global" to make the resource usable outside of your own org; for example, if you want the resource to be usable in an installed package or by a Lightning App Builder user or a Community Builder user in another org.

Note

2. Add a CSS Resource to Your Component Bundle

Next, add a CSS resource to style the layout as needed.

Here’s the sample CSS for our simple two-column layout.

1.THIS .ui-widget {
2    margin: 36px 0;
3}
4.THIS .contentPanel:before,
5.THIS .contentPanel:after {
6    content: " ";
7    display: table;
8}
9.THIS .contentPanel:after {
10    clear: both;
11}
12.THIS .left {
13    float: left;
14    width: 50%;
15}
16.THIS .right {
17    float: right;
18    width: 50%;
19}

CSS resources must be named componentName.css. For example, the CSS resource for the component communityLayout.cmp is communityLayout.css.

3 Optional: Add an SVG Resource to Your Component Bundle

You can include an SVG resource in your component bundle to define a custom icon for the layout component when it appears in the Community Builder.

The recommended image size for a layout component in Community Builder is 155px by 120px. However, if the image has different dimensions, Community Builder scales the image to fit.

SVG resources must be named componentName.svg.

Lightning Components Developer Guide

Create Custom Page Layout Components for Communities

1. Add a New Interface to Your Layout Component

2. Add a CSS Resource to Your Component Bundle

3 Optional: Add an SVG Resource to Your Component Bundle

See Also: