Search the Community

Hey everyone! Finally I have time to post a detailed developer walkthrough for PAGEGRID. I have the feeling that many people don't know how flexible PAGEGRID actually is as a developer tool. I think this is mainly due to the fact that most videos are showing the no-code features of PAGEGRID. But since these features are completely optional and PAGEGRID has a lot more to offer, I've put together a video walkthrough to show you exactly what I mean. My hope is that it'll give you a clearer picture of how PAGEGRID can fit into your projects and help you decide if it's the right tool for you. Please take a look at the video below! I think you'll be surprised at what PAGEGRID can do. PAGEGRID's core concepts (video summary): Your markup: Unlike many other site builders PAGEGRID gives you complete control over the markup and structure of your frontend. You can use PAGEGRID to build specific sections or parts of your custom coded website or you can use it as a full-blown site Builder that can work without any coding. Everything is a page: PAGEGRID items are ProcessWire pages that are defined through native ProcessWire templates and fields. Control what clients can edit: PAGEGRID offers an intuitive editor experience that's easy to learn for clients. Editing and design features can be controlled through ProcessWire’s native roles and permission system. Your CSS: You can use your code editor to write CSS or you can bring your own CSS framework. PAGEGRID makes no assumptions about your CSS code. And it’s not just for Grids, display properties like Flexbox, Block or Inline-Block are also supported. Nesting: A powerful feature of PAGEGRID is nesting and while this feature is completely optional it's quite useful for a lot of cases. You can define a block as a container and can define what kind of templates are accepted for the children. This can be used for layout purposes or to group items together, another example might be a slider or gallery block that the user can add items to or basically any repeatable content that you might want to put inside a block. Developer walkthrough: Developer Documentation: https://page-grid.com/docs/#/developer/ How to create a custom block: Documentation for creating blocks: https://page-grid.com/docs/#/developer/blocks Try PAGEGRID for free PAGEGRID is not free. 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. Installation PAGEGRID (FieldtypePageGrid) is listed in the modules directory, you can install it like any other module. See the install guide for more information. Recent Updates (2025) Performance improvements (markup cache integration) (march) Quick add feature (february) Symbols and Patterns (january)

If you want to support the development of my PAGEGRID module you can find it now on Kickstarter. You can donate here. Thanks for your support!

Multiple sites per account (Cloud version) Hi, I have just launched the new version of PAGEGRID Cloud (SaaS). It's now possible to have more than one site. I also removed some of the old restrictions for the free version. Now you can have unlimited sites, pages and items and only the webspace and publishing options are limited by the tier. This makes it more flexible and easier to get started. Simultaneously publish a portfolio, client website, idea boards, a profile site — basically any kind of site you need — all with a single account. Create as many sites as you like for free. Choose a desired service option and make a site public when you are ready to launch. Start with a blank canvas or use one of the site templates. Optionally buy a self-hosting license and export a site at anytime. (Of cause you can still host ProcessWire yourself and just install the PAGEGRID module from the modules directory.) Start for free (More templates will be added soon)

