HomeХобби и стильRelated VideosMore From: Online Marketing Essentials with Ivan Mana

ClickFunnels: How to Customize Borders Around Any Element (Using Custom CSS)

17 ratings | 1355 views
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-services/ What an element border looks like: 0:30 Why you need to adjust borders using custom CSS: 2:00 Adding borders in custom CSS: 2:27 Welcome back everyone! In this video, I wanted to show you how you could add borders to any element within ClickFunnels, not just the sections or rows, and then also customize them! Something different that you can use with your affiliate marketing campaigns. Reason why we are using CSS is because you are actually unable to input any borders around individual elements within the ClickFunnels basic menu, and even if you do, you have extremelyyyy limited customization options - only a few border styles, limited pixel width, but any color (at least you have that!). You can also only customize ALL 4 borders, NOT individual borders, which is a really cool customization feature in case you are interested! So, in order for us to insert the border in the first place, we need to first select the element we want a border around, copy the custom CSS element ID, and then paste it into our custom CSS window. We then do the regular CSS tradition, putting our braces right after the element ID, and at the end. In between, we have 4 options we can work on: - border style (such as dotted, dashed, solid, double, groove, ridge, inset, outset, hidden - I recommend you try them all out!!) - border width (the width of the actual border, ranging from 1px onwards) - border color (any color in the rbg spectrum) - border radius (if you want to round your corners, this is the way to do it) We would proceed by adding our values for each of those properties, in the form of 'border-style: solid;' for example if we want to create a solid border. The cool thing about this is that we can customize the way each border side looks by adding additional values right after each other after the properties. The borders go from (top, right, bottom, left), so if I want to create solid bottom and left borders, and dashed top and right, I would say 'border-style: dashed dashed solid solid;' The same concept applies to our other declarations, such as color, width, and radius (radius starting from top left and going clockwise until bottom left). And this is basically how we would adjust every part of our border to our desired level using custom CSS in ClickFunnels! You may have excess margins when creating this border however, since the element itself may be fairly large compared to the actual picture, so make sure to check out this video: https://www.youtube.com/watch?v=SzwSpbytHqE&list=PLS46f4aLJ2hNASorSJ04itRrhsnZ00x5u&index=18 to see how you can adjust the margins! 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: http://www.ivanmana.com/clickfunnels/yt-custborders 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/Ambition 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: http://www.bestlinktracker.com/ClickMagick/yt 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 Thanks for watching, and I'll see you in the next video!
Html code for embedding videos on your blog
Text Comments (11)
Luqman Khan (1 month ago)
how to change corners of a button to round, there are limited option in ClicKFunnels i.e. 2,3,4,5,10,15 px and then 50%
+Luqman Khan you are welcome!
Luqman Khan (1 month ago)
+Online Marketing Essentials with Ivan Mana Thanks :)
Yeah there are, you can try going into 'inspect element' by right clicking your mouse button, selecting the button, and changing the corners to whatever you want to. It works but then for some reason doesn't save it like that, something with the ClickFunnels coding... so your best bet is probably to find an existing button and just copy and paste that into here to use as a button.
Aaron Acosta (5 months ago)
I'm trying to change the border and text alignment of a button. I used the CSS id but nothing changes? Is there no way to override the button style with custom css?
Yeah I noticed that button changes for some reason default back to whatever it was after saving it :/ As far as I know, no way to change it without interfering with the whole page code
Nick Crestani (1 year ago)
Does this also work for putting borders on the left and right for a section rather than an element?
Good question! Unfortunately not, there is some additional code on the backend that prevents adding of border to sections, rows, or columns, so you can only do this to individual elements!
Joffrey Lawel (2 years ago)
Thank you !!
No problem, glad to have helped :)
Don't forget that you can customize each individual side, so if you want the bottom and top & left and right to be different colors/styles/sizes, you can do that!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.