To add some seasonal flair to a site's homepage can be as simple as adding a new hero image or updating the headline in a Jumbotron widget, but when you want to take it a step further, add falling leaves or snow with a few quick steps!
View a demo of the two different seasonal update options by clicking the links below!
1. Download the files
2. Prepare the image files
Get started by preparing three .png files. There are six leaves and flakes included in the download file attached below. If new images are created, please be sure they've been saved as 8-bit png files to keep file sizes down. When the files are ready, upload them to the media library.
- Open the 06-uxi-animate.js file with a text editor like Notepad++
- Copy and paste the image URLs to lines 3, 5, and 7.
To find the image URLs, click each image thumbnail in the media library, then from the pop-up window, copy and paste the full URL from the URL field at the top right.
*Note: Lines 9 - 15 have more advanced options that can be updated upon client request. These lines can modify how many leaves fall, how fast they fall, etc.
- For all six links, set the following options:
- HTML Location: Footer - This will output the links in the <footer> element of the page.
- Output Location: Layout - This will allow the scripts to load on only a specific layout.
- Select Layout: Homepage - Any layout could be selected, but this features will be used on the homepage.
6. Add HTML Markup to the Homepage
The HTML that is added looks like this
Simply add it to an embed widget on the homepage!