---
title: "How to Add a Design Grid in WordPress?"
url: https://nexterwp.com/docs/add-a-design-grid-in-wordpress/
date: 2024-11-29
modified: 2026-04-14
author: "Aditya Sharma"
description: "Looking for a seamless transition from your design to a WordPress website? The Design Tool block from Nexter Blocks ensures pixel-perfect conversion by integrating a grid guide right into the..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-a-Design-Grid-in-WordPress_-1024x519.jpg
word_count: 386
---

# How to Add a Design Grid in WordPress?

## Key Takeaways

- Nexter Blocks offers a Design Tool block that integrates a grid guide for pixel-perfect conversion in the WordPress editor.
- The Design Tool block allows users to customize the grid layout, including setting maximum width and column colors.
- Users can select between Default and Custom grid systems, with options for vertical or horizontal layout directions.

Looking for a seamless transition from your design to a WordPress website? The Design Tool block from Nexter Blocks ensures pixel-perfect conversion by integrating a grid guide right into the WordPress editor

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/extras/wordpress-design-grid-tool/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a premium block you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Design Tool block is activated, to verify this visit Nexter → Blocks → and Search for Design Tool and activate.

Go to 

- **Nexter **→ **Blocks **

- **Search **the block nameand**turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/11/design-tool-activation-new.png)

## Key Features

- **Add grid guide **- You can easily add a grid guide inside the WordPress editor and front end for a pixel-perfect conversion.

- **Custom grid** - You can easily customize the grid layout as per your requirements.

## How to Use the Design Tool Block in WordPress?

To use the Design Tool block, add the block to the page then follow the steps - 

1. In the **Design Tool Option** dropdown, you’ll have **Grid System** selected.

2. Then, from the **Grid System** section, you’ll have to select the grid system. Here you’ll find two options - 

- **Default** - This will add a grid layout guide based on the Bootstrap grid layout units.

- **Custom** - With this option, you can add a custom grid layout guide.

Let’s select Custom here.

![](https://nexterwp.com/wp-content/uploads/2024/11/design-tool-layout-options.gif)

Then from the **Direction** section, you have to select the grid layout direction. Here you’ll see two options - 

- **Left to Right** - To add a vertical grid layout guide.

- **Top to Bottom** - To add a horizontal grid layout guide. 

In the **Maximum Width** field, you can set a custom width for the grid layout.

Then, in the **Grid System Columns** field, you can set the number of columns for different devices.

You can change the grid column's color from the **Grid Color** section.

From the **Alley Space** section, you can customize the gap between the columns.

Then, from the **Background Color** section, you can change the column gap background color.

From the **Offset** field, you can add an offset value to the grid layout guide from left and right.

Then by enabling the **Display on Front Side** toggle, you can show the grid guide in the front end as well.

## Frequently Asked Questions

**Q: What should I do if the Design Tool block isn't showing up in WordPress?**
A: If the Design Tool block isn't visible, first ensure that the Nexter Blocks plugin is installed and activated. Additionally, confirm that the block is activated by navigating to Nexter u2192 Blocks and searching for 'Design Tool'. If itu2019s not activated, toggle it on. This step is crucial for accessing the grid features.

**Q: What is the best practice for setting the grid column colors?**
A: When setting grid column colors, consider the overall design and branding of your site. Use the Grid Color section to choose colors that enhance readability and visual appeal. This practice helps in creating a cohesive look across your website, making it more engaging for visitors.