Jump to content

How to emulate something like a WP PageBuilder?


Knubbi
 Share

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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...

  • Like 3
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

 

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: 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...