--- title: How to Create an Image Grid with Links description: Learn how to create a custom image grid, set manual column layouts, and add clickable links to your images to improve your website navigation. --- [Skip to content](https://help.indiegraf.com/how-to-create-an-image-grid-with-links#main-content) - [English](https://help.indiegraf.com/how-to-create-an-image-grid-with-links) - [Español](https://help.indiegraf.com/es/how-to-create-an-image-grid-with-links) English Show submenu for translations [Publisher Portal](https://portal.indiegraf.com/tickets?hsLang=en) [![Indiegraf-PrimaryLogo-FullColor-1](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-PrimaryLogo-FullColor-1.png?width=262&height=60&name=Indiegraf-PrimaryLogo-FullColor-1.png)](https://help.indiegraf.com/?hsLang=en) Open main navigation Close main navigation - - [English](https://help.indiegraf.com/how-to-create-an-image-grid-with-links) - [Español](https://help.indiegraf.com/es/how-to-create-an-image-grid-with-links) English Show submenu for translations - [Publisher Portal](https://portal.indiegraf.com/tickets) How can we help you? - There are no suggestions because the search field is empty. 1. [Indiegraf](https://help.indiegraf.com/?hsLang=en) 2. [Indie Website](https://help.indiegraf.com/indie-website?hsLang=en) 3. [Design & Page Layout](https://help.indiegraf.com/indie-website?hsLang=en#design-page-layout) January 7, 2026 # 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](https://help.indiegraf.com/hs-fs/hubfs/Add%20Grid.png?width=670&height=348&name=Add%20Grid.png) 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](https://help.indiegraf.com/hs-fs/hubfs/Adjust%20Columns%20to%204.png?width=670&height=349&name=Adjust%20Columns%20to%204.png) 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](https://help.indiegraf.com/hs-fs/hubfs/Add%20Image%20block%20to%20first%20grid.png?width=670&height=349&name=Add%20Image%20block%20to%20first%20grid.png) 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](https://help.indiegraf.com/hs-fs/hubfs/Adding%20Image%20Blocks%20to%20other%20Grid%20boxes.png?width=670&height=350&name=Adding%20Image%20Blocks%20to%20other%20Grid%20boxes.png) 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](https://help.indiegraf.com/hs-fs/hubfs/Duplicate%20Grid-1.png?width=670&height=349&name=Duplicate%20Grid-1.png) 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](https://help.indiegraf.com/hs-fs/hubfs/Screenshot%202026-01-07%20at%201.45.59%20PM.png?width=670&height=481&name=Screenshot%202026-01-07%20at%201.45.59%20PM.png) 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! - [Welcome to Indiegraf](https://help.indiegraf.com/welcome-to-indiegraf?hsLang=en) - [Onboarding](https://help.indiegraf.com/onboarding?hsLang=en#main-content) - [Quick Start Guide](https://help.indiegraf.com/onboarding?hsLang=en#quick-start-guide) - [Indie Website](https://help.indiegraf.com/indie-website?hsLang=en#main-content) - [Analytics & Growth](https://help.indiegraf.com/indie-website?hsLang=en#analytics-growth) - [Audience Engagement & Forms](https://help.indiegraf.com/indie-website?hsLang=en#audience-engagement-forms) - [Configuring your Homepage](https://help.indiegraf.com/indie-website?hsLang=en#configuring-your-homepage) - [Content Creation & Management](https://help.indiegraf.com/indie-website?hsLang=en#content-creation-management) - [Design & Page Layout](https://help.indiegraf.com/indie-website?hsLang=en#design-page-layout) - [Indiegraf Pay](https://help.indiegraf.com/indie-website?hsLang=en#indiegraf-pay) - [Media & Visual Assets](https://help.indiegraf.com/indie-website?hsLang=en#media-visual-assets) - [Paywall Solution: Pelcro](https://help.indiegraf.com/indie-website?hsLang=en#paywall-solution-pelcro) - [SEO and Google Tools](https://help.indiegraf.com/indie-website?hsLang=en#seo-and-google-tools) - [Site Administration](https://help.indiegraf.com/indie-website?hsLang=en#site-administration) - [Technical Questions](https://help.indiegraf.com/indie-website?hsLang=en#technical-questions) - [Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#main-content) - [Quickstart Video Guide: Indie Email](https://help.indiegraf.com/indie-email?hsLang=en#quickstart-video-guide-indie-email) - [Account Setup & Foundations](https://help.indiegraf.com/indie-email?hsLang=en#account-setup-foundations) - [Contact Management](https://help.indiegraf.com/indie-email?hsLang=en#contact-management) - [Creating Campaigns](https://help.indiegraf.com/indie-email?hsLang=en#creating-campaigns) - [Sending Campaigns & Automation](https://help.indiegraf.com/indie-email?hsLang=en#sending-campaigns-automation) - [Troubleshooting & Deliverability](https://help.indiegraf.com/indie-email?hsLang=en#troubleshooting-deliverability) - [Analytics](https://help.indiegraf.com/indie-email?hsLang=en#analytics) - [Indie Ads Manager (IAM)](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#main-content) - [Reporting & Statistics](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#reporting-statistics) - [Essential Articles](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#essential-articles) - [Native Ad Templates](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#native-ad-templates) - [Quick Start Guide](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#quick-start-guide) - [Payment Solutions](https://help.indiegraf.com/indie-ads-manager-iam?hsLang=en#payment-solutions) - [Hearken](https://help.indiegraf.com/hearken?hsLang=en#main-content) - [Planning and Preparing to Launch with Hearken](https://help.indiegraf.com/hearken?hsLang=en#planning-and-preparing-to-launch-with-hearken) - [Collecting Questions](https://help.indiegraf.com/hearken?hsLang=en#collecting-questions) - [Collecting Votes](https://help.indiegraf.com/hearken?hsLang=en#collecting-votes) - [Reporting an Answer](https://help.indiegraf.com/hearken?hsLang=en#reporting-an-answer) - [Spreading Hearken Across Your Organization](https://help.indiegraf.com/hearken?hsLang=en#spreading-hearken-across-your-organization) - [Creating and Customizing an Embed](https://help.indiegraf.com/hearken?hsLang=en#creating-and-customizing-an-embed) - [Workflow Features](https://help.indiegraf.com/hearken?hsLang=en#workflow-features) - [Platform Features](https://help.indiegraf.com/hearken?hsLang=en#platform-features) - [Setting Up Notifications and Alerts](https://help.indiegraf.com/hearken?hsLang=en#setting-up-notifications-and-alerts) - [Setting up APIs and webhooks](https://help.indiegraf.com/hearken?hsLang=en#setting-up-apis-and-webhooks) - [Data collection and exporting](https://help.indiegraf.com/hearken?hsLang=en#data-collection-and-exporting) - [Automatic categorization](https://help.indiegraf.com/hearken?hsLang=en#automatic-categorization) - [Social, outreach, and marketing](https://help.indiegraf.com/hearken?hsLang=en#social-outreach-and-marketing) - [Events and In-Person Engagement](https://help.indiegraf.com/hearken?hsLang=en#events-and-in-person-engagement) - [Monetizing your Hearken work](https://help.indiegraf.com/hearken?hsLang=en#monetizing-your-hearken-work) - [Indiegraf Experts](https://help.indiegraf.com/indiegraf-experts?hsLang=en) - [Indiegraf Product Release Notes](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#main-content) - [Product Demo Videos](https://help.indiegraf.com/indiegraf-product-release-notes?hsLang=en#product-demo-videos) - [General](https://help.indiegraf.com/general?hsLang=en) - [RevEngine](https://help.indiegraf.com/revengine?hsLang=en#main-content) - [Getting Started with RevEngine](https://help.indiegraf.com/revengine?hsLang=en#getting-started-with-revengine) - [International giving](https://help.indiegraf.com/revengine?hsLang=en#international-giving) - [RevEngine Core](https://help.indiegraf.com/revengine?hsLang=en#revengine-core) - [Organization management](https://help.indiegraf.com/revengine?hsLang=en#organization-management) - [Working with Stripe](https://help.indiegraf.com/revengine?hsLang=en#working-with-stripe) - [Contribution page basics](https://help.indiegraf.com/revengine?hsLang=en#contribution-page-basics) - [Customizing your page](https://help.indiegraf.com/revengine?hsLang=en#customizing-your-page) - [Branding and images](https://help.indiegraf.com/revengine?hsLang=en#branding-and-images) - [Advanced page settings & features](https://help.indiegraf.com/revengine?hsLang=en#advanced-page-settings-features) - [Portal & contribution management](https://help.indiegraf.com/revengine?hsLang=en#portal-contribution-management) - [Contribution data](https://help.indiegraf.com/revengine?hsLang=en#contribution-data) - [Analytics and Reporting](https://help.indiegraf.com/revengine?hsLang=en#analytics-and-reporting) - [Best Practices and Recommendations](https://help.indiegraf.com/revengine?hsLang=en#best-practices-and-recommendations) - [Receipts, reminders and transactional communications](https://help.indiegraf.com/revengine?hsLang=en#receipts-reminders-and-transactional-communications) - [Security & Legal](https://help.indiegraf.com/revengine?hsLang=en#security-legal) - [Common issues](https://help.indiegraf.com/revengine?hsLang=en#common-issues) [![Indiegrf](https://help.indiegraf.com/hs-fs/hubfs/Indiegraf-SecondaryLogo-DarkNavy-2.png?width=260&height=130&name=Indiegraf-SecondaryLogo-DarkNavy-2.png "Indiegrf")](https://help.indiegraf.com/?hsLang=en) Indiegraf is on a mission to make local news entrepreneurship a great career and life choice for journalists everywhere. [mailto:support@indiegraf.com](mailto:support@indiegraf.com) Copyright © 2025, Indiegraf Media