Multi field support The latest version adds support for multiple PAGEGRID fields per page. This makes PAGEGRID more flexible when you want editors to control only some parts of the layout. Each field can use its own block templates: If you want to render more than one PAGEGRID field per page, you can call the render function for a specific field like this (assuming you added the fields named “mygrid” and “mygrid2” to your page template): <!-- render markup for field mygrid --> <?= $page->mygrid; ?> <!-- render markup for field mygrid2 --> <?= $page->mygrid2; ?> The old render function $pagegrid->renderGrid($page) still works, but it will always render the first field it finds. You can use $pagegrid->renderGrid($page, $field) or $page->fieldName to render a specific field. Custom code and markup You don’t have to write complicated foreach statements, PAGEGRID takes care of rendering clean markup. PAGEGRID wraps each item in a wrapper element. You can change the tag name or add custom classes to it easily. The rest of the markup is inside your block templates. Nice and clean. Add this function at the top of your block template file to change the wrapper element: <?php //The wrapper element of this block template uses the section tag and some custom classes $pagegrid->renderOptions(['page' => $page, 'tag' => 'section', 'classes' => 'my-class my-class-2 foo-class']); //Here goes your markup ?> CSS code It’s also easy to control the behavior of the grid using only CSS code (If you prefer to write your own CSS code or include a CSS framework, you can disable PAGEGRID‘s style panel): /* overwrite PAGEGRID defaults */ /* wrapper */ /* Use 6 equally sized grid columns */ .pg { grid-template-columns: repeat(6, 1fr); } /* items */ /* set both properties to auto */ /* let grid items take the available space */ .pg .pg-item { grid-row-start: auto; grid-column-start: auto; } /* or set only grid-row-start to auto */ /* items can still be positioned freely on the columns */ .pg .pg-item { grid-row-start: auto; } /* new items */ /* you can use this class to set the defaults for new items */ /* here we are overwriting the default size of grid items */ /* using this class makes sure you can still resize items with the PAGEGRID field */ .pg .pg-item-added { grid-column-end: span 3; /* let new grid items span 3 columns */ grid-row-start: auto; /* you can also change the placement here */ } You don't even have to use grid, flexbox or block also works. PAGEGRID makes no assumptions about your CSS code. Just make sure to call your stylesheet after you render the styles from PAGEGRID, so you can overwrite the defaults. Item Placement As a default dragged items will be placed manually on the grid. Manually placed items can overlap themselves. Here is a quick example, how the CSS properties grid-row-start: auto; and grid-column-start: auto; effect the dragging of grid items: Backend/Frontend PAGEGRID renders the same template in the backend (iframe) and frontend so the design will look the same. If you want to render only some parts in the backend you can use this check: <?php if( $pagegrid->isBackend() ) { // render things only for the backend } else { // render things only for the frontend } ?> Alternatively you can also load different templates for the backend and the frontend. E.g. you can do this at the top of your template file (assuming you use your own template file instead of the default pagegrid-page.php): <?php namespace ProcessWire; // in the backend we render the default template and return (renders just the field) // ignores markup regions by default (file has $pagegrid->noAppendFile($page)) and just renders that file if( $pagegrid->isBackend() ) { include('pagegrid-page.php'); return; } ?> <!-- render frontend stuff here (you can use markup regions if you like ) --> <div id="content"> <p>Custom frontend code for <?= $page->title ?></p> <!-- render PAGEGRID for the frontend --> <?= $pagegrid->styles($page); ?> <?= $pagegrid->renderGrid($page); ?> <?= $pagegrid->scripts($page); ?> </div> In this case you have to load your custom CSS code in both files if you want the backend/frontend to look the same. For more examples check out the docs

