Skip to main content
About Image Cards SPT Collection
Updated over a year ago

This collection of site page sections are versatile for any type of page and use case. Great for linking to other pages, categories or products or for describing something using a visual element.

  • 13 sections included

  • Cards can be clickable or just for display

  • Options to control number of columns and many other style and layout choices

  • Part of a suite of Site Page Templates where each month we release a new collection

Sections included with Image Cards SPT Collection

The following sections will be added to your site when you install this SPT Collection and will become activated when you add the core Site Page Templates section to your page as well. Be sure to view the Site Page Templates Getting Started Guide.

๐Ÿ’ฅ PRO TIP: A well-designed set of image cards can create a visually appealing layout, immediately grabbing the viewerโ€™s attention. High-quality images that are relevant to the course modules can induce curiosity and encourage users to read more about each section. Image cards help break down the information into easily digestible chunks. People are more inclined to scan information on the web, and the card layout enables this by offering bite-sized summaries alongside compelling visuals.

Image Cards (01) Heading On Image Style
โ€‹
This section puts a heading on top of the image with a nice gradient overlay. A short description goes below the image. You can also place the heading under the images and optionally make them clickable.

Image Cards (02) Heading Only Cards With Hover Button
โ€‹
These image cards have a button when you hover over them and can make perfect category cards. Will this collection you can control the number of columns, font sizes and more

Image Cards (03) Horizontal Cards On Side of Text
โ€‹
This section if image cards places the cards on the side. You have the option of controlling how much space the the text and cards take.

Image Cards (04) Full Info Card Style
โ€‹
This section of image cards puts a heading and subheading under the image. As like with all image card sections, you can set how many columns you want, font sizes and many other style options. Each card also has the option of being clickable or being just informative

The image card section is great for category cards in particular. Using a small image, the focus is more on the heading and optional link. As with other image card sections, you have complete control over the number of columns and. font size tweaks.

Image Cards (06) Image & Icon & Short Heading
โ€‹
This image card section is just like Image Cards (05), except you can place another image inside a circle to act as an icon. Great for category cards

Image Cards (07) Heading Only On Image
โ€‹
This image card section is great when you want to focus on the image. It allows you to put just a heading that would link to a category, product or any page. In this example we choose to put the cards in two columns, but like with other Image Card sections, you have the option to choose how many columns you want

This is another great image card section where you want to have clickable cards with a small image. Great for category cards or other general uses. We choose to put this section in four columns, but you can choose to use other options as well.

Image Cards (09) Heading Over Image (Small)
โ€‹
In this image cards section, the heading is placed right on top of the mage.The image automatically gets an overlay that you decide on. The image automatically fills in the space and gets cropped.

Image Cards (10) Heading Over Image with hover effect (Small)
โ€‹
This image cards section is just like the previous one except when you hover over the image, a link text appears


We love this image card section because it packs a ton of information into a small amount of screen real estate. Perfect for describing features, course instructors or even testimonials.


These stylish image cards put an image into a circle that has a customizable colored border. You can use these for information only to describe something or include a link and make them clickable.


This gorgeous image card section puts the image cards front and center. It's not until you hover over them do you see the text associated with them. We choose to use three columns for this section, but it is up to you. The images will automatically fill each card and get cropped.

๐Ÿšจ DID YOU VIEW THE SITE PAGE TEMPLATES GETTING STARTED GUIDE?

Using any section from a SPT Collection requires installation of this individual SPT Collection but also the core Site Page Templates PowerUp. You also need to make sure to include the core Site Page Templates section on your page.

Did this answer your question?