Elementor - Custom Shape Dividers Anywhere

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.

awesome video

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, the exact solution to what I was looking for!! Thanks

Nice! This is great; I was hoping for a way to produce custom shape dividers.

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!

id like to do this with a background video

Where do you get these graphics? Looking for abstract shapes.

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!

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??

pretty smart, thanks for the tips!!!

Man, your Tutorials are top !!

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.

Monster tutorial......nice one.

Thanks for this tutorial and all of them, very useful, excellent explanation, awesome tutorials.

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.

Excellent 🙃🙃🙃

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.

is not working for me :( Im using a png file, could that be it?... fixed it, forgot to put the spacer

Well explained... Awesome tutorial..

🤯

Fantastic tutorial!

Thanks ! Saving my UI work with this hack.

You're pretty damn smooth my man.

Hi, what are the recommended dimensions for the svg? Thanks for this tutorial, you're awesome!

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!

very helpful thanks

who have this triangles shape >>>>>>why it is not in description

blob image source

your video is amazing. it is very helpful for me. can you give your SVG file images? because I can not find these anywhere.

Great tutorial!
Where I can find shapes that you used in this tutorial? Any links?

Thank you for your video. How can i get your dividers used in this video?

can you make a download link for the designs you use?

Please LOWER you background music.

Awsome creativity....please give the custom css link for desktop mood

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!

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!

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. :)

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

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.

Great tutorial. Hate the background music!

your backgrooun music is dominating your lecture, why dont you do videos without a background? yes its a good notes

Brilliant tutorial. Subtle background music. Thanks for putting this out.

Really awesome work... keep it up

Great elementor tutorials. One tip for video editing: lower the background music so we can hear your voice better.

Love that opening! Best ever!

thanks a million!!!

Your tutorials are all great, I really like them. Thanks for your sharing.

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

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 :/