Layer layout elements so that you can “stack” images or other content
In Sitefinity, is there a way to layer layout elements so that you can “stack” images or other content on top of one another?
For example, I need to have a layout element contain a background gradient that spans aross the page. Within that layout element I need to insert another layout element on top so that I can then divide up that section and place content on one side of it and an image on the other. The idea being that the top content levels are accessable to our Marketing team, but the bottom gradient/graphics are not. I first noticed the issue when I went to stick an image widget on top of another content widget with the gradient background applied to it already. It wouldn't let me.
As I have it now, it’s all just one content block with all the HTML for that section in that one content layer. No image widgets or other content type widgets applied because I couldn’t stick a new layout grid option on top of an existing one.
So my questions are: is there a way (or another approach) that I'm missing that would allow for me to build up layers of content witin Sitefinity? If not, is it normal (from a Sitefinity development approach) to have it all contained in one big div?
Thanks so much!
Cole
Hello Cole,
This particular scenario can be achieved by using the .sf_cols divs to set your background image, You can set one background-image to the other layout div and different for the divs of the elements inside the other layout control. I have recorded a demonstrative video for you. However, if you want to drop widgets in the outer layout control, this will not be possible, because it is covered by the layout, placed inside it, and you can only drop widgets in the inside layout. Here's the video.
http://screencast.com/t/Kim97g42k
Hope this helps!
Hi Jen,
Thanks so much for your reply! Just last night I discovered essentially what you spoke of but instead of targeting .sf_cols divs I found the Classes - Wrapper field located in the Layout Elements section when editing a layout element. That did the trick. Unfortunately, my company's IT department has restrictions on what sites we can view and for some reason, that link you provided was restricted. I imagine what you spoke of illustrates your point and hopefully it will assist someone else who ends up here.
Best Regards,
Cole
Hi Cole,
What I sent you was, indeed, a video, demonstrating what I meant. I'm glad that you found my response useful!
Regards,