ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- Shape divider in Elementor is such a great feature. Unfortunately, it’s only applicable to Section, more precisely to Section top or bottom side.
Moreover, currently, it’s not possible to use or apply custom shape divider.
Is it possible to override these two drawbacks in Elementor? Sure it is! In this video, you will learn how to apply custom Shape Divider, how to apply it to Column (not only Section) and how to apply it both vertically and horizontally.
Two methods will be featured in this tutorial. The first one is very easy and doesn’t require Elementor PRO, but the second one is for advanced users only. It does include the usage of Custom CSS panel and some hand-written CSS code.
If you are eager to learn new tips and tricks in Elementor - just watch this video!
SOURCE CODE (css) Gist: gist.github.com/oooh-boi/6e3c...
OTHER TUTORIALS
-----
Overlapping Columns in Elementor
• Overlapping Columns in...
--
Overlapping Rows in Elementor
• Overlapping Rows in El...
--
Episode 1: Image in text, gradient text - Elementor tips and tricks
• Image in text, gradien...
-----
Episode 2: Creative Borders - Elementor tips and tricks
• Creative Borders - Ele...
-----
Episode 3: Fancy Image Borders and Buttons - Elementor tips and tricks
• Fancy image borders an...
-----
Episode 4: Image Blobs - Elementor tips and tricks
• Image Blobs - Elemento...
-----
![ความรักไม่ได้น่ากลัวขนาดนั้น (TRUST ME) - LYKN [ OFFICIAL MV ]](http://i.ytimg.com/vi/9np-lAtCRpQ/mqdefault.jpg)
Hey man just wanted to leave a note that I find your tutorials very helpful! Thank you for making these tutorials :)
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.
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.
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!
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
You sir have won the internet! Subscribed!
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!
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 :)
Man, your Tutorials are top !!
Great Tutorial, the exact solution to what I was looking for!! Thanks
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.
Your tutorials are all great, I really like them. Thanks for your sharing.
Thanks for your feedback and thanks for watching!
Very cool tutorials, thanks! Keep making them.
Love that opening! Best ever!
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!
You're pretty damn smooth my man.
Great tutorial . I have learned a lot
Thanks for this tutorial and all of them, very useful, excellent explanation, awesome tutorials.
You're very welcome!
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.
Thank you so much for a great tutorial
Thanks ! Saving my UI work with this hack.
Awesome! Glad to be helpful!
great tutorial of all, thank you
your tutorial are amazing....
Fantastic tutorial!
Glad you liked it!
Very handy solution, thanks for sharing..
Nice! This is great; I was hoping for a way to produce custom shape dividers.
I don't believe it, #3f458E is my favourite colour too! :D Thanks man.
Well explained... Awesome tutorial..
Thank you 🙂
I would be happy to see you making a video for increasing page speed
pretty smart, thanks for the tips!!!
Glad it was helpful!
Great video. Keep it up
You are Great, Sir!!!
Great elementor tutorials. One tip for video editing: lower the background music so we can hear your voice better.
Monster tutorial......nice one.
Thanks ✌️
Really awesome work... keep it up
Thanks, I'll try!
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 are the best sir
Good tutorial .. ! Add more please ...
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
thanks a million!!!
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!
awesome video
Great job
Thank you !!!
very helpful thanks
You're welcome!
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 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 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: th-cam.com/video/WRPu1v4Kh9g/w-d-xo.html
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.
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!
I have a png texture that I would like to apply to the actual shape divider as tiled texture. How can I do that?
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!
Excellent 🙃🙃🙃
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.
your video is amazing. it is very helpful for me. can you give your SVG file images? because I can not find these anywhere.
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.
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?
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.
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...
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 :/
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...
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
Come on, man. You are not serious. Really ??? WOW !!!! Excellent !!!
Awsome creativity....please give the custom css link for desktop mood
Gist link can be found in the description...
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.
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!
id like to do this with a background video
Ok, I got the custom divider on there, but, now my background overlay is gone. :O
🤯
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.
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
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?
who have this triangles shape >>>>>>why it is not in description
your backgrooun music is dominating your lecture, why dont you do videos without a background? yes its a good notes
Please Post css code !
Find the code here: gist.github.com/oooh-boi/6e3c01ff96b197773207f86238e0b92a
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.
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.
Great tutorial. Hate the background music!
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...
Please LOWER you background music.
If you can tell me how to do that in TH-cam I'll be glad...
blob image source
www.blobmaker.app/
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 :)
i gave dislike just for bad bg music.. its hard to listen you with these high volume music..