< Back to All Pod Tutorials

Category List Banner

Categorylistbanner1

The Category List Banner is a visual way to display your categories. Add a background photo and a link to your categories, and the Category List Banner pod will be formatted perfectly. Category List Banner pods can be added to Page Section or a Grid Cell.

The Category List Banner pod displays an image and a primary button linking to a category. The button is shown at the bottom right of the box. If the category has sub-categories, they will appear as links on the pod’s left.

The image for this pod is meant to be a background image. Please keep this in mind and test to make sure your image works while resizing on multiple screen sizes and that your title, links, and button are legible.

Creating your Category List Banner pod

Categorylistbanner4

Category List Banner pod template

Categorylistbanner5
  1. Internal Name: This title will not be visible on the website; it is only used for organizing your content.
  2. Share: If you flag this pod, your chosen content and settings will be saved to be added easily throughout your website. *If you need to change this pod, you can adjust it in one instance, and it will automatically be updated throughout the site.
  3. Image: Insert your background image.
  4. Title: Include a title for your category. This is optional.
  5. URL: Add in a category or subcategory ID. The category’s ID can be found on the category’s URL or the category’s database URL. To add in your category ID, add a forward slash, the letter “c” (which stands for “categories”), another forward slash, and the category ID number.
    Categorytiles 5 The above screenshot shows the category ID on the published page URL Categorytiles 6 The above screenshot shows the category ID on the database URL
  6. Button CTA: Add a CTA for your button. This button will go to your category page.

Below is the Category List Banner template filled out to create the example at the top of the page.

Categorylistbanner6

Options tab

Drop shadow: Flag to add a drop shadow around your Category List Banner.

Examples

Example 1

Below is the example at the top of the page viewed on a mobile screen. Remember to keep your text legible!

Categorylistbanner2

This is the full image used for the banner. It took a few tries, moving the placement of the glove, to ensure that it did not obscure the text.

Categorylistbanner7

Example 2

This example uses Grids and three Category List Banners. Each Category List Banner has the drop shadow flagged, and the two on the right show examples of categories without subcategories.

Categorylistbanner3

Save and publish

To see your updated content on your website, you need to publish your page. In the Websites App, click on the Publish tab. Once there, click the Create button. On the next screen, you will select the website you want the page to publish to (if you have multiple websites) and check the Pages checkbox. Click Save at the top, then click Start.

Pagecreate6