Grid Line

📐 Grid Line Extension

The Grid Line extension helps you align and structure your layouts perfectly in Elementor. Whether you’re designing pixel-perfect sections or building complex layouts, the grid overlay helps maintain visual consistency.

🔓 Step 1: Enable Grid Line Extension

1. Go to Topper Pack → Extensions
2. Locate Grid Line and toggle it ON
3. Click Save Settings

🎯 Two Ways to Use Grid Lines

Topper Pack gives you full flexibility to use grid lines either globally for the full page or locally for a specific section/container.

1️⃣ Page-Level Grid Lines (Global)

Apply grid lines across the entire page to visualize layout structure site-wide.

Steps:

1. Open your page with Elementor
2. Click the Settings (gear icon) in the bottom-left
3. In the panel, go to the TPP Page Grid Line
4. Enable Page Grid Line
5. Customize:
   • Line Color
   • Columns
   • Line Width
   • Outline
   • Max Width
   • Z-Index

2️⃣ Section-Level Grid Lines (Local)

Use grid lines for a specific container or section to refine that area only.

Steps:

1. Select the container/section in Elementor
2. Go to the Advanced tab
3. Scroll to the Grid Lines (TP) panel
4. Enable Grid Lines
5. Customize:
   • Column Count
   • Line Width
   • Line & Column Colors
   • Z-Index
   • Direction (angle in degrees)
   • Gap between lines (if needed)

💡 Use Cases:

• Create perfectly aligned designs
• Quickly visualize layout columns
• Ideal for designers, developers, and UI perfectionists
• Helps build consistent spacing and alignment

⚙️ Global Grid Line Controls (Page-Level)

These settings apply to the entire page layout and are useful for planning your overall structure before designing individual sections.

🎨 Line Color

• Purpose: Defines the color of the vertical grid lines.
• Use Case: Choose a soft, visible color (like light gray or light purple) that contrasts with your background but doesn’t distract you while designing.
• Tip: Transparent or pastel tones work best for visual clarity.

🧮 Columns

• Purpose: Sets the number of vertical columns that divide your page.
• Default Value: 12 (ideal for most grid systems)
• Use Case:
  • 12 columns = standard web layout
  • 16 or 24 = more granular design control
• Tip: Match this with your design system or framework (Bootstrap uses 12 by default).

📏 Line Width

• Purpose: Sets the thickness (in pixels) of each grid line.
• Example:
  • 1px for subtle guides
  • 2px+ if you want stronger visual separation
• Tip: Keep it low for clean workspace visuals.

📐 Outline

• Purpose: Adds an outer boundary box around the grid layout.
• Use Case: Helps visualize the full width or container limits of your design.
• Toggle: On/Off
• Tip: Enable it to understand your max container area or page boundaries.

📦 Max Width

• Purpose: Defines the maximum grid width across the entire page in pixels.
• Example:
  • 1200px or 1400px for common container widths
  • 100% for full-width layouts
• Tip: Use this to simulate how your grid fits within your actual page container.

🔢 Z-Index

• Purpose: Controls the layer order of the grid overlay.
• Higher Z-Index = grid appears above all elements
• Lower Z-Index = grid may fall behind some elements
• Example: Set to 999 or 1000 to ensure visibility over sections
• Tip: Adjust if you notice your grid isn’t showing over specific containers.