Gridly Design Overlay

Description

Gridly Design Overlay adds a front-end grid overlay that helps developers and site builders check responsive layout alignment while working on WordPress sites.

The plugin includes a settings page under Settings where administrators can configure:

  • Overlay visibility.
  • Overlay color.
  • Overlay opacity.
  • Desktop grid container width.
  • Desktop, tablet, and mobile columns.
  • Desktop, tablet, and mobile gaps.
  • Desktop, tablet, and mobile side spacing.

Tablet settings apply from 480px through 1024px. Mobile settings apply up to 479px.

Installation

  1. Upload the plugin files to the /wp-content/plugins/gridly-design-overlay/ directory, or install the plugin through the WordPress plugins screen.
  2. Activate the plugin through the Plugins screen in WordPress.
  3. Go to Settings > Gridly Design Overlay to configure the overlay.

FAQ

Who is this plugin for?

This plugin is intended for developers and site builders who want a simple visual grid overlay while checking responsive layouts.

Does the overlay affect visitors’ ability to click the page?

No. The overlay uses pointer-events: none, so it does not block normal page interaction.

Can I configure different grid values per device size?

Yes. The settings page includes separate desktop, tablet, and mobile grid values.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“Gridly Design Overlay” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.0.4

  • Renamed the plugin to Gridly Design Overlay and aligned the slug, text domain, and contributor metadata.

1.0.3

  • Rebuilt the plugin package for resubmission.

1.0.2

  • Rebuilt the export with the approved plugin slug and text domain.

1.0.1

  • Renamed the plugin to avoid restricted plugin directory terms.
  • Kept the text domain aligned with the plugin slug.

1.0.0

  • Initial release.