# Media grid

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Section visibility</td><td>Choose from the options to select the visibility of this section: <br>-Always <br>-Small devices only(On selecting this, the section will be visible on mobile devices only.) <br>-Large devices only</td></tr><tr><td>Make top corners rounded</td><td>Select this checkbox to show the top corners rounded of the section.</td></tr><tr><td>Make content sticky</td><td>Select this checkbox to make the text content sticky in the section.</td></tr><tr><td>Make section fullwidth</td><td>Select this checkbox to change the section in to full width.</td></tr><tr><td>Desktop row height</td><td>Adjust the range bar to determine the grid's row height on the desktop view.</td></tr><tr><td>Mobile row height</td><td>Adjust the range bar to determine the grid's row height on the mobile view.</td></tr><tr><td>Heading</td><td>Add heading text. </td></tr><tr><td>Heading size</td><td>Choose the heading size from the H1-H6 options. </td></tr><tr><td>Heading tag</td><td>Choose the heading tag from H1-H6 for SEO purposes.</td></tr><tr><td>Heading alignment</td><td>Choose left or center to decide the text alignment.</td></tr><tr><td>Colors</td><td><p><strong>Color scheme</strong> <br>Choose the color scheme.</p><p><em>These can be managed from Theme settings> Color >Schemes.</em><br><br><strong>Section background</strong><br>Choose any color for the section background color. It works with the rounded corners only.<br><br><strong>Heading highlight</strong><br>Choose any color for the highlighted heading color.</p></td></tr><tr><td>Section spacing</td><td><p><strong>Top spacing (desktop)</strong> </p><p>Adjust the slider to add spacing at the top of the section for desktop view.  <br> </p><p><strong>Bottom spacing (desktop)</strong> </p><p>Adjust the slider 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 slider to add spacing at the top of the section for mobile view. </p><p> </p><p><strong>Bottom spacing (mobile)</strong> <br>Adjust the slider to add spacing at the bottom of the section for mobile view.</p></td></tr></tbody></table>

### Block Settings

<table data-header-hidden><thead><tr><th width="284"></th><th></th><th data-hidden></th></tr></thead><tbody><tr><td>Show image/video on hover</td><td>Tick this checkbox to show image on hover only.</td><td></td></tr><tr><td>Image</td><td>Choose image from your library.</td><td></td></tr><tr><td>Video </td><td>Choose video from your library.</td><td></td></tr><tr><td>Layout</td><td><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.<br><br><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.</td><td></td></tr><tr><td>Content</td><td><strong>Heading</strong> <br>Add heading text. <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>Add description text. <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>Content alignment</strong> <br>Choose the content alignment from the following options: <br>-Left <br>-Center <br>-Right <br><br><strong>Desktop content width</strong> <br>Choose the width from the following options: <br>-Small <br>-Medium <br>-Large</td><td></td></tr><tr><td>Button</td><td><p><strong>Style</strong><br>Select from Solid, Outline or Link to determine the button style.<br><br><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>(Note: If the button text is blank, then the link will be applied to the whole image.)</em></p></td><td></td></tr><tr><td>Colors</td><td><p><strong>Column background</strong></p><p>Choose any color for the column background. <br><br><strong>Heading</strong> </p><p>Choose any color for the heading. <br><br><strong>Description</strong> </p><p>Choose any color for the description . </p><p><br><strong>Heading</strong> <strong>hover</strong></p><p>Choose any hover color for the heading. <br><br><strong>Description</strong> <strong>hover</strong></p><p>Choose any hover color for the description . <br><br><strong>Button background</strong> </p><p>Choose any color for the button background. </p><p></p><p><strong>Button text</strong> </p><p>Choose any color for the button text. </p><p></p><p><strong>Button border</strong> </p><p>Choose any color for the button border. </p><p></p><p><strong>Button hover</strong> <strong>background</strong> </p><p>Choose any color for the button background on hover. </p><p></p><p><strong>Button hover</strong> <strong>text</strong> </p><p>Choose any color for the button text on hover. </p><p></p><p><strong>Button hover</strong> <strong>border</strong> </p><p>Choose any color for the button border on hover. </p><p></p><p><strong>Overlay color</strong> </p><p>Choose any color for the overlay. </p><p></p><p><strong>Overlay opacity</strong> </p><p>Adjust the range bar to determine the overlay opacity.</p></td><td></td></tr></tbody></table>