CSS Wavy Background Tutorial | Section Dividers

CSS Wavy Background Tutorial | Section Dividers | FREE

Рет қаралды 106,088

Brandon Stiles, Software Engineering

4 жыл бұрын

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 brandon@brandonstiles.com with any recommendations.
My site: brandonstiles.com
Get the ‘First Page Pro’ SEO Training here: bit.ly/2Z6HRXS

Пікірлер: 65

@emmakawira840 3 жыл бұрын

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

@piotisnaturals 2 жыл бұрын

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!

@vm170 3 жыл бұрын

thanks Brandon. It was very helpful. Love your content

@shamsuzzamanimon1200 3 жыл бұрын

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

@jeffbarnhart6441 Жыл бұрын

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

@MarkoKupresanin 2 жыл бұрын

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

@lakshaychauhan9190 3 жыл бұрын

Dude this is awesome! thank you!!

@ericochieng2580 11 ай бұрын

this was helpful and straight to the point

@aileenchan3741 3 жыл бұрын

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

@-factos8582 Жыл бұрын

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

@brendapeters6053 3 жыл бұрын

Helped me a lot. Thank you

@19mad92 2 жыл бұрын

awesome tutorial, thank you a lot!

@englishconversationschool 2 жыл бұрын

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

@hariscloud3917 2 жыл бұрын

Thank you, very nice tutorial

@christiandavidvalenzuelago7437 2 жыл бұрын

You are AWESOME DUDE! THANK YOU SO MUCH!

@nikolazt 8 ай бұрын

U absolutely rock bro, you help me a lot

@user-oc6uy6cz3h 2 жыл бұрын

utterly a lifesaver

@chaolobi7698 Жыл бұрын

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

@nyankochan2843 3 жыл бұрын

Thank you so much!!!

@UniTz 3 жыл бұрын

perfect thanks dude

@djpablowee 3 жыл бұрын

Great Man, thanks.

@RahulVerma-gv6ys 3 жыл бұрын

thanks for creating this video

@timong.2253 11 ай бұрын

Maaan Im blown away :D

@TerryZeng 2 жыл бұрын

Very helpful website, Thanks.

@zachmurri 5 ай бұрын

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

@tarunrathore4513 2 жыл бұрын

thanks bro... It helps me alot

@pacesferry 2 жыл бұрын

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

@jonnathanlopes1195 3 жыл бұрын

Great Video

@mnchabel8402 3 жыл бұрын

Cool, I see Elementor has simplified such.

@Hendrisaputrapresent 2 жыл бұрын

What the keyword if used elementor in wordpress

@bluhuedesigns 2 жыл бұрын

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

@neeluyadav1721 2 жыл бұрын

Thank youu!!

@annantogourob7195 2 жыл бұрын

Thanks man

@hotelflights1404 3 жыл бұрын

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?

@joshuaola-oluwa7777 2 жыл бұрын

Thanks!

@ichchhasapkota1207 Жыл бұрын

thank you so much

@kingaboros 2 жыл бұрын

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

@craigburton4447 2 жыл бұрын

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

@hdbm3269 2 жыл бұрын

thanks a lot 🙏🙏

@four-leggedcat285 4 жыл бұрын

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

@Brandonstiles 4 жыл бұрын

Thank you!

@Infinity79100 3 жыл бұрын

Hi, how could I set it in vertical behavior?

@duzx4541 2 жыл бұрын

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

@3nertia 2 жыл бұрын

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

@rickyanthony 3 жыл бұрын

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

@shreeshantadas9141 3 жыл бұрын

I am your new subscriber

@noahveroes 4 жыл бұрын

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

@AashishKumar-vb3qb 3 жыл бұрын

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

@raj006 3 жыл бұрын

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

@pratikbhangale3538 3 жыл бұрын

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 3 жыл бұрын

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.