Bento Style Grid In WordPress With Spectra - RIDICULOUSLY EASY IN 2024
Vložit
- čas přidán 25. 07. 2024
- CSS Bento Grid Layout are one of the new web design trends. Try it with zipwp.com
Related Videos To Watch Next 👇
➡️ Spectra Basics: • Spectra Tutorial: The ...
➡️ Spectra Flexbox: • Spectra Flexbox Contro...
----------------------------------------------------------------
Products mentioned in this video 👇
➡️ Most Popular WordPress Theme Astra - wpastra.com/
➡️ Spectra to power your WordPress block editor - wpspectra.com/
➡️ ZipWP to generate WordPress websites using AI - zipwp.com
➡️ Instantly create a temporary testing environment - try.new/
----------------------------------------------------------------
About Brainstorm Force 🔥
We believe creating a website should not be complicated.
We build quality WordPress products and tools that are simple to use, affordable, and reliable to help entrepreneurs, professionals, and bloggers grow online.
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
----------------------------------------------------------------
Are you a WordPress enthusiast who wants to contribute to our team? 📝
We are hiring across multiple positions: brainstormforce.com/join/
----------------------------------------------------------------
📌 Table of Content 📌
00:00 - Bento Style Css In WordPress With Spectra
01:37 - Css Grid vs Flexbox
02:23 - Foundations: Replicate Any Bento Layout
04:33 - Recreating Our Sample Bento Grid
17:42 - Let's Recap
18:16 - Using Our Grid For A Family Tree Project
Well done! Looked at various implementations and Spectra is the best. I also have worked at CSS grid manually outside of Spectra and it can be a humbling experience. Thanks for this tutorial and look for more on this subject
Thank you so much for your comment! Glad you enjoyed the video :)
Its very cool. Thank you.
Glad you like it!
Super cool! Also, the AI family... 😂
And the AI jingle ... probably from Suno. 😂
Thanks! 😁
It's a secret =)
Brilliant! Very good and perfectly explained! Thank you so much. The only thing I noticed is that, in the family tree when you show the tablet and mobile versions, there is a larger space between the two containers. Was it done this way on purpose?
Good point! This can be changed in the Style tab > Spacing options by changing the bottom margin of the upper container, and the top margin of the bottom container :)
thanks for the video and tutorial. I wanted to create a bento style website so timing is perfect. On an other note, I already asked on an older video but seems that I can't find Align Self option in Spectra pro like we have with Elementor... Have I missed something or this option doesn't exist?
Align option is available, please check this documentation: wpspectra.com/docs/advanced-heading/
Really good content! :_)
Thank you so much for your comment!
Could this work with looping pages or queries? Would be great to be able to display blog posts this way with dynamic content.
Thank you for sharing your feedback we will forward it to our team.
This is great but I have two questions…
1) How would you fix that gap on mobile?
2) Can we use ACF Photo field (dynamic data in the containers to display the images?)
Spectra pro should have more woocommerce options.
It's in the works :)
@@BrainstormForce yes, that would be great because that will eliminate the need of using Elementor, especially for making product page templates.