Layout
forceCommunity:layout
Enables a component to be used as a custom layout for creating pages in the Experience Builder.
For Use In
Experience Builder Sites
To appear in Experience Builder as a custom layout, a component must implement the forceCommunity:layout interface.
Here’s the sample code for a simple two-column content layout.
1<aura:component implements="forceCommunity:layout" description="Custom Content 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, such as a component, with access="global" to make the resource usable outside of your own org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Experience Builder user in another org.
Next, add a CSS resource to your component bundle to style the content layout. CSS resources must be named componentName.css.
1.THIS .contentPanel:before,
2.THIS .contentPanel:after {
3 content: " ";
4 display: table;
5}
6.THIS .contentPanel:after {
7 clear: both;
8}
9.THIS .left {
10 float: left;
11 width: 50%;
12}
13.THIS .right {
14 float: right;
15 width: 50%;
16}Optionally, to define a custom icon for the content layout component, you can add an SVG resource to your component bundle.
For more information, see Using Components in the Lightning Aura Components Developer Guide.
