---
title: How To Use Grid Line Extension By Wow Elements Pro
description: "The [Grid Line extension](https://wowelements.com/extensions/grid-line-extension-for-elementor/)in [Wow Elements](https://wowelements.com/) Pro allows you to add stylish grid line overlays to your website sections and layouts without any coding. It helps create modern and structured designs by displaying customizable horizontal and vertical grid lines in…"
url: "https://wowelements.com/docs/grid-line-extension/"
updated: "2026-07-27"
category: Extensions Customization Guide
tags:
  - Elementor
  - Elementor Addon
  - Elementor Extensions
  - Elementor Templates
---

# How To Use Grid Line Extension By Wow Elements Pro

The [Grid Line extension](https://wowelements.com/extensions/grid-line-extension-for-elementor/)in [Wow Elements](https://wowelements.com/) Pro allows you to add stylish grid line overlays to your website sections and layouts without any coding. It helps create modern and structured designs by displaying customizable horizontal and vertical grid lines in the background of your content. With flexible customization controls and responsive styling options, you can easily enhance the visual depth and layout alignment of your Elementor website. In this documentation, we will guide you through how to use and customize the Grid Line extension in Wow Elements Pro.

## Enabling the Grid Line Extension

![Enabling the Grid Line Extension](https://wowelements.com/wp-content/uploads/2026/05/Enable-the-extension-3-1024x484.webp)

To use the **Grid Line **Extension from Wow Elements Pro, first, you have to enable the extension.

1. Go to **WordPress dashboard → Wow Elements** Plugin dashboard.
2. Then, Click the **Extension** Tab.
3. Search the **Grid Line** Extension Name.
4. Enable the **Grid Line** Extension.
5. Hit the **Save Settings** Button

## Where To Find The Grid Line Extension

![Where To Find The Grid Line Extension](https://wowelements.com/wp-content/uploads/2026/05/Where-to-Find-the-extension-4-1024x571.webp)

You need to go to the Page first where you want to add the extension. Navigate to **WP Dashboard > Pages > Select the Page you want > Edit Page with Elementor**. After the page opens, then follow the below steps -

1. Click on the **Page Settings icon** on Elementor Editor Page.
2. Now click on the **settings** tab.
3. Here, below the General Settings, you will find the **Grid Line Extension** tab.

## Configuring the Grid Line Extension

![Configuring the Grid Line Extension 01](https://wowelements.com/wp-content/uploads/2026/05/Configuring-the-Grid-Line-Extension-01-1024x529.webp)

In this part we will have a look to all the options that are available on Grid Line extension. The changes you will made that will apply to the page. Let's see what we have here and how the options works -

**1. Grid Line:** Enable the switcher by which you will get more customisation options below.
**2. Line Color:**After enable the switcher you can see the visual of the grid lines to your page. Now, with this option you can change the line color.
**3. Column Color:**You can make changes to the column color with this option.
**4. Columns:**You can add the number of columns that you want to show to your audience with this option.

![Configuring the Grid Line Extension 02](https://wowelements.com/wp-content/uploads/2026/05/Configuring-the-Grid-Line-Extension-02-1024x540.webp)

**6. Max Width:**You can adjust the width of the grid line area with this option.
**7. Line Width:** You can set the thickness of the line with this option.

![Configuring the Grid Line Extension 03](https://wowelements.com/wp-content/uploads/2026/05/Configuring-the-Grid-Line-Extension-03-1024x564.webp)

**8. Line Direction (deg):** This option controls the angle and direction of the grid lines displayed in the background. By adjusting the degree value, you can rotate the grid lines to create different visual styles and layout effects.
**9. Z-index:**The Z-Index option controls the stacking order of the grid lines relative to other elements on the page. It determines whether the grid lines appear in front of or behind your content.

All done, You have successfully customised the Grid Line Extension on your website.

## Video Assist

[How to Use Grid Line Extension in Elementor | Wow Elements Tutorial](https://www.youtube.com/embed/Nffmq4gnjgo?feature=oembed&enablejsapi=1)

You can also watch the tutorial video about the Grid Line Extension. Please visit the [demo page](https://wowelements.com/extensions/text-gradient-background-extension-for-elementor/) for examples.

Thanks for staying with us.