Gutenberg Tutorial (Part 12): How to Create Responsive Post List and Gallery Sections

Nasikhun A. 29 Jul 2023 3 Menit 0

Advertisements

Having successfully applied the technique for responsive client logos, the last crucial task to ensure a mobile-friendly homepage is learning how to create responsive post list and gallery sections.

The List Post section showcases a collection of blog posts, while the Gallery section provides an attractive display of images for users.

Before proceeding, it is assumed that you have already practiced the tutorial on creating the post section and gallery section on the homepage. If you have accomplished that, follow the steps below!

Disclaimer:

Please note that the List Post section we previously created is already responsive. However, in this section, we will learn how to further customize the post list and update individual posts. On the other hand, the Gallery section still needs responsive adjustments.

Advertisements

Step 1: Customize List Post Components

In the initial step, we focus on configuring the List Post components, specifically editing the Post Title block and the Categories block with desired colors, along with exploring other available components.

To get started, access the WP Admin page and follow these instructions:

  1. Click on the Pages menu in WP Admin > select the Homepage.
    How to Create Responsive Post List and Gallery Sections
  2. Open the List View on the left side and the Settings on the right side to simplify the configuration process.
    How to Create Responsive Logo Section
  3. Choose the Group block that contains the list post.
    How to Create Responsive Logo Section
  4. Access the Post Title block > go to the Settings section, and click on Style. Change the Link color as needed (e.g., we used color code 345C00).
    How to Create Responsive Logo Section
  5. Repeat the same procedure for the Categories block.
    How to Create Responsive Logo Section

Step 2: Update Single Posts

Next, proceed to update the titles and featured images that were previously generated by FakerPress during the tutorial for creating a simple page, particularly the header creation. Follow these steps:

  1. Access the WP Admin page and click on the Posts menu > choose one of the single posts you wish to edit.
    How to Create Responsive Logo Section
  2. Modify the Post title section > in the Settings, scroll down to the Featured image > click on Replace image.
    How to Create Responsive Logo Section
  3. Choose Upload files > click on Select Files > upload the provided dummy featured image.
    How to Create Responsive Logo Section
  4. Select the desired image > enter the Alt Text and Title for the image > and click on Set featured image.
    How to Create Responsive Logo Section
  5. In the Settings section, scroll up > click on Categories > use the Add New Category option to add categories as needed, which allows you to group content.
    How to Create Responsive Post List and Gallery Sections
  6. Once completed, click on Update.
  7. Repeat the same process for all single posts.

After updating all the single posts, you can preview the final result on the front-end.

How to Create Responsive Post List and Gallery Sections

Final result of responsive post list section on desktop (left) dan mobile (right).

Advertisements

After completing the post list section, the next step is to ensure that the gallery section is responsive. Follow these steps:

  1. Firstly, remove the previously created block by clicking on the Gallery Widget block > click on the three dots > select Remove Gallery Widget.
    How to Create Responsive gallery
  2. Next, add a new block below the Gallery heading block by clicking on [+] > typing gallery in the search box > then, select the Gallery feature.
    How to Create Responsive gallery
  3. Click on Upload and select the provided images from the available files.
    How to Create Responsive gallery
  4. In the List View on the left, click on the Gallery block > in the toolbar that appears on the heading, click on the size settings > then, select Full width to ensure the gallery spans the entire width of the screen.
    How to Create Responsive gallery
  5. In the Settings section, click on Style > under the Dimensions section, click on the three dots > choose Padding > set the padding to 1 to adjust the spacing between images.
    How to Create Responsive gallery
  6. That’s all! The images in the gallery will now automatically adapt to the user’s screen size, providing a responsive user experience. Refer to the image below for guidance:
    How to Create Responsive gallery

Conclusion

This concludes the tutorial series on how to create responsive post list and gallery using the Gutenberg WordPress editor. If you wish to start from the beginning, you can refer to the tutorial on how to create a header.

While the Gutenberg editor provides a solid foundation for webpage creation, further customization is essential to achieve a professional and polished appearance.

For an elegant website that combines excellent functionality and robust security, our dedicated development team at Tonjoo is here to cater to your needs.

We boast a wealth of experience in designing websites for a diverse range of clients, including startups and multinational corporations like Hello Health Group and Unilever.

Reach out to us through Tonjoo’s contact information to discuss your website ideas and requirements, and we will be more than happy to turn your vision into reality!


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 18, 2024 by Kevin_Tonjoo

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.

Advertisements

Leave a Reply

Your email address will not be published.

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