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 Bloque de columnas to the editor by clicking the icono más (+).
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.
Once the block is added, you can increase the column number further.
To do this, click el Column icon on the toolbar. Ir a el Ficha Configuración. Then, come to the Columns section.
Puede increase the column number by dragging the scale or directly typing a figure.
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 y click el icono más (+).
Type Image in the search box. Once the block appears, add it to the column.
Now, upload a logo whether from your local drive or the Media Library.
You can see that we have added a logo 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.
Step 05: Stylize the Column Block
To stylize the block, go to el Ficha Estilos on the right side bar.
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.
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)
Tableberg 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.
Cree bonitas mesas
Con el editor de bloques
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 Tableberg. Add the block to the 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.
The required number of cells is created, as you can see.
Step 02: Start Adding Logos to the Tableberg Cells
Tableberg allows you to add several custom blocks to the cells. Find and añadir el bloque Imagen to a cell.
Ahora, upload a logo, whether through uploading or from the media library.
Add all the other logos to the rest of Tableberg cells.
Step 03: Stylize the Cells
Ahora, go to el 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.
Come to el 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.
Come to Table Border. From the Inner Border section, you can change the color and radius of the border.
Thus, you can give an aesthetic view to the logo columns.
Conclusión
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.