SXA: How to Configure More than 8 Columns in Column Splitter

SXA stands for Sitecore Experience Accelerator (SXA) and is a compatible component of the Sitecore platform with effortless integration with XM and XP installations.

SXA Installation enables the capability to handle numerous sites and their settings. In addition, the SXA benefits include the tooling and the inclusion of building blocks for building websites without the requirement of any custom code.

Firstly, if you desire to start with SXA Installation, then you will prior require a successful installation of both Sitecore XM and XP.

In general, the SXA utilizes grid layouts that are responsive. And as per the defined grid being used, the division of columns in the pages is determined. The SXA benefits include flexibility towards picking the page's structure using the column splitters or altering the settings.

In default form post-SXA installation, the layout has three placeholders: the header, footer and main.

The Sitecore Experience Accelerator, by default, supports configuring eight columns inside a single-column splitter. However, if you require an additional number of columns, this post will guide you step-by-step for the configuration.

Step 1:

Navigate to Website\App_Config\Include\Feature\Sitecore.XA.Feature.PageStructure.config file in file system and modify below settings maxSize from “8” to “12”.

<splitterResizer minSize="1" maxSize="8" id="{8C4F99AC-5C29-40EF-9A33-1A4C73DBFEA9}">

You can also create a patch file with below configuration.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"> 

    <sitecore> 

        <experienceAccelerator> 

            <!-- List of the component properties sections which contain drop downs with list of possible columns splitter columns sizes. --> 

            <splitterResizer> 

               <patch:attribute name="minSize">2</patch:attribute> 

   <patch:attribute name="maxSize">12</patch:attribute> 

            </splitterResizer> 

        </experienceAccelerator> 

    </sitecore> 

</configuration> 

 

Step 2:

Navigate to “/sitecore/templates/Feature/Experience Accelerator/Page Structure/Rendering Parameters/ColumnSplitter/Grid” in Sitecore and create new four columns like below.

Step 3:

Navigate to “/sitecore/templates/Feature/Experience Accelerator/Page Structure/Rendering Parameters/ColumnSplitter/Grid” in Sitecore and create new four columns like below.

<excludedComponentSettingFields> 

                    <fieldID desc="ColumnWidth9">{8067797B-6458-4219-9399-E69D6A951A59}</fieldID> 

<fieldID desc="ColumnWidth10">{F9496C33-52A0-4EB4-827E-878A127F9FA2}</fieldID> 

<fieldID desc="ColumnWidth11">{22D6E1C1-4EA2-4454-BF61-86A65EAE4B40}</fieldID> 

<fieldID desc="ColumnWidth12">{63DC786C-10D5-48D0-A206-F75E7A8CADA7}</fieldID> 

                </excludedComponentSettingFields>     

You can create patch file with below configuration as well. 

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"> 

    <sitecore> 

        <experienceAccelerator> 

            <grid> 

                <!-- List of excluded rendering parameters fields IDs used to build Grid parameters modal dialog --> 

                <excludedComponentSettingFields> 

                    <fieldID desc="ColumnWidth9">{8067797B-6458-4219-9399-E69D6A951A59}</fieldID> 

<fieldID desc="ColumnWidth10">{F9496C33-52A0-4EB4-827E-878A127F9FA2}</fieldID> 

<fieldID desc="ColumnWidth11">{22D6E1C1-4EA2-4454-BF61-86A65EAE4B40}</fieldID> 

<fieldID desc="ColumnWidth12">{63DC786C-10D5-48D0-A206-F75E7A8CADA7}</fieldID> 

                </excludedComponentSettingFields>                 

            </grid> 

        </experienceAccelerator>         

    </sitecore> 

</configuration> 

 

Conclusion

Above are the steps to add more than eight columns inside the column splitter in Sitecore Experience Accelerator. If one needs to scale the number of rows on the page then it can be easily achieved by utilising the components in the interface itself.

For example, in the Experience editor, you can drag the splitter rendering the page and then use the toolbar. Although most of the functions are fulfilled within the editor, an auxiliary configuration can provide flexibility to govern the layouts as desired.

Get in touch with us for help with Sitecore. Our team with years of experience in Sitecore implementation and services will guide you through any query.