Logo Carousel Module Overview

Getting started

Divi Logo Carousel module is a beautiful logo showcase that allows you to display a group of logo images. It’s very user-friendly and convenient to manage & display the logo images on your Divi website. It has autoplay, ticker mode, loop, dot, arrow, and many more features. Let’s drive in and see details about this beautiful logo carousel for Divi.

Find the logo carousel module within the list of modules and click to add it. You can also search for it. Once the module is added, you will find three main options: Content, Design, and Advanced.

Global Setting – Logo Carousel Settings

Global settings are referred to as the setting can imply to the whole module (every element). If you would like to style each item separately, then click here.

Divi logo carousel Content Options

The content option consists of several options, like adding new items, carousel settings, background, etc.

The first option available in the content area is adding a new item. Every new item has three option areas (Content, Design, and Advanced) to give each item a special look separately. Those options are for individual items only. You have the option to design the carousel all at once. We will go through the whole module setting first; then, we will look at the options available for individual items.

Add New Item: Here is the option to add your logo. You can add as many as you want. Individual items do have settings, which are explained here.

Carousel Settings

Here we have settings that can control things like how many items you would like to show on a particular device. You can define the number of items for desktop, tablet, and mobile. You have the option to control the width of items with the Item max-width option. The very next option is to define the space between the logos. If you are using Autoplay, then the next option, animation speed, can define your autoplay’s speed.

Loop: Turning ON loop will make the carousel repeatable for an infinite time.

AutoPlay: Once you reach the carousel section, it will play automatically if this feature is turned ON. If you turn this ON, some new feature will show up underneath this. You can adjust the duration of your autoplay.

Pause on Hover: This feature will allow your autoplay to pause when you hover over the carousel.

Arrow Navigation: Arrow navigation will show clickable arrows to navigate to the next item of your carousel.

Dot Navigation: Dot navigation will show clickable dots underneath your carousel based on the item number you have.

Ticker: If you turned ON the ticker, your carousel would play smoothly without delay. Turning this ON will show another animation speed option and ticker pause on hover. It will also disable some options like an arrow, dots, etc.

Link

This link option is to link your whole module.

Background

This background option is for the whole module. Here you also can use color, gradient, and image for your background.

Admin Label

Divi Logo carousel styler can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that is convenient for you.

Divi Logo Carousel Design Options

Now it’s time to design the logos with an extensive collection of design resources.

Image Settings

Here you have the option to customize your carousel image. The first option under image settings will allow you to customize your image width. You can also vertically align your image in three different positions. You can also make your image container equal in height by turning the next option ON.

The next option we have is the filter option for your logo’s. You can change the hue, saturation, brightness, contrast, invert, sepia, opacity, blur, and 16 different image blending modes. Here is a guide on how to use an image filter.

Arrow Color

This simple option will allow you to change the color of your arrow icons and their background. You can only add solid color here.

Dots Color

Here you can change the color to your dots. You can choose different colors for your active dot and inactive dots.

Sizing

Sizing options help to create a responsive design. Here you have the option to control the width and height of your logo carousel module. This option is available in the regular Divi module and does the same thing for all modules.

Spacing

Spacing is one of the core features of our modules. Default Divi modules come with two spacing areas one is for margin, and another is padding. We break this down into the individual elements in our module. You can use margin padding to the wrapper. You also have the standard margin padding.

Border

Logo carousels also have a border option, which will apply to each element of your carousel. You can add rounded corners, styling, color options to your borders.

Filters

Here is another filter that comes default. This filter will apply to your whole module, including arrows, dots, etc.

Transform

With the help of transform, you can move elements around, scale them up and down, rotate on three different axis, skew, and adjust the transform-origin with ease.

Animation

Every Divi module, row, and section comes with advanced animation options. This logo carousel module also has this feature to explore.

Divi Logo Carousel Advanced Options

If you are a developer and want to use your custom CSS to expand design possibilities, you can venture further into the Advanced tab. Here is the list of the option you got-

CSS ID & Classes

CSS ID: Assign a unique CSS ID to the element used to assign custom CSS styles from within your child theme or Divi’s custom CSS inputs.

CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child theme or from Divi’s custom CSS inputs.

Custom CSS

There are three custom CSS areas in the Divi logo carousel module you can target and set your custom CSS code there. In each CSS input box, there is a sign “?” that will tell you which class has been targeted.

Visibility

Divi Builder offers the option to hide your chosen modules on specific devices. This option is also available in the Divi logo carousel module.

Transitions

If you are using any animation or hover effect, then this duration, delay, and the curve will define your transition length, time, and way. This is also available in all modules.

Position

Here you can take full control over the relative, absolute, and fixed position. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. This feature is available on every Divi module and works the same for all.

Item Setting – Logo Carousel Item Settings

Like global settings, individual items have three main options: Content, Design, and Advanced. Let’s see what we have here.

NOTE: ANY STYLE YOU GIVE HERE WILL OVERWRITE THE STYLE OF GLOBAL SETTINGS.

Logo Carousel Item Settings Content Tab

Here in the content tab, you have all options to add images, link background, etc., for your carousel Item.

Image

Here is the option for you to add an image/ logo for your carousel. You also have the option to add image Alt text for your image. This is good practice for Search engine optimization.

Link

This link option links your Carousel Item(Image or Logo) to a new page or section. It comes with the module link target option.