How to Create Logo Slider & Grid in WordPress Using Elementor

Looking for a way to create logo sliders on your WordPress website using Elementor?

A logo grid/slider is a fantastic way to represent who you work with; it looks professional and creative and doesn’t require much effort or time to establish on your Elementor website.

Let’s see how you can showcase logo slider & grid on your websites.

Why Display Logo Slider/Grid on Your Websites?

Displaying partners or brand logos on your website will increase your website’s credibility.

Additionally, a creative logo section on your website will express gratitude and respect towards those you’re partnered with.

Using PowerPack Elementor Addons, you can create a beautiful grid layout for the partner logos on your website without having to write codes.

Creating Logo Slider & Grid Using PowerPack Elementor Addons

PowerPack Addons for Elementor is one of the best addons for the Elementor page builder. It has over 80 handy widgets, including 150+ unique and stylish templates.

Every widget and template provided by PowerPack Addons is unique and powerful enough to deliver the best experience that lets your website function smoothly. In addition, these super lightweight widgets synchronize perfectly with your website performance and help you match essential SEO parameters.

To create a logo slider & grid on your website, you can use logo widgets provided by PowerPack Addons for Elementor, i.e., the PowerPack Logo Grid widget & PowerPack Logo Carousel widget.

PowerPack Logo Grid Widget

Using PowerPack Logo Grid for Elementor, you can display logos of your partner brands, clients, sponsors, and many more in a unique & stylish way. In addition, the PowerPack Logo Grid widget provides multiple customization options for Elementor to diversify your website’s overall look and feel.

Features that Logo Grid widget by PowerPack Elementor Addons include are:

• There’s no limit; you can add as many logos as you want.
• Advanced customization options to display the logo pattern of your choice.
• Custom styling effects like border, color, shadow, and many more.
• Supports multiple columns along with additional customization options like alignment, size, width, spacing, background color, opacity, grayscale, etc.
• Also, there’s a feature to set random orders for logos so that every time you visit the site, logos to the logo section will get shuffled; hence, every time, it feels new and fresh.
• In addition, each of these customizable features is applicable for normal and hover modes.

PowerPack Logo Carousel Widget

To create a slider logo grid for mobile, laptop, or desktop screens, you need to use some slider features to make the logo gallery look more attractive to users to operate on all different screens.

Here comes the PowerPack Logo Carousel widget for Elementor that allows you to create interactive sliders for the logo grid you’ve started using the PowerPack Logo Grid widget for the Elementor page builder.

PowerPack Logo Carousel widget comes with numerous feature options:

• You get multiple carousel effects at your fingertips.
• Advanced customized options for logo slider.
• Additional customizable effects like typography, font color-type-spacing, gradient background, grayscale filters, and many more.
• Multiple styles for pagination.
• Easy to use and responsive, a rich widget that flawlessly works on all devices.

It’s as easy as flying a paper plane in the air; yes, it’s absolutely for non-coders and those who don’t have enough time to spend hours on these minor subjects to run a website.

The Elementor Logo widget provided by PowerPack is the best because it’s easy to function and less time-consuming, even if you can get one ready for your website within no time.

So taking not much time to discuss the features of PowerPack Elementor Logo widgets for WordPress websites, let’s see how they function in these step-by-step tutorials.

Add PowerPack Logo Grid Widget to your Website Using Elementor

To display an interactive logo gallery on your WordPress website, first, you need to install and activate the Elementor page builder and PowerPack Addons.

Next, open the page using the Elementor editor, type “Logo Grid” in the search bar, and drag & drop the widget.

While performing the procedure, first make sure to check for the PowerPack “PP” sign on the top-right corner of the widget.

Customizing the Content Tab of the Logo Grid Widget

Let’s see the features available in the logo grid section.

• Add Logos: You can add logo images here and customize them individually.

After adding logo images, you can customize them by their content and style.

Customize the logo image by its content:

Once you add logo images by choosing an image from the media library, you can add to its title and drop a link.

Customize the logo images by their style:

You can customize the logo images individually by enabling the “Custom Style” option. Once you enable this option, you’ll get options like “Background Color” and “Border Type.” Also, you can choose whether to make these changes to the logo container or logo image on the “Apply Styles To” option.

Remember, you have to apply these changes to every single item individually.

• Title HTML Tag: This option can select the logo title HTML tag.
• Randomize Logos: Enabling this option will allow logos to display randomly on the screen.
• Columns: You can choose columns for logos using this option.
• Logos Gap: Gaps between the logos can be adjusted with this option.
• Vertical Align: Use this option to set the vertical alignment of logos you’ve displayed.
• Horizontal Align: Use this option to set the horizontal alignment of logos you’ve displayed.
• Image Size: Choose the image size using this option.
• Image Width: You can adjust the image width with this option.

Customizing the Style Tab of the Logo Grid Widget

The style tab of the logo grid widget includes the “logos” section.

Let’s see the available features in this section:

• Background Type: You can choose a background type for the logo grid section, such as classic or gradient.
• Border Type: Choose a border type for the logo grid from options such as solid, doubled, dotted, dashed, and groove.
• Border Radius: Set the border radius if you’ve applied the border to the border grid. It’ll allow the border edges to look curvy and smooth.
• Padding: Adjust the padding to allow spacing between the grid and the border.
• Grayscale: Enabling this feature will allow your grid to look tinted.
• Opacity: Set the logo grid opacity using this option.
• Box Shadow: If you want to apply box shadow to the logo grid, choose this option. This fantastic feature will allow a shadow effect on the two adjacent sides of the logo grid.

So, this was all about using the Logo Grid widget for the Elementor page builder. Now, look at either part of this tutorial and, I.e., the “Logo Carousel” widget for Elementor.

