Search the Community

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. 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 Requirements ProcessWire 3.0.210 or greater Installation 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 Quick start Create your own blocks or install the PageGridBlocks Module (installs premade templates and fields for PAGEGRID blocks). What's PAGEGRID? 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. Concept 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. Features 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) Automatic page save (Changes are getting saved via ajax, no need to click the save button) NEW: Option to automatically load lazysizes lazyloader (V 0.1.0) Changelog V 0.1.0: Feature: Option to automatically load lazysizes lazyloader (Module Settings > Plugins). V 0.1.5: Fixed bug: Tabs not working when editing items via modal panel. V 0.1.6: Fixed bug: Setting height in VH unit was not working. V 0.1.7: Feature: Option to hide save button (and use automatic ajax save ) if there are no other fields than PAGEGRID on the content tab (Module Settings > Interface). V 0.2.0: Fixed bug: Custom block wrapper element <p> was not working with inline editor. V 0.2.0: Fixed bug: Inline editor would sometimes not save after clicking cancel and then edit item again. V 0.2.0: Feature: Now it's possible to add classes to elements inside richt text fields via style panel. V 0.2.0: Fixed bug: Inline editor was not working after first item was added to the page (needed reloading the page). V 0.2.1: Feature: Updated PageGridBlocks Module: Using TinyMCE as the default editor. V 0.2.1: Feature: Updated PageGridBlocks Module: Group/container wrapper element can now be changed to <div>, <section>, <article>, <header>, <footer>, <nav>. 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!

hi there everybody, I'm new to Processwire and I'm trying to figure out how things can be done. First of all i'm no developer so i have some difficulties with php and coding at all. So I tried to put some sections on the home page of the website I am going to create. The point is that i'm unsure if this is the way to go. Maybe there is an easier way or something completely different. I would like to do this without any plugins or some kind of stuff. How can i limit the amount of columns if i do it this way? ( a 3 column section can have only 3 columns right? ) And Yes i did read the tutorials. How do you guys do this? For a better understanding I have included some pictures. Thank you.

Hi guys, I'm trying to wrap my head around creating dynamic blocks where the end-user can add blocks on the fly on individual pages without specifying it in the templates. What approach do you guys usually do? I've tried scouring the forum for solutions but seems to get abit confusing. I've read Hanna Code, Repeater Matrix, PagesTables and seen the youtube tutorials. Not sure, where to start from. I only got very minimal knowledge of php as I came from a front-end background (html, css, js) I'm looking to define my blocks somewhere where the end-user will not be able to see. For example, a simple block container <div class='container'> <div class='container__title'> {{ $title-field }} </div> <div class='container__image'> {{ $image-field }} </div> </div> Then maybe we got a second block container <div class='container-2'> <div class='container-2__title'> {{ $title-field }} </div> <div class='container-2__image'> {{ $image-field }} </div> </div> Then the end-user can just to add these blocks into any pages on the fly and re order them according to their needs. My processwire is v3 using the UIKit3 Admin if that makes any difference Sorry if I sounded too noob.

(apologies if this looks too similar to previous topic I created, seems more logical as a new topic) I'm curious if anyone here is implementing something along the lines of Drupal's block / Joomla's custom (editable) module functionality? In other words, areas that are editable in the backend, that can be placed on multiple pages without needing to re-enter the content on each page it is used. I tried to do this using a page as a block, and then field type Page (to get a page within a page), but this led to issues with rendering, and more important this creates an object $page->fieldtypePage which is exceptionally large, so I would prefer to avoid that route. My guess is those that do it, do it outside of PW with PHP. But the 'blocks' being editable and creatable by a site editor is important so I need to explore this or find a different solution (or tell the client no-can-do).

Hi, I have the following simplified layout on my page: ... row1_card1 - row1_card2 - row1_card3 row2_card1 - row2_card2 - row2_card3 ... You can add as many rows and cards per row as you like. Each card has a title, text and a button whose text is the same on every card but should be editable too, just not individually. I wonder what is the best approach to do this without making it awfully complicated to setup in the admin from an editors perspective. I thought about a solution using a PageTable for the rows and a Repeater for the cards but that started to be complicated to setup even. It would be awesome if you could use the FrontpageEditing to edit these cards and even add more or add rows. How would you implement it?

I'm just wondering if there a way of creating block like functionality similar to say Episerver / drupal blocks?? I guess i could treat the template as a view that loads in sever partials (kinda like blocks) ?? Any ideas on this would be great.

Just starting to look into PW, and really liking the concept so far. I think this question may have been asked, possibly here or here - but maybe not quite the same issue. I'm looking for a way to do a "portal"-style block-system, but with inheritance. Drupal doesn't really do this (or doesn't do it well) and I'm not sure it's quite what was asked for in those other two threads, so let me try to explain. Basically, I want to allow the content administrator to place arbitrary blocks in, say, a left and right sidebar. These blocks could be anything from just a title and some static HTML, or something more complex like a Google Map or some kind of calendar or "social" widget. Blocks should "fall down" through the hierarchy (perhaps optionally) - meaning if you put a block on a parent page, child pages should inherit it automatically. The blocks should be prioritized, perhaps using a simple "weight" or "priority" number for sorting. The point is not to compose pages or build articles (such as is done in Concrete5, for example) - but something more along the lines of what StackBox CMS does, where content-locations ("positions" or "slots" or whatchawannacallit) can be shared... somehow ;-) Make sense? Is there a sensible (performant) way to approach this in PW? I'm thinking of one possible approach, which is to have these "blocks" actually be hidden "pages" with various templates, one for each kind of "block" or "widget" - located under a pair of hidden "left column" and "right column" pages in the hierarchy, which would determine the "block" order/priority by simply sorting them under these two parents. The page-templates can simply use the API to fetch the list of "block pages" for reach column, and render each of them in order. What I can't figure out is how you would achieve the "inheritance" effect - blocks "falling down" to subpages, based on the page-hierarchy itself. One idea that comes to mind, is to use tags - so for instance, if I tag a page with "advertising", any "block page" tagged with "advertising" would be fetched and displayed. To find inherited tags, however, I would have to actually walk up the page hierarchy and look for additional tags for which to query blocks. I suppose that would result in more overhead the deeper the page is nested - so maybe that's not a good idea? Can you think of better way (or more in tune with the "PW mindset") to approach this? Thank you for making this CMS available! I'm pretty excited about this, and I have a feeling this might be the (sane) Drupal-alternative I've been waiting for! ;-)