CSS Wavy Background Tutorial | Section Dividers | FREE

Try it here: www.shapedivider.app/
Here's an easy tutorial on creating CSS dividers.
These are a really popular trend right now in modern web design. You can use these non-rectangular separators to create more interesting, 3-D layouts that pop a lot more than the plain, straight-across, boring sections of old.
You'll see how to design your shape (with a SUPER easy drag-and-drop editor), and then how to use it on both a regular HTML website AND a Wordpress site (in this case, using the Divi theme).
The app is free to use!
------------------
------------------
I’m always looking for cool new tools to try & make videos about. Reach me at [e-mail] with any recommendations.
My site: brandonstiles.com
Get the ‘First Page Pro’ SEO Training here: bit.ly/2Z6HRXS

[@emmakawira840]

finally have got the perfect tutorial for my problem. thanks brandon

[@vm170]

thanks Brandon. It was very helpful. Love your content

[@piotisnaturals]

thank you! I tried it on my Shopify website I am building now, using the Pagefly builder and it worked. The position" relative I edited that in the CSS code which I put in the HTML/LIQUIFY editor. Then did a bit of configuration (height etc) for the section the HTML/Liquid code editor belong to, and it gave me the curve that I was looking for. Thanks again!

[@MarkoKupresanin]

Great video, thanks so much for being straight to the point

[@shamsuzzamanimon1200]

finally i got a perfect css wave tutorial video
thanks a lot bro

[@aileenchan3741]

this is great! : D thank you so much for sharing this app!

[@ericochieng2580]

this was helpful and straight to the point

[@lakshaychauhan9190]

Dude this is awesome! thank you!!

[@jeffbarnhart6441]

Thank you very much. I had attempted something like this earlier in the week and thought it was hopeless.

[@19mad92]

awesome tutorial, thank you a lot!

[@-factos8582]

Thank You So Much Bro.
It's Working Perfectly !!!

[@englishconversationschool]

Thank you so much for making this video. This video is very helpful

[@brendapeters6053]

Helped me a lot. Thank you

[@christiandavidvalenzuelago7437]

You are AWESOME DUDE! THANK YOU SO MUCH!

[@nikolazt]

U absolutely rock bro, you help me a lot

[@user-oc6uy6cz3h]

utterly a lifesaver

[@chaolobi7698]

thanks for this amazing video, it help me a lot 😊

[@hariscloud3917]

Thank you, very nice tutorial

[@bluhuedesigns]

Hi Brandon, thankyou for this video, I am wondering if there is a way to use slanted lines as a section divider on divi (or other wordpress theme) when I use this method the background is not coordinating

[@RahulVerma-gv6ys]

thanks for creating this video

[@nyankochan2843]

Thank you so much!!!

[@TerryZeng]

Very helpful website, Thanks.

[@hotelflights1404]

I love this! Our site utilizes the Enfold theme which doesn't appear to accept code as easily as Divi. Do you have any tips for inserting the Shape Divider code?

[@UniTz]

perfect thanks dude

[@djpablowee]

Great Man, thanks.

[@tarunrathore4513]

thanks bro... It helps me alot

[@zachmurri]

Thank you, this works even better with Gutenburg where you don't have to remove any of the bloated padding and margin DIvi or Elemenotr add

[@timong.2253]

Maaan Im blown away :D

[@jonnathanlopes1195]

Great Video

[@pacesferry]

Dont use Divi - prefer the svg approach rather than code - but GREAT VIDEO anyways. Thanks for sharing shapedivider 😍

[@neeluyadav1721]

Thank youu!!

[@annantogourob7195]

Thanks man

[@joshuaola-oluwa7777]

Thanks!

[@michaelojebola5230]

Watching in 2024... Thank you 💞

[@ichchhasapkota1207]

thank you so much

[@Infinity79100]

Hi, how could I set it in vertical behavior?

[@four-leggedcat285]

Sir, you have my like and my suscription. Thanks you very much, God bless your job.

[@Brandonstiles]

Thank you!

[@hdbm3269]

thanks a lot 🙏🙏

[@mnchabel8402]

Cool, I see Elementor has simplified such.

[@Hendrisaputrapresent]

What the keyword if used elementor in wordpress

[@3nertia]

Is there a way to make a curved *vertical* border?

[@rickyanthony]

This is awesome. Is the code in this tool compatible with Edge and IE? Because you know.. weakest link.

[@craigburton4447]

In WP it's probably simpler to use a gutenberg custom HTML block and just put all he code inside it, just guessing. I have divi but will try it out with gutenberg to see.
Great heads up on that resource, will save me having to mess about with illustrator. Thanks

[@Phanton-ub8mj]

how do you change the bottom

[@kingaboros]

thanks for this tutorial, however, mine it's coming back as black and I don't know why..:( I selected white

[@maazsiddiqi6745]

Is this possibe to put on shopify?

[@raj006]

what if we wanted to put the text inside that shape?

[@duzx4541]

im having issues with the "empty space" of the svg... It´s color is black. Any ideas?

[@noahveroes]

how to implement in a clickfunnels?? can you make a video for it
thanks

[@AashishKumar-vb3qb]

Let's try this at pc , by the way can you give your chrome extentions name ??

[@shreeshantadas9141]

I am your new subscriber

[@mart1127]

but my problem is how you can add another wave on the bottom.

[@yadjnishnursiah8621]

How can we add a picture in it ?

[@pratikbhangale3538]

Brandon Nice Video, But I am still confused why you changed your parent position to relative. Is it affecting design and if then how?

[@PG-fs3xb]

I think he did that because the shapedivider tool comes with a default "position: 'absolute';" So the parent needs to have a relative position in order for the svg to be set at the bottom of the parent.

[@m.ramzannasir8717]

cool

[@sebastian9192]

what is the name of background music
?

[@akash-lz2dq]

is it responsive

[@Rouge_23]

Sería bueno que uses la opción de subtitulos de youtube. I don't speak English.

[@SajidAli-ke6ue]

Source Code please.

[@mtycoder]

you are beautiful, you know that?