How to Create Custom Layout for Community Pages Using Salesforce Lightning Component?

Hey!

May be you are using standard layout for community pages in salesforce but in this blog, we will learn how to create custom layout for community pages using lightning component through the community builder.

Let me tell you two remember points:
1. Make sure community should be enabled in your org.
2. Check community template must have Builder option.

Step1: Create a custom layout using lightning component by the following code:

<aura:component implements="forceCommunity:layout" access="global">    
    <aura:attribute name="column" type="Aura.Component[]" required="false"/>    
    <div class="container">
        <div class="contentPanel">
            {!v.column}
        </div>
    </div>    
</aura:component>

Step2: Add CSS for styling in component:

.THIS .contentPanel:before,
.THIS .contentPanel:after {
    content: "";
    display: table;
}
.THIS .contentPanel {
    width: 100%;
}

The Custom Layout is created it's time to add custom layout in communities

Step1: Select Community Builder
Step2: Go to Home add a New Page in it.

Click on New Page

Step3: Select that custom layout you created and add on that page.

Step4: Fill all specified information and create page.

Output:

Lightning component can also be added if you want from here:

Hope this will help.

Thanks