This article shows you how to create a visually engaging carousel with text. By following these steps, you’ll learn how to design a carousel with text overlays using GemPages’ drag-and-drop editor.
Step 1: Add a Carousel Element to Your Page
- Open GemPages Editor.
- In the Elements panel, locate the Carousel element.
- Drag and drop it onto your page where you want it to appear.
- Click on the carousel to open its settings and adjust the number of slides (e.g., 3 slides for this example).
Note: If you’re new to using the Carousel element, check out this guide for more details on its general functionality.
Step 2: Insert a Hero Banner for Each Slide
A Hero Banner allows you to overlay text on an image, making it the best element for designing a text-based carousel.
To do this:
- Click on the first slide of the carousel.
- Drag and drop a Hero Banner element into the slide.
- Repeat this process for the other slides.
Step 3: Customize the Background of Each Slide
To make your carousel visually appealing, you can set different types of backgrounds:
- Image Background – Upload high-resolution images. Make sure all images are the same size for consistency.
- Color Background – Choose a solid or gradient color for a minimalist look.
- Video Background – Use a short video to create an engaging effect (ensure it doesn’t slow down page loading).
Note: Best Practices for Background Images:
- Use compressed images to maintain fast loading speeds.
- Images should have the same size.
Step 4: Add and Style Text in Each Slide
Now, let’s add the text:
- Click on the Hero Banner inside the first slide.
- Type your text in the Text Field.
- Customize the font style, size, color, and alignment using the right-side settings panel.
- Repeat for the remaining slides.
Thank you for your comments