Custom Content Layout Components for Communities

In this blog, I will show how to create a custom layout for community pages by using lightning components. To appear in Community Builder as a custom layout, a component must implement the forceCommunity:layout interface. Community Builder includes several ready-to-use layouts that define the content regions of your page, such as a two-column layout with a 2:1 ratio. However, if you need a layout that’s customized for your community, create a custom content layout component to use when building new pages in Community Builder. You can also update the content layout of the default pages that come with your community template.

  • The community should be enabled.
  • Make sure that community template has Builder option.

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 Community Builder user in another org.

1. Create a Component

To appear in the New Page and the Change Layout dialog boxes in Community Builder, a content layout component must implement the forceCommunity:layout interface. Here is the sample code that we will use into the community builder

Here is the CSS

You can include an SVG resource in your component bundle to define a custom icon for the content layout component when it appears in the Community Builder. Use Below SVG code to show the icon on the community.

 

2. Using Custom Layout In Communities

Open Community Builder from the Community settings page and Click on the Add a New Page as shown below

Select Standard page

You can view the custom layout you created. Select the layout for the page. Click on Next
Enter the name for the page and create a page . after creating the page you can able to see the layout of the screen as shown below.