Bento Style Grid In WordPress With Spectra - RIDICULOUSLY EASY IN 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

Пікірлер: 22

  • @goatcheeta
    @goatcheeta2 ай бұрын

    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

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Thank you so much for your comment! Glad you enjoyed the video :)

  • @atishmandlik9356
    @atishmandlik93562 ай бұрын

    Its very cool. Thank you.

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Glad you like it!

  • @annascovel1978
    @annascovel19782 ай бұрын

    Super cool! Also, the AI family... 😂

  • @writeafterthis

    @writeafterthis

    2 ай бұрын

    And the AI jingle ... probably from Suno. 😂

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Thanks! 😁

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    It's a secret =)

  • @kberwager
    @kberwager2 ай бұрын

    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?)

  • @miguelparraudcordeyro
    @miguelparraudcordeyro2 ай бұрын

    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?

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    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 :)

  • @TheAbabackar
    @TheAbabackar2 ай бұрын

    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?

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Align option is available, please check this documentation: wpspectra.com/docs/advanced-heading/

  • @GrahamPhillips1985
    @GrahamPhillips19852 ай бұрын

    Could this work with looping pages or queries? Would be great to be able to display blog posts this way with dynamic content.

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Thank you for sharing your feedback we will forward it to our team.

  • @visualmodo
    @visualmodo2 ай бұрын

    Really good content! :_)

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    Thank you so much for your comment!

  • @rahulbhalla6230
    @rahulbhalla62302 ай бұрын

    Spectra pro should have more woocommerce options.

  • @BrainstormForce

    @BrainstormForce

    2 ай бұрын

    It's in the works :)

  • @rahulbhalla6230

    @rahulbhalla6230

    2 ай бұрын

    @@BrainstormForce yes, that would be great because that will eliminate the need of using Elementor, especially for making product page templates.