Divi logo slider

Jul 24, 2020 | Divi Resources

Create Divi logo carousel easily with Divi Plus logo slider module

What makes a business website good that provides service in the market? It’s their portfolio and how they present it. And Divi logo carousel on Divi theme business sites adds +1 in portfolio presentation.

Therefore, in this blog post, we’re going to see how we can create logo carousel without using any logo slider html or CSS. Plus, in the end of the post, we’ll also take a look at Divi client logo slider demos.

Let’s start creating Divi logo carousel.

Requirements

To create attractive and engaging logo carousel in the Divi them, first we need to download the Divi Logo Slider module of Divi Plus plugin. You can get this Divi logo slider module and other modules of Divi Plus plugin here.

Once downloaded the module, upload it your WordPress site, and install it.

Divi Plus installation

After installing the plugin, make sure you activate it in the subsequent window. Plus, you also need to make sure that logo slider module is enable in the Divi Plus modules’ panel. For that, go to Settings >> Divi Plus, and enable logo slider, if not already.

Logo slider with other modules in Divi Plus panel

Layout used

For this tutorial, I have used the Software Marketing layout available in the Divi premade layouts library. It comes a section that displays client logos, which I am going to replace with logo slider module. You can, too, use that if you want.

 

Step 1: Insert the Divi Logo Slider module

Divi software marketing layoutThe above step successfully added the client logo slider module in our Divi theme. Now, to create logo slider, insert DP Logo Slider module on a page. In my case I have added it right below the section where Software Marketing layout has client logos.

Insertion of Divi Logo Slider module

Step 2: Add logo items

Once module added to the page, you get the module setting window. Here, you can add client logos and make other content customizations.

Logo slider content setting

By clicking the Add New Logo, you can add your client logos. For this tutorial, I have added 10 logos. Upon adding each new logo, it will open up individual setting.

Add new logo in Divi Logo Slider module

Upload logo, provide right Alt text, and apply background changes

The individual setting provides you all three major settings that comes with the Divi modules: Content, Design and Advanced. The Content tab allows you to add Alt text, image, link, and apply background changes. So, you can easily make changes to each logo you add to the slider.

Individual logo setting content tab

Customize spacing, border, and apply box shadow and filters

Design tab of the individual logo provides you with the option to customize logo image’s padding, border, box shadow and filters. Using this option, you’d be able to make your logo images more distinctive and attractive.

Logo slider individual logo design tab

Step 3: Set slider content

Using slider content setting of the Divi Plus Logo slider module, you can choose how many logos you want to display per slide. Currently it allows you to set up to 10 logos per slide.

Divi Plus logo slider content settings

However, in this blog post I’ve selected 4 logos per slide. For best possible visual representation of your logo slider, it’s recommended that you keep the logo number at minimum. Because having more logos per slider can look bulky. Therefore, it’s in one’s best interest to display less with modern design and style which would flourish further.

Logos in Divi logo slider

Step 4: Design customization of Divi logo carousel

In addition to the content settings, Divi Plus Logo Slider module has pretty useful design settings. Using these available design options, you can make your Divi logo carousel look more beautiful and engaging. Plus, each setting is so intuitive that you’d find yourself at ease when tweaking your logo slider.

Slider Arrow customizations

Under this setting of the Divi Plus Logo Slider module, you can select whether or not to display arrows on the slider. Moreover, using this same setting, you can bring changes in the appearance of the slider arrows like their size, color and hover effects.

Logo slider arrow settings

Apart from the above options, it also provides you with the features that can help you to select arrow shape and apply further customizations. Like, arrow background, and its border with color.

Logo carousel arrow shape settings for Divi

Slider Pagination

Using the Slider Pagination setting of the logo slider module, you can select to display pagination on the slider. And apply different color for active and non-active pagination dots.

Divi logo carousel pagination settings

Slide Styling

With slide styling option, you can adjust the placement of the image inside the logo content. The available slide image alignment are Top, Bottom, and Center.

Slide image alignment in Divi logo slider

Apart from logo image alignment under this setting you can also adjust the width and height of the image. So, if you use multiple Divi logo slider, you can make them look different. The below picture depicts this option more clear.

Logo slider height and width settings

Animation

The most beautiful thing you can do with your logo slider is applying animation effects. And Divi Plus Logo Slider has many fantastic options for animation effects.

Animation options for Divi logo carousel of Divi Plus plugin

For now, you can enable loop on the logo slides. Can set them to slide on autoplay with delay and transition duration. Moreover, you can also select whether or not logo slider pause on hover. In addition to these, you can also apply the native animation effects for entrance appearance.

Divi logo carousel examples

The below logo sliders are created using Divi Plus Logo Slider module.

Logo 1
Logo 2
Logo 3
Logo 4
Logo 5
Logo 6
Logo 7
Logo 8

Final thoughts

What do you want to display on the logo carousel? Just logos or logos representing big brands? Guess what Logo Slider of Divi Plus can show anything, not just logos but anything. And the thing that’s worth noting is that, it would display them in a much touching way. Your site visitors find them natural on the site, nothing added strenuously. Above all, it would be easy and creative for you to add them on the website.

Get it today, and create logo sliders that work better.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

How to Set Up a Knowledge Base or Wiki Site With WordPress and Divi

If you have developed a software or SaaS, it's needed you provide your customers with a guide on how to use it. If you don't, the chances are you'd get many support tickets just only for the use of it. To overcome this situation, you can create a knowledge base or...

Divi Travel Agency Child Theme to Showcase Your Travel Services

Divi Travel Agency Child Theme to Showcase Your Travel Services

Travel Agencies, holiday planners, and other tour-travel businesses need something unique to provide an awesome online virtual experience of their travel services. If you also belong to the same business niche running your website on WordPress with Divi, this Travel...

Top Divi Website Examples to Inspire Your Design in 2024

Top Divi Website Examples to Inspire Your Design in 2024

Divi is a renowned name in the web design industry that offers unmatched flexibility to open your creativity.  It doesn’t matter how experienced you are with Divi, finding inspirational design ideas from top Divi websites can be a game-changer. To clarify it more...

Divi WooCommerce Extended

Popular on Divi Extended

Divi Plus WooCommerce Extended Divi Layouts Extended Divi Header Layouts