How to Avoid a Huge Issue With Shape Dividers in Bricks Builder
Vložit
- čas přidán 13. 11. 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 CZcams update has pinch to zoom, with adaptive resolution! So one can zoom into the code on mobile!
@@DesignwithCracka oh nice!
I do like an old divider myself so boy am I glad I watched this video today, early in my journey into Bricks world.
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!
I'm relieved every time I learn something from you because I know I'm learning the right thing! Thank you!👍
"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!
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.
Pure gold in this video - thanks Kevin
Thanks for watching!
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!
🙌
Granted this video is older now, however I learned tons and will definitely be using these techniques. Thanks!
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!)
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!
Excellent, as always, Kevin.
I like the enthusiasm you spread the knowledge, too.
I appreciate that!
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 !!!!!
Great strategy! thanks Kevin ❤
Love your passion and energy :)
Thank you! Truly a life saver!
This video pairs perfectly with PB101: L07. Like a juicy steak and a Napa Cabernet.
beast ! thanks for all the info its great !
Thanks a lot for giving us insane content value!
My pleasure!
this is dopeception. thanks kevin!
Fantastic video Kevin!
Glad you liked it!
Monster Tutorial! 😮
Great as always!
Thank you! Cheers!
My first time learning about tokens. My new favorite wrord. Tokens!
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!
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.
🙏
I wonder if you could make these as settings in acss or use a custom field to change the value 🤔
@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.
You will make me a superman i believe 😂
Very good tutorial. Couldn't you adjust the height with the clamp function?
Maybe. I’d have to go back and watch again.
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.
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: czcams.com/video/v-MF4NfSwHM/video.html
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!
Shape dividers over images next.
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
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!
Couldn't you just use the Bricks Global Variable Manager to setup you vars so that you don't have to use CodeBox? That way you can select them when needed them in Bricks? Also is there a way to load ACSS vars into the Bricks Global Variable Manager?
the variable manager didn't exist when this video was created.
@Gearyco oh that makes sense. That said, is there a way to load the acss vars into the manager?
@@joshpaynedesigns No reason to. We have right click context menus that auto-insert the vars and organize them better than Bricks does.
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.