First, type the “Logo Carousel” in the search bar and drag & drop the widget on the Elementor editor page.

Make sure to check for the PowerPack “PP” sign on the top-right corner of the widget.

Content Tab of the Logo Carousel Widget

The content tab of the logo carousel widget consists of two sections:

1. Logo Carousel
2. Carousels Settings

Let’s see each of these sections one by one.

Logo Carousel

Let’s see the options available in this section:

• Logo image: This feature allows you to add logo images, choose logo images and upload them from the media library. Also, you can customize the added images by adding their title and dropping a link.
• Image Size: Adjust the logo image using this option.
• Title HTML Tag: Set the logo title HTML tag with this option.
• Randomize Logos: Enabling this option will allow logos to display randomly on the screen. So that every time you visit your site, the logo section will appear in a refreshing and new look.

Carousel Settings

Let’s see the available options in this section:

• Effects: Choose what effect you want to apply to your logo section from the options such as slide, fade, cube, coverflow, or flip.
• Visible Items: You can choose the number of items(logos) you want to display at a time.
• Items Gap: Adjust the logo gap using this option.
• Slider Speed: You can adjust the slider speed with this option.
• Autoplay: Toggle on this option if you want to apply the autoplay feature to the logo carousel.
• Pause on Hover: Enable this option if you want to apply a pause effect whenever the cursor hovers over the logo carousel.
• Pause on Interaction: Enabling this option will disable the autoplay feature, and the carousel pauses on the user’s first interaction.
• Autoplay Delay: Set the autoplay delay time if you’ve allowed the autoplay effect to the carousel.
• Infinite Loop: Toggle on this option if you want to apply an endless loop to the carousel.
• Grab Cursor: Enabling this option will show a grab cursor when anyone hovers over the slider.

Navigation

• Arrows: Toggle on this feature if you want to display the arrows on either side of the logo section.
• Dots: Toggle on this feature if you want to display dots on the logo section.
• Pagination Type: Choose the pagination type for the carousel you want to apply to your logo slider. You can choose either ‘dots’ or ‘fractions.’

Style tab of the Logo Carousel Widget

The style tab of the logo carousel widget consists of four sections:

1. Logos
2. Title
3. Arrows
4. Pagination

Let’s see them all one by one.

Logos

Let’s see all the available options in this section:

• Background Type: You can customize the background type of the logo by choosing either the ‘classic’ or ‘gradient’ options for the logos you’ve added.
• Border Type: Apply a border to the logos you’ve added using this option.
• Border Radius: The border-radius of the logos can be adjusted by this option.
• Padding: You can adjust the padding for logos with this option.
• Vertical Alignment: Set the vertical alignment at the logos’ top, center, or bottom.
• Horizontal Alignment: Set the horizontal alignment at the logos’ top, center, or bottom.
• Grayscale: Apply grayscale to the logos if you want to display a tinted shade to logo section.
• Opacity: You can adjust the opacity of the logos using the opacity option.

Title

Let’s see the available options in this section:

• Typography: You can customize the logo title using the typography option.
• Text Color: Choose a text color of the logo title here.
• Background Type: You can choose a background type, either classic or gradient, for the logo title.
• Margin Top: Adjust the margin-top of the logo title by using this option.
• Padding: Adjusting the padding for the logo title will allow spacing for the same to display.

Arrows

Let’s see all the available options in this section:

• Choose Arrow: Choose an arrow icon from the icon library to display on the logo slider.
• Arrow Size: Set the arrow size here.
• Align Left Arrow: Set the alignment of the left arrow using this option.
• Align Right Arrow: Set the alignment of the right arrow using this option.
• Background Color: Using this option, you can choose a background color for the arrow.
• Color: You can set a color for arrows here.
• Border Type: Choose a border type for the arrows from available options such as solid, dotted, doubled, dashed, and groove.
• Border Radius: Adjust the border radius if you’ve applied the border.
• Padding: Adjust the padding for arrows, allowing the arrows to look clean and customized.

Pagination: Dots

Let’s see the options available in this section:

• Position: You can choose the position for the pagination, either place it inside the logo slider or outside the logo slider.
• Size: Adjust the size of the pagination dots.
• Spacing: Adjust the spacing between the dots.
• Color: Customize the pagination dots’ color using this option.
• Active Color: Choose a dot color for the active page.
• Border Type: You can use this option to apply a border to the dots.
• Border Radius: Adjust the border radius if you’ve applied the border to the pagination dots.
• Padding: Adjust the padding for the dots using this option.

Note: You’ll get this option only when you choose “dots” pagination as the pagination type on the carousel settings section.

Pagination: Fraction

This section allows you to customize the “Text Color” and the “typography” of the fraction pagination for the logo slider. Use these options as per your preference.

Note: You’ll get this option only when choosing “fraction” pagination as the pagination type on the carousel settings section.

So, this was the detailed tutorial on creating a Logo Slider & Grid in WordPress using Elementor page builder and PowerPack Addons for Elementor.

Once you make all these changes to your “logo grid section” & “logo carousel” section, you’ll get something like this:

Final Words!

We hope this tutorial blog helped you create trendy “tickers” for your website using the PowerPack Content Logo Grid & PowerPack Logo Carousel widget.

If you’ve enjoyed reading this article, you’d also love to experience our other PowerPack elements.

“We messed up with dozens of codes, so you can enjoy our PowerPack Elementor Addons without being puzzled by codes.”

We always try to keep our products’ functionalities user-friendly so that anyone can use them just with a bit of help from these tutorial blogs.

Click here to get the PowerPack Logo Grid widget for Elementor.

Click here to get the PowerPack Logo Carousel widget for Elementor.

Please feel free to drop your comments here; we’d love to receive your replies.

Also, join us on Twitter, Facebook, and YouTube.