How To Create A Full Width Logo Section

In today’s tutorial I will show you how to create a professional looking section for displaying partner/sponsor logos in a nice, clean way.

Every business logo is unique and has its own colours. Some are oriented horizontally and some vertically. We need to make sure they all look good on our website and this can sometimes be difficult.

In this tutorial, I will show you how to add a group of logos to your website and still control the design. Divi by default offers a maximum of 4 column layout. We will add a few lines of code that will enable us to display up to ten columns so that we can fit as many logos as we want and it will still be compact and aesthetically pleasing! We will also add some filters so that all the logos will be in greyscale colour by default and when the user mouses over the logo, the logo changes colour and is scaled up. Are you ready? Let’s get started!

  • You will need to have the Divi Theme by Elegant Themes installed.
  • You can follow this tutorial or download Ready-To-Use Divi Builder section with CSS code embedded.

Live Preview    Download Layout

1

Prepare logo images

Before we start building our section we need to prepare the logos that we want to display. It is recommended to use the same size images for all the logos so that they are scaled properly and look proportional. I’m using Photoshop for editing all the images. You can choose your favorite graphic design software to achieve the same purpose. For this tutorial I have prepared 12 logos, each 400 px in width and 150 px in height. All images are saved as a png file and they are run through tinyPNG to compress and optimize their size *. You can also save the images as jpgs, it’s up to you.

* This step is optional. Compression only saved me a 300kb in size which is not much. I’m getting into the habit of doing this for all png images that are uploaded to our website. This helps to increase website speed and save some server space.

2

Add Section, Rows and Modules

For this tutorial we will add 2 rows and 6 Text Modules inside each row.

For each Text Module we add our image center aligned. By clicking on the Pen icon (Edit) we can access advanced image settings. Here, for example, we can change the image size or apply a custom class if required.

3

Apply CSS Class to Rows

In this step we need to apply 2 classes to both rows. Open Row Module Settings and add six-columns company-logo to CSS Class field located in the Advanced Tab.

If you would like to display a different number of logos per row, for example, 5 or 7, then you can use different class accordingly instead of six-columns, eg five-columns. You will also have to add more Text Modules in order to display more logos in one row, so if you want 7 logos in a row, you will need 7 Text Modules.

 

Supported Classes:
ten-columns
nine-columns
eight-columns
seven-columns
six-columns
five-columns

4

Adding CSS

In this last step we will add some CSS to the Divi/Theme Options/Custom CSS section or you can just copy and paste it in to your style.css file located in your child theme folder – Appearance/Editor. Make sure to save your work.

This is it! Thank you for your attention! This was my fifth tutorial and I’ve go more to come! If you enjoy these, please let me know in the comments below.
Maciej Ekstedt

Maciej Ekstedt

Maciej is the founder and CEO of B3 Multimedia Solutions. He is a self-made web designer and marketing expert, and he loves his job so much that he barely leaves the office. He transforms creative ideas into effective strategies for his company and for his clients. Maciej is fascinated by the phenomenon of megalopolis. He notices patterns and details which make up the whole thing, and he uses these skills in his work.

Live Preview


The Divi Toolbox is the best plugin to power up the Divi theme.
Get 10% off with coupon code TOOLBOX10

