How to Create a Logo Carousel in Gutenberg Block Editor

Gutenbergkits
4 min readNov 14, 2023

Welcome to the world of dynamic web design, where the right elements can transform your WordPress site. In this tutorial, we’re focusing on a game-changer — the logo carousel. Learn how to seamlessly integrate this engaging feature into your website using Gutenberg block editor, the revolutionary block editor.

Logo Carousel using GutSlider Block
Logo Carousel in Gutenberg Editor

Choose the best block for the logo carousel

In the ever-evolving landscape of web design, creating an engaging and visually striking website is paramount. When it comes to showcasing a collection of logos in an appealing carousel format, the default Gutenberg blocks fall short. This is where custom Gutenberg blocks come into play, offering tailored solutions to meet specific design needs.

GutSlider: all-in-one slider and carousel solution

GutSlider distinguishes itself as the go-to solution for crafting captivating logo carousels within the Gutenberg editor. Here’s why:

GutSlider — All in One Slider Solution for Gutenberg
GutSlider — All in One Slider Solution for Gutenberg
  1. User-Friendly Interface: GutSlider is designed with user-friendliness in mind. Even without prior coding knowledge, you can effortlessly create sliders and carousels. The intuitive interface ensures a hassle-free design process, making it accessible for both beginners and experienced users.
  2. Speed and Lightweight: GutSlider prioritizes performance. It is fast and lightweight, ensuring that your website remains responsive and doesn’t compromise on loading times. This is crucial for providing a seamless browsing experience to your visitors.
  3. Highly Customizable: Tailor your logo carousel to perfection with GutSlider’s extensive customization options. From choosing transition effects to adjusting carousel dimensions, GutSlider empowers you to create a carousel that aligns precisely with your design vision.
  4. Complete Slider and Carousel Solution: GutSlider doesn’t just offer a single-purpose solution. It provides a comprehensive slider and carousel solution, making it a versatile tool for various design needs beyond logo carousels.

Install and Activate the GutSlider

GutSlider free version is completely available in the WordPress plugins repository. So, you can easily find it from your WordPress admin plugin screen page. So, you can easily install and activate it. At first, simply search on the WordPress admin plugin screen page for “GutSlider” and now install and activate it. You can check out a complete GutSlider installation and activation process.

GutSlider Installation and Activation
GutSlider Installation and Activation

Create the Logo Carousel in Gutenberg

It’s time to embark on the journey of crafting your very first logo carousel in Gutenberg. Assuming you’ve successfully navigated the installation and activation process, it’s now your moment to shine. Take the initiative to either create a new post or page, or delve into editing your pre-existing content to seamlessly integrate the logo carousel of your dreams.

Click on the Block Inserter Icon and you can see the GutSlider Blocks category which includes a number of different types of slider and carousel block. Since our aim is to create a logo carousel, simply click on the Brand Logos block to get started.

Logo Carousel Block
Logo Carousel Block

As soon as you click on the Brand Logos block, it will be inserted instantly. Initially, it looks like the following screenshot-

Upload Multiple Client Logos
Upload Multiple Client Logos

I allows you to upload your clients logos, you can either upload the logos directly or upload from your Media Library.

Let’s add multiple loads as per your need. Once you add the all logos, you will see the initial carousel look like the following screenshot:-

Logo Carousel
Logo Carousel

So, you have successfully added your client logos and created the first logo carousel in Gutenberg. Definitely, you will be interested in customizing the default logo carousel, so let’s start customizing it.

Customization

GutSlider is highly customizable with a lot of customization options, I have customized the slider a bit and got the following result:-

Logo Carousel made with GutSlider
Logo Carousel made with GutSlider

Conclusion

In conclusion, when aiming to enhance your website with a visually appealing logo carousel in Gutenberg, a custom block is the key. GutSlider, with its intuitive design, performance optimization, and comprehensive features, emerges as the top choice, simplifying the process of creating a stunning logo carousel that leaves a lasting impression on your audience.

--

--

Gutenbergkits

An excellent team of WordPress, Gutenberg and Shopify experts in development. Gutenbergkits offer Ultimate WordPress Solution and custom services. Hire Us