Course card images play an important role in visually representing your courses on the Learning Portal. These images appear in the course catalog and dashboard, making it easy for learners to identify and engage with your courses. Follow the steps below to add or update a course card image.
- Visual Appeal: Create an engaging first impression by adding visual context.
- Branding: Reinforce your organisation’s identity through consistent colours, logos, or themes.
- Thematic Representation: Reflect the subject matter or theme of the course.
- Learner Engagement: Enhance the learner experience by making the course visually distinct.
Step 1: Access the Course
Log in to the Learning Portal with your administrator or course staff credentials.
Navigate to the course you want to update from your dashboard.
Step 2: Open the Schedule & Details Screen
Inside the course, click on the Schedule & Details option in the navigation bar.
This screen contains key settings for your course, including the course card image.
Step 3: Add or Update the Course Image
Scroll to the bottom of the Schedule & Details screen to find the Course Card Image field.
Click the Upload Image button.
Image Requirements:
Square or a rectangle ratio.
Depending on your Learning Portal theme, you may need to use an image that fits without impacting the course information texts (title, program, dates, instructors, status …)
Accepted Formats: JPG, PNG.
- File Size: Maximum 500 KB (recommended: 120 KB for faster loading).
- Ensure high-quality compression to retain clarity while keeping file sizes small.
Save your changes by clicking the Save button at the bottom of the screen.
Step 4: Verify the Image
Return to the Learning Portal and check the course catalog or learner dashboard.
Confirm that the new course card image displays correctly and meets the required specifications.
Tips for Effective Course Card Images
Keep It Professional: Use clear, high-quality images that reflect your course content.
Maintain Consistency: Align your images with your branding to create a cohesive look across your courses.
Optimise for Speed: Ensure images are appropriately compressed to minimise loading times.
Design Guidelines
To ensure your course cards look great on all devices and align with your brand, this guide provides key requirements and tips for creating effective background images.
By following these guidelines, you can avoid issues like unreadable text or poor alignment, ensuring your content always displays beautifully across all devices, reinforcing your branding and ensuring a seamless user experience.
Why Background Images Matter
Background images are a key element of your course cards, helping to reinforce your branding or the course subject.
Incorrectly formatted images may overlap or compete with important text, such as the course title or program name. making them harder
to read or less professional.
Course card with background image
Please note: If branding information is not available or desired, the cards will use the default primary colour set for your tenancy by default.
Key Design Requirements
Image Size
Placement and Composition
Backgrounds attach to the bottom-right corner of the card by default.
Keep all important visuals (logos, designs, etc.) confined to the bottom-right corner to avoid overlap with card information like:
Course Title
Program Name
Additional details (e.g., duration, instructor name).
Aspect Ratio
Use a rectangular ratio for optimal alignment across devices and screen sizes.
Visual Simplicity
Opt for simple colours or subtle visuals that reinforce branding or course topics.
Ensure details remain legible in all resolutions (e.g., mobile and desktop views).
Example Layout
Design Zones
Safe Zone (Bottom-Right): Place key visual elements.
Info Zone (Top-Left): Reserved for text; keep backgrounds clean in this area.
For further assistance, contact the Customer Success Team.
FROGED