Blog

How-to: Add a snow effect to your site

unsplash_52cee6d9df810_11

Who can resist adding a little Christmas cheer to their site? Every year we are asked if it is possible to add a snow effect, so we thought it would be great to do a quick blog post about adding a little festive flourish to your site.

Adding the snow effect

Adding a snow effect to your site is easy. All you need to do is pick up a little code from ‘Beyond iWeb‘, a site that provides a variety of coding tools for building websites. You can find the specific code that you need here. Once you have navigated to the page, scroll down and you will be presented with the following options.

Snow effect guide 1

Ensure that the ‘snowing area’ option is set to ‘Entire page’. You can also specify the minimum and maximum size of the snow flakes, the font of the text in the widget, and the text that the widget displays.

 

Once you are happy with your selections, click ‘Apply these settings’.

Snow effect guide 2

 

Next, click on ‘Select this full code’, then right click the highlighted text and select ‘Copy’.

Snow effect guide 3

 

Open your site and go to the ‘Page Master’ (log-in to the editor > select ‘Pages’ > Select ‘Page Master’ (from the left hand side)). Click ‘Insert’, then select ‘HTML Snippet’ from the left hand menu. Paste your code in to the ‘Setup’ tab of the floating editor and click ‘Apply’. When prompted, click ‘Yes’ to let the widget resize to around 100 x 16 pixels. You can then position the widget somewhere discreet, but visible – it’s important that your user can see it as it allows them to turn the snow effect off (and on again!).

Snow effect guide 4

 

Save your site and you’re done, it’s as easy as that. Your site will display as normal, but with a subtle snow flake effect. You will note there is a pause button for the widget, as per the screenshot below.

Snow effect guide 5

 

 

This is what it will look like (bonus: it also works on your mobile site).

ezgif-324950060

 

Have any other tips for giving your site a festive make over? Share them in the comments below!

 

Save


Steven
Community Manager

More posts by this author


2 Responses to “How-to: Add a snow effect to your site”

  1. Yvonne

    Fabulous code! Loved it on my site, and the fact that users can turn it on and off is good too. I added a snowflake header to match and I’m all set up for winter now. =D

    Reply

Add a comment to Steven

  • (will not be published)

More posts by this author