A lot has happened since the first version of PAGEGRID. At first I used PAGEGRID myself to build smaller custom websites faster or to allow users more freedom for the layout of certain pages. But since a page builder like this is quite time consuming to maintain, I decided to release PAGEGRID as a commercial module to support it in the long run. Initially I had ProcessWire users in mind. But my idea for the module was also to make PAGEGRID (and ProcessWire) interesting for a group of users who are not so experienced with code. I soon realized that this group is able to work with PAGEGRID, but often does not get along with the installation process (E.g. Graphic designer friends of mine were never able to install ProcessWire themselves). Things that we take for granted, such as creating a database and working with FTP, were difficult for them. That's why I decided to launch PAGEGRID cloud. PAGEGRID Cloud ☁️ With the new cloud service, it's easier than ever to create a website. Don't worry about hosting, installation and server updates and focus on designing your website ?️. Start with the free plan and upgrade to unlock more features. Websites are hosten on Uberspace and the process of creating a new ProcessWire instance is completely automated. For now consider this a beta launch, since it was not tested with a lot of users. Even if you are not inetrested in PAGEGRID Cloud, I am happy about everyone who wants to help with testing. Start for free (Note: I won't share your email with third parties or spam your inbox and your password is saved through ProcessWire's native encrypted password field.) Self-hosting Of course you can still host PAGEGRID yourself. Just install the module (The site profile is deprecated, but I made it much easier to get started with the module). You can even export an existing cloud website and install it on another server (E.g. You can start with the free cloud plan and later export the site und install it on your own server). Self-hosting is more flexible since you have access to the API and code. This is the best option for users with coding knowledge, who want to build their own blocks or use PAGEGRID as part of a larger individual website. Other updates this month: Pin scroll animations Elements can now be pinned to the screen for a certain scroll distance. When the scroll distance is exceeded, they are released and continue to scroll normally. This feature uses the native CSS position sticky and some javascript to update the scroll state. Client-side resizing of images The latest update brings support for client-side resizing of images uploaded through the inline file uploader. Once enabled images will be resized and compressed before they are uploaded to the server. This makes uploads faster and saves disc space. You can enable this option in the admin through ProcessWire's native image field settings. Accordion Block (PageGridBlocks Module) I added a new block that shows a vertically stacked set of clickable headings that can be expanded to show more content. Content can be added as child items, so you can be very flexible with the design of it.

PAGEGRID 2 is out now! ? The new version contains several bug fixes and adds exciting new features. It's also more flexible and easier to use. Check out the new website ? and click the edit button ✏️ to see for yourself. With this update, PAGEGRID becomes a very flexible no-code editor that still gives developers the power and control they need. Easily modify existing block templates or create your own with your favorite code editor and ProcessWire's powerful API. Use PAGEGRID to build whole websites, connect PAGEGRID to regular ProcessWire templates/pages or use PAGEGRID only as a "body" field. PAGEGRID 2 uses as many native features from ProcessWire as possible (everything is a page). NEW Reusable Symbols Turn nav bars, footers, or any combination of items into symbols that you can reuse wherever you need them. (Symbols are pages) Animations Add powerful multi-step CSS animations with a few clicks. Use interactions like scroll, mouseover, inview, loading or click to trigger them. Reuse them throughout your website. (Animations are pages) Blueprints Blueprints can be used to automatically populate empty pages with a predefined layout. They are useful if you want website editors to start from a base design when they create new pages. (Blueprints are pages) DOM Navigator The dom navigator makes it possible to select any markup on the page through PAGEGRID's style panel. It gives you full control over your site's appearance. Style regular templates Make CSS edits to any template inside processwire just by adding the PAGEGRID field to it (works with any markup). VW and VH units Almost all style inputs now support PX, %, VH and WV units. Updated Google Fonts The fonts list has been updated to include the latest fonts and material icons. Datalist Block (PageGridBlocks module) The new datalist block renders a link list of pages that you can define. It can render a title, thumbnail, video, or text per page. This can be useful for rendering a grid of your latest portfolio projects, news, or a list of articles. iFrame Block (PageGridBlocks module) The new iFrame block uses layziframe to layziload any iFrame when you click a placeholder. You can upload a custom placeholder or, for YouTube/Vimeo, the placeholder can be loaded automatically and saved to the database (to comply with the EU General Data Protection Regulation). This is great for embedding external services such as YouTube, Vimeo, Spotify, Soundcloud, or others to your site. –––––––––––––––––––––––––– How to update from version 1: Please make sure you run the latest ProcessWire version before updating. I would also recommend to make a database backup for existsing websites before the update (just to be save). Then simply update the FieldtypePageGrid and PageGridBlocks modules.

Watch this 6-minute video to learn the basics of PAGEGRID. TIPP: You can hold down [SHIFT] while dragging to change the parent of an item. More shortcuts How to install and setup the module

Dear beta testers, thanks for your help! PAGEGRID is now available here: