Secrets to Stunning Bento Grids on WordPress & Advanced Themer
HTML-код
- Опубликовано: 3 окт 2024
- In this video, we're diving into the world of web design and focusing on recreating a trendy bento grid layout using Bricks Builder and Advanced Themer.
Inspired by a Blocksy Pro starter site design, I'll guide you step-by-step through building your own bento grid layout from scratch.
What You'll Learn:
Creating a Bento Grid Layout: Discover how to set up a stylish and functional bento grid layout.
Using Bricks Builder: Learn how to utilize Bricks Builder to streamline your design process.
Advanced Themer Tips: See how Advanced Themer makes it easy to work with grid layouts and responsive designs.
Styling and Customization: Get tips on styling elements, including setting background colours, border radius, padding, and more.
Responsive Design: Learn how to adjust your layout for different screen sizes to ensure a seamless user experience.
Global Classes and BEM Naming: Understand the importance of using global classes and BEM naming for efficient and organized CSS.
Resources:
Advanced Themer: jo.my/rfuhbc
Bricks Builder: jo.my/bricks
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.c...
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
✅ Flowmattic: jo.my/flowmattic (WPTUTS for 20% off annual plans)
✅ Clickwhale: jo.my/clickwhale (WPTUTS20 for a 20% discount on all plans)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ Hostinger: jo.my/92dmbb
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Bricks Builder: jo.my/bricks
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ InstaWP: jo.my/0jdh2j
✅ Crocoblock: jo.my/croc
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/f...
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
Full written version with the raw CSS can be found here: learnbricksbuilder.com/easy-bento-grids-with-advanced-themer/
Thank you, Paul.
May I ask why you have used background images instead of placing the images inside the image blocks itself?
Since I'm watching your tutorials along with the ones from Kevin Geary I would make this bento grid a list element and place the images directly inside the image block to make them more accessible. What do you think?
Excellent video. I liked the combo of Bricks+AT+Core, and bento grids are very topical now. Keep it up.
I like the combination (AT, Core with Bricks) and your video - as always 🙂 I think the setup of theese would help a lot of people.
Nice demo. Would love to see a follow up video of doing this in a loop or with Woocommerce products (so the latest one is maybe the biggest image, and then it gets moved every time there's a new product etc.)
Wouldn't filtering by Date work for that?
Great Paul - What would be an amazing follow-up to this tutorial. Is how to do this same layout with a query loop and maybe make the first item (of query) have a slightly different layout.
A great tutorial! But in mobile landscape and below, the text block has a LOT of extra space on the bottom of the block - about 2/3 excess space.
That is effin' brilliant mate.... MORE MORE MORE!
I have the same t-shirt! It's fantastic being a member of the '77 Rebel Scum!
Really great tutorial Paul!!! I have been messing about with this for the last few days with sites that use fairly complex Bento Grid designs and then try to re-create them using Bricks with AT. It's pretty easy when you have them live in a webpage because you can inspect them which give you the columns and rows and also where the cells start and end. The issue is if you use a site like bentogrids which has lots of really nice but some very complex bento grid designs but you only get the image of the design. How on earth can you determine the columns and rows needed for such designs just by looking at the image? You would need to overlay the image with a grid and use the information from that instead. So if you had a method for creating more complex bento grids using Bricks and AT then I would love to see a tutorial on that also. Cheers!
Can you use Dynamic data to load the 4 images in the grid from an ACF gallery with say 10 images in it which you only see when you click through to the lightoom gallery in Bricks?
Very good work!!!
All the Bento layout examples I've seen become symmetrical at the floating breakpoint. Do you think it is possible and practicable to maintain an asymmetric configuration?
Great video. How can you do this with query?
I just installed the Core Framework along with the Advanced Theme, but I don't have the CF variables as it looks like you do. Do I need to set something in the settings to have variables from CF? I also have ACSS installed can it get complicated with the other add-ons?
Hi, I've tried answering our question, but YT keeps blocking it as spam, seems as soon as I mention tools I use it gets deleted. lol, so I can't answer that question openly.
Instant like ❤
Great video! Quick question about advanced theamer… does it come with all of the default variables for spacing etc? And do you always use the same ones? (Apart from colours and fonts of course), or do you create a new set of variables and styles for each and every site you build?
AT provided the tools, but not a pre-built set of variables/classes.
Interesting would be to know how they work with query loops ✌️😉
Perfectly. :)
AT identifies it's a Query Loop and will address everything needed inside the CSS Grid builder modal. It's pretty slick.
@@WPTuts But what if for example want to exclude certain grid items? Or include other titles, etc.?
@@PhilippBremer that's kind of outside the remit of the builder. Without a proper example, I'd say you're going to have to handle a lot of that in the loop iteslef before you move to the grid side of things.
Either that, or start using CSS to target specific children in the loop to hide or change their appearance.
@@WPTuts Thx for clarification. And thx for your videos!
1st like ❤
The silly face covers isn't recognized by youtube's algorithm anymore
What? 🤷🏼♂️
I Iike this channel, but I'd like to see way more tuts away from bricks... It reminds me of when the baldy fella from wpcrafter never did anything but elementor for about 2 yrs
Have you looked at the latest videos on the channel?
I’ve covered WP plugins, LocalWP, website blueprints, email marketing and a load more that have nothing to do with Bricks. 🤷🏼♂️
@@WPTutswhen I need a tut, your channel is my first port of call, especially acf, otherwise I wait for the RUclips push notifications for your latest view, which mostly feel like they're bricks-centric ATM
@@martinmcshane4487 that’s because Bricks is part of my main stack, so it’s inevitable that’s going to feature heavily in my tutorials.
I still cover ACF, etc, but moved away from Elementor as my main tool to demonstrate things as I’m pretty fed up with the need for additional plugins to handle a lot of what needs to be done with dynamic content.
While I’ll still cover it, it won’t be my focus as I feel it’s fallen way behind as a serious tool to efficiently built dynamic websites.
@@WPTuts@WPTuts totally understand... I binned elementor off in 2021, too many updates breaking sites... It's all about the blocks for me, (not spectra tho 🤢) I tried bricks a few years ago when it first came out, but just didn't want to invest in another page builder tool when Gut was starting to take traction. But I understand why your vids are taking a bricks-first approach... I'll still follow
@@martinmcshane4487what blocks are you using? Native Core blocks or something like Greenshift or Kadence?