Follow for free plugins, new theme releases and theme news
Plugin Description
The plugin is designed to overlay the Golden section grid on the page during the preview when editing.
Allows you to visually assess whether the page element sizes and its position correspond to the Golden ratio.
You can change the size of the grid and move it around the page using the mouse and its wheel.
There are grid modes: lines, circles, squares, and the Fibonacci spiral. There are also tooltips for the control buttons. All modes can be enabled and disabled using the checkboxes on the options page.
The data table of the appropriate width and height of an element is also processed. You can hover the cursor over the data in the table. The grid lines corresponding to the data will be highlighted.
A set of control buttons allows you to hide and display the grid and data table, change the grid size proportionally, invert colors, make lines dotted, and rotate the displayed spiral and circles.
There is also a button for General enabling and disabling plugin elements on the screen.
On the option page you can choose colors of lines, remove unnecessary elements of the grid, change the line width and opacity.
There is also a checkbox that allows you to completely enable or disable the plugin. So, there is no need to deactivate the plugin when it is not needed.
The plugin does not affect the appearance and html code of the page when its publishing.
Tested on browsers: Yandex v20.8.3.115, Google Chrome v85.0.4183.121, Opera v70.0.3728.189, Microsoft Edge v85.0.564.51, Firefox v78.0.2.
Usage
- Install the plugin.
- Set the grid parameters on the options page and save them.
- Open an existing page for editing or create a new one.
- Make a preview of the page. You will see the Golden section grid on it.
- Use the mouse and its wheel to set the width and position of the grid on the page or its elements.
- Adjust the element sizes using CSS to get the Golden ratio harmony.
- Save changes in the style file.
The grid is only visible in preview mode. It is disabled automatically and does not appear on the published page.
Screenshots
Option page
Circle drawing mode
The Grid when determining appropriate column margins and text box widths.
The Grid when determining appropriate heading height, heading-to-next block spacing, font sizes, line spacing, image position, etc.
Highlights the grid line when the cursor hovers over a table row.
