Hi!
I’m working on some new templates for our website. What I was hoping to do was create a large empty region between the header and footer, to which page editors could add widgets in any order. So if on one page I want to add a carousel above the main copy, and on another page I want to add a carousel below the copy, I don’t need two templates to do this. I just add the widgets to the page in a different order. But here’s my issue:
Say on a particular page I add a Rich Text Widget to my empty region:
Lorem ipsum dolor sit amet…
Now I want to add a carousel above the text with three rotating items (each item is a Custom Widget). So I add the widgets to the page:
One
Two
Three
Lorem ipsum dolor sit amet…
But this won’t work, because the carousel items need enclosing HTML before and after them in order to work together as a rotating carousel. They need the code in bold below:
[these tags are not closed]
One
Two
Three
[this is where the tags above would be closed]
Lorem ipsum dolor sit amet…
However, I can’t add this code to the page through a widget, because HTML widgets don’t allow for unclosed tags (for good reason, as it might break things if tags were opened and not closed). And custom widget code is entirely enclosed within the “perc-widget” block, so they won’t work either.
I could wrap the needed HTML around the carousel widgets with JavaScript, but I want to avoid making structure changes with JS as much as possible, especially for performance and accessibility reasons.
Any ideas? Am I approaching this problem the wrong way? Thanks!