> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/piano-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/piano-documentation/sections/multicolumn.md).

# Multicolumn

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

The "Multicolumn" section is provide by the Piano theme. This section is used to add a Image wise-banner with a title,content and button. you can show the multicolumn image banner as a slideshow.

{% hint style="info" %}
**Recommendation Size**\
Multicolumn image size: 511x255
{% endhint %}

<table><thead><tr><th width="306">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Make section full width</td><td>By enabling this checkbox, you can make section in full width.</td></tr><tr><td>Heading</td><td>Enter text to display as a title in the section.</td></tr><tr><td>Hide heading</td><td>By enabling this checkbox, hide the heading.</td></tr><tr><td>Enable zig zag</td><td>By enabling this checkbox, show the zig zag column.</td></tr><tr><td>Enable absolute background</td><td><p>By enabling this checkbox, show absolute background.</p><p>This feature will only work when gradiant color also add in color scheme.</p></td></tr><tr><td>Content style</td><td><p>Customization of the "Content style" in the multicolumn section is as follows:</p><ul><li>Card</li><li>Standard</li></ul></td></tr><tr><td>Image width</td><td><p>Customization of the "Image width" in the multicolumn section is as follows:</p><ul><li>One third width of column</li><li>Half width of column</li><li>Full width of column</li></ul></td></tr><tr><td>Image ratio</td><td><p>Customization of the "Image ratio" in the multicolumn section is as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li><li>Circle</li></ul></td></tr><tr><td>Desktop columns per row</td><td>"Desktop columns per row" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “5” columns.</td></tr><tr><td>Layout</td><td><p>Customization of the "Layout" in the multicolumn section is as follows:</p><ul><li>Slider</li><li>Grid</li></ul></td></tr><tr><td>Content alignment</td><td><p>Customization of "Content alignment" as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>View all button</td><td><strong>Label</strong><br>Use "Label" to add a label to the Button in the section.<br><br><strong>Icon</strong><br>Use "Icon" to add a icon to the Button in the section.<br><br><strong>Link</strong><br>Use "Link" to add a link to the Button in the section.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" style in the multicolumn is as follows:</p><ul><li>As a link</li><li>No fill</li><li>Fill</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li></ul></td></tr><tr><td>Mobile layout</td><td><p><strong>Number of columns on mobile</strong></p><p>"Number of columns on mobile" is used for the customization of collection columns in Mobile devices.</p><ul><li>1 Column</li><li>2 Columns</li></ul><p><strong>Enable swipe on mobile</strong></p><p>The multicolumn slides when the checkbox is activated.</p></td></tr><tr><td>Section padding</td><td><strong>Top padding</strong><br>Use the bar to set the Top padding to display top space. You can set a minimum of “0px” padding and a maximum of “100px” padding.<br><br><strong>Bottom padding</strong><br>Use the bar to set the Bottom padding to display bottom space. You can set a minimum of “0px” padding and a maximum of “100px” padding.</td></tr></tbody></table>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FUpUiRwekZoqSqhnhxphB%2Fmulticolumn.png?alt=media&amp;token=552d6a84-2751-4766-b022-df7f1758fb2b" alt=""><figcaption></figcaption></figure>

## Add Column

To add column to the Multicolumn section, click on the 'Add column'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td>Use "Image" to add the image to the section.</td></tr><tr><td>Icon</td><td><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul></td></tr><tr><td>Heading</td><td>Enter text to display as a heading on the image.</td></tr><tr><td>Description</td><td>Enter text to display as a description below the heading.</td></tr><tr><td>Button</td><td><strong>Label</strong><br>Use "Button label" to add a label to the Button in the section.<br><br><strong>Icon</strong><br>Use "Icon" to add an icon to the button in the section.<br><br><strong>Link</strong><br>Use "Button link" to add a link to the Button in the section.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" in the multicolumn is as follows:</p><ul><li>As a link</li><li>No fill</li><li>Fill</li></ul></td></tr><tr><td>Background image</td><td>You can add an image behind the content by using a background image.</td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a multicolumn content using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li></ul></td></tr></tbody></table>

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FwQVynWS1O2J3Uax8qnOi%2Fmulticolumn-block.png?alt=media&amp;token=63cc3bab-815f-42dc-b32a-289cd8aed993" alt=""><figcaption></figcaption></figure>