説明

This plugin allows designers and developers to overlay a Figma-style layout grid on the frontend of their WordPress site to visually test alignment and spacing. It’s useful for responsive design testing and pixel-perfect comparisons to your original designs.

Enable or disable the grid overlay at any time
Configure separate values for Mobile, Tablet, Desktop, and Extended screens
Set number of columns, gutter width, and outer margin
Lightweight and clean — outputs only what’s needed

スクリーンショット

Settings screen with per-screen options

インストール

Upload the plugin folder to /wp-content/plugins/grid-overlay/
Activate the plugin through the “Plugins” menu
Go to Settings Grid Overlay and configure your options

FAQ

Will the grid show for visitors?: Yes — the overlay appears on the frontend when enabled. You can disable it anytime from the settings page.
Can I restrict the overlay to admin users only?: This version shows the grid for everyone if enabled. A future update might include visibility filters.

評価

このプラグインにはレビューがありません。

貢献者と開発者

Grid Overlay Figma-Style はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

Harish Chouhan

“Grid Overlay Figma-Style” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを RSS で購読してみてください。

変更履歴

1.1.0

Major improvement: Refactored the frontend grid overlay to use real DOM-based columns instead of a repeating background gradient.
The new DOM-based method improves alignment accuracy by adjusting for scrollbar width differences (using corrected 100vw calculations).
This change resolves longstanding inconsistencies when aligning layouts against the grid across different browsers and screen sizes.

1.0.0

Initial release