ClickFunnels: How to Add Transparency and Hover Effects (Using Custom CSS)
If you need help with a specific issue and want me to personally take a look at your setup, I can help! Check out the 'My Services' section of my blog: https://amarketingessentials.com/my-s...
What hover effects look like: 0:19
How to change transparency: 2:38
How to add hover effects: 4:16
What problem is if you are inserting 1 picture in 1 column row (providing solution in the next video about margins): 7:14
You can use this CSS knowledge on any platform that supports custom CSS - not only ClickFunnels or affiliate marketing.
Hey all!
In our previous videos, we have added custom colors to our text in ClickFunnels: • ClickFunnels: How to Change Text Colo...
changed text size:
• ClickFunnels: How to Change Text Size...
and added a strikethrough text:
• ClickFunnels: How to Add Strikethroug...
In this video, I wanted to show you how you can use custom CSS code to add opacity (transparency), as well as create awesome hovering effects that allows the image to change transparency level when hovering over it with the mouse! These are awesome tools that are very popular in affiliate marketing and really sets you apart from the crowd, especially since they are not as straightforward as the rest of the ClickFunnels tools.
So to do this, you would basically need to first select whatever element you want to create the opacity effect for - it can be text, image, headline, WHATEVER! That's the best part about it - this transparency technique using custom CSS does not discriminate!
After you select the item, click on the little gear icon and on the bottom left click on the 'custom CSS' tab. You need to copy that tag ID as that is the custom CSS element identifier and if we want to do any changes to that element, we need to know what the element ID is.
After we do that, we need to go to the 'custom CSS' tab on your top left (if using editor version 2 in ClickFunnels, or top right under 'settings' if not) and just paste that element ID we have just copied. We then need to add brace brackets (shift click the button to the right of P if using a PC) and create the command that we want. In this case, we need to add a command for adding opacity, so we need to say "opacity:xx" and enter any value for opacity you want. 1 being the most clear, and 0 being completely invisible. We then close that brace bracket and that's it, we have finished out transparency!
But, we also need to create a hovering effect, so what we need to do is just copy the EXACT code you have just finished forming within the custom CSS space, and paste it just below. Then, right after your element ID, we need to write ':hover', which gives the command to create a certain design upon hovering over that element. We then change our opacity again and make it whatever we want it to be when that element is hovered over.
That's it!
Please subscribe and stay tuned for future videos where go over the technical how-to's and/or dig deeper into other affiliate marketing tools!
If you are interested in ClickFunnels, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
https://go.ivanmana.com/clickfunnels
If you like GetResponse and want to learn more, try out their 30-day free trial under my affiliate link at:
http://www.getresponse.com/index/Ambi...
If you are interested in ClickMagick, or want to learn more, feel free to check out their free 14-day trial under my affiliate link at:
https://go.ivanmana.com/ClickMagick
Here is my Namecheap affiliate link as well if you want to buy one of their really cheap domains and/or private email:
https://www.namecheap.com/?aff=108439
Like my Facebook page!: / onlinemarketingessentials
Thanks for watching, and I'll see you in the next video! Affiliate Disclaimer: This Site may contain links to affiliate websites, and we receive an affiliate commission for any purchases made by you on the affiliate website using such links.
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn advertising fees by linking to Amazon.com and affiliated websites.
