CS3 Design Tips and Tricks: Section Background Images
First, a real quick update on Clover Sites 3 beta - over 2,000 of you have received your beta invite emails to Clover Sites 3 so far and the response from everyone has been so great. We've made even more improvements based on your feedback and we're really enjoying getting to see what you're creating!
We wrote a help article that offers some tips and tricks you can use to make your website really stand out. Since our beta release, many of you have been asking questions in regards to handling section background images, and since this help article answers these questions directly, we thought we'd highlight them in a blog post!
We're planning on adding a few more of these posts in the future, especially as we see you guys doing cool and creative things with your websites. Here are a couple of helpful tips and tricks with your section background images:
1) Adding Unique Scrolling Motion (Parallax) To Your Site
One thing that's popular right now is parallax scrolling, which adds really fluid motion to your images whenever you scroll up or down a page (to see how this works, scroll through the homepage of our Bloom demo site). We made sure this was not only included in Clover Sites 3, but is also really easy to access and use in any site design and any section.
One of the easiest ways to do this is to place a section with no text or additional content in-between two other sections and add a large background image to the middle section.
Once you've done that, you can go to section settings and choose "fixed parallax" from your background photo options.
After you click "Save", you should be able to see the background image saved in your Greenhouse. Click the "Preview" button to see the parallax working as your visitors will see it.
2) Using Animated Content in a Section
Ever since we placed the above image on our website, we've had a bunch of you asking how we were able to add animation to a section like this. Although it looks like we've put a video behind a donation section, that is actually an animated GIF playing in the background.
Adding a GIF as a background image is really easy - simply place a .gif file as your background image for any section. Just make sure the image isn't too distracting or it may take away from the content on your page! For a step-by-step look at how to add a GIF, check out our full help article.
You can get more help with site design tips and tricks here.
And of course, we’re continuing to roll out early access to Clover Sites 3 over the next two weeks - so if you haven’t received your invite yet, keep an eye out for that. And to those of you who never signed up for the beta launch, you can get full access to Clover Sites 3 when we officially launch in July!