Animated sliders are a fantastic way to make your course content dynamic and interactive. With Compozer, you can add images, text, and backgrounds, while controlling slider behaviour and appearance. Here’s a step-by-step guide:
Step 1 – Add an Image Slider Block
Go to the Blocks section in Compozer and select Image Slider.
Drag and drop the block onto your canvas to begin building your slider.
Step 2 – Choose a Slider Style
In the settings panel, explore the available slider styles.
Pick the one that best complements your course design and content layout.
Step 3 – Configure Slider Settings
Adjust how your slider behaves and looks:
-
Loop: Enable continuous slide transitions.
-
Auto Play: Let slides move automatically for a seamless experience.
-
Autoplay Interval: Set the time (in milliseconds) between slides to control pacing.
Step 4 – Manage Image Size and Height
Use the Height setting to adjust the slider block to fit your layout.
Step 5 – Customize Image Display
In Image Size, choose:
-
Cover: Fills the block while maintaining aspect ratio.
-
Contain: Fits the entire image within the block without cropping.
Step 6 – Style the Slider Box
Choose a Box Style — square, round, or no box — to match your design.
Optionally, adjust the box colour to align with your branding or course theme.
Step 7 – Add Background Colour or Image
Enhance each slide by adding a background colour or background image.
This allows for more visually engaging slides and strengthens your course aesthetics.
Step 8 – Preview and Publish
Preview your slider to ensure it looks and behaves as expected.
Once satisfied, publish your course so learners can interact with the new Image Slider.
By following these steps, you can create engaging, interactive image sliders that improve learner engagement and make your courses visually appealing. Experiment with different styles, backgrounds, and settings to design sliders that truly captivate your audience.
Tags:
tag:compozer-tutorial tag:image-slider tag:interactive-content tag:course-design tag:elearning tag:blocks