< Back to All Pod Tutorials

Picture Tiles

The Picture Tiles pod is a visual alternative to link to categories or pages.

Picturetiles 1

This trunk-level pod is simple to set up and can link to any page on your website. Multiple features make it a perfect way to add visuals to your website.

Creating your Picture Tiles pod

Picturetiles 2

Picture Tiles pod template

Picturetiles 3
  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.

Content tab

  1. Title: This title will be above your product tiles. This is optional.
  2. URL: Adding a link will turn your title into a link. This is optional.
Add a line
  1. Title: This will be the title for your link, which will appear over your image.
  2. URL: Add your link.
  3. Image: Add your image here.
    - Four images appear per row. If you have more than four links/images, they will split to the next line.

You can add as many products as you like. In “Edit” mode, you can arrange and remove links. To arrange their order, drag the arrows up and down to the left of each product’s name. To remove them, click the trash can to the right.

Picturetiles 4

Options tab

Picturetiles 5
  1. Display text as a button: Instead of having your “Title” appear as white text over your image, flagging this will change it to your primary styled button.
  2. Carousel: Flagging this will style your products in a carousel view – placing all your links in one row and adding left and right arrows (allowing users to scroll through).
  3. Large tiles: Instead of four images/links displayed per row, there will be three larger tiles.
Picturetiles 6

The above example shows all three options selected

Choosing the right images

Images are responsive and change size depending on the screen size. Images change from rectangular to square. Below are examples of the ratio on different screen sizes; the set image is square.

Picturetiles 7
  • Rendered size: 293 x 192 px on a standard laptop screen width (1420dp) Picturetiles 8
  • Rendered size: 230 x 192 px on a standard tablet screen width (1024dp) Picturetiles 9
  • Rendered size: 390 x 246 px on a large mobile screen width (430dp) Picturetiles 10
  • Rendered size: 320 x 246 px on a standard mobile screen width (360) Picturetiles 11

When selecting your best image, please keep it simple to work on different screen sizes. A grey gradient appears at the bottom of the image to help add enough contrast between the text and image, but a light image may still be too bright and not legible.

Alternate styling example

Steersman has an alternative styling with square images for the Picture Tiles pod. These images stay square and only change to a rectangle ratio on mobile screens. The image titles do not display with this option, making it best when highlighting something like a brand’s logos.

Picturetiles 12
Picturetiles 13

If you are interested in this styling for your Picture Tiles, we can easily implement that for you.

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