# Media grid

<table><thead><tr><th width="267"></th><th></th></tr></thead><tbody><tr><td>Section spacing</td><td><p><strong>Top spacing (desktop)</strong></p><p>Adjust the range bar to add spacing at the top of the section for desktop view.</p><p></p><p><strong>Bottom spacing (desktop)</strong></p><p>Adjust the range bar to add spacing at the bottom of the section for desktop view.</p><p></p><p><strong>Top spacing (mobile)</strong></p><p>Adjust the range bar to add spacing at the top of the section for mobile view.</p><p></p><p><strong>Bottom spacing (mobile)</strong> </p><p>Adjust the range bar to add spacing at the bottom of the section for mobile view.</p></td></tr><tr><td>Section visibility</td><td><p>Select from the options to select the visibility of this section:</p><p>-Always </p><p>-Small devices only(On selecting this, the section will be visible on mobile devices only.) </p><p>-Large devices only</p></td></tr><tr><td>Make section fullwidth</td><td>Tick the checkbox to show this section in fullwidth.</td></tr><tr><td>Content</td><td><strong>Heading</strong><br>Add heading text.<br><em>(<strong>Note</strong>: Wrap your text between [ ] to add the markers font.)</em><br><br><strong>Markers font</strong><br>Choose any font from the following options: <br>- Accent <br>- Body <br>- Heading <br><em>(<strong>Note</strong>: These fonts can be changed in theme settings>typography.)</em><br><br><strong>Heading size</strong><br>Choose the heading size from the H1-H6 options.<br><br><strong>Heading tag</strong><br>Choose the heading tag from H1-H6 for SEO purposes.<br><br><strong>Description</strong><br>Enter the description text.<br><br><strong>Content alignment</strong><br>Choose left or center to decide the text alignment. 3232</td></tr><tr><td>Column</td><td><strong>Desktop row height</strong><br>Adjust the range bar to determine the grid's row height on the desktop view.<br><br><strong>Mobile row height</strong><br>Adjust the range bar to determine the grid's row height on the mobile view.<br><br><strong>Desktop column gap</strong><br>Adjust the range bar to determine the grid's column gap on the desktop view.<br><br><strong>Mobile column gap</strong><br>Adjust the range bar to determine the grid's column gap on the mobile view<br><br><strong>Border radius</strong><br>Adjust the range bar to determine the grid's border radius.</td></tr><tr><td>Colors</td><td><strong>Color scheme</strong><br>Select any color scheme defined in the Theme settings>Colors schemes. </td></tr></tbody></table>

## **Block settings:**

<table><thead><tr><th width="262"></th><th></th></tr></thead><tbody><tr><td>Show image/video on hover</td><td>Tick this checkbox to show image on hover only.</td></tr><tr><td>Image</td><td>Choose image from your library.</td></tr><tr><td>Video</td><td>Choose video from your library.</td></tr><tr><td>Layout</td><td><p><strong>Desktop</strong><br><strong>Column</strong> <br>Adjust the range bar to determine the column width. <br><br><strong>Row</strong> <br>Adjust the range bar to determine the row height. </p><p></p><p><strong>Mobile</strong> <br><strong>Column</strong> <br>Choose from 1 or 2 to determine the columns count. <br><br><strong>Row</strong> <br>Choose from 1 or 2 to determine the rows count.</p></td></tr><tr><td>Content</td><td><p><strong>Subheading</strong><br>Add subheading text. <br><br><strong>Heading</strong> </p><p>Add heading text. </p><p></p><p><strong>Heading size</strong> </p><p>Choose the heading size from the H1-H6 options. </p><p></p><p><strong>Heading tag</strong> </p><p>Choose the heading tag from H1-H6 for SEO purposes. </p><p></p><p><strong>Description</strong> </p><p>Add description text. </p><p></p><p><strong>Content position</strong> </p><p>Choose the content position from the following options: </p><p>-Top left </p><p>-Top center </p><p>-Top right </p><p>-Center left </p><p>-Center </p><p>-Center right </p><p>-Bottom left </p><p>-Bottom center </p><p>-Bottom right </p><p></p><p><strong>Content alignment</strong> </p><p>Choose the content alignment from the following options: </p><p>-Left </p><p>-Center </p><p>-Right </p><p></p><p><strong>Desktop content width</strong> </p><p>Choose the width from the following options: </p><p>-Small </p><p>-Medium </p><p>-Large</p></td></tr><tr><td>Button</td><td><p><strong>Text</strong></p><p>Add text to the highlight button.<br></p><p><strong>Link</strong></p><p>Add a link to your button. <br>(<em><strong>Note</strong>: If the button text is blank, then the link will be applied to the whole image.)</em><br><br><strong>Style</strong> <br>Choose the button style from the following options: <br>-Solid <br>-Outline <br>-Link.<br><br><strong>Size</strong><br>Choose the button width from the following options: </p><p>-Regular <br>-Small </p><p>-Medium </p><p>-Large</p></td></tr><tr><td>Colors</td><td><p><strong>Color scheme</strong><br>Select any color scheme defined in the Theme settings>Colors schemes. <br><br><strong>Overlay opacity</strong></p><p>Adjust the range bar to determine the overlay opacity.</p></td></tr></tbody></table>