CSS Wavy Background Tutorial | Section Dividers | FREE

Подписаться 3,7 тыс.

Просмотров 109 тыс.

50% 1

Try it here: www.shapedivid...
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

Опубликовано:

20 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@emmakawira840 4 года назад

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

@zachmurri 8 месяцев назад

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

@jeffbarnhart6441 Год назад

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

@piotisnaturals 3 года назад

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!

@-factos8582 Год назад

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

@topioproni Месяц назад

Worked And Got It!

@michaelojebola5230 7 месяцев назад

Watching in 2024... Thank you 💞

@shamsuzzamanimon1200 3 года назад

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

@ericochieng2580 Год назад

this was helpful and straight to the point

@vm170 4 года назад

thanks Brandon. It was very helpful. Love your content

@mnchabel8402 4 года назад

Cool, I see Elementor has simplified such.

@Hendrisaputrapresent 2 года назад

What the keyword if used elementor in wordpress

@nikolazt 10 месяцев назад

U absolutely rock bro, you help me a lot

@MarkoKupresanin 2 года назад

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

@englishconversationschool 2 года назад

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

@aileenchan3741 3 года назад

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

@연카츄 3 года назад

utterly a lifesaver

@christiandavidvalenzuelago7437 3 года назад

You are AWESOME DUDE! THANK YOU SO MUCH!

@pacesferry 3 года назад

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

@lakshaychauhan9190 3 года назад

Dude this is awesome! thank you!!

@brendapeters6053 3 года назад

Helped me a lot. Thank you

@hariscloud3917 3 года назад

Thank you, very nice tutorial

@chaolobi7698 Год назад

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

@19mad92 2 года назад

awesome tutorial, thank you a lot!

@TerryZeng 2 года назад

Very helpful website, Thanks.

@RahulVerma-gv6ys 3 года назад

thanks for creating this video

@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

@tarunrathore4513 3 года назад

thanks bro... It helps me alot

@timong.2253 Год назад

Maaan Im blown away :D

@four-leggedcat285 4 года назад

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

@Brandonstiles 4 года назад

Thank you!

@kingaboros 3 года назад

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

@ichchhasapkota1207 Год назад

thank you so much

@annantogourob7195 2 года назад

Thanks man

@joshuaola-oluwa7777 2 года назад

Thanks!

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

@nyankochan2843 3 года назад

Thank you so much!!!

@hdbm3269 2 года назад

thanks a lot 🙏🙏

@UniTz 4 года назад

perfect thanks dude

@neeluyadav1721 2 года назад

Thank youu!!

@duzx4541 2 года назад

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

@jonnathanlopes1195 3 года назад

Great Video

@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

@djpablowee 3 года назад

Great Man, thanks.

@3nertia 2 года назад

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

@pratikbhangale3538 4 года назад

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.