WordPress Logos Showcase – Grid and Carousel

Introduction

The Logos Showcase plugin for WordPress is a powerful tool to display your logos in a visually appealing way. Whether you're showcasing your business partners, sponsors, certifications, or any other logos, this plugin provides flexibility and customization options to get the job done. This tutorial will guide you step-by-step on how to use the Logos Showcase plugin to create a Grid and Carousel layout.

In this tutorial, we will cover the following topics:

1. Installing and setting up the Logos Showcase plugin
2. Understanding the plugin's settings and options
3. Adding logos to the showcase
4. Customizing the Grid and Carousel layouts
5. Styling the showcase using CSS

By the end of this tutorial, you'll be able to create a stunning Grid and Carousel logos showcase that showcases your brand's logo(s) in a professional and modern way.

Step 1: Installing and Setting up the Logos Showcase Plugin

To get started, first, you need to install and activate the Logos Showcase plugin. Here are the steps:

1. Log in to your WordPress dashboard and navigate to Plugins > Add New.
2. Search for "Logos Showcase" in the search bar and click "Install Now".
3. Once installed, click the "Activate" button.
4. After activation, navigate to Settings > Logos Showcase to configure the plugin's settings.

Plugin Settings

In this section, you'll learn about the plugin's main settings:

1. Title: Enter a title for your logos showcase, which will be displayed as a heading above the grid.
2. Enable Carousel: Check this box to enable the carousel option.
3. Grid Columns: Choose the number of columns you want the grid to have.
4. Grid Rows: Choose the number of rows you want the grid to have.
5. Logo Size: Choose a size for your logos.

Step 2: Adding Logos to the Showcase

To add a logo to the showcase:

1. Navigate to Posts > Add New.
2. Upload your logo(s) and add a post title and content (although this information won't be displayed in the showcase, it's a good habit to fill in the basics).
3. In the "Logos Showcase" meta box, select "Add Logo" and select the logo you uploaded from the list.
4. Repeat steps 1-3 for each logo you want to add.

Step 3: Customizing the Grid and Carousel Layouts

Customizing the Grid Layout:

1. In the Settings > Logos Showcase screen, you can customize the grid layout by adjusting the number of columns and rows.
2. You can also change the logo spacing and alignment.

Customizing the Carousel Layout:

1. In the Carousel settings, you can control the transition speed, timeout, and navigation arrows.

Step 4: Styling the Showcase

To customize the appearance of your logos showcase, you can use CSS. We'll provide some basic example code to get you started:

.logos-showcase {
  margin: 20px auto;
  text-align: center;
}

.logos-showcase.logo img {
  border-radius: 5px;
}

.logos-showcase.carousel-inner {
  display: flex;
  flex-wrap: wrap;
}

These styles simply add a margin to the showcase, round the logos, and center the container. You can customize as needed.

Conclusion

Congratulations! You've learned how to use the WordPress Logos Showcase plugin to create a stunning Grid and Carousel layout. With the plugin's flexibility and the customization options, you're ready to showcase your logo(s) in a professional and modern way.