Gutenberg Tutorial (Part 11): How to Create Responsive Client Logo Section

Nasikhun A. 28 Jul 2023 3 Menit 0

In the previous Gutenberg WordPress tutorial, you successfully created a responsive slider. Now, let’s learn how to create responsive client logo section on the Homepage.

Ensuring responsiveness is essential to adapt the logo display to various user devices. This way, the logos remain clear and visible even when viewed on mobile devices.

After completing this tutorial, you will be able to customize the appearance of the client logo section on mobile devices, as demonstrated in the comparison below:

How to Create Responsive Client Logo Section

Non-responsive client logo section (left) and responsive client logo section (right).

The process of creating a responsive client logo section can be divided into two steps: (1) organizing the logos into separate groups, and (2) ensuring the existing logos within the groups are responsive.

Step 1: Organize the Logos into Groups

To initiate this step, we’ll convert the existing logos into a Group block. Utilizing the Group feature allows for collective management of client logos and ensures their responsiveness on the Homepage.

  1. Navigate to the WP Admin page, access the Pages menu > select the previously created Homepage.
    How to Create Responsive Client Logo Section
  2. Open the List View on the left side and the Settings on the right side to streamline the settings process.
    How to Create Responsive Client Logo Section
  3. Within the List View, locate the Group block that contains the client logos or partner section.
    How to Create Responsive Client Logo Section
  4. Select two Image blocks for the client logos via the List View > click the three dots > choose the Group option.
    How to Create Responsive Client Logo Section
  5. Repeat the same process for the remaining two logos.
    How to Create Responsive Client Logo Section

These steps apply to scenarios with four logos in one section. If you have more than four logos, you can adjust the organization accordingly. For instance, if there are six logos, you can divide them into two or three groups.

Step 2: Achieve Responsive Logos in Logo Group

In this subsequent step, you will make the logos responsive without the need for any additional plugins.

By utilizing the inherent features of the Gutenberg editor in WordPress, specifically the Allow to wrap multiple times option, we can easily achieve responsiveness. Follow these steps:

  1. Select one of the logo groups, then access the Settings section on the right-hand side and change the Group to Row.
    How to Create Responsive Logo Section
  2. Repeat the process for the next Logo Group.
    How to Create Responsive Logo Section
  3. Select all the Row blocks that contain the logos together (hold the Shift key + click the Row blocks) and enable the Allow to wrap to multiple lines toggle in the Settings.
    How to Create Responsive Logo Section
  4. That’s it! You can now preview the results on the front-end by clicking Update first and then Preview.

Important Note:

Ensure that both Group blocks, each containing a logo, have been converted to Row blocks as mentioned in Step 1. If this step is overlooked, the Allow to wrap to multiple lines feature will not be available.

You can check the desktop version and mobile version as depicted in the images below. To view the mobile version, press the Shift + Ctrl + C key combination on your keyboard.

How to Create Responsive Logo Section

Example of client logo section that has been responsive. The left side is a view from desktop, and the right sider is a view from mobile.

Ready to Create Responsive Client Logo Section?

In conclusion, this tutorial covered the process on how to create responsive client logo section using Gutenberg, allowing the logos to adapt to different screen sizes of users’ devices.

Having achieved responsive client logos, the next step will involve making the list post and gallery sections on the Homepage responsive as well.

Creating a fully functional and responsive website with well-designed elements can be a complex task. If you seek a professional team to handle these aspects, Tonjoo’s team is the ideal choice.

With a proven track record in developing websites for local and international clients, such as Polygon and Unilever, we ensure excellent responsiveness and functionality.

To bring your website ideas to life, let’s discuss your requirements through our contact at Tonjoo, and we will be delighted to assist you!

Read related articles about WordPress, WooCommerce, plugins, and other website development topics by Moch. Nasikhun Amin on the Tonjoo Studio blog.

Last Updated on July 28, 2023 by Nasikhun A.

Share to:
Archived under:
Nasikhun A.
Written by

Nasikhun A.

Moch. Nasikhun Amin is a technical writer who is interested in the marriage between creativity and technology.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.