gutslider cyber monday offer
-
DAYS
-
HOURS
-
MINUTES
-
SECONDS

How to Create Logo Carousel in Gutenberg

A logo carousel helps build strong trust in your business among users. The majority of business owners prefer to have a section on their website dedicated to showcasing the logos of their clients because of this. Therefore, this article can be a great resource for you if you are looking for a way to create a logo carousel in Gutenberg. I have gone into great detail about each point.

We used a straightforward, lightweight WordPress block plugin called GutSlider to create an incredible logo carousel in Gutenberg. To create a logo carousel in Gutenberg editor without knowing any code, read this article through from beginning to end.

GutSlider: Best Block Slider

GutSlider is a feature-rich yet lightweight WordPress plugin that helps to create beautiful sliders and carousels. It has an intuitive·customizable interface and CSS animations, etc.

chosenI am amazed by GutSlider’s features. I hope you can avoid it. To help you grasp why we selected it for the Gutenberg logo carousel, let us examine some of its primary features.

Key Features

  • Optimize your site’s performance by loading scripts and styles only when the slider is active, reducing unnecessary resource usage.
  • Beyond images, embed text, videos, and even dynamic content like forms or buttons within each slide for a truly interactive experience.
  • Customize your slider’s layout, navigation, and pagination with a user-friendly interface that requires no coding knowledge.
  • Designed exclusively for Gutenberg, ensuring seamless integration and compatibility with other blocks.
  • Enjoy fast page load times, even with multiple sliders in use, thanks to GutSlider’s focus on minimal resource usage.
  • Rearrange and customize slides easily using the drag-and-drop interface.
  • Sliders automatically adjust to various screen sizes, delivering a consistent experience on desktop, tablet, and mobile.
  • Powered by Swiper JS, offering fast, touch-responsive sliders without relying on bulky jQuery libraries.
  • Modify transitions, set custom delay intervals, and select from a range of animations to suit your design needs.
  • Add polished animations and unique transition effects, all easily configurable from the settings.

Installation and Activation

The installation and activation process is very simple, as with other WordPress plugins. You can install the GutSlider plugin directly from your admin dashboard. To do that, simply follow the below steps:-

  • Login to Your WordPress Dashboard: Start by logging into the admin area of your WordPress website using your credentials.
  • Navigate to the Plugins Menu: In the left sidebar of the dashboard, find and click on “Plugins.” You can also hover over it to reveal the “Add New Plugin” option.
  • Search for GutSlider: In the search bar located at the top right corner, type “GutSlider”.
  • Install the Plugin: When you see the GutSlider plugin in the search results, click the “Install Now” button next to it. The installation process will begin.
  • Activate the Plugin: Once the installation completes, the “Install Now” button will change to an “Activate” button. Click on “Activate” to enable the plugin on your site.

Add Logos Block in Editor

To create a logo carousel in Gutenberg, we have to use the GutSlider’s Brand Logos block. First, we need to insert the Brand Logos block in the Gutenberg editor.

You can add the block in one of the two ways:

With Shortcut

In the placeholder paragraph block, simply type forward slash (/) and brands logos. It will suggest the Brand Logos block; simply click the block, and as a result, the block will be inserted instantly.

From Blocks Inserter

Click on the Blocks Inserter plus (+) icon. Consequently, the blocks panel will open. Now you can either search for logos or go to the GutSlider Blocks category, and you will find the Brand Logos block. You can either drag and drop the block in the editor or just click on it. When you do this, the block will be immediately added to the editor.

Upload Logos

Multiple logos can be uploaded using the Brand Logos block. You have the option to add the logos from your dashboard media library or upload them straight from your PC. Therefore, to upload the logos, choose one of these two options.

A default logo carousel will be created immediately after you upload your logos. The following Logos carousel will appear if all of these steps are correctly followed:

Add or Remove Logos

The logo carousel may occasionally need to have items added or removed. No worries, the plugin allows you to modify the logos carousel, so you can easily add or delete any logos item. To edit the logo items, you have to click on the Edit icon at the toolbar button.

Add New Brand Logos

