The Cards section is generally used on the All Courses Page or the Student Dashboard Page. You may also use it on any page you like, but be sure to set the Section Type setting to something other than AutoYou will need to add the Cards section along with the Sidenav Menu on each page and configure them separately. While on the Student Dashboard page, clicking on a category link will automatically display courses for that category from the student dashboard. If the student is not enrolled in any courses for that category then none will appear.
In order to to see your courses appear, you must add a Cards section to the page after you have added the Sidenav Menu section.
There can be more than one Cards section on the page, but there should only be one Course Card section that has a Section Type = Auto
After adding the Cards section to your page, you will be able to configure:
The type of section this is
Text used in the heading part of the section
Text used for the filters part of the section
Card style, and text used on the course card
Managing the section type
In some cases you may want to have multiple Card sections on a page. For example, let's say you have a membership with a free trial. For free trial users, you would want to "tease" the content they are missing by adding a section Cards section that is set to upsell them to the membership bundle.
Section Type: Auto generated cards
This type is only used on the All Courses and Student dashboard pages and on these pages, you should always have one of the Cards sections added to the page.
Open the Section Type settings group and make sure the section type setting is set to Auto
When used on the student dashboard page, the users enrolled courses will be shown
When used on the all courses page, the public courses will be shown
The Auto section type will always appear above any other Cards section you may have added to the page and also will always appear below any Sidenav Banner (Slider) section
Section Type: Upsell Bundle
This type is used to display a list of courses in a bundle with the intention of "teasing" content that the user does not have. Ex: You want to upsell individual courses or you want to upsell a membership bundle.
Open the Section Type settings group and make sure the section type setting is set to:
Upsell Bundle (Any): Only courses that the student is not enrolled in will show. If they are enrolled in all of the courses in the bundle, then this section will not be shown.
Upsell Bundle (All): This section will only show if the student is not enrolled in all of the courses in the bundle
Choose the bundle in the Upsell Bundle setting. (The bundle does not have to be published). Make sure you have courses added to your bundle
Set the Link Type to Course Landing if you want the cards to be linked to the course landing page
Set the Link Type to Other page if you want the cards to be linked to a different page. Then set the Other page setting to the page you would like the cards to be linked to.
Also be sure to set both the Default Heading and Category Heading for this section
The filter settings are ignored for this type of section as a filter and search is not added to the section, only the cards will appear.
Managing the section headings
This setting group allows you to manage the text that appears on the section. Keep in mind that this
Open the Section Headings settings group
Change the Default heading setting to control what text appears initially when the page loads
When viewing a category or subcategory page, make sure the Category heading setting includes the SmartText: [AUTO] so that it shows the name of the category. You can decide if you want to append or pre-pend it with other text. example: [AUTO] Courses => Dog Training Foundation Courses
Set the No results setting to include the text you wish to display when a category or search result has zero course cards to display
Changing or disabling the filter default text
You may wish to change the default text used in the course search and filter section of the page
Open up the Filter Headings setting group and update the text that you wish to use
Optionally disable this section by unchecking the Show filter headings box
The filter options are only available on the Student Dashboard. On the All Courses page, the search will still be available.
Card Style & Text Options
There are a few different styles of course cards available and you also have options to change text that will appear along side your course card image.
Text Overlay Card Style
This card style is great when you have a picture for a card that gives a visual clue to what the course is about. It will use your course card image as a background and automatically crop the image to fill the space based on the height of the card you choose. It will also overlay the name of the course along with a gradient fill so that the course name stands out.
Open the Cards settings group and change the Style Type setting to Text Overlay
You can also change the course card height by using the Text Overlay Card Height setting
When using the Text Overlay card style, the course card image will "fill" the entire area of the card. Depending on the card size, your image may be cropped. If you are using course card images that have text "in the image", then you probably want to use the Image Only option below
Text Under Image Card Style
If you want a more traditional card style, you can choose the Text Under Image setting and have the course card image appear above the course name. You can also optionally add the course description to the card as well.
Open the Cards settings group and change the Style Type setting to Text under image
You can also change add the course description to the card by checking the Show course description setting
When using this option, the image will be shown in its entirety.
Image Only Card Style
Image only cards are perfect when your image already has the course name. Usually this is done to make your names more interesting on the card image. In this case, you most likely want to use the Image Only option.
Open the Cards settings group and change the Style Type setting to Image Only
When using this option, the image will be shown in its entirety.
Card Badge Settings
The "badge" is an overlay on top of the image to have an icon and some text to help the user make a decision on what to do. You can control the location of the badge as well as if you want to hide them completely. You can also change the text that appears as well.
Choose the location of the badge by selecting the Badge Type setting
If you do not want to use this, then choose None
Bottom Left and Bottom Right are not supported when the Card Type is Text Overlay
To change the text that appears on the badge, update the text for the various conditions that the course could be in
Card Link Settings
In some situations, you may want to have your course cards that are displayed on the Student dashboard to go to your course landing page instead. You can change the link that is used by changing the Link Type (Dashboard) setting
To have the course cards go directly into the course, choose "Resume" for the Link Type (Dashboard) setting
To have the the course cards go to the course landing page, choose "Landing" for the Link Type (Dashboard) setting
This setting is only available on the Student Dashboard page with an section type setting of Auto
Advanced Style Tweaks
Card Badge Color Changes
Add a Swiss Embed Code to the page and then paste this code snippet to change the color and font behavior of the badge that appears over the course cards
<style>
/* Card badge */
.cards-section .cat-course-card .post__video {
background-color: #FF0089;
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
}
/* Card badge icon*/
.cards-section .cat-course-card .post__video i{
color: #FFFFFF;
}
/* Hover */
.cards-section .cat-course-card .post__video:hover {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #FF0089;
}
.cards-section .cat-course-card .post__video:hover i{
color: #FF0089;
}
</style>