I LOOOOVE your tutorials! Hope you will make many more. Your channel has the potential to be huge! One note however, could you leave out the background music, or make that a lot softer in future videos? I had a lot of trouble focussing due to the music. I'm sure more people feel the same.
I really like the way you take the time to explain things in detail. It certainly helps people like me better understand how CSS works. I would like to make 2 suggestions to make things a bit easier for viewers. 1. Make the background music a bit quieter 2. Please share your code in a sticky comment below the video, or give us a link on your website where we can copy and use the code. For me, it would make things much more inviting to experiment using your ideas as a starting point. Thanks so much, and please keep the videos coming. I find them very helpful.
I knew all about all these features, and yet I never put it all together in order to make a left/right divider like this (this in reference to the easy method)... absolutely brilliant! Thank you so much for sharing!
Wow, wicked tutorials. I love learning new things everyday..... One thing... NO BACKGROUND MUSIC, that's for the folks who knows the English language but can't speak it clearly.... Other than that, EXCELLENT TUTORIAL. Thanks.
As a long time SQL and C# systems developer, I admire CSS3 and HTML5 capabilities. I know, correction, did know some basics of CCS and you just changed my mindest to study CSS again. Great work and amaze us more and more with you skills.
I've just come across your tutorials. You are a brilliant teacher. I really mean that. You are so clear and precise. I love the fact that you can take a complicated subject and break it down for the less technical. Brilliant. Please keep up the good work. You are by the best teacher for Elementor that I've come across. Again, just brilliant... PLEASE MAKE MORE!!!. Do you have a website with more material.
Amazing! Clear explanations!!! Causes me to be patient. Try remove the background music completely. Subscribed already. Keep up the great work, I learned a lot!
This is exactly what I was looking for. Thank you for going over every little step and why you do it. You're helping us understand the back-end process more so we can become better web designers. :)
Excellent tutorial, looking forward to watching others that you've made and future ones. I love this one as I did wonder if custom shapes could be used as dividers and now I know. Thank you!
So clever - will definitely incorporate the CSS method! Have to agree about the background music - needs to be more background, less foreground. But thanks much!
It was a really good tutorial. However, it would be more interesting if you have also discussed how to change the width and height of the Shape Divider like we can do with the default ones that come with Elementor.
It all depends on your individual workflow. I use Affinity Designer to edit all of my vector images, but you can use Illustrator, Inkscape, etc. I think it's a lot easier to change them visually then doing it in CSS. While I love CSS, the vector application allows me to also modify the image, which gives me more options than only the color.
Thanks for the insight of this tutorial. A third method would be to use raw SVG in an html elementor module. Assign a class to the the paths instead of using the fill attribute. Make changes to colors in custom css in column container `selector svg .classname { fill: blue; }` Quite useful if you need to have different colors for different paths. Another custom css for mobile display `selector svg { transform: rotate(-90deg); }. Positioning can be done with built-in layout and styles options. Cheers!
I have been looking for a way to do this for a while, I knew it was possible... but, couldn't find any tutorials... Thank you! This is HUGE! (at least for me) Is there a training series coming up? Let me know.
I did notice on the second half it seems the SVG divider renders quicker. The image one shows up towards the middle and glides into place, the SVG one is just there when the viewport changes.
Hi i'm using the CSS method, however on safari it will show a line between 2 columns and in chrome it is seamingless. Everythnign is set to 0padding and no gap.... Any thoughts on that ? Though if I make a bigger (longer width) svg divider img, it will push itself to the right and fill up the 'gap', however... the divider will the resized samller.. and not tall enough in heigh to cover the whole section heights.
Not sure where exactly to find dividers online mate, I make my own. Just grab some vector drawing app that's capable of exporting to SVG and simply design your divider. It should be easy and fun.
Personally, I think that CSSHero is for advanced users in spite of the fact it's been advertised as a non-tech savvy "tool". Its interface might appear scarry a little bit. So, even though CSSHero is Elementor friendly, I wouldn't tap into it. I'd rather suggest Style Kits for Elementor.
I have tried it and it only works in preview mode, not in the actual website. Let me know if you know something about this, Thank you so much for this amazing tutorial!
SVG stands for Scalable VECTOR Graphic. It's a vector, it can be 10x10px or 100000000x1000000000px, it doesn't make the difference. File size remains unchanged.
Thanks for the great videos! One question regarding use of method 2 (more complicated one): Is there a reason you don't just target the SVG fill color with CSS like .imageclass { fill: #ff6600; } ?
It shouldn't be that hard to make your own... there are even a few online SVG editors too so you don't need to install any apps. However, my friendly advice is to get Inkscape.
@@OoohBoi good to know, but... how do I save or export as SVG in gimp? and my server didnt allowed me to upload the file because it is consider a threat :(
@@TFGourmet 2 things to try: imgur.com/a/0j4OAzg and imgur.com/a/UY8UUCI . Have them both! In case it doesn't work right away, try to go to WP Admin, Media > Library first, and upload the SVG file. I'm suggesting that only because it worked for me, it's not an "official" remedy for that kind of issue. Hope it helps!
I love your tutorial. I have a new website and using ocean wp free theme. I would like to ask how can have an image slanted. the imgae to be slightly tilted.. thank you
Thanks! You actually don't make the Image slanted - even though it's possible, it's the mask that's making the image look slanted. Image Mask allows you to literally cut off the parts that you don't need. Another way of creating a slanted image effect is to do it in Photoshop and save the image as transparent PNG. But that file might be quite heavy.
How did you create this column with the shape divider, I attached an image just in case, hopefully you can help me out. Trying to achieve this: imgur.com/a/u5KAZgd
@@yogiselevate Oh, hopefully I'll nail it down this time... that's the Column inside of which 2 Inner Sections reside, one on top of another...coz that's the only way to make the default section dividers work.
@@OoohBoi No! It's mind-blowing! I know that WordPress and Elementor help us to build websites (mostly) without code, but adding some code on the top is perfect. Well explained, we can easily follow and copy your suggestions 🙌 💯
Photoshop, Affinity Designer, Sketch, Illustrator, any other app capable of doing vector drawing and export to SVG. As I recall there's an online app too, not sure about the name but you can ask Google...and trust me Google is awesome 👁
Trying to MSG yo Boi - :) Hey Boi hope all well. Going through your tutorials and probably jumping in deep end as I bought what you sell even the ones I have learnt from your amazing tuts' but just a bit stuck as on Elementor Custom Shape Dividers" and do not have the relevant practice info as In shapes images and texts. Now is this just me or did I buy all those for nothing as you teach it so well in first place & only reason I bought all was for shapes and like you do to be able to copy/paste - hope this makes sense and sincerely all the very best. - Regards. chrisBman. please reply or mail me - then feel free to remove :/
I kinda feel you're disappointed buddy but not quite clear why exactly. So please, don't hesitate to be as straight as possible. If you wanna refund - lemme know. In case you are stuck with something - do the same. No hard feelings at all, life's just a playground.
Exactly! At this stage it's not that bad, but... We, humans, we all have been a bunch of crap back in the day. And we evolved. The same goes with any kind of software, hardware, plants, animals, etc. You can try out something else, like Oxygen and then come back for Elementor in a decade or so :)
Hey man... really nice piece of content... but .. plese.. take that background music off.. it really make me struggle to stay focused. At least lower its volume by a huge bit... OR... sidechain it with your voice. (but honestly id prefer not to listen it at all)
![How To Animate Shape Dividers [Elementor Tutorial]](http://i.ytimg.com/vi/aUDo0lYZwyk/mqdefault.jpg)
I LOOOOVE your tutorials! Hope you will make many more. Your channel has the potential to be huge! One note however, could you leave out the background music, or make that a lot softer in future videos? I had a lot of trouble focussing due to the music. I'm sure more people feel the same.
Yeah, I have ADHD and the background music is distracting for me. I just want to the tutorial with no added sounds other than your great wisdom!
I agree. Tutorial is good, but the music is distracting :)
I really like the way you take the time to explain things in detail. It certainly helps people like me better understand how CSS works. I would like to make 2 suggestions to make things a bit easier for viewers. 1. Make the background music a bit quieter 2. Please share your code in a sticky comment below the video, or give us a link on your website where we can copy and use the code. For me, it would make things much more inviting to experiment using your ideas as a starting point.
Thanks so much, and please keep the videos coming. I find them very helpful.
Thanks, John, suggestions accepted. You can find the source code here: gist.github.com/oooh-boi/6e3c01ff96b197773207f86238e0b92a
I knew all about all these features, and yet I never put it all together in order to make a left/right divider like this (this in reference to the easy method)... absolutely brilliant! Thank you so much for sharing!
I'm glad to be helpful, stay tuned for more!
Hey man just wanted to leave a note that I find your tutorials very helpful! Thank you for making these tutorials :)
Wow, wicked tutorials. I love learning new things everyday..... One thing... NO BACKGROUND MUSIC, that's for the folks who knows the English language but can't speak it clearly.... Other than that, EXCELLENT TUTORIAL. Thanks.
As a long time SQL and C# systems developer, I admire CSS3 and HTML5 capabilities. I know, correction, did know some basics of CCS and you just changed my mindest to study CSS again. Great work and amaze us more and more with you skills.
I've just come across your tutorials. You are a brilliant teacher. I really mean that. You are so clear and precise. I love the fact that you can take a complicated subject and break it down for the less technical. Brilliant. Please keep up the good work. You are by the best teacher for Elementor that I've come across. Again, just brilliant... PLEASE MAKE MORE!!!. Do you have a website with more material.
Amazing! Clear explanations!!! Causes me to be patient. Try remove the background music completely. Subscribed already. Keep up the great work, I learned a lot!
Great Tutorial, the exact solution to what I was looking for!! Thanks
This is exactly what I was looking for. Thank you for going over every little step and why you do it. You're helping us understand the back-end process more so we can become better web designers. :)
Thanks for watching!!!
Excellent tutorial, looking forward to watching others that you've made and future ones. I love this one as I did wonder if custom shapes could be used as dividers and now I know. Thank you!
Thanks for watching!
So clever - will definitely incorporate the CSS method! Have to agree about the background music - needs to be more background, less foreground. But thanks much!
You sir have won the internet! Subscribed!
It was a really good tutorial. However, it would be more interesting if you have also discussed how to change the width and height of the Shape Divider like we can do with the default ones that come with Elementor.
Nice! This is great; I was hoping for a way to produce custom shape dividers.
Your tutorials are all great, I really like them. Thanks for your sharing.
Thanks for your feedback and thanks for watching!
It all depends on your individual workflow. I use Affinity Designer to edit all of my vector images, but you can use Illustrator, Inkscape, etc. I think it's a lot easier to change them visually then doing it in CSS. While I love CSS, the vector application allows me to also modify the image, which gives me more options than only the color.
You're pretty damn smooth my man.
Well explained... Awesome tutorial..
Thank you 🙂
Thanks ! Saving my UI work with this hack.
Awesome! Glad to be helpful!
I don't believe it, #3f458E is my favourite colour too! :D Thanks man.
Love your voice - great tuts - no need for music background for you as your voice is music itself :)
Thanks, I got rid of the music in all of my new tutorials.
Thanks for this tutorial and all of them, very useful, excellent explanation, awesome tutorials.
You're very welcome!
I would be happy to see you making a video for increasing page speed
Man, your Tutorials are top !!
Thanks for the insight of this tutorial.
A third method would be to use raw SVG in an html elementor module. Assign a class to the the paths instead of using the fill attribute. Make changes to colors in custom css in column container `selector svg .classname { fill: blue; }` Quite useful if you need to have different colors for different paths. Another custom css for mobile display `selector svg { transform: rotate(-90deg); }. Positioning can be done with built-in layout and styles options.
Cheers!
I have been looking for a way to do this for a while, I knew it was possible... but, couldn't find any tutorials... Thank you! This is HUGE! (at least for me) Is there a training series coming up? Let me know.
Thanks! New stuff is coming out all the time. You can subscribe if you like and stay up to date.
Great elementor tutorials. One tip for video editing: lower the background music so we can hear your voice better.
Monster tutorial......nice one.
Thanks ✌️
Very cool tutorials, thanks! Keep making them.
I did notice on the second half it seems the SVG divider renders quicker. The image one shows up towards the middle and glides into place, the SVG one is just there when the viewport changes.
I'm not sure bcoz I didn't notice, however, it's possible. Is that a glitch?
pretty smart, thanks for the tips!!!
Glad it was helpful!
Great tutorials man! But the music is always too loud, and it's hard to listen to your voice.
His voice & dry humour works a treat - so no need for background music, with or without still awesome tuts :/
Very handy solution, thanks for sharing..
Fantastic tutorial!
Glad you liked it!
Thank you so much for a great tutorial
Love that opening! Best ever!
Good tutorial .. ! Add more please ...
Great tutorial . I have learned a lot
very helpful thanks
You're welcome!
Come on, man. You are not serious. Really ??? WOW !!!! Excellent !!!
I have a png texture that I would like to apply to the actual shape divider as tiled texture. How can I do that?
great tutorial of all, thank you
your tutorial are amazing....
Awsome creativity....please give the custom css link for desktop mood
Gist link can be found in the description...
Really awesome work... keep it up
Thanks, I'll try!
awesome video
You are the best sir
Hi i'm using the CSS method, however on safari it will show a line between 2 columns and in chrome it is seamingless. Everythnign is set to 0padding and no gap.... Any thoughts on that ? Though if I make a bigger (longer width) svg divider img, it will push itself to the right and fill up the 'gap', however... the divider will the resized samller.. and not tall enough in heigh to cover the whole section heights.
I guess that -1px of the top margin will do the job.
Hello sir, Your videos are so much helpful.Thank you for that. Could you please refere some website to get the custom awesome shape dividors
Not sure where exactly to find dividers online mate, I make my own. Just grab some vector drawing app that's capable of exporting to SVG and simply design your divider. It should be easy and fun.
@@OoohBoi Sir, Please help me to make a client testimonial slider with free add-ons. Please let m know the plugin etc. Please sir. Help m...
@@Abdulkalam-zg3bk You can use Glider if you insist on Steroids for Elementor...
You are Great, Sir!!!
Can csshero help in the process for those who don't know how to write css? If yes, it will be interesting if you show how. Thanks for the tutorial
Personally, I think that CSSHero is for advanced users in spite of the fact it's been advertised as a non-tech savvy "tool". Its interface might appear scarry a little bit. So, even though CSSHero is Elementor friendly, I wouldn't tap into it. I'd rather suggest Style Kits for Elementor.
Ok, I got the custom divider on there, but, now my background overlay is gone. :O
Great video!!! I have one question, where can I get those media images shown on minute - 9:47??? Thank you
I have made these. Need to download? Here's the link: drive.google.com/file/d/1e1Hm8DsDm8Iapfs4F66Iad558HXl5Dj8/view?usp=sharing
@@OoohBoi, I would love to have them all. You did a great job!
I have tried it and it only works in preview mode, not in the actual website. Let me know if you know something about this,
Thank you so much for this amazing tutorial!
What's the URL of your website? Maybe I could figure it out of the frontend.
Great video. Keep it up
Great tutorial!
Where I can find shapes that you used in this tutorial? Any links?
I do these on my own but some of them are downloadable with the training file of this tutorial: czcams.com/video/WRPu1v4Kh9g/video.html
Great job
Excellent 🙃🙃🙃
Hi, what are the recommended dimensions for the svg? Thanks for this tutorial, you're awesome!
SVG stands for Scalable VECTOR Graphic. It's a vector, it can be 10x10px or 100000000x1000000000px, it doesn't make the difference. File size remains unchanged.
@@OoohBoi thanks for your quick reply!
Thanks for the great videos! One question regarding use of method 2 (more complicated one): Is there a reason you don't just target the SVG fill color with CSS like .imageclass { fill: #ff6600; } ?
Does something like that really work at your end? stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color
your video is amazing. it is very helpful for me. can you give your SVG file images? because I can not find these anywhere.
thanks a million!!!
Where do you get these graphics? Looking for abstract shapes.
I usually make them on my own... Sketch or Affinity Designer for Mac should be OK, not sure for the PC tho...
As a graphic designer I don't follow the 2nd tricks. I need only 1-2 minutes to convert the color of the SVG file to the desired color code.
OK, that's your choice...
@@OoohBoi But I really appreciate Your tricks and the way you of Your teachings.
Thank you !!!
Thank you for your video. How can i get your dividers used in this video?
It shouldn't be that hard to make your own... there are even a few online SVG editors too so you don't need to install any apps. However, my friendly advice is to get Inkscape.
id like to do this with a background video
who have this triangles shape >>>>>>why it is not in description
I want a simple 1 triangle shape divider. Where can I get one?
For such a simple task you could try to use an online tool, vectr.com
your backgrooun music is dominating your lecture, why dont you do videos without a background? yes its a good notes
is not working for me :( Im using a png file, could that be it?... fixed it, forgot to put the spacer
There you go! But in general, SVGs are far superior when it comes to masking! Quite often you'll see glitches with PNGs...
@@OoohBoi good to know, but... how do I save or export as SVG in gimp? and my server didnt allowed me to upload the file because it is consider a threat :(
@@TFGourmet 2 things to try: imgur.com/a/0j4OAzg and imgur.com/a/UY8UUCI . Have them both! In case it doesn't work right away, try to go to WP Admin, Media > Library first, and upload the SVG file. I'm suggesting that only because it worked for me, it's not an "official" remedy for that kind of issue. Hope it helps!
@@OoohBoi WOW THANL A LOT :D TIS IS AWESOME!!! REALLY THANKS A MILLION
I love your tutorial. I have a new website and using ocean wp free theme. I would like to ask how can have an image slanted. the imgae to be slightly tilted.. thank you
Thanks! You actually don't make the Image slanted - even though it's possible, it's the mask that's making the image look slanted. Image Mask allows you to literally cut off the parts that you don't need. Another way of creating a slanted image effect is to do it in Photoshop and save the image as transparent PNG. But that file might be quite heavy.
@@OoohBoi Thanks a ton. Do you have a tutorial for such time of making such images?
@@demilyndem1070 I don't but if you get some vector drawing app, I'm sure you'll be able to create a ton of these. And, of course, export to SVG.
@@OoohBoi ok thanks will try
can you make a download link for the designs you use?
All of my new videos include the download file but the older ones unfortunately not. Sorry!
Great tutorial. Hate the background music!
How did you manage to create that design on 2:07 mark?
These are the shape dividers; zigzag, and triangle ... hopefully, I'm not missing the point.
@@OoohBoi I mean that column itself.
How did you create this column with the shape divider, I attached an image just in case, hopefully you can help me out. Trying to achieve this: imgur.com/a/u5KAZgd
@@yogiselevate Oh, hopefully I'll nail it down this time... that's the Column inside of which 2 Inner Sections reside, one on top of another...coz that's the only way to make the default section dividers work.
@@OoohBoi Thank you for the quick response, yeah I just found the video. Keep posting more. May I suggest a tutorial?
🤯
Is it that bad?
@@OoohBoi No! It's mind-blowing! I know that WordPress and Elementor help us to build websites (mostly) without code, but adding some code on the top is perfect. Well explained, we can easily follow and copy your suggestions 🙌 💯
Where do you get these shapes?
Photoshop, Affinity Designer, Sketch, Illustrator, any other app capable of doing vector drawing and export to SVG. As I recall there's an online app too, not sure about the name but you can ask Google...and trust me Google is awesome 👁
@@OoohBoi Thanks man. Oh and very very good tutorials btw, so much value in what you teach.
Please Post css code !
Find the code here: gist.github.com/oooh-boi/6e3c01ff96b197773207f86238e0b92a
Trying to MSG yo Boi - :)
Hey Boi hope all well.
Going through your tutorials and
probably jumping in deep end as I bought what you sell even the ones I
have learnt from your amazing tuts' but just a bit stuck as on Elementor
Custom Shape Dividers" and do not have the relevant practice info as In
shapes images and texts. Now is this just me or did I buy all those for
nothing as you teach it so well in first place & only reason I
bought all was for shapes and like you do to be able to copy/paste -
hope this makes sense and sincerely all the very best.
- Regards.
chrisBman.
please reply or mail me - then feel free to remove :/
I kinda feel you're disappointed buddy but not quite clear why exactly. So please, don't hesitate to be as straight as possible. If you wanna refund - lemme know. In case you are stuck with something - do the same. No hard feelings at all, life's just a playground.
Please LOWER you background music.
If you can tell me how to do that in CZcams I'll be glad...
so basically elemetor is crap... everytime i want to get a pro effect, it seems elementor has to be hacked.. what are real web devs using??
Exactly! At this stage it's not that bad, but... We, humans, we all have been a bunch of crap back in the day. And we evolved. The same goes with any kind of software, hardware, plants, animals, etc. You can try out something else, like Oxygen and then come back for Elementor in a decade or so :)
Hey man... really nice piece of content... but .. plese.. take that background music off.. it really make me struggle to stay focused. At least lower its volume by a huge bit... OR... sidechain it with your voice. (but honestly id prefer not to listen it at all)
Will do mate, will do...I'm still struggling with my spare time to even publish new vids...
blob image source
www.blobmaker.app/
i gave dislike just for bad bg music.. its hard to listen you with these high volume music..