32 Comments

  1. Roy

    Can we have this in a slider? So it shows 6 logos and then slides to the next 6 logos?

    Reply
    • Maciej Ekstedt

      Unfortunately not. I used standard Divi Modules for this tutorial. If you would like to have it in a slider mode then you will probably have to use some 3rd party plugin.

      Reply
  2. Will

    Awesome, I have use for this immediately! Another great tutorial.

    Reply
  3. Jerry Stevens

    Well done, Maciej. Thanks.

    Reply
  4. JAI

    This is fantastic. Where is the download link located for the Ready-To-Use Divi Builder section with CSS code embedded?

    Reply
    • Maciej Ekstedt

      Hi Jonah. Our bad 🙂 The link to the layout has been added.

      Reply
  5. James Robert

    This is really handy! Many thanks it’s going to save me a ton of trial and error.

    Reply
  6. Lars Olsson

    Hi Maciej and all visitors.

    I was really curious about what was said above. Can it be used in a slider?

    And sure it can, but as Maciej said, 3rd party plugin have to be used.

    However, it really was easier than that. I used 1 3rd party plugin and that is AC Shortcode everything else DIVI Builder will provide.

    The result can be seen at http://divi.nu (at the bottom of course)

    regards
    Lasse

    Reply
    • Maciej Ekstedt

      Hi Lars,
      This is really amazing. Sliding logos looks great!

      Reply
      • Lars Olsson

        Thx Maciej,

        you made the logos.

        As slider I used the built-in “Shortcode Tabs” (simple version) 🙂

        have a nice weekend m8 🙂

        Reply
  7. Cody

    This doesn’t seem to work maybe with the most updated version of divi? Any ideas?

    Reply
    • Maciej Ekstedt

      Hi Cody. Sorry to hear that but if it works here it means it works with the latest WP and Divi. You must be missing something :/ What is the url?

      Reply
  8. Nate

    All the logos are blocked by uBlock Origin (one of the most popular ad blockers out there), which makes this not a good solution, unfortunately.

    Reply
    • Maciej Ekstedt

      Hi Nate, it’s because “sponsor”class has been used. You need to just replace that with something else and it won’t be blocked anymore. We have also fixed this tutorial, changed code and uploaded fixed .json file with logo section 🙂

      Reply
  9. yesi

    hi, I love your tutorials. Is their anyway you can add some comments to maybe explain some of the CSS codes. That would help a lot.

    Kind regards
    PS. Love the tutorials and I do appreciate them.

    Reply
    • Maciej Ekstedt

      Hi Yesi, I will try next time to add comments that will put some light on the styles added! Thank you for your comment!

      Reply
  10. Kristoffer

    Great feature, Ive included it on my Divi-site!

    How do I manipulate it to show only 3 or 4 logos?
    I do not have more to show at the moment 🙁
    I would like it to be more spacing between if so.

    Reply
    • Kristoffer

      Just like in the example in top of this article actually! 🙂

      Reply
  11. Jason Paulo

    This is a very useful tutorial mate! Thank you! Cheers!

    Reply
  12. Jonas

    There is a mistake in the tutorial. In step 3 you add “six-columns SPONSOR-logo” while the CSS to enter only includes “COMPANY-logo”. Therefor it does not work. Took me way to long to find out. Please correct.

    Reply
    • Maciej Ekstedt

      Hi Jonas! Great catch! Thank you for mentioning that, it’s fixed now!
      We have made some changes to the code because sponsor-logo class was blocked by ad blockers so we change to company-logo, but missed that one!

      Reply
      • Jonas

        Perfect. It’s still wrong in the picture though.. 😉

        Reply
  13. Lili Myers

    Thank you – great tutorial, it worked brilliantly!

    Reply
  14. jason

    hey maciej!
    i love this but I can’t get it to work/. It just doesn’t stack correctly when it hits the tablet breakpoint:
    emailbroadcast.jasoncox.co/adventure-travel
    I tried building it from scratch and I tried loading in the JSON – same result.
    Any ideas?
    Thanks!
    jason

    Reply
    • Maciej Ekstedt

      Hi Jason,

      You are using different sizes for each image. Maybe this is causing the issue? Please try to upload all images in the same size.

      Reply
        • Maciej Ekstedt

          It’s some issue with sizing. I can see in the console that the logo that does not stack properly has a different size. Try to recreate this section from scratch.. Make sure all logos have the same size. Or duplicate 1st logo and use it for the image that is not stacked properly to see if that helps.

          Reply
  15. jason

    Huh!
    when i switched the module from a text module to an image module, it works.
    thanks for the help!

    Reply

Submit a Comment

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

Sign up to our newsletter list

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood