Media Grid

Media Grid allows merchants to display multiple images on the page, with each image having customizable layout options. By customizing the width and height of images, create visually impactful effects. This section is very suitable for showcasing product features, marketing information, or visual stories, enhancing the visual atmosphere of the page.

(I) Media Grid

• Page width: There are three options: Page Container, Stretched, and Full Width. Choosing different widths will present different visual effects.

(II) Padding

• Top: Manually drag the slider to adjust the top margin, with a minimum of 0px and a maximum of 100px.

• Bottom: Manually drag the slider to adjust the bottom margin, with a minimum of 0px and a maximum of 100px.

(III) Title Settings

• Title: Set a section title.

• Title size: Set the size of the title (Small, Medium, Large, Extra Large, Maximum).

• Description: Enter descriptive text for a brief introduction and explanation.

• Button: Enter the text displayed on the button; the button will not be displayed if the content is empty.

• Link: Set the location the button jumps to by pasting a link or searching.

• Outline style: Enable this option to change the button style accordingly.

• Color scheme: Select or edit a color scheme to define the color styles of all elements on the page, including background color, text color, etc.

(IV) Image Settings

• Row height: Drag the slider to set the row height of an image, with a row height ranging from 170px to 240px.

• Text position: Select the display position of the text on the image, with 7 positions available such as Top Left, Bottom Left, Top Right, Bottom Right, etc.

(V) Media

• Link address: Set the location to jump to when clicking the image or video by pasting a link or searching.

• Image: Upload or change the image. It is recommended to use high-resolution images.

• Video: Upload or change the video. It is recommended to use high-resolution videos.

• Auto-play video: Enable this option to allow the video to play automatically in a loop without manual clicking.

• Image width: Each image has its own width, providing a flexible layout and supporting 1-4 width columns.

• Image height: Each image has its own height, providing a flexible layout and supporting 1-4 height columns.

• Text overlay: Manually drag the slider to adjust the value of the overlay to ensure the text is displayed optimally.

• Media title: Enter a title to be displayed on the corresponding video or image.

• Text: Enter text content for supplementary explanation. Note: The text content appears when the mouse hovers over the image or video.

• Text color: Customize the display color of the text.