[MUST WATCH] How To Make Any Page Layout Using The WordPress Block Builder Gutenberg

Sdílet
Vložit
  • čas přidán 5. 07. 2024
  • In this tutorial, you will learn how to make any page layout using the WordPress block builder Gutenberg.
    If you are coming from any other page builder such as Elementor, Beaver Builder, Divi, etc, this is a must-watch video.
    In the video, I said that I would post a link to a video on globally setting the page settings. Here is that video • How To Set Page Settin...
    Table Of Contents
    00:00:00 Build Pages With Gutenberg
    00:01:00 The 3C's Of All Page Building
    00:03:07 How The 3C's Work In Page Builders
    00:05:26 Your Big Stumbling Block
    00:06:43 Block Builder Interface
    00:07:08 Setting Up Your Page Settings
    00:08:07 Adding The 3C's To Block Builder
    00:08:39 Setup Kadence Blocks Defaults
    00:11:28 Optional Block Navigator
    00:12:28 Using The 3C's In Gutenberg
    00:19:36 Solving Your Big Stumbling Block
    00:21:45 Final thoughts
    Not a Kadence Pro member yet? Visit kadence-theme.com
    Kadence Theme is a free WordPress theme that holds no feature back. Try it today.
    -------------------------
    Hi, my name is Adam and I am the voice behind this video. Most people know me from my CZcams channel, WPCrafter. I make these videos as a fan of the Kadence suite of products and I am kinda decent at making videos. While I am not paid to make these videos, Kadence instead makes a donation to my favorite dog charity dannyronsrescue.org
  • Jak na to + styl

