Settings
You can change the settings at Setup > PAGEGRID.
License Key
Installing PAGEGRID on or using it for a self hosted public site requires a paid license. Before you launch your project please insert a valid license key here. This only applies to self-hosted installations, cloud users don't need a license key.
Field Settings
Here you can select the blocks you want to use for your PAGEGRID field. The block template files must be placed in site/templates/blocks/ folder or installed via our block module before you can select them here. This only applies to self-hosted installations.
Additionally you can assign the field to specific templates under Add field to templates. Only templates with an existing PHP template file in site/templates/ are shown.
Interface
Here you can customize the look of the page editor interface. This only applies to self-hosted installations.
The following interface options are available:
| Option | Description |
|---|---|
| Hide Field Label | Hide the PAGEGRID field label in the page editor if there is only one PAGEGRID field. |
| Hide Page Headline | Hide the page headline in the page editor and add it to the breadcrumb instead. |
| Hide Page Title Field | Hide the page title field in the page editor and add it to the Settings tab. |
| Hide Tabs | Hide the tab navigation and add a settings icon to show them in a dropdown. |
| Hide Save Button | Hide the save button (and use automatic AJAX save) if there are no other fields than PAGEGRID on the content tab. |
| Show Tooltips | Display helpful tooltips when you move the mouse pointer over field labels in the style panel. |
Plugins
Vanilla javascript plugins you want to load when using PAGEGRID's script function. This only applies to self-hosted installations.
| Plugin | Description |
|---|---|
| lazysizes | Lazyloader for images and videos. Learn more |
Style Panel
PAGEGRID uses the Style Panel to manipulate CSS properties directly on the page. The Style Panel will only be available to "superusers" or users with the permission "pagegrid-style-panel". If you prefer to work with your own CSS code instead you can disable the Style Panel by unchecking the box "Enable Style Panel".
Google Fonts
If enabled users can select Google Fonts using the font picker, with fonts automatically loaded via CDN.
Privacy friendly Google Fonts
Check this option to request Google Fonts from BunnyCDN instead of the Google server. BunnyCDN has logging disabled, and will not log any user information. More information.
Custom Fonts
Here you can upload custom web fonts in the format "woff" or "woff2". Fonts will be uploaded to your "site/templates/fonts" folder. The uploaded fonts will be selectable in the Style Panel under "Typography > Font".
Fallback Fonts
Comma-separated list of font names to be used when a font isn't available. Default: Helvetica, Arial, sans-serif.
Colors
If you want to have selectable colors in the Style Panel, you can define them here. Comma-separated list of hex values, e.g. #FFFFFF, #000000.
- Default Font Colors: Colors available for text color selection.
- Default Background Colors: Colors available for background color selection.
Inline Editor
The fields you select here will become editable on the front-end/iframe, directly in the page. To make it work the user must also have a role assigned with the permission "page-edit-front" as well as "page-edit" for the template "pg_container". Or just assign the default role "pagegrid-editor" to any user you want to be able use the inline editor.
You can optionally disable the inline editor for the frontend while keeping it active in the backend editor iframe by checking Disable inline editor for the frontend.
Placeholder text for empty text fields
For each enabled text field you can define a placeholder text. Without a placeholder empty text fields will not be visible for inline editing.
File fields
For the default blocks the inline file uploader is enabled by default. To enable the uploader for your custom templates, place an image or video inside a <pg-edit> tag. Only single value image/file fields are supported.
CSS Code
You can add custom CSS code here. If your page has a PAGEGRID field, it will be loaded on the frontend automatically.
PAGEGRID uses a 12 column CSS grid as a default, but you can change it by overwriting the CSS. For example:
/* Optional: set main wrapper to use 6 equally sized grid columns */
.pg-main { grid-template-columns: repeat(6, 1fr); }
/* Optional: display as block instead of grid (only allows vertical dragging) */
.pg-main { display: block; }
/* Disable manual positioning of grid items */
.pg .pg-item { grid-row-start: auto; }Javascript Code
You can add custom Javascript code here. If your page has a PAGEGRID field, it will be loaded on the frontend automatically. If you need to add Javascript code to the backend as well you have to load it inside your template file.
Cache
PAGEGRID caches markup, JS, and CSS to speed up your site. Check Disable frontend cache to turn off this behavior. Only disable this if you are experiencing issues. Note that the cache is already bypassed for logged-in users and URLs with parameters, so you don't need to disable it to see your latest changes.
This setting is independent of ProcessWire's internal markup cache.
Uninstall
Before you can uninstall the module you have to delete all PAGEGRID fields. Check Delete Fields to remove all PageGrid fields and their data.
