# Media grid

### Configure the section

Go to **Customize theme**. Click the dropdown menu at the top and select the **Home page** template.

From the left side menu, select **Media grid**.

Customize this section by using the setting on the right side of the theme editor, as described in the following table:

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Media grid</td><td><strong>Section visibility</strong><br>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices<br><br><strong>Section background</strong><br>Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme.<br><br><strong>Section width</strong><br>Choose the section width from following options:<br>- Small<br>- Medium<br>- Large<br>- Fullwidth<br><br><strong>Section corner style</strong><br>Choose the section's corner style from following options:<br>- None<br>- Top rounded<br>- Bottom rounded<br>- Fully rounded</td></tr><tr><td>Desktop</td><td><strong>Gap</strong><br>Adjust the range bar to determine the gap between the blocks on desktop view.<br><br><strong>Row height</strong><br>Adjust the range bar to determine the block's row height on desktop view.<br><br><strong>Card radius</strong><br>Adjust the range bar to determine the radius of blocks on desktop view.</td></tr><tr><td>Mobile</td><td><strong>Gap</strong><br>Adjust the range bar to determine the gap between the blocks on mobile view.<br><br><strong>Row height</strong><br>Adjust the range bar to determine the block's row height on mobile view.</td></tr><tr><td>Background color schemes</td><td><em>(<strong>Note:</strong> These color schemes are used for the section's background, gradients and spotlight. If the grid contains slides, the background color will dynamically change during slide transitions.)</em><br><br><strong>Default scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Color scheme(1-3)</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br><strong>Spotlight opacity</strong><br>Adjust the range bar to determine the opacity of spotlight, which appears on hover of the section.</td></tr><tr><td>Section spacing</td><td><p><strong>Desktop top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Desktop bottom space</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view. </p><p> </p><p><strong>Mobile top space</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Mobile bottom space</strong><br>Adjust the range bar to add spacing at the bottom of the section for mobile view. </p></td></tr></tbody></table>

### Block settings: Grid gallery

<table><thead><tr><th width="296"></th><th></th></tr></thead><tbody><tr><td>Layout</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the theme settings>Colors>Schemes.<br><br>Desktop<br><strong>Column</strong><br>Adjust the range bar to determine the width of the block, on the basis of columns, for the desktop view.<br><br><strong>Row</strong><br>Adjust the range bar to determine the height of the block, on the basis of rows, for the desktop view.<br><br>Mobile<br><strong>Column</strong><br>Adjust the range bar to determine the width of the block, on the basis of columns, for the mobile view.<br><br><strong>Row</strong><br>Adjust the range bar to determine the height of the block, on the basis of rows, for the mobile view.</td></tr><tr><td>Slide settings</td><td><em>(<strong>Note</strong>: Slider settings will only take effect if the content includes more than one slide.)</em><br><br><strong>Slide direction</strong><br>Choose the slide direction from the following options:<br>- Left to right<br>- Right to left<br>- Top to bottom<br><br><strong>Heading size</strong><br>Select the heading size from the following options: <br>- XXX- large <br>- XX- large <br>- X- large <br>- Large <br>- Medium <br>- Small <br>- X-small<br><br><strong>Description size</strong><br>Select the description size from the following options:<br>- X- large<br>- Large<br>- Medium<br>- Normal<br>- Small<br>- X-small<br>- XX-small<br><br><strong>Content alignment</strong><br> Choose the content alignment from the following options: <br>- Left <br>- Center <br>- Right<br><br><strong>Content position</strong><br>Choose the content position from the following options: <br>- Top left <br>- Top center <br>- Top right<br>- Center left<br>- Center <br>- Center right<br>- Bottom left <br>- Bottom center <br>- Bottom right<br><br><strong>Overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity above the image. <br><em>(<strong>Note</strong>: To change overlay color, edit the scheme "Image overlay" color in the color scheme under theme settings.)</em><br><br><strong>Button size</strong><br>Select from the following options to determine the button size.<br>- Global<br>- Small<br>- Medium<br>- Large<br><br><strong>Button style</strong><br>Choose the button style from the following options:<br>- Animated <br>- Outlined<br>- Link <br>- Solid<br>- Solid animated </td></tr><tr><td>Content slides</td><td><strong>Slide 1-4</strong><br><em>(<strong>Note</strong>: The carousel arrows appear on adding slides content at-least in two slides.)</em><br><br><strong>Image</strong><br>Choose any image from the store library.<br><br><strong>Heading</strong><br>Add heading text. <br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Button label</strong><br>Add button text.<br><em>(Note: Leave the label blank to hide the button.)</em>  <br><br><strong>Button link</strong><br>Add a link to the button label to redirect.  </td></tr></tbody></table>