# Multiple columns

![image](https://docs-assets.foxecom.app/megamog-theme/image_UtWWTg1g.png)

<Hint type="success">

**Steps:**

1. In the theme editor **(Customize)**, click **Add section**
2. Select **Multiple columns**
3. Make necessary changes
4. **Save** the settings.

</Hint>

## Section settings

### Section header

Select the header layout (on the Left of the whole cards or the Top).

Give the section a heading, description, and a button. Leave any fields blank if you don't want to show them.

![image](https://docs-assets.foxecom.app/megamog-theme/image_yoJ7DZ5b.png)

![image](https://docs-assets.foxecom.app/megamog-theme/image_iyDdicLd.png)

You can also set the alignment of your section header's button.

<Tabs>
<Tab title="Left">

![image](https://docs-assets.foxecom.app/megamog-theme/image_kPdZzbzC.png)

</Tab>

<Tab title="Center">

![image](https://docs-assets.foxecom.app/megamog-theme/image_Sk01yMX4.png)

</Tab>
</Tabs>

### Card settings

* Cards' content alignment: Left/Center/Right;
* Show border&#x20;

![An example when the option 'Show border' is selected](https://docs-assets.foxecom.app/megamog-theme/image_hjorRzcN.png)

* Image width: Extra small/ Small/ Medium/ Large/ Extra large/ Full width;
* Image rounded: 0-100 px;
* Heading size: H2-H6;
* Description style: Body text/ Sub text;
* Image hover effect: None/ Scaling up.

![image](https://docs-assets.foxecom.app/megamog-theme/image_d9CPIPCJ.png)

### Grid settings

Set the number of columns for desktop view (2-12 columns) and adjust the gap between the columns and rows.

![image](https://docs-assets.foxecom.app/megamog-theme/image_4Yy3V7vw.png)

### Slider settings

Enable the slider for the section if needed (the number of cards > the number of columns).

Show the navigation and/or pagination to navigate the columns.

![image](https://docs-assets.foxecom.app/megamog-theme/image_R4l9xMcJ.png)

### Mobile settings

Set the number of columns on mobile view: Inherit/ 1 column/ 2 columns.&#x20;

You can also make the section swipeable.

Then, adjust the gap of the columns and rows on mobile (between 0-50px).

![image](https://docs-assets.foxecom.app/megamog-theme/image_8FbPstgq.png)

## Block settings

Link your card to your desired page. Visitors will be directed to your attached page when clicking on the image or the button.

![image](https://docs-assets.foxecom.app/megamog-theme/image_xKZMbJxq.png)

Select an image and insert its content (heading and description).

![image](https://docs-assets.foxecom.app/megamog-theme/image_zppGJKhD.png)

Give your button a label and select the button style.

![image](https://docs-assets.foxecom.app/megamog-theme/image_0kdi7HvU.png)