Master Tricky CSS Grid Layout in Bricks Builder | WordPress Tutorial
Vložit
- čas přidán 29. 08. 2024
- CSS grid can be very tricky, in this video we tackle one of the most simple yet difficult CSS grid layout to setup, especially when working with images and query loop.
JOIN THE INNER CIRCLE:
GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS
geary.co/inner...
Join this channel to get access to perks:
/ @designwithcracka
Bricks Builder | Oxygen Builder | WordPress | Tutorial
#oxygen #oxygenbuilder #wordpress #bricksbuilder #bricks
FACEBOOK GROUP: / designwithcracka
FOLLOW ON TWITTER: / udoroessien
GET AUTOMATIC.CSS - A time saving utility class for WordPress websites
automaticcss.c...
--------------------------------------------------------------
GET MOTION.PAGE - Interact & animate any WordPress site
motion.page/go...
--------------------------------------------------------------
GET RECODA WORKSPACE - Advance workspace for Oxygen Builder
recoda.me/work...
--------------------------------------------------------------
GET YABE WEBFONT - Custom fonts management and self-host Google Fonts with seamless WordPress page builders integration
webfont.yabe.l...
--------------------------------------------------------------
Get Breakdance - A record breaking visual builder for WordPress
breakdance.com...
--------------------------------------------------------------
GET 20% OFF HOSTING PLAN FROM HOSTINGER
hostinger.com/...
DISCLAIMER: This video or description contains affiliate links, which means that if you click on one of the product links, you'll be supporting the channel, and I’ll receive a small commission.
=============================================
BOOK A 1-HOUR CONSULATION
calendly.com/d...
=============================================
HIRE ME: udoroessien@gmail.com
=============================================
You’re my favorite. No ego, no annoying rants - just the good good.
The last trick was drive me crazy. thank you sir.
Thank you 🙂
Trying to achieve this kind of grid with a query loop was my next challenge in the process. I already thought it would not be as easy as it seems. So thanks a lot. Saved my life and many hours of trial and error 🙂.
Bruh thank you so much . i was struggling . Nobody really doing woocommerce video with Bricks keep the good stuff coming.
Perfect timing as I am trying to build this layout now. Very helpful. And, I had no idea you could right-click and get all the ACSS options. So, thanks for that too!
Thank you! This was really needed! Would love to see some more complex layouts too and also how we can inject for example "adverts" or other elements into our grid at certain places 🙏
Great Video, Thank Bro!
Could you make another, how can we make Masonry "effect" with query builder grid? 🙂
This was so much helpful. I initially thought in bricks it is going to be easy but unfortunately it doesn't provide you grid span feature. I learned some good tips here. Thank you ❤
Best tutorial on css grid Thank you
Nice thank you 🎉 gonna tackle this grid
Terrific as always! Please do one wigh a dynamic slider - please!!!
I think I have tutorials on dynamic slider. Or is there something specific you’re referring to?
this is awesome I used it right away. Do you happen to have a tutorial on sorting of grid also somewhere? :) Like Sorting in Product Grid.
Thank you so much
I needed this ❤. Thanks bro
You have another subscriber ;-)
So useful
Nice helpful video, just a remark I would not have inserted the Image block, just applied the image as the background of the element
That would work, but sometimes you need to use an image for SEO or semantic reasons, unless the image is just a decorative element.
Learning this in my web dev class at school. Ok how to buy code but gonna practice on bricks
What is that toolbar editor on the far left? I don't see it, I must be missing something, but it looks like a game changer! Is that a plugin or a setting I need to change?
It’s a plugin: Advanced Themer for Bricks.
Great tutorial, just wondering when you were adding the grid variables was the pop-up from advanced themer using acss?
ACSS
Nice tutorial thank you! With what software do you screen record ( and how did you zoom into the css for example)
Camtasia studio.
@@DesignwithCracka thank you so much!
hey cracka. what was that acss menu you brought up at 3 minutes? I guess you right clicked and a panel came up I never saw before
It’s ACSS contextual menu. You can enable it in ACSS settings > options.
Thanks. keep up the good work
@@DesignwithCracka
Hi Cracks, I follow you're link to the InnerCircle GET ACCESS TO MY ADVANCED & INDEPTH TUTORIALS but I doesn't found them, where can I find?
Once you sign up for the Inner Circle, Under 'Bricks Builder training', you'll see my tutorials. Please let me know if you have any issues.
@@DesignwithCracka I have asked also in the Circle and found it. Kevins names is as uploader :)
How come you didn’t use Grid Area?
In this case, using Grid Area is a matter of choice. The aim of this video is to use the Grid feature of Bricks Builder.
Okay got it
what about the aspect ratio like 1:1 😊
If you need the grid cells to be 1:1 ratio, the grid template columns would be repeat(3, minmax(300px, 300px)), this means the value used for the grid auto rows must be the same as the values above (300px in this case).
Note that doing that may cause horizontal scroll issues, to make it bit more flexible, the min value should be 0 e.g. repeat(3, minmax(0, 300px)), so that it will shrink if there's no room for it.
@@DesignwithCracka thank you so much
If you are going to teach people how to use grid, you may wanna deactivate all your addons and classes.
They are confusing and annoying.
Focus on the basics that all beginners and intermediate users are familiar with. Advanced users wouldn't watch this to start with.