Komentáře • 211

  • @overcomersforJesus
    @overcomersforJesus Před 2 měsíci +2

    I'm busy designing layouts using blocks. I'm a newbie. I came back to watch this video 2nd time - that's how good, clear, concise the presenter is. Thank you for removing the site building cobwebs off my eyes! Bravo 👏 🎉

  • @WallyCooksEverything
    @WallyCooksEverything Před 2 lety +8

    Learned so much about Gutenberg in this 23 minute video than other videos that go on for an hour.

  • @tomcha75
    @tomcha75 Před 2 lety +7

    By far, the best simplified explanation of how the block builder works. Finally understand why I could never get it to look the way I wanted like in Elementor. Thanks very much!

  • @patentforecast4458
    @patentforecast4458 Před 3 lety +4

    That Block Navigation plugin is a life/game changer! It was so easy to get lost in Gutenberg's hierarchy. Thanks a bunch!

    • @KadenceWP
      @KadenceWP  Před 3 lety +3

      Yes, will be nice is WordPress adds something similar by default.

  • @MatthewFurman
    @MatthewFurman Před 3 lety +1

    Great example why Adam is the best in the business- clear, concise, cutting edge tutorial.

  • @st.marecki
    @st.marecki Před 3 lety +1

    Rewelacyjny poradnik! Dziękuję!

  • @adhlannazeemudeen7567
    @adhlannazeemudeen7567 Před 3 lety +7

    Thank you Adam, this was a paradigm shift we needed to hear

  • @Statch011
    @Statch011 Před 3 lety

    This was extremely helpful! Thank you.

  • @rickjaggers
    @rickjaggers Před 3 lety +4

    Kudos! Well thought out, well presented, in a single phrase: WELL DONE!!

  • @CarbonCurious
    @CarbonCurious Před 3 lety +1

    Nice job, Adam! I sort of knew most of this but you really helped clarify things and your tips about initial setup with the default settings were super helpful for me. Thanks!!

  • @kerawelt2008
    @kerawelt2008 Před 3 lety +1

    Many thanks Adam! This mapping of and Elementor structures to Gutenberg's is very instructive.

  • @rmcellig
    @rmcellig Před 3 lety +1

    Thanks so much! You really made it crystal clear for me! Now I feel more comfortable after you discussed the 3 C's.🙂

  • @AnimeEmpress1
    @AnimeEmpress1 Před 2 lety

    Wow this was crystal clear thanks for posting!

  • @edgarmata9554
    @edgarmata9554 Před 2 lety

    The best tutorial! Just what I was looking for, excellent

  • @AmelZubeidy
    @AmelZubeidy Před 3 lety +1

    Thanks a lot! this tuto was very helpful and informative.

  • @garyprice464
    @garyprice464 Před 3 lety +2

    Absolutely brilliant thank you, I want to build a site from scratch and this helped immensely

  • @MrJohnNewell
    @MrJohnNewell Před 2 lety +1

    I wish I had seen this before I started 👍

  • @syregn
    @syregn Před 2 lety

    Thank you so much for your crystal clear tutorial - very helpful

  • @ankitind
    @ankitind Před 3 lety

    Beautifully explained. Just beautiful. Not only I learned, I enjoyed.

  • @mishka4810
    @mishka4810 Před rokem

    This is incredibly clear and helpful, thank you!

  • @bastiansuivera8975
    @bastiansuivera8975 Před 2 lety

    VERY WELL EXPLAINED! I REALLY NEEDED THIS EXPLANATION, THANK YOU!

  • @fraidoonhu9284
    @fraidoonhu9284 Před 3 lety +3

    Wow I loved the 3Cs.

  • @maxziebell4013
    @maxziebell4013 Před 3 lety +9

    Thank you, Adam, for pushing Gutenberg. You're certainly making a great case for its potential.

  • @petesoderman4870
    @petesoderman4870 Před 3 lety

    Blew me away. I've been trying to understand these simple concepts for a week, this finally made it clear.

  • @shreeraghava5650
    @shreeraghava5650 Před 2 lety

    This is the best video on the topic ... extremely well explained. Thanks!

  • @keithhunt7175
    @keithhunt7175 Před 3 lety +1

    Great video, Adam. I've been leaning towards using Gutenberg and block plugins for my next website. Trying to keep it lean and avoid issues later on when things update. Excited to try this out tomorrow. Thanks.

  • @TheJRockett
    @TheJRockett Před 2 lety +1

    Adam, I feel quite blessed for your awesome clarity and well-structured instructions. I also feel I can now create my vision on my new site.

  • @DianeTuroczy
    @DianeTuroczy Před 2 lety

    You have a gift for teaching. Thank you. Very helpful 👌

  • @MsPurplification
    @MsPurplification Před 2 lety +1

    Thanks a lot for this video. I was so damn confused with page builders and blocks before I watched this video. Your explanation about the 3Cs help so much.

  • @mikeh2b
    @mikeh2b Před 3 lety +5

    I think with this simple explanation of managing the rows and the columns, I could improve my skills with Kadence blocks! Nice job as always Adam.

  • @jimjuris
    @jimjuris Před 3 lety +1

    Thank you Adam for this fantastic tutorial. I learned a lot.

  • @drjimbarnes
    @drjimbarnes Před 3 lety +7

    Great clarification, Adam. I've used a similar setup with difficulty but I'm sure the Block Navigator will make things much easier. 3Cs is a beautiful concept. And thanks to you, we all have it now.

  • @JohnMarra
    @JohnMarra Před 3 lety

    Once again thank you for this explanation.

  • @GustavoOcampoBecerra
    @GustavoOcampoBecerra Před 3 lety

    Brother you're AWESOME! THANK YOU!

  • @MoeMuise
    @MoeMuise Před rokem +1

    Brilliant. Explaining page-building via the 3 Cs concept is a great idea and really makes the lesson stick.

  • @cyndihupperts4161
    @cyndihupperts4161 Před 2 lety

    thank you! this has been so very helpful!

  • @jwahl38
    @jwahl38 Před 3 lety

    New to Wordpress and looked around on CZcams and this is a great start learning use Gutenberg in an easy way. Will stay on to this channel.

  • @kuntujackson
    @kuntujackson Před 4 měsíci

    Wow! You make it a piece of cake. Bravo!

  • @John_1033
    @John_1033 Před 2 lety

    Excellent instructor. Very informative video. Thank you.

  • @Adrian_
    @Adrian_ Před 2 lety

    This video is incredibly valuable, thank you so much!

  • @jdccool
    @jdccool Před 2 lety

    Thanks, Adam. Very helpful.

  • @RHCPTABOO
    @RHCPTABOO Před 2 lety

    wow Adam, my man! that was just so simply to understand, you just lighted up my brain with the 3 c's thing and literally i could finish my main page in no time. Thank you so much Sir Adam

  • @MagnaMoRo
    @MagnaMoRo Před 3 lety +1

    Very valuable. I don’t have to pay for Elementor subscriptions, but still get so much more.

  • @hiarvingarcia
    @hiarvingarcia Před 3 lety

    Very smart presentation. Thank you.

  • @fivezerodigital.com_musicw201

    Thank you! This is so helpful!

  • @drjimbarnes
    @drjimbarnes Před 3 lety

    Great, simple, clear explanation, Adam, as always. I need this as Elementor is getting very commercial and Google likes searching simple code.

  • @HMaxTube11
    @HMaxTube11 Před 3 lety

    Subscribed based on this brilliantly explained breakdown alone. Sorry I didn’t find you much sooner.👏👏👏👏👏 Also, tips in prefs/drop down menus are great help

  • @misterheri4389
    @misterheri4389 Před 3 lety +1

    Thank you so much for your hard effort. "You literally can build anything that you can see on the internet because they follow the same exact structure. You can do all in the block builder and after a short period of time you will become a pro."

  • @pauls1883
    @pauls1883 Před 2 měsíci

    Well done, Adam 🎉
    The “3 C’s” concept clears up a LOT of the struggle beginners have with Gutenberg (especially those coming from a page builder background).

  • @gads_guy
    @gads_guy Před 2 lety

    A must watch for a beginner. Thx🙂🙂🙂

  • @sharynlindsay7069
    @sharynlindsay7069 Před 3 lety +5

    This is the most simply explained video I’ve watched! I am definitely not tech savvy, and am having a tough time setting up my food blog. Now that I have a better understanding of what’s what I feel confident I can now create cohesive pages for my blog. Thank you!!!

  • @malkablowy2106
    @malkablowy2106 Před 2 lety

    you are a great teacher!!!

  • @TheJazzdevotee
    @TheJazzdevotee Před 3 lety +2

    This is a great video. Very helpful. I use Kadence blocks pro and I have been very happy but this video will allow me to take my site to the next level.

    • @KadenceWP
      @KadenceWP  Před 3 lety +3

      Glad it was helpful! There is more to come on this topic to make it make even more sense.

  • @danimordecai7611
    @danimordecai7611 Před 3 lety +1

    Boom Adam, you've save my sanity with this vid; I've just found it today. I did I sent you a msg on another vid seeking guidance for padding around rows and how in kadence the demo homepage for some strange reason - merging top nav and primary nv bar into each other (sigh). Anyways, thank you for these wonderful tips and that superb plug in navigation tool. I think I've had a quick win perhaps even a breakthrough today. Cheers again

  • @zero2webmaster
    @zero2webmaster Před 2 lety +1

    Great video, thank you!

  • @panduancalonabdinegara
    @panduancalonabdinegara Před 3 lety +1

    This is a very great video and very helpful. Thank's Adam

  • @seonewport363
    @seonewport363 Před 3 lety

    very nice smooth explanation

  • @AshishSingh-mn5fq
    @AshishSingh-mn5fq Před 3 lety

    This one video will save tons of time for those who understood this. Must watch...!

  • @ericj810
    @ericj810 Před 2 lety

    Might give this a try. Once learned should be really easy.

  • @stephenm3874
    @stephenm3874 Před 3 lety +6

    One of your best and most important presentations. Once you explained it, it was there in plain site (pun intended) all the time.

  • @user-cx2uj1td1b
    @user-cx2uj1td1b Před 3 lety

    I couldn't understand how to create contemporary full-width pages like a homepage with Gutenberg only. This tutorial is so amazing that I'll change my Astra to Kadence immediately! Wow 🔥

  • @ramchillarege1658
    @ramchillarege1658 Před 6 měsíci

    Excellent tutorial. Thanks

  • @sherryelebeauty
    @sherryelebeauty Před 2 lety

    Thank you for this amazing video

  • @shingyt1
    @shingyt1 Před 3 lety

    Wow, after trying to self-educate searching high and low, glad to bum up with this tutorial - guess this is the most important basic structure to website building, wonder how come no "guru" start teaching with this first. Now I can have a good start. Thanks !

  • @benjaminquek1093
    @benjaminquek1093 Před 3 lety +1

    Wow, this is such important info.I've watched hundreds of videos to learn but no-one has ever described this! Thank you very much. I was about to quit Gutenberg as I could not even move a picture to the right. You taught it very well, thank you

  • @lightningxiv-eb9rv
    @lightningxiv-eb9rv Před 11 měsíci

    3C , wow -- that is easy to understand.

  • @iTellYouWhatSon
    @iTellYouWhatSon Před 2 lety

    This is GOLD!

  • @yasminursini6815
    @yasminursini6815 Před 11 měsíci

    Excelllent content! Thank tou!

  • @Joni-ij4ep
    @Joni-ij4ep Před 5 měsíci

    BEST tutorial EVER !!!!

  • @dominikj.h.4590
    @dominikj.h.4590 Před 3 lety

    Man! this is brilliant.

  • @ipixel777
    @ipixel777 Před 3 lety +2

    I learned sooooooooo much!!!!

  • @stevechong65
    @stevechong65 Před rokem

    Just fantastic! The best 23.08 mins I have ever spent on learning Wordpress! Thank you!

    • @KadenceWP
      @KadenceWP  Před rokem

      Glad it was helpful!

    • @stevechong65
      @stevechong65 Před rokem

      @@KadenceWP Its lucid Adam! I understand the concept now! Just fantastic! There is a saying, "a wise man is someone who can explain complicated matters in a simple way."

  • @Neut
    @Neut Před 3 lety

    Thanks for this!

  • @nardis4140
    @nardis4140 Před 3 lety

    Finally, a way to build and style a wp site using rows, just like it's so easy to do in Bootstrap. There is hope for wordpress.

  • @humanskill
    @humanskill Před 9 měsíci

    Adam, this is the best explanation of the Gutenberg block builder that I have seen. Thank you! I had been a little intimidated by Gutenberg, but now I have the tools to take advantage of it.

    • @KadenceWP
      @KadenceWP  Před 9 měsíci

      We're so glad that it was helpful.

  • @josecalcagni8472
    @josecalcagni8472 Před 2 lety

    👉👉👉 Muchas gracias, muy buena información, muy clara y bien explicada. 😃👌👍
    Saludos desde Santiago de Chile.

  • @inosifs9291
    @inosifs9291 Před 3 lety

    I was struggling to understand for a long time, the conventional design or structure of block posts and pages.
    I thank you very much for clarify that academically simple description the processes of the blocks and pages.

  • @1421hp
    @1421hp Před 3 lety +1

    Excelente, gracias.

  • @TraciStyner
    @TraciStyner Před 3 lety +1

    I've been using the block builder and Kadence blocks for several months, and am moving away from Elementor on many sites. This is a great explanation, and I learned a couple things. Thanks!

  • @alantuttphotography
    @alantuttphotography Před 3 lety +1

    When Gutenberg came out, I stuck with the Classic editor because the new format was so alien to me. This helps me understand it a lot more, and I think I'm ready to give it a shot.

  • @dreamhridoy
    @dreamhridoy Před 3 lety

    Very Helpful

  • @tangotribu
    @tangotribu Před 3 lety

    Thank you, man! Now I don't hate Gutenberg!

  • @scootydub
    @scootydub Před 3 lety +8

    Wow. This was absolutely fabulous. I've been struggling to figure out how to properly maneuver the blocks and this is by far the best explanation I've seen. Thank you for sharing!

    • @tuckerlangston8528
      @tuckerlangston8528 Před 2 lety

      you probably dont care at all but does any of you know of a way to log back into an Instagram account??
      I stupidly lost my password. I would appreciate any help you can give me.

    • @tuckerlangston8528
      @tuckerlangston8528 Před 2 lety

      @Antonio Demetrius it did the trick and I now got access to my account again. I'm so happy!
      Thank you so much, you saved my account!

    • @antoniodemetrius8863
      @antoniodemetrius8863 Před 2 lety

      @Tucker Langston glad I could help :)

  • @ReddecalsMotovlog
    @ReddecalsMotovlog Před 3 lety

    very helpful, 3C Structure...

  • @BobSmith-mh1ow
    @BobSmith-mh1ow Před 3 lety +4

    Thanks Adam, this was very helpful and informative. I was tending to use Elementor with Kadence Pro but gained better insight of how to use Gutenburg blocks after watching this video.

  • @shaolin60
    @shaolin60 Před 2 lety

    After this video, I fell in love with Gutenberg

  • @saadazhar1192
    @saadazhar1192 Před 11 měsíci

    Awesome. 👍👍

  • @jnslzr
    @jnslzr Před rokem

    Thanks for sharing! CCC

  • @sakthi22b.e
    @sakthi22b.e Před 3 lety

    Great Video

  • @damonmcgill8963
    @damonmcgill8963 Před rokem

    Great video

  • @juicygrapes1445
    @juicygrapes1445 Před 8 měsíci

    Good! Thanks!

  • @brightonmusic
    @brightonmusic Před 3 lety

    Thank you Adam! I wish you would make a similar video using DIVI.

  • @KaiBuskirk
    @KaiBuskirk Před 3 lety

    awesome!!

  • @KuroManX
    @KuroManX Před rokem

    So row is pratically a div, we can stack components inside a row. Pretty good explanation, I was totally lost when first started with WordPress, and those templates hell is not good for a beginner, also I don't like to relly on paid tools, I preffer to learn the fundamentals and be free to use it as my please.
    Best tutorial ever, now I understand why people don't like Gutenberg, you need to crack your head in the beginning.

    • @KadenceWP
      @KadenceWP  Před rokem +1

      Glad you got something from the video! Working with Gutenberg is getting easier and easier as it matures, and with tools like Kadence Blocks (and especially so with the upcoming 3.0 release) makes it a whole new world. Thanks for watching Rafael.

  • @makemoneyjourney7864
    @makemoneyjourney7864 Před 2 lety

    WONDERFUL YOU ARE

  • @YannickBurky
    @YannickBurky Před 3 lety

    You are a genius

  • @pandaosa9
    @pandaosa9 Před 3 lety +1

    That explains so much!! I tried making something with Gutenberg, but didn't realize I needed to create the row first. Very cool to understand it now! Thank you.

  • @chadtarheel
    @chadtarheel Před 3 lety

    Thanks Adam 👍🏻

  • @KatieGoesPlatinum
    @KatieGoesPlatinum Před 3 lety +1

    Thank you - this helps so much! I want to get Elementor off my site as it can slow things down. I'm planning on re-doing all my pages with kadence blocks but I was totally lost. This helps!

    • @KadenceWP
      @KadenceWP  Před 3 lety +1

      So happy to hear this helped.

  • @LucasAmestoy
    @LucasAmestoy Před 2 měsíci

    ¡Espectacular!