Once you click on the Edit icon in the toolbar, it will open the media gallery, where you can remove or add any logos. If you want to add any new brand logo, you have to click on the Add to Gallery link.

As a result, the media library will be opened. Now, select or upload the image or images that you want to add to the brand logo carousel.

Remove brand logo

If you want, you can also remove any brand logo from the logo carousel. To remove any logos, simply click on the Edit icon at the toolbar button. As a result, it will open the edit gallery. Now click on the expected brand logo that you want to remove from the list. Consequently, the selected brand logo will be removed. It looks like the following screenshot:

Customization

Customization is the process of adapting or altering something to fit specific needs, preferences, or requirements. It enables users to personalize a product, service, or system to better align with their unique goals or tastes.

General Settings

  • Show Caption: When this option is enabled, the caption for each logo will be displayed. When it is disabled, the captions will be hidden.
  • Link the Logos: When this option is enabled, the logos will be linked to their respective websites. When it is disabled, the logos will not be clickable.

Slide Container

  • Height: Set container height in px, em, or vh.
  • Padding: Add inner space (top, right, bottom, left) in px, em, or rem.
  • Margin: Add outer space (top, right, bottom, left) in px, em, or rem.

Carousel Options

  • Columns: Select the number of items displayed side by side in the carousel.
  • Columns Gap: Adjust the spacing between columns; increase for more space, decrease for less.

Slide Options

GutSlider offers flexible slider options for full customization:

  • Infinite Loop: Continuously cycles through slides.
  • Autoplay: Plays slides automatically.
  • Keyboard Control: Navigate using keyboard keys for better accessibility.
  • Mouse Wheel Control: Scroll through slides using the mouse wheel.
  • Navigation: Show or hide slider navigation.
  • Pagination: Show or hide pagination, with various types available.

Slide Effects

In Gutenberg, slider effects boost visual storytelling with dynamic transitions. Here’s what each effect does:

  • Flip: 3D flip transitions between slides.
  • Fade: Smooth opacity changes for subtle effects.
  • Slide: Moves slides horizontally or vertically.
  • Cube: Rotates slides like a 3D cube.
  • Coverflow: Overlaps and shifts slides for a cover flow animation.

Navigation

  • Position Type: Choose to position navigation icons inside or outside the slider.
  • Position: Select specific icon placement: “Center Center,” “Top Left,” “Top Right,” “Bottom Left,” or “Bottom Right.”
  • Custom Navigation Icon: Enable to upload a custom icon; disable to use default icons.

Pagination

  • Pagination Type: This option allows you to choose the type of pagination that will be used to navigate the slider. The available options are “Bullets” and “Fraction.”
  • Bullets: When this option is selected, pagination dots will be displayed at the bottom of the slider.
  • Fraction: When this option is selected, a fraction will be displayed at the bottom of the slider to indicate the current page and the total number of pages.
  • Dynamic Bullets: When this option is enabled, the pagination dots will change color to indicate the active page. When this option is disabled, the pagination dots will all be the same color.
gutslider pagination

Style

Gutslider is highly customizable; it allows you to customize everything you need. You can add container, border, border tedious, paddings, background, color, margin, logo, solid color, elements like color, navigation, and pagination. It offers the following customization options:

  • Color: Set element colors.
  • Background: Customize backgrounds with colors or images.
  • Typography: fine-tune text appearance.
  • Font Size: Adjust text size.
  • Font Family: Select font type.
  • Font Weight: Set text thickness.
  • Font Style: Use italics or other styles.
  • Spacing: Adjust space between elements.
  • Width/Height: Define element dimensions.
  • Icon Size: Scale icons to the preferred size.
  • Border Style: Choose a border type (solid, dashed, etc.).
  • Border Radius: Round element corners.
  • Padding: Set internal spacing within elements.
  • Margin: Control space around elements.
  • Navigation: Controls to move between slides or sections.
  • Pagination: Indicators (dots or numbers) showing slide position.

Conclusion

The Logo Carousel block in Gutenberg is a powerful tool for displaying your brand’s logos or partners in a visually appealing and engaging manner. You may easily change the appearance and functionality of the carousel by adjusting its settings to meet your specific needs and design preferences.