How to Showcase Logos in WordPress (With/out a Plugin)

How to Showcase Logos in WordPress (With/out a Plugin)

A logo is a powerful visual representation of a brand. When your business is connected with other brands, whether through partnership or affiliation, you may need to display their logos on your website to build trust and credibility among web visitors.

For example, if you have a portfolio website, you must display logos of the brands you have worked with. The same is true for many other websites. WordPress allows you to do it in various easy and hassle-free ways.

In this tutorial post, we’ll show you two easiest methods of how to showcase logos in WordPress, with and without a plugin. Get started!

Method One: Without a Plugin (Using the Column Block)

The Column is a default block of the Gutenberg editor.

Step 01: Add the Column Block to the Editor

Add Kolom blok to the editor by clicking the plus (+) pictogram.

Add the Columns block to the editor

Step 02: Select a Column Layout

Select a column layout. The more columns you select, the more logos you can add. Let’s select the layout 33/33/33.

Selecteer een kolomindeling

Once the block is added, you can increase the column number further.

To do this, click de Column icon on the toolbarGa naar de Tabblad Instellingen. Then, come to the Columns section.

U kunt increase the column number by dragging the scale or directly typing a figure.

Increase the column number

Step 03: Add the Image Block to the Columns Individually

You can add all the other Gutenberg blocks within the columns. Go to the first column en click de plus (+) pictogram.

Type Image in the search box. Once the block appears, add it to the column.

Add the Image Block to the Columns Individually

Now, upload a logo whether from your local drive or the Media Library.

Upload logo to the Gutenberg column block

You can see that we have added a logo to the column block.

Logo added to the column block

Step 04: Add Logos to the Other Columns One by One

In the same way, add logos to the other columns of the block.

Add logos to the other columns

Step 05: Stylize the Column Block

To stylize the block, go to de Tabblad Stijlen on the right side bar.

Stylize the column block after adding logos

By scrolling the tab, come to Block Spacing. This section will allow you to add space between the logos vertically and horizontally. But in this case, it’s better to add spaces horizontally.

Then, add a border around the entire column block. You can change the color and width of the border.

Add space between columsn and a border

For advanced-level customization, you need to use a third-party plugin. We will explain the following method with such a plugin.

Method Two: Using a Plugin (Tableberg)

Tafelberg is a versatile plugin for building tables, icon boxes, image boxes, logo boxes, and more. You can showcase logos with advanced customizations on your website with this plugin. Get it from the banner blow.

Maak prachtige tafels
Met blok-editor

Once installed, follow the outline below.

Step 01: Add the Tableberg Block to the Editor

The plugin adds a block to the Gutenberg block library named Tafelberg. Add the block to the editor.

Add the TableBerg block to your Gutenberg editor

You need to define table cells for the number of logos you want to display. Simply create the required number of cells by specifying the number of rows and columns.

For example, we need eight cells to display eight logos. Set the column and row number 4*2.

Select the number of rows and columns

The required number of cells is created, as you can see.

Cells created for displaying logos

Step 02: Start Adding Logos to the Tableberg Cells

Tableberg allows you to add several custom blocks to the cells. Find and het blok Afbeelding toevoegen to a cell.

Add logos to the Tableberg cells

Now, upload a logo, whether through uploading or from the media library.

Logo added to the Tableberg cell

Add all the other logos to the rest of Tableberg cells.

Add all logos to the Tableberg cells

Step 03: Stylize the Cells

Now, go to de styles tab while keeping the entire table selected. You may change the background color individually for all rows and cells. But as we don’t need for the tutorial, we are leaving this option.

Stylize the logos displayed with Tableberg

Come to de Cell Spacing section by scrolling down the tab. Using option under this section, you can add spaces between the logo columns both vertically and horizontally.

Add space between the logo cells

Come to Table Border. From the Inner Border section, you can change the color and radius of the border.

Add border color and radius

Thus, you can give an aesthetic view to the logo columns.

Conclusie

Tableberg is an exciting multipurpose plugin by which you can create numerous stunning designs for your website. Before exiting, you can explore some more tutorial posts on the plugin.



Het Tableberg-team