Hover Pair Installation Guide :: CF Pro Tools Add-On Features For ClickFunnels Pages





Description and Best Use Case For This Add-On:


Ever see one of those cool dynamic websites where an image will turn into another image when you hover over it with your mouse?

That's exactly what this add-on script will do for you!



OVERVIEW (For Advanced Users)


For those of you ready to jump in and are familiar with CFProTools, you can use this checklist:



  • Add Your Domain To CFProTools DOMAINS TAB

  • Create A Page

  • Create Two Images (Preferably Of Same Size)

  • Add Two Images To Your Page

  • The MAIN IMAGE CSS TITLE:   cf-hover-pair-main-1

  • The PARTNER IMAGE CSS TITLE:   cf-hover-pair-partner-1

  • Hide The Partner Image

  • Create Add-On Script

  • Copy Script / Install in Footer Tracking Code Settings

  • No Known Conflicts




Step 1:   Add Your Domain To CF Pro Tools DOMAINS TAB


Your first step will be to add your domain to the CFPT Domains Tab.

Here's a guide on how to do that:


https://cfprotools.freshdesk.com/support/solutions/articles/29000041078-how-to-add-a-domain-to-cf-pro-tools-online-installation-guides



Step 2:  Create Your Funnel Page


One nice thing about the CF Hover Pair add-on is that it will work with any page type and anywhere you want to add images.


Here's a quick tutorial on how to create funnel pages using ClickFunnels.


https://help.clickfunnels.com/hc/en-us/articles/360060380833-Creating-A-New-Funnel-Step



Step 3:   Create Two Images


The first thing you'll want to do when you have your pages all set up and ready to go is create two images.   


They can be any size you want, any dimensions, but if you want everything to look smooth and seamless when hovering your mouse over an image, please take special care to ensure both images are the exact same size and resolution.


This way when you hover over, it only changes the image and does not distort or adjust the rest of the page elements from their current positions.

For each image you will need to add them to your page, right on top of each other.


Respectively, add these CSS TITLES through the image settings by clicking on the "#" icon.


The MAIN IMAGE CSS TITLE:   cf-hover-pair-main-1


The PARTNER IMAGE CSS TITLE:   cf-hover-pair-partner-1


If you have more than 1 pair of images on your funnel step, you would simply change the -1 to -2, -3, -4, etc for each pair of swappable images you create on-page.


Congrats, you are now ready to create and install the add-on script using CF Pro Tools!



Step 4:   Create The Add-on Script


For most add-on installations of the ORDER SUMMARY script, you can simply click the CREATE NEW button:



... and do a keyword search for HOVER PAIR



Once you have located the Hover Pair Add-on script, click the thumbnail image and create the add-on per the installation instructions.


As there is no configuration for this add-on script, you only need to click CREATE ADD ON button at the bottom of the page.




Step 5:   Install The Add-on Script


Ok, great!   Now you've created the script, now it's time to copy the script into your Footer Tracking Code Area on your ClickFunnels Funnel Step.


Click the BLUE Button below your script to copy the code onto your virtual clipboard.


You are now ready to paste the script to your Footer Tracking Code area on your funnel step.


Go here:




Please make sure to click on the FOOTER CODE tab, and paste your script to this area shown below:





You can now save your page and click PREVIEW or view the LIVE page to test your new add-on script in action!


Congrats!




Known Conflicts:


No known conflicts at this time.



What To Do Next:


Here Are A Few Other Help Docs You May Wish To Check Out:



Chances are you already have a CF Pro Tools account and you can find all available resources, there:   app.cfprotools.com


However, if you have do not yet have a CF Pro Tools account, you will need one in order to take the actions in this help doc.   You can sign up at any time here:   www.cfprotools.com


If you have questions, you can also hit us up in support at support@cfprotools.com