How to emulate something like a WP PageBuilder?

[Knubbi]

Hi Processwire, you look totally awesome!

I am coming from Dreamweaver with decent HTML/CSS but basic PHP skills. As our website is getting too large, I gave Wordpress a short try until the first two plugins don't like to work together and messed everything up.

However, I just get any traction, how to use Processwire to create a modern, responsive Bootstrap 4 powered website.

Ideally, when adding a new frontend webpage, there would not just be a single body CKEditor text box but the option to stack multiple sections with a selector to add one of the usual components (jumbotron, testimonials, feature columns). Somehow like a WP page builder.

Is there any tutorial, I missed?

Thanks for any help

[dragan]

You could use Repeater Matrix to accomplish this.

Or you could take a look at this new module:

There are also several site-profiles using frameworks like Bootstrap or Foundation out there...

[wbmnfktr]

I don't know if this will help you but in the last 2 years I/we created several sites and therefore used ProcessWire to manage all of their content.

First of all we created plain HTML/CSS prototypes with almost every detail needed. Afterwards I/we created the logic in ProcessWire. Inspired by other page/article builders we created things in ProcessWire with Page Tables (extended) and the the ProField Repeater Matrix.

Based on your knowledge in ProcessWire syntax, logic and modules your outcome may differ from simple site structures to absolute individual page/site constructs.

You might want to look into the showcase section to find out what others build already.

As a starter in ProcessWire you might also want to team up with one of the more advanced users to help you building sites.

[pwired]

Have you tried Processwire plus the UIKit 3.x.x framework ?

[louisstephens]

After reading your question a bit more carefully, I would give a +1 to Repeater Matrix (pro module). You could code the partials (jumbotron, testimonials, etc etc) and then allow users to add in your predefined options.. The only real "hard part" is figuring out rows/columns. I attempted earlier this year to nest multiple Matrix fields for rows, columns, and options but got really confusing for the end user. This has been the only caveat I have found.

[wbmnfktr]

2 minutes ago, louisstephens said:

I attempted earlier this year to nest multiple Matrix fields for rows, columns, and options but got really confusing for the end user. This has been the only caveat I have found.

Never ever give endusers too much options as in decisions.

A lesson I learned way too early.

Give them pre-defined options (for example: 2-columns, 3-columns, 4-columns, big jumbotron, small jumbrotron). 
Pre-defined sets of settings work much better than fully customizable parts - for my clients and for my cases.

[louisstephens]

15 minutes ago, wbmnfktr said:

Never ever give endusers too much options as in decisions.

A lesson I learned way too early.

Give them pre-defined options (for example: 2-columns, 3-columns, 4-columns, big jumbotron, small jumbrotron). 
Pre-defined sets of settings work much better than fully customizable parts - for my clients and for my cases.

Oh I agree completely! In fact, I did exactly as you suggested. Where it got confusing for the enduser was a bunch of nested matrix, and if a "mistake" was made further down the line with their selection, they would have to delete a large selection and restart.

 

However, I do need to come up with a solution that might make things a bit easier.

[wbmnfktr]

Can you define what's need to be accomplished?

[Knubbi]

The Repeater Matrix looks great. Thanks for all the input.

@wbmnfktr The whole website is quite complex (multilanguage marketing website, product online documentation, helpdesk, forum, newsletter system, shop, customer login).

I feel, that this can be done with Processwire - I  would like start with just the marketing website in the beginning ("lowest hanging fruit").

But I am still clueless how to get traction. Is there any tutorial how to configure Processwire from start to finish to create a modern, responsive web site?

[wbmnfktr]

3 minutes ago, Knubbi said:

Is there any tutorial how to configure Processwire from start to finish to create a modern, responsive web site?

I'd say you or your client should outline the result and therefore you should team up with some advanced people here.

Your project sounds really complicated at first but although it seems to be very forward in kind of business logic (what parts of items on each page etc.).

Being clueless is totally fine. I don't know at which stage your project is, but it seems you still can control the outcome.

I think there is no tutorial to show you the right way for your project right now but with more details about the outcome there might be more users that can help you with that. 

As always: clients WANT everything without knowing ANYTHING. So you have to define the way. 

[Knubbi]

Well, we are our "client" and run a Dreamweaver-edited static website which is a nightmare to maintain.

Indeed, it seems we need a kickstart by an expert and I will check out the dev directory. Thanks!

[wbmnfktr]

So... when you are your client it's more than easy to evaluate the outcome. You can iterate all steps every single time to come to the best result.

Maybe you want to outline the expected result on your own and want to discuss this here or you want to contact @ryan as a mastermind of ProcessWire to incorporate everything with him. 

[bernhard]

Hi Knubbi, welcome to the forum ? 

13 hours ago, Knubbi said:

The whole website is quite complex (multilanguage marketing website, product online documentation, helpdesk, forum, newsletter system, shop, customer login

 

• multilanguage marketing website - very easy (perfect fit)
• product online documentation - very easy (perfect fit)
• helpdesk - depends on what you mean exactly
• forum - not so easy. ProcessWire does not have the plugin ecosystem that you might know from other CMS'es. The great flexibility comes with the drawback that building such things (like forum, blog, shops etc) to fit all needs is really not easy. after all, we don't have any restrictions regarding the (frontend) output, so it's a lot harder to develop such "plugins" (modules as we call them).
  there have been some discussions about forum software/creation over the time, see https://processwire.com/talk/topic/3536-forum-integration-module/ (you see, the discussion is not new) and https://processwire.com/talk/topic/19271-the-game-of-robot-forum/ (example of how you can build a custom forum - with all the benefits and drawbacks you get when developing such a thing on your own)
• newsletter system - easy (perfect fit)
• shop - depends, can be easy to complex, see https://snipcart.com/blog/processwire-ecommerce-tutorial and https://modules.processwire.com/modules/pad-loper/
• customer login - easy

finally, it's not only easy to create your very own frontend experience, it's also really easy (and fun and efficient) to create your very own admin pages. see my tutorial here (and the linked blog-post): 

 

PS: to answer your initial question: it's also easy to create a kind of custom page builder. repeater matrix is great, but there are also free alternatives (see https://modules.processwire.com/modules/fieldtype-page-table-extended/ ). most of the time when working with processwire the challenge is not the development of the module/feature itself. the tricky part is to make it reusable (I guess that's the same for every software..). If that is no need for you, than have fun hacking something together quickly ? Also see how @Jonathan Lahijani did it: