[SOLVED] How do you divide your page into logical sections?

[Boost]

Hei,

When you have a long page, how do you divide it into logical sections so it has better usability and is easier for the user? For example, look at this mockup (ignore the header and footer). It has six sections.

 

Is there a way to setup the fields on the page into sections to resemble the above, instead of one after the other like this?

[bernhard]

With RockPageBuilder this would look like this:

You can easily create new blocks by clicking on the plus after the last block and every block consists of one PHP file for the business logic (if needed), one PHP/LATTE file for the output markup and optionally one .less file for the stylings:

If you do it smart then you can even reuse these blocks in other projects just by copy and pasting these files ? 

Compared to RepeaterMatrix which would also be a possible solution RockPageBuilder comes with great integration and a complete UI for frontend editing:

So instead of using $block->headline to output the headline of the block you simply use $block->headline() and your headline will be frontend editable!! For non-text fields you can double click anywhere and the editing interface will be loaded in a modal. ?

I've not done a single website without that module for a very long time ? It will be 49€ for a single site for early birds. I'm working on the docs and on the webshop at the moment, but there are already several people from the forum using it for real projects, so if you are interested just write me a PM or signup to rock monthly to get notified when sales start ?? https://www.baumrock.com/rock-monthly/

[Stefanowitsch]

Hello!

I know exactly what you are meaning. Well you have at least three possibilites:

1. Use the Fieldset Page in ProcessWire. With this you can combine fields into one Fieldset. I don't use this Fielset anmyore but if I remember correct you have to install it from the "Core Modules Tab" (under: /processwire/module/).
You create a new field (name it for example fieldset_introduction) and then you add fields to it that you want to make use of (cool thing: you can reuse this fields in all other fieldset page fields and don't have to create a "body copy field" for each and everyone of them separetely!)

And here is what it looks like on a page template. The fields shown above are aligned in a fieldset named "Introduction". You can add several Fieldsets this way and just put them in any order on your page template. 

2. Use the Repeater Matrix Pro Field. This ones commercial but it makes handling and editing Sections on your pages much easier and more flexible! 

Cool thing is that you can define your content blocks in the field settngs and add the needed fields right there. Then on your page template you can select the type of content block (or name it section):

After that it's super easy and comfortable to edit these sections and also change their order!

3. Use a third party page builder module like the RockPageBuilder from @bernhard. This module even beats the popular Repeater Matrix module in my opinion as it accelerates the creation and editing (and managing!) of content massively! Even better, it kind of combines the Repeater Matrix block-buidling functions with frontend editing which is a massive leap forward in terms of workflow optimization and customer happiness (cause it is also very easy to use for non-technically experienced users!).

[Ivan Gretsky]

@bernhardis so productive I must have missed the RockPageBuilder thing. Can't find it on github. @Stefanowitsch, where did you get it?))

Ahh. Should've read it from the start) It is explained earlier in this thread.

[Stefanowitsch]

1 hour ago, Ivan Gretsky said:

@bernhardis so productive I must have missed the RockPageBuilder thing. Can't find it on github. @Stefanowitsch, where did you get it?))

Ahh. Should've read it from the start) It is explained earlier in this thread.

Yeah I had the pleasure to be one of the earliest customers who uses this module and already made a few websites with it. Once it's released I will give some insight here in the board how I created this and that with it. It's a really powerful tool!

[Boost]

On 9/13/2023 at 12:36 PM, Stefanowitsch said:

1. Use the Fieldset Page in ProcessWire. With this you can combine fields into one Fieldset. I don't use this Fielset anmyore but if I remember correct you have to install it from the "Core Modules Tab" (under: /processwire/module/).

Hei @Stefanowitschjust one question. For the FieldsetPage approach, do you create specific fields for it? For example, I have a single image field that I use in multiple templates, but for use on my FieldsetPage, I would like that the single image field have a fixed image height and width (which is specific only to one template). So, how do you work on this case? Do you create another image field, or is there a way to customise field properties inside the Fieldset page?

[Stefanowitsch]

6 hours ago, Boost said:

Hei @Stefanowitschjust one question. For the FieldsetPage approach, do you create specific fields for it? For example, I have a single image field that I use in multiple templates, but for use on my FieldsetPage, I would like that the single image field have a fixed image height and width (which is specific only to one template). So, how do you work on this case? Do you create another image field, or is there a way to customise field properties inside the Fieldset page?

I like to re-use most of the fields. For example in most projects i have one body field, one headline field and one (single) image field. With fieldsets I can reuse these fields as often an as much on a single template as I want. As long as the field settings not differ that much there is no use to create a "body2" or "body3" field.

BUT if you need to alter the field settings in one case it is possible to override these changes on a fieldset-basis.

For example I have this fieldset here with two generic input fields: A single image field and a body copy field.

These are generic fields that I use all over the place.

If I want to make slight changes to those fields in the context of the fieldset I can edit the fieldset and then click on the name of one of the fields inside it.
This will open a dialogue where you can override very basic field settings.

It is in most cases not possible to customize a field very much this way. For example you can't change the width and height cropping properties on an image field.

 

[BrendonKoz]

Don't forget that you can define/allow overrides for templates based on inputfield settings in the "Overrides" tab of the field. Then the template(s) can allow the override of those particular settings of the field. Alternatively, you don't have to think only about the template settings - you can edit the rendering of the PHP template and check what the current template is, and then render the image's size differently depending on the template. You have the control! ?

Image Inputfield Overrides: