PAGEGRID – A visual page builder for ProcessWire.
Design fully responsive websites (or parts of them) without writing any code. Use ProcessWire's native templates (and fields) to create your own blocks. Rearrange and resize items in a visual way and use inline or modal editing to quickly edit the content of your website.
(Screenhot uses AdminThemeCanvas but it will work just fine with the core Uikit Theme)
Try PAGEGRID for free
PAGEGRID is not free software. However, you can try PAGEGRID on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, buy your license.
Get it here
Download from GitHub Download from Module Directory
Process Wire 3.0.210 or greater
Go to “Modules > Site > Add New“ in your admin
Paste the Module Class Name "FieldtypePageGrid" into the field “Add Module From Directory“
Click “Get Module Info“
On the overview, click “Download And Install“
On the following screen, click “Install Now“
More install options
Module install guide
Site profile install guide
Get up and running
Create your own blocks or install the PageGridBlocks Module (installs premade templates and fields for PAGEGRID blocks).
page-grid.com – Get to know PAGEGRID.
Documentation – Read the official documentation.
Issues – Report bugs and other problems.
Forum – Whenever you get stuck, don't hesitate to reach out for questions and support.
Why I build it
ProcessWire is super flexible in itself and lets me build whatever I want. But building a custom website can be a lot of work. For some projects, I've ended up using a lot of templates and fields. To make my pages more flexible, I sometimes build my own little page builder based on the RepeaterMatrix or PageTable module. While these page builders were great for the specific site I was building them for, they were never flexible enough to be used for new projects, so I ended up customizing them frequently. The more complex they became, the harder it became to use them for my clients. After playing around with some WYSIWYG page builder tools, I realized that while they can save me a lot of time, they can also be very limiting or have expensive subscriptions and somehow tie you to their ecosystem. So I decided to build my own page builder based on the most flexible CMS I knew.
This fieldtype Renders block templates and adds drag and drop functionality in admin, as well as enable inline editing for text, and file fields. It also let's you manipulate CSS in a visual way to design fully responsive websites (or parts of them) without writing code.
The fieldtype comes with an optional style panel to manipulate CSS properties directly on the page. You can customize the panel or disable it completely from the module settings (and just use a CSS file that you include in your template). The data to style the items is stored directly on the item using PW's meta data (no extra fields are created).
Don't want to give your client all that power? Use ProcessWire’s powerful permission system to control what your clients can edit. You can then also grant access individually to the style panel, resize or drag functionality using ProcessWire's build in permission system.
Blocks are just pages
Blocks are defined by native PW templates and fields
Manipulate CSS grid or flexbox based layouts in a visual way to design fully responsive websites (or parts of them)
Encapsulated frontend code (PAGEGRID renders the template of your frontend inside an iframe in the backend)
Design and editing features can be disabled for certain roles (using ProcessWire's build in permission system)
Inline editing of text, textarea, TinyMCE (supports latest version), ckeditor and file fields
Simply drag and resize to manipulate grid items directly inside the backend
Manipulate grid columns and rows directly on the page (use any number of columns you want)
All style manipulations are saved as JSON and used to generate dynamic styles that you render in your main template (no inline styles)
Nested groups/grids (child pages of nested blocks are created under group parent)
The style panel supports adding custom classes and assigning styles to them. These classes can be used globally on all pages (a css class is also a page)
The style panel supports selecting html tags to style tags globally across the whole site
Global blocks work with page reference field (changes on one page, changes all blocks on all pages)
Manual and auto placement of grid items
blocks and nested blocks can be cloned
Redo/undo and copy/paste shortcuts
Editing block items in modal sidebar immediately updates frontend (Ajax Save).
Define custom icons for your blocks via native template settings (template -> advanced -> icon)
Thanks to everyone who helped me improve my coding skills and for the support of this great community! Special thanks to @diogo for the valuable feedback and @ryan for this great CMS and his support for the PageFrontEdit module!