Gutenberg Tutorial (Part 8): How to Create Gallery Section

Nasikhun A. 27 Jul 2023 3 Menit 0

The previous WordPress Gutenberg tutorial on creating a post section was successfully covered. Now, it’s time to proceed with how to create Gallery section on the homepage.

The Gallery section on the homepage is designed to display multiple images, capturing the attention of visitors and potentially increasing user engagement on the website.

Upon completion of this tutorial, the final result of the gallery section will look like the image below:

how to create Gallery section

Final result of Gallery section on Homepage. Created using Gutenberg Editor, WordPress.

If you’re prepared, follow the steps below to create the gallery section, which can be divided into two main parts: (1) adding the Gallery Widget and (2) making simple adjustments.

To learn how to create gallery section, there are two steps; (1) adding Gallery Widget and (2) organizing it.

To create this section, we will utilize the Gallery Widget block, which is a feature of Gutentor, the plugin you installed earlier when creating the header.

To get started, access the Home page through WP Admin > go to the Pages menu > select the page that you have already filled with the header, footer, slider, and list of posts. Then, follow the steps on gallery section in website below:

  1. Open the List View to easily manage the blocks.
    How to Create Gallery Section
  2. Click at the bottom of the editor area, then click [+] > select Heading to create a title for the gallery. Fill in the heading as desired. In this case, we will use the heading Galeri.
    How to Create Gallery Section
  3. Click below the Galeri heading, then click [+] > type gallery in the search box > select the Gallery Widget block.
    How to Create Gallery Section
  4. Next, add images by clicking Upload Image. You can use the provided images here. To add more images, click Add Item > then click Upload Image. Add as many images as needed.
    How to Create Gallery Section
  5. Open the Settings in the top right corner > click Block Title > disable the Enable Block Title toggle. This step is necessary to remove the default block title.
    How to Create Gallery Section
  6. Scroll down and click Block Items > click Template > select one of the available gallery templates.
    How to Create Gallery Section
  7. Scroll down again. Disable the Enable Title and Enable Description toggles.
    How to Create Gallery Section

At this point, you have successfully added the Gallery to your landing page or homepage. However, if you preview it on the front-end, the appearance may not be optimal yet. Therefore, you need to organize the Gallery to make it look tidy.

Organizing the Gallery section is crucial to ensure its visual coherence with the blocks above it. Additionally, we will add a background color to distinguish the Gallery section from others. Here’s how:

  1. In the List View, select the Heading and Gallery Widget blocks > click the three dots > choose Group. Grouping the entire Gallery block makes it easier to manage.
    How to Create Gallery Section using gutenberg WordPress
  2. Next, set the width of the Gallery to 1200.
    How to Create Gallery Section using gutenberg WordPress
  3. Click on the GroupGallery > select the width setting on the toolbar > choose Wide width.
    How to Create Gallery Section using gutenberg WordPress
  4. Add a background color by clicking Style > click Background > select the desired color. In this case, we will use the color with the code F6F6F6.
    How to Create Gallery Section using gutenberg WordPress
  5. Adjust the text size of the title by clicking on the Heading block > in the Typography section, choose size L (Large). You can also select a size according to your preferences.
    How to Create Gallery Section using gutenberg WordPress
  6. Done! You can save the draft and preview to see the final result. Here’s how it appears on the front-end.
    How to Create Gallery Section using gutenberg WordPress


That wraps up the tutorial on how to create Gallery section on the homepage using the Gutenberg WordPress editor along with the comprehensive block plugin, Gutentor.

If you have successfully completed this stage, the next step is to ensure that the homepage is mobile-friendly by making the header and footer responsive.

Creating a website can be a time-consuming process, but don’t let it deter you from pursuing your business goals and the need for a well-functioning website.

If you prefer to save time and ensure a professionally developed website, you can entrust the website development to Tonjoo Team, a proficient software development team with experience in handling projects for both startups and multinational companies.

Feel free to get in touch with us to discuss further and create a website that perfectly suits your business needs!

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 27, 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.