The value of a well-known logo is that it grabs attention. Moreover, adding your partners' logos to your website can be an excellent way to boost your company's credibility. To add logos or certification badges to your site, we suggest using the Logo wall block.
This block was specifically created to give you the ability to add the logos of companies you partner with or badges and certificates your company earned over the years. Below we will review how to modify the Logo wall block.
Important: Using a logo without permission may constitute a trademark infringement and can result in loss of clients or even a lawsuit. Please make sure that you are authorized to use a company's logo.
Adding a Logo wall block
Here is how to add a Logo wall block to your page:
- Find a suitable location for your Logo wall block and click on the + Add a block button.
- In the Block Library, locate the Logo wall section and choose the style of the block that you like:
Customizing block settings
You have several options to make the Logo wall block truly yours. To activate the control panel, click anywhere on the block and then click the Block Settings icon:
In the Layout section, you can hide a specific block element (for example, if you want to remove a button). Simply remove the blue tick next to the item's name to remove it from the block:
In the Appearance tab, you can make the following changes:
- Block style: Change the color scheme of the block.
- Block spacing: Adjust the whitespace (margins) at the top and the bottom of the block.
- Media content settings: add a black & white filter to the images within this block.
Once you are done customizing block settings, click Save.
Editing the block title and buttons
You can edit the tile of the block (the text piece at the very top) and both buttons. To learn more about how to do it, visit the respective tutorials:
Replacing demo logos
To replace the demo logos and upload your own, follow these steps:
- Click on the logo you'd like to replace and then click Replace image:
- Choose the new logo image on your computer and click Open.
- To quickly resize the logo, move the lever:
Once you are done replacing the logos, publish your site to make the changes live.
Adding more logos
If you wish to showcase more logos on the page, you can easily duplicate any logo and then add a new image. To duplicate a logo, hover over it to activate the control panel and then click the Duplicate icon:
A copy of the logo will appear and you can customize it with your own logo image. When you add several more logos, a new row will be added automatically to the logo wall.
Deleting a logo
To delete a logo, hover over it and click Delete:
The logo will be removed and the block layout will be updated automatically.
Changing the order of the logos
You can easily change the order of the logos within a block. To do so, follow these steps:
- Hover over the logo you want to move.
- Click on the Move button and then drag and drop the element.
Setting a logo click action
You can set a click action for any logo among your logo wall. This is useful if you want, for example, your site visitors to be directed to a site of your partner when they click on a logo. You can choose one of the following Click action to be assigned to a logo:
- Open a page: this will open a page on your website.
- Make a phone call: this option allows visitors to make a phone call without leaving your website.
- Send an email: this will allow your visitors to instantly send you messages.
- Download a file: this will allow a visitor to download a file.
- Scroll to a block: this will scroll to another block on the page.
- Open a web address: this will open an external URL.
Here is how to set a click action for a logo:
- Click on the logo you'd like to hyperlink and then click More...:
- Select the Set a click action... option:
- Select one of the click actions above and add the external website address, downloadable file, phone number etc.
- Click Save.
Set a logo title (Alt text)
Alt text (alternative text), also known as "alt attributes", “alt descriptions" or "alt tags,” is used to describe the appearance and function of an image on a page. Adding alternative text to images improves web accessibility. Visually impaired users using screen readers will hear an alt attribute to better understand what is displayed on the page.
Alt tags also help search engine crawlers to index an image properly. For more details, refer to Google Image best practices. Here is how to add alt text (also called logo title) to a logo:
- Click on the logo you'd like to hyperlink and then click More...:
- Select the Change title (Alt text) option:
- Enter the Image title (alt text) to the respective field and click Save.