Howdie. I have accomplished something similar before by doing this little trick. For the first option, let's say you want to go ahead and use the Widget approach (which seems to be a pretty good approach as there is no other great way to get more than
one projection on a screen). So you have your three widgets that need to go into a "zone". In this case, your "zone" will contain the html for your wrapper. So, to get a new "zone" option on the Widgets screen, you go to your
"Theme.txt" and edit the "Zones" section to add in a new zone (I will call it "Wrapped"). Now when you go back to your "Widget" screen, this zone will be there as an option.
Now you can put your three projections into this zone. But that zone doesn't render anywhere yet. What I would recommend is making a URL alternate for the current content then all you need to do is inject this snippet of code (where you want your projections
<div>Some custom html header</div>
The above code calls the current WorkContext.Layout (a shape that the widgets are injected onto and I believe the base "Model" that is utilized in Layout.cshtml) and calls the "Wrapped" shape (which is the zone we just created) and then
uses @Display to render the shape.
But what about the individual wrappers around the projections (I just know you are asking). The easy way is to use this module:
and enable the Vandelay.Classy feature. Then add the CustomCss part to the widget content type. Now you can drop in your own class name on each individual widget (and
thus get control of the individual projection wrapper class names).
That should do it, let me know if you have trouble or if this doesn't make sense.