How to Avoid a Huge Issue With Shape Dividers in Bricks Builder
HTML-код
- Опубликовано: 13 ноя 2022
- Shape dividers are a great way to break up section content and add some flare to a web design. Thankfully, Bricks makes it super easy to add shape dividers to your sites.
There are three MAJOR ISSUES, though:
1. The shape divider styles can't be assigned to classes, so there's no way to maintain global control of the styling.
2. The shape dividers aren't responsive, so it's hard to get shape dividers to look good across all devices unless you know some savvy techniques.
3. The spacing in your sections should ideally be relative to the shape divider being used, which isn't how section spacing works by default.
Here's an example of a shit show you might find yourself in: Let's say you add 50 dividers across your website build and then you realize you need to adjust the height or width of those dividers so they look better on mobile.
Well ... you're screwed. Not only do you have to go edit every single divider individually, you can't make the edits at the breakpoints.
In this tutorial I'm going to show you some tricks for supercharging your shape dividers and making them [mostly] scalable and maintainable.
Join the Inner Circle - digitalambition.co/inner-circle/
Get AutomaticCSS - automaticcss.com
Sorry, normally I zoom in when I'm writing CSS, but I forgot on this build. So you'll probably have to watch on a desktop if you want to follow along.
The new RUclips update has pinch to zoom, with adaptive resolution! So one can zoom into the code on mobile!
@@DesignwithCracka oh nice!
I'm relieved every time I learn something from you because I know I'm learning the right thing! Thank you!👍
I do like an old divider myself so boy am I glad I watched this video today, early in my journey into Bricks world.
You have just saved me a ton of time! I have just implemented it on a new site and it's looking good! I wish Bricks Builder had Curved Shape Dividers! Thanks again, excellent tutorial on what could turn out to be a complex, messy and time-consuming implementation.
Thanks so much! When you don't know what you don't know and then someone like Kevin comes along and tells you. Just awesome!
You are so welcome!
"Don't repeat yourself!"
This is probably one of the most representative tutorials of yours showing the power and importance of using tokens. Excellent one, as always! Thanks Kevin! 🙏🏼
Glad it was helpful!
Exactly!
Fantastic! Just finishing up my first website in Bricks, and I'm planning on using some dividers. Glad I decided to check out this video before going ahead with those! (Of course that decision was a no-brainer, as it is completely clear that if Kevin Geary has a video on an aspect of web design / Bricks, then watching it will have you learn important things + avoid problems!)
Pure gold in this video - thanks Kevin
Thanks for watching!
Great strategy! thanks Kevin ❤
This video pairs perfectly with PB101: L07. Like a juicy steak and a Napa Cabernet.
Granted this video is older now, however I learned tons and will definitely be using these techniques. Thanks!
Kevin, I've watched a ton of training in my life that was informative. I've never watched training that was as informative and as entertaining as yours. ❤
Really appreciate that!
Thank you! Truly a life saver!
Wow how frustrated I was with the Shape Divider because I couldn't adjust it the way I wanted... And now you come and show me how! As always, an absolutely blatant tutorial!
🙌
Excellent, as always, Kevin.
I like the enthusiasm you spread the knowledge, too.
I appreciate that!
Love your passion and energy :)
Monster Tutorial! 😮
Great to see those advanced tips! Thanks Kevin 😊
💪🏻
Marvellous video. I am learning so much from you. Thank you!
You are so welcome!
Great great great great content! Thanks Kevin !!!!!
My first time learning about tokens. My new favorite wrord. Tokens!
beast ! thanks for all the info its great !
Very good tutorial. Couldn't you adjust the height with the clamp function?
Maybe. I’d have to go back and watch again.
this is dopeception. thanks kevin!
Thanks a lot for giving us insane content value!
My pleasure!
Fantastic video Kevin!
Glad you liked it!
Great as always!
Thank you! Cheers!
Thanks for the great video.
I will create the settings for the section padding and the overlay header as token too. Then I can see all the settings in WPcodebox at a glance and have a clear template for other projects that I can easily customize.
That's a great idea!
You will make me a superman i believe 😂
@digitalambition
Why don't you add to the ACSS control panel / settings page and area for one to enter custom vars (instead of using WP Code)? This way everything is kept withing Bricks + ACSS.
Also to keep everything within one single export / import of settings.. when moving things from site to site... like you say "maintainability".
Because that would basically require us to build an entirely new product (code editor) into the existing product. It might get there some day, but we have many other priorities as well.
I wonder if you could make these as settings in acss or use a custom field to change the value 🤔
Thanks, you saved me. I have a huge client site with a lot of dividers in the making. I ddn´t know that issue exits in bricks and oxygen. I don´t use dividers so often anymore. PS: codebox is great. I use it for all projects. So easy to structure even large complex css.
🙏
This is fantastic. Question: how do you turn the calc function you used for .pad-section--divider into a variable?
Is it something like...
.pad-section--divider {
calc(var(--section-padding-m) + var(--tri-double-divider-height));
}
Or am I getting it wrong?
I would have to go back and watch the video again. But, your example doesn’t show the creation of a variable.
It is exactly possible to add a class in the custom svg code itself I found out. Would did work?
🤷♂️
Is there a reason to not add an SVG as an image with absolute positioning so you can use classes instead of using the shape divider element?
You can definitely manage shape dividers manually and have much more global control. I show how in this video: ruclips.net/video/v-MF4NfSwHM/видео.html
Kevin, is there any way to remove .brxe-div from rendered element?? I need blank div with some custom class, but Bricks always add .brxe-div behind my custom class ,
(example: .myClass.brxe-div), I just want .myClass without .brxe-div behind it.
It’s submitted as a feature request I believe
thanks for the video. when are the frames going to be released ?
Black Friday
@@Gearyco can’t wait to purchase it. Thanks
Question: couldn't you add the custom code to Bricks' custom code fields? Great tut, BTW. Nothing like it I could find.
I don't recommend it --- not a great experience.
Shape dividers over images next.
Really liked this, I followed it but on a phone my hero kind of overflows to the right… I’m guessing this is because of the 125% width on the divider?
Add overflow hidden to section
@@Gearyco cheers, that fixed that. I blame elementor, being a user of it for 5-6 years never thought me a damn thing!
hmm, doesn't seem to work for me....I'm using WPCodebox for SCSS. Followed what you did to a T, but the 125% width doesn't seem to apply....it actually made my divider smaller. And then there is a small gap at the bottom of my divider even though I have it aligned to the bottom of the section.
Probably made a small mistake somewhere
Yup, I did. Didn't enable the snippet. 😬
@@Gearyco Worked beautifully. Thanks for this!
Why not add some shape dividers into frames?
Frames is a UX tool not really a UI tool.
Good video thanks but I feel like the nitty gritty content was 5 minutes not 34 sorry
You get what you pay for.
More disaster: you can't copy or create classes for shape dividers in Bricks. Only by custom css / child theme css.