Jump to content

ProcessWire + RepeaterMatrix + CSS Grid Page Builder Concept

Jonathan Lahijani

Recommended Posts

If you're looking to do an elaborate a page builder with ProcessWire and don't want to pull your hair out, I highly recommended viewing this video:

A couple notes:

  • with the css grid specification, you can assign multiple blocks to the same grid-area but they will overlap each other.  I've "overcome" this by combining multiple blocks into a parent div and assigning that instead. pretty easy to do.
  • i didn't demonstrate it, if your blocks have a grid structure within them (like built with flexbox), you can still assign that block to a grid-area.  so if your blocks themselves have a grid structure, that's ok.  for example, if your css grid layout is 6 columns, but you have a block that has a grid inside of it (built with like uikit's grid that's 5 columns), you can assign that block to the grid-area.
  • with the css grid specification, the flow of the blocks does not have to match the flow of the grid-areas.  this is insanely powerful.


  • Like 29
  • Thanks 1
Link to comment
Share on other sites

Really, really nice!

What do you think of packing this into a fieldtype? Would be nice to have all the logic, files and fields packed into a module and to only have to add your field in the template editor :)

I'm also working on a site with matrix content builder and using field rendering makes the code very clean:

My matrix field is called "content" and all my items are included via WireRenderfile(). Then it's as easy as placing a file with the markup in /templates/matrix (here 2columnlayout.php).



  • Like 6
Link to comment
Share on other sites

  • 2 weeks later...
  • Create New...