I hope you're all doing well. I'm currently working on a website project and I need some guidance regarding a specific page type. I want to recreate the page featured in the following link using Volto (Rietveld Schröderhuis – Utrecht – icoon van De Stijl). This particular page has some unique characteristics that set it apart from the other block pages.
I'm unsure whether I should create a custom block type to achieve the desired result. Can anyone suggest a better approach or provide an example of how to create a similar page? Maybe someone knows a certain block add-on that works similarly? Your insights and expertise would be greatly appreciated.
I was thinking of creating a new block type. It seems like the easiest option to me.
For maintaining; using an existing add-on might be better. But also wondered if people have other methods for these kinds of scenarios.
@cihanandac yes please be very specific on what you have tried and what you see as requiring a new block.
I can see that volto columns block will help with some of the parts of that page.
It also requires the concept of sections styles (full width vs not full width etc). This is something volto should really have a built in solution for but doesn't. We did have to build our own for this. We used variation on each block to mark if its in the same section or not or if its a new section, what kind of section it is. It's not a great solution but it was better than using containers which are not easy enough to make it work for normal pages without special sections.
Thanks for your answer @djay. I will definitely check how the columns block can help with that.
Sorry for the unclear question, I should have written it better.
My question was about creating a distinction between block elements that need to be styled differently. Styling some page's block elements differently than the rest of the website (in this case full-width) requires setting a mechanism so that I can style them differently from the CSS.
I have tried; putting a checkbox in the schema, utilizing different content types, Hero block, and using custom block types. I think creating a new block type will be the least complicated to use for the editors.
I wasn't expecting to hear that I should use blocks and parallax effects:) but I was looking forward to hearing about good practices or seeing some examples and tips from the community's more experienced members.
Use the hero block, restrict the slide content to only title + some text. Probably the most straight-forward
Add a variation to the columns block, where you set the "slide" behavior, colors, etc.
have the editors introduce divider blocks to signal each new slide. For the view pages, rewrite RenderBlocks, inspect and rearrange the block structure so that you can recreate the necessary markup. If needed, you can create a hidden restricted block that would use the "divided blocks" to render as a slide.
Using a variation of the columns block seems like a good option. Also, using a divider block seems like a good idea for the editing screen. I will definitely consider these options.
What we do is similar to this to allow for sections to have different styles.
Instead of a divider we use a setting added to all blocks to if we are in the same section as the one above or a new section. then we use the renderblocks trick to put them into the right divs etc.
You can see all the section styles this enables in Sections | NSW Digital Design System v3 Plone 6 but we haven't documented yet how the UI works.
The divider idea is perhaps nicer except that you then have either something very thin that is hard to click on, or you have a space that wont be there when you render.
I really feel volto needs a proper concept of sections that is different from other containers.
In theory you could use containers to represent sections but then you need to have the default case where the user has no special sections work with no confusion. So it would really depend how the container UI works in the end and having the default page be able to have a section by default and the user starts adding to that.