Skip to content
English
Publisher Portal
  • There are no suggestions because the search field is empty.

How to Create an Image Grid with Links

Learn how to create a custom image grid, set manual column layouts, and add clickable links to your images to improve your website navigation.

Grid systems are a powerful way to organize your website content visually. This guide walks you through setting up a customizable grid, adding images, and linking those images to specific URLs.

Step 1: Create a New Page

To begin, navigate to your website's dashboard:

  1. Go to Pages > All Pages.

  2. Click Add New to create a fresh canvas for your grid.

Step 2: Insert the Grid Block

Add Grid

Once you are in the editor:

  1. Click the Plus (+) icon or type a forward slash (/) followed by "grid."

  2. Select the Grid block from the menu. By default, this usually generates a 5-column layout.

Step 3: Configure the Layout

Adjust Columns to 4

To have full control over the look of your grid, you should switch to manual settings:

  1. Select the Grid block.

  2. In the settings panel on the right-hand side, change the layout setting to Manual.

  3. Adjust the column count. For this example, set it to 4 columns.

Step 4: Add Image Blocks to the Grid

Add Image block to first grid

Now that your structure is set, you need to populate the empty slots:

  1. In the first column, click the Plus (+) icon and select Image.

  2. To fill the remaining slots, look for the Plus (+) icon at the bottom right-hand corner of your current block area.

    Adding Image Blocks to other Grid boxes

  3. Repeat this process until you have an image block in each of the four columns.

Step 5: Upload and Link Your Images

With your placeholders ready, it’s time to add content:

  1. Click into an image block and select Upload or Media Library to add your photo.

  2. Once the image is placed, click on it to bring up the image toolbar.

  3. Click the Link icon (it looks like a chain link).

  4. Enter the URL of the page you want the image to redirect to.

  5. Repeat these steps for all images in your grid.

Step 6: Expanding Your Grid

Duplicate Grid-1

If you need more than one row, you don't have to start from scratch:

  1. Click on the entire Grid block to select it.

  2. Click the three-dot menu (Options) in the toolbar.

  3. Select Duplicate. This will create an identical row underneath, which you can then edit with new images and links.

Pro Tip: While this guide focuses on images, you can actually place any block within these grid columns, including headers, paragraphs, or buttons.

Adjusting Spacing (Padding) in Your Grid

Screenshot 2026-01-07 at 1.45.59 PM

Once your images are in place, you may want to adjust the internal space within the grid columns to ensure they are perfectly aligned and visually balanced. In the WordPress block editor, this is handled through the Padding settings.

  1. Select the Grid Block: Click on the grid in the editor to select the entire container.

  2. Go to the Styles Tab: In the right-hand sidebar, look for the Styles tab. This is represented by a half-moon or black-and-white circle icon.

  3. Find Dimensions: Scroll down within the Styles tab until you reach the Dimensions section.

  4. Adjust Padding: Look for the Padding slider. Moving this will add space inside the grid columns, pushing your images inward from the edges.

    • If you don't see the Padding option, click the three vertical dots (Options menu) next to the "Dimensions" header and make sure "Padding" is checked.

    • Unlink Sides: If you want different spacing for the top/bottom versus the left/right, click the Link icon to "unlink" the sides and enter custom values for each.

Finalizing

Once you are happy with your layout, click Save Draft or Publish to make your grid live!