The latest GenerateBlocks 2.5 alpha release may just be the most exciting one yet for me personally. The new carousel block unlocks capabilities that weren’t possible before without custom code. I jumped right in and built a testimonial slider based on a design from my agency website, and today I’ll show you how to build it too.
My Original Testimonial Layout
Here’s the testimonial section from my site. There’s a highlighted pull quote on the left, full testimonial on the right, and the client’s logo and name underneath. I decided to turn this layout into a carousel using GenerateBlocks.
I made a few small tweaks—added a background color, and now we’ve got carousel navigation to scroll through multiple testimonials.
Getting Started with the Carousel Block
To begin, I opened a new page and inserted a container. I added a class for padding, then added an inner container. From there, I added the new carousel block and selected the “Testimonials” preset.
Right away, it populates with a template layout. But for this project, that layout wasn’t close to what I needed. So I deleted three of the four default carousel items, cleared the content on the remaining one, and started from scratch.
Carousel Settings
Next, I adjusted the main carousel settings:
- Slides per view: 1
- Gap between: 0
- Pagination: Removed (I only wanted the control arrows)
- Keyboard navigation: On
- Grab cursor: On
- Autoplay: Off
Rebuilding the Carousel Item
Inside the first carousel item, I added a grid block. I selected the 1fr / 2fr layout to get that one-third / two-thirds structure.
In the first column, I added a text block and used one of my classes to style it like an H2. I also zeroed out the bottom margin.
In the second column, I added another text block with the full testimonial. Below that, I inserted a container (set to flex) to hold the logo and client name side by side.
I uploaded the logo, resized it to about 150px wide, and added a text block with the client name. I then styled the container:
- Display: Flex
- Align: Center
- Column gap: 1rem
- Padding left: 1rem
- Left border: 1px, dark blue
I also styled the testimonial text as italic and changed the pull quote to the dark blue color.
Styling the Carousel Item Container
I created a global style called testimonial-container and applied:
- Padding: 2rem
- Background: Light blue
- Border radius: 0.5rem
That gave the testimonial content a card-like appearance.
Customizing the Carousel Arrows
I removed the pagination and moved the navigation arrows above the testimonial container. I selected the left arrow, created a global style called testimonial-arrow, and applied styles:
- Background: Dark blue
- Text color: White
- Hover background: Brighter blue
- Hover text color: White
- Shape: Kept circular
I applied the same global style to the right arrow and saved the global styles.
Since we only had one testimonial so far, both arrows appeared grayed out.
Duplicating and Adding More Slides
I duplicated the carousel item twice and swapped in unique testimonial content. Now, when I preview the page, I can scroll through all three testimonials using the arrows.
Adjusting Arrow Position and Mobile Layout
I moved the arrows so they slightly overlap the testimonial container by:
- Padding top: 1.5rem on the control container
- Z-index: 5
- Overflow X/Y: Set to visible
For mobile, I changed the slides per view to 1 on tablet and mobile. Then I previewed in the customizer to check responsiveness—everything looked good across devices.
Final Thoughts
This is just one example of how powerful the new carousel block can be. Huge props to the GenerateBlocks team for making this possible without any custom code.
I’ll be playing with this carousel block a lot more in the future, so keep an eye out for more tutorials to come.
