What are the media and promo grid sections?
These sections use media to showcase promotions, products and brand visuals. Images and videos can be arranged in a variety of ways, making it a flexible and efficient way to communicate with customers.
The promo grid contains many similar settings to the media grid but there are some key differences. In the promo grid, labels can be added to advertise promotions or key events, for example 50% off or price reductions. There is also an option to include additional text and a link under each image or video. In comparison, the media grid is most commonly used when there is less promotional content and the focus is on driving greater brand awareness.
How to set up the media grid section
- Open the Theme Editor and add the Media grid section to the page.
- In the Layout area of the settings, it is important to consider the optimum column and row height configuration for both large screens and mobile devices. This is critical in presenting the section's media effectively. In version 1.3.0 onwards, there is the option to show the media grid as a carousel on mobile.
- In addition, a Section style Color scheme and a Text style Color scheme can be selected. Color schemes need to be set up first in Theme Settings > Colors.
- Either click Add Slide or click on an existing media block.
- Either an image or a video can be selected. If a video is selected, also select an image as this will act as a cover image and display if the video cannot load.
- Within each media block, the Layout settings are again the most critical. In step two of the above instructions, the section widths and columns were set. Here, each media grid block can also have the columns and rows adjusted. Each image or video can span between 1-4 columns wide or 1-3 rows tall.
How to set up the promo grid section
See the How to set up the media grid section above for the basic steps to set this section up. The steps below focus on the additional labelling functionality.
- In the media block settings go to Text overlay - Content settings.
- In these settings up to three lines of promotional text of varying sizes can be added.
- In the Text Overlay - Style settings, the position of the overlay can be adjusted and further text can be added in the Text below media setting.
Why can't I select YouTube or Vimeo videos in the grid?
Initial tests indicate that using MP4 video is more performant than using third party sources. To keep the theme fast, we have limited this to MP4 in the current version of Enterprise.
I have images that appear on their own row at certain screen sizes. How can I resolve this?
Double check the main section Layout settings and make sure that the column and row heights are set correctly. Secondly, do the same in the block Layout settings. It may take some trial and error before you get the optimum layout on all screen widths.