We recently started using ClickFunnels for building out sales funnels pages for marketing (email, AdWords and Facebook Ads) for our company and our clients. I have to say…I love it!
If you don’t know what ClickFunnels is, it’s an online software service by the marketing genius Russell Brunson used for creating funnels (landing pages, thank you pages, one time offers, online courses). You can read more about it here.
This tutorial is geared for existing ClickFunnels users, but if you’re serious about your online marketing I really recommend that you check out their website.
Clickfunnels offers a 14 day FREE Trial. If you decide to try it and find our content helpful, please consider using the affiliate link below and throughout this page:
My Thoughts on Sliders and Carousels
Before diving into the tutorial (it’s short and easy to add), I’d like to say that while carousels and sliders have their place, I think they’re way overused and in most cases I prefer not to use them. Why?
- Research has shown that in most cases users don’t interact with carousels that are used for home page hero sections
- Sliders/Carousels can distract from the goal of your website, causing you to lose conversions
There are times when I recommend them, for example testimonial sliders or image galleries when appropriate. If you decide to use this in your Landing Page design, make sure to split test this vs a static background image to see which performs better!
Now that that’s out of the way, on to the tutorial.
Adding a Background Image Carousel to your ClickFunnels Landing Page
I’m going to assume that you already have your Landing Page set up and images added so you’ll easily be able to get the path to the images (https://path-to-my-image.jpg).
Remove existing background Image in ClickFunnels editor
In your ClickFunnels page editor, check to make sure you don’t have a background image (you would see it if it’s there, but never hurts to confirm) by going to “SETTINGS > BACKGROUND SETTINGS > BG IMAGE” (right side menu). The BG IMAGE field should be empty, showing only the placeholder text “No BG Image…”. If it’s not empty, delete the image from this field and hit “Save”.
Add Backstretch.js Code to Custom Footer Tracking Section
We’ll need to add the Backstretch.js code and the code to initialize it to our Footer Custom Tracking section by going to “SETTINGS > TRACKING CODES”. Copy and paste the code below into the “FOOTER CUSTOM TRACKING” section:
[gist id=”b4f295892d69dc9f21e6e110d392a940″ file=”clickfunnels-backstretch-footer.html”]
Backstretch.js needs jQuery to work, but since jQuery is already included on all of the ClickFunnels pages by default we don’t need to add it.
Replace the image paths with the correct path to your images, for example https://images.clickfunnels.com/71/xxxxxxxxxxxxxx/pexels-photo.jpg
Important: ClickFunnels pages are served via SSL, so make sure to use “https://” othewise your visitors will see a security warning (not good for conversions hehe)
Click Save and Preview Your Awesome Work
After clicking the “SAVE” button you can preview your work by hitting the “PREVIEW” button. Normally you would be able to view the background in the editor, but these images will only show in the browser so head over there to preview them.
Visit the github page to learn more about Backstretch.js and see the various options.
Generally speaking, I recommend keeping your landing page as simple as possible. If you are going to use a background carousel with images, there are some things you should consider before proceeding:
- Think about your target audience. This will probably work better for luxury items, real estate, etc.
- Keep number of images to a minimum
- Optimize your images, both size and quality
- Test, test, test to find out what gives you the best conversions
If you’ve made it this far and you’re not using ClickFunnels yet, it might be exactly what you need to grow your business through digital marketing. Give it a shot for FREE!
The jQuery and Backstretch.js files are hosted on a public Content Delivery Network (CDN) so they are being served from there. As with the images, make sure you include https:// when including any file so you don’t get a browser security warning for your visitors.
Leave a comment if you have any questions or issues implementing this.