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 to a 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 logo, the logo changes colour and is scaled up. Are you ready? Let’s get started!

  • You will need 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 sponsor-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

Creative Director

Live Preview

Create amazing websites in minutes.

Polygon is a multipurpose Premium Divi Child Theme perfect for creatives & professional agencies.

12 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

Submit a Comment

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

Shares

Pin It on Pinterest

PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Your Information will never be shared with any third party.
Hi there! We’d love to help you out. Leave us a message and we’ll get back to you as soon as possible.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your message has been sent.
We will get back to you in the earliest convenience.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout