You can create a new community page using the New Page menu obtained from the gear icon that we can see next to the home page. This is shown in the following screenshot:
When you click on New Page, you will see that you can choose from a standard page, create a blank page, or choose a custom object and override its layout. The standard layout options available are as follows:
But what if you want to add your own layout? An example use case for this would be for a home page. We need to make sure that the YouTube search component is center aligned. We can create a one-column layout that is center aligned, with padding on the right and the left.
To write your own layout, the component will need to implement the forceCommunity:layout interface. Let's create a custom layout that is one column but aligns in the center, with sufficient padding. We can use the Salesforce lightning design system grids.
The following is a simple component code that creates a custom layout:
<aura:component implements="forceCommunity:layout" description="Custom Content Layout" access="global">
<!---->
<aura:attribute name="column1" type="Aura.Component[]" required="false"/>
<div class="container">
<div class="slds-grid contentPanel">
<div class="slds-col slds-size_4-of-12">
</div>
<div class="slds-col slds-size_8-of-12">
{!v.column1}
</div>
</div>
</div>
</aura:component>
Now, to use this layout, let's use a page variation for the home page. Page variation allows you to create a different view for the same page and assign it to an audience. An audience can be a combination of profiles, locations, and record types.
The following screenshot shows how different page variations exists for the page. Notice that we have the home page and a YouTube search page that is a variation of the Home page:
The following shows the custom layout that we created. It appears when we create a new page:
The following is a screenshot of the builder with this new layout. Notice that we can tweak things such as the text color and the home logo from the builder:
