How to Create a Slider for Your Docebo LMS Homepage Using ComSlider

If you want to add a professional, eye-catching Docebo LMS homepage slider, but you have no experience with coding, you’re in the right place. In this guide, we walk you through a beginner friendly and complete process: from designing the images in Canva to optimizing them and finally implementing the slider with ComSlider. It’s a simple but effective way to make your LMS (home)page visually attractive and more engaging for your employees or clients.

If you prefer watching this guide, check out our Youtube tutorial here.

🔹 What You’ll Need:

• Canva (Free) – to design the banner images
• Bulk Resize Photos (Free) – to optimize image sizes for fast loading
• ComSlider (Paid) – to create and embed your slider in Docebo

Step 1: Design Banner Images in Canva (No Text Yet!)

We start by creating stunning visuals for your slider in Canva. These will serve as the background images for each slide. Keep in mind:

• Use high-quality images that fit your company branding (e.g., office shots, training scenarios, tech visuals).
• Choose a modern layout with enough open space for later text and button placement.
• Do not add any text or buttons in Canva. We’ll add those in ComSlider.

Tip: Use search terms like “website hero banner,” “modern business slide,” or “clean header layout” in Canva.

Create 3 separate banner images with consistent dimensions (e.g., 1600×500 px or similar).

 

When done, export them as JPG iin the lowest size possible but at the highest quality.

Step 2: Compress Images for Speed

Even though the images look great, they’re likely too big in file size, which may cause long loading times on your LMS homepage.

That’s why we recommend using BulkResizePhotos:

1. Upload your 3 images.
2. Choose “Exact Dimensions” or “Percentage” and reduce the size while maintaining visual quality.
3. Keep experimenting until the size is below 500KB per image without losing too much sharpness.

4. Click on start

Now you have 3 optimized banner images, ready for ComSlider.

Step 3: Build Your Docebo LMS Homepage Slider in ComSlider

Go to www.comslider.com and log in. ComSlider is a beginner-friendly tool that lets you create sliders without coding.

Step 3.1: Upload Your Images

Add your 3 optimized banner images to the slider.

• Make sure they are the same dimensions for a clean transition.
• You can add the images on the left, where you see the circle. 
• After that the images (slides) will appear in the bar, as you see in the SS.
• Drag and reorder the slides as needed.

Step 3.2: Add Captions, Buttons and Links

Now it’s time to customize each slide:

You click on the ‘Set captions’ button, if you want to customize your image.

• Add a title (e.g., “Welcome back, Sarah! Ready to learn?”)
• Add a subheadline or description (e.g., “Your journey to leadership starts here”)
• Add a button with a link (e.g., “Start Course”)

You can customize the font, size, placement, and even add light animations. Keep the layout consistent across slides.

Note: Images must be under 1MB for uploads in ComSlider.

Step 3.3: Make the final adjustments

You can change the colors, size and animation of your slider. I advise you to play around with this, till you get the preferred results.

Step 4: Add the Slider to Your Docebo LMS Homepage

Once your slider looks perfect:

1. Click Embed.
2. Choose the iFrame code (not standard HTML!).
3. Copy the iFrame code.

Go to your Docebo LMS platform:

• Navigate to the Admin Menu.
• Choose Manage Pages.
• Select the page where you want your slider.
• Click on Composer at the top of the screen.
• Add a new widget.

 

• From the widget list, choose “iframe”, then click Next in the down right corner.

In the next screen:

• Leave the Title field empty (to keep the design clean).
• Paste only the URL part of your iFrame code in the provided field.

Example:

• Full code:

<iframe id=”comslider_iframe_20397482″ width=”100%” height=”100%” style=”border:0; margin:0; overflow:hidden;” scrolling=”no” src=”https://commondatastorage.googleapis.com/comslider/target/users/1743772255x3b9f28c2ff32b6128918bf77b4f537ab/comsliderframe20397482.html”></iframe>

• Only the URL:

https://commondatastorage.googleapis.com/comslider/target/users/1743772255x3b9f28c2ff32b6128918bf77b4f537ab/comsliderframe20397482.html

Next:

• Set the height of the widget to match your banner size (e.g., 500px). If you want extra white space, increase the height slightly.
• Click save changes
• And again on the building page.

That’s it! Your new slider is now live on your Docebo LMS homepage.

⚠️ Important Notes

• The slider will not appear in the Docebo mobile app because it doesn’t support JavaScript.
• Most companies use the LMS via desktop, so that’s often not a problem.
• If you’re a more advanced user, you can further customize the LMS layout using Docebo’s CSS editor. I’ve written a separate blog specifically for this—click here for step-by-step instructions.
• To remove the ComSlider watermark from your slider, you’ll need to upgrade to the paid version

📅 Summary

Creating a custom slider for your LMS homepage is a great way to:

• Welcome learners personally
• Promote new or important courses
• Show progress or motivation

It’s easy to do using Canva, BulkResizePhotos, and ComSlider. Follow this guide step-by-step and your LMS homepage will look more professional and engaging in no time.

If you want help, you can always reach out to us, we’d love to help you out!