✨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:

Media grid	Section visibility Select from the options to select the visibility of this section: -Always -Small devices(On selecting this, the section will be visible on mobile devices only.) -Large devices Section background Choose the background color from solid or gradient. These colors can be managed in the assigned color scheme. Section width Choose the section width from following options: - Small - Medium - Large - Fullwidth Section corner style Choose the section's corner style from following options: - None - Top rounded - Bottom rounded - Fully rounded
Desktop	Gap Adjust the range bar to determine the gap between the blocks on desktop view. Row height Adjust the range bar to determine the block's row height on desktop view. Card radius Adjust the range bar to determine the radius of blocks on desktop view.
Mobile	Gap Adjust the range bar to determine the gap between the blocks on mobile view. Row height Adjust the range bar to determine the block's row height on mobile view.
Background color schemes	(Note: 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.) Default scheme Select any color scheme defined in the theme settings>Colors>Schemes. Color scheme(1-3) Select any color scheme defined in the theme settings>Colors>Schemes. Spotlight opacity Adjust the range bar to determine the opacity of spotlight, which appears on hover of the section.
Section spacing	Desktop top space Adjust the range bar to add spacing at the top of the section for desktop view. Desktop bottom space Adjust the range bar to add spacing at the bottom of the section for desktop view. Mobile top space Adjust the range bar to add spacing at the top of the section for mobile view. Mobile bottom space Adjust the range bar to add spacing at the bottom of the section for mobile view.

Block settings: Grid gallery

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