Understanding page module types

Page modules define the content that is displayed on a site page. There are several module types:

• Content Grid

• Content List

• Text

• Video

• Image

• Header

• Banner

• Code

View live examples

---

Module types

Content modules

Content modules display information from your Product catalogue across your site. This includes: Products, Product Formats, Tracks, Artists and Labels.

You can choose what content you want to be listed either by selecting an existing Tag (to list the tagged content) or by adding items manually to the module.

Content Grid

Sizes:

• 8-column

• 6-column

• 4-column

• 3-column

• 2-column

• Full-size

Content List

Sizes:

• Small

• Medium

• Large

• Full-size

The size affects the layout of the content on the page, as well as the associated level of detail displayed for the items.

The grid layouts are responsive, so that they show fewer columns when moving down to mobile and tablet size screens.

Text

Simple text modules allow setting a Heading and Body text.

The heading will appear above the body in a larger font size with the heading styles defined on the Site Design Settings.

The body text input allows text formatting for bold, italics, links, lists, and more. Help on how to do this is shown by toggling the panel below the text box.

All modules allow text to be set for a heading or body text.

Image

Images may be uploaded to a module. Alternatively, existing images can be tagged, and the tag used to populate the module.

Image modules will output images in a grid.

Note: It is not possible to centre image grids. Please use a Banner module instead.

Video

Videos can be added by referencing or embedding a video from a video streaming platform. Alternatively, existing videos can be tagged, and the tag used to populate the module.

Video modules will be shown horizontally centred on the page.

Banner

Use a banner to link to a page on the store, or to an external URL.

Upload an image to be displayed as the banner background, and add text to describe the content you’re linking to. Setting a URL on the image will define where the banner item links to.

For smaller module sizes, banners will appear centred on the page.

The aspect ratio of the uploaded image will be preserved – the image won't be cropped. However, this means that square or portrait-orientation images will push content down the page and may be cut off when viewed on a wide (desktop) screen. We recommend using a landscape-orientation image that works on both desktop and mobile screen sizes.

You can add several images to a banner, each will be listed vertically.

Carousel

By adding a custom class to a Banner module, you can set images to show as a carousel.

Adding a carousel

Headers

Use a header module to show a large page heading. The heading will appear with the heading styles defined on the Site Design Settings.

You can add images to a header in the same way as for a banner module.

Code

Code modules accept blocks of HTML code, so can be used for iFrame and form embeds. For instance, for mailing list sign-up forms.

How to add a mailing list embed