Chroma demo site

I would like to create a website that looks like this page.

I am wondering if a template exists to help me understand how to go about doing this? I have Foundation and I have used Webdeerdesign Project 17 but I find that it is cumbersome to go from Project 17 to something that looks like the Chroma product page. Any guidance or suggestions would be appreciated.

Isn’t it available as a download from the product page?

The actual demo site itself (i.e. not the downloadable examples) are just built using SectionsPro and Foundation. The menu is not a released stack but everything else is pretty standard. Which part / layout are you interested in and I can break that out of the project file. There are a few simple repeating design elements over the site that can easily be reused.

Not sure what you mean by “cumbersome” because the building blocks used in Project17 have everything you need to build something that “looks like this page”. All of my projects have a modular approach so that you can copy and paste what you want and delete what you don’t want to arrive at where you want to go.

Project17 uses the BWD Bevel stack which can create the exact same sloping page divider effect used on Tavs Chroma demo site. A good place to start would be to checkout the BWD Bevel stack page and see how easy it is to adjust the shape to a sloping line.

If you have specific questions about the design you are trying to create, if you break down the design into basic building blocks and ask specific questions, I sure there are many on this forum how will be happy to help you.

I think what I meant by cumbersome is that my knowledge isn’t great enough to make the translation. I think Project 17 is a great product! I have made several adaptations using it. I think I just need to get more familiar with how some of the stacks work.

Good. I would just break it all down into chunks and then get to understand what each stack does. One good way to do this is to duplicate a project and then start messing about with the settings and previewing to see the outcome, one setting change at a time. Then just close the project, duplicate it again and carry on. A bit like Groundhog Day Stacks learning.

I like the way you used the angled swaths of color as backgrounds. I am trying to recreate with a bevel on top and on the bottom with another stack in between. Are the Sections Pro stacks put in a drop zone or just sandwiched in between? When I put a stack in the middle I often get a separation between the two bevels.

They are just done with SectionsPro Angle and the Advanced position child so that they can float and overlap the content areas. I will dig that out of the project file for you.

Yes, That is more or less what I have been doing. For me, that is the best way to learn and a great advantage of your products. It is much easier for me to break things down to see how they work than to start from scratch and try to figure out how to build it.

1 Like

Sounds good, if that’s not too much trouble. I have been pretty successful with converting the Webdeersign Project 17 and some learning is taking place. Until I hear from you I will continue my trial and error learning. Thanks!

Done - I’ve emailed it to you.