Media grid

This section is to multiple images with text.

Configure media grid

Select the customize theme option. Click on the dropdown menu at the top to select the Home page template.

From the left side menu, select Media grid.

Customize the media grid section by utilizing the settings on the right side of the theme editor, as described below:

General

Make section full width Check this checkbox to make the section into full-width. Section visibility Select from the options to select the visibility of this section: -Always -Small devices only(On selecting this, the section will be visible on mobile devices only.) -Large devices only Desktop row height Adjust the range bar to determine the grid's row height on the desktop view. Mobile row height Adjust the range bar to determine the grid's row height on the mobile view. Desktop grid gap Adjust the range bar to determine the gap between columns on the desktop view. Mobile grid gap Adjust the range bar to determine the gap between columns on the mobile view. Enable shadow on card Tick this checkbox to show the shadow behind the cards of the grid.

Content

Show image content on hover only Tick this checkbox to show text content on the hover only and not to show it permanently. The content background overlay opacity can be changed from it's block settings. Heading Add heading text. (Note: Wrap your text between [] to add the markers. For example, This [marker] will underline marker text.) Marker text highlight style Select from Underline or Background to determine the highlight style. Highlight background Select from Gradient or Solid to determine the highlight background. Heading size Select the heading size from the H1-H6 options. Heading tag Specify heading code types for SEO and search engines for crawling purposes. Heading alignment Select the text alignment from the given options:

-Left

-Right

-Center

Colors

Color scheme Select the color scheme.

These can be managed from Theme settings> Color >Schemes. Enable gradient Select this check box to enable the gradient color specified in the color scheme assigned above.

Section padding

Top spacing (desktop)

Adjust the range bar to add spacing at the top of the section for desktop view.

Bottom spacing (desktop)

Adjust the range bar to add spacing at the bottom of the section for desktop view.

Top spacing (mobile)

Adjust the range bar to add spacing at the top of the section for mobile view.

Bottom spacing (mobile) Adjust the range bar to add spacing at the bottom of the section for mobile view.

Block settings

Image

Select image from your library.

Video autoplay

Select video from your library.

Layout

Column Adjust the range bar to determine the column width. Row Adjust the range bar to determine the row height.

Content

Heading Add heading text. Heading size Select the heading size from the H1-H6 options. Heading tag Specify heading code types for SEO and search engines for crawling purposes. Description Add description text. Content position Select the content position from the following options: -Top left -Top center -Top right -Centre-left -Center -Center right -Bottom left -Bottom center -Bottom right Content alignment Select the content alignment from the following options: -Left -Center -Right Content width Select the width from the following options: -Small -Medium -Large

Button

Text

Add text to the highlight button.

Link

Add a link to your button. Note: If the button text is blank, then the link will be applied to the whole image. Show button as link Tick this checkbox to make the button a link.

Colors

Heading Select any color for the heading. Description Select any color for the heading. Button background Select any color for the button background. Button text Select any color for the button text. Button border Select any color for the button border. Button background hover Select any color for the button background on hover. Button text hover Select any color for the button text on hover. Button border hover Select any color for the button border on hover. Overlay color Select any color for the overlay. Overlay opacity Adjust the range bar to determine the overlay opacity.

Last updated