WordPress Gutenberg Site Editing & Block Themes: Build Anything!

Ғылым және технология

Can I build this custom Website in just 30 minutes?
Learn to create a Sticky Header and Navigation, how to order #gutenberg Flexbox Columns, the best way to add fonts to a Block Theme...and more.
Austin Kleon is the New York Times bestselling author of a trilogy of illustrated books about creativity in the digital age: Steal Like An Artist, Show Your Work!, and Keep Going. I love his work, and so I wanted to try to recreate his website austinkleon.com/.
👉 Full Site Editing course www.pootlepress.com/wordpress...
👉 One Day Sites : www.pootlepress.com/our-wordp...
👉 🔥 Instant Websites 🔥 www.pootlepress.com/instant-w...
👉 My WordPress Gutenberg plugins: www.pootlepress.com/wordpress... 🔥
👉 My courses: www.pootlepress.com/our-wordp...
👉 Become a member: clubpootle.com/
👉 Contact me at: jamie@pootlepress.com
👉 Sign up for my newsletter: www.pootlepress.com/sign-up-t...
Timeline
0:00 - Intro
2:30 - Add a new front page template
2:40 - Designing the sticky header and sticky navigation menu
5:30 - Add social icons block to the header
7:25 - The three column page layout
7:50 - Using the Query Loop Block
9:45 - Populating the left and right columns
11:00 - Styling the Columns Block by adding padding
14:10 - Changing fonts in a Block Theme
16:00 - Making the Gutenberg Columns Block responsive
17:00 - CSS for Flexbox using ChatGPT
19:15 - Design Gutenberg Page Templates
20:50 - Cats Cameo

Пікірлер: 138

  • @GrantSpoon
    @GrantSpoon4 күн бұрын

    I learn more from these rebuild videos than anything else. Thanks so much

  • @jamiewp

    @jamiewp

    4 күн бұрын

    Cheers Grant :)

  • @tomcha75
    @tomcha755 ай бұрын

    Thank you for the great walk-through. Tutorials are one thing and great to get an overall idea, but nothing like a real-time build to see all the ins and outs.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thank you 🙏

  • @jdccool
    @jdccool Жыл бұрын

    Dang, Jamie. These rebuild vids are so good. Even when you post a tutorial on a specific component of Gutenberg, I always pick up something (that I thought I knew, but oftentimes, really didn't catch) on your rebuild vids. Thank you, as always.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    thank you - that's really lovely to hear :)

  • @h3h3umm
    @h3h3umm9 ай бұрын

    When I was just beginning I made the mistake of downloading so many plugins to build my site. Few days after it caused my website to break. Since then I been using only Blocks. I feel super accomplished in building from scratch. Wish I found your channel sooner! Subscribed!

  • @jamiewp

    @jamiewp

    9 ай бұрын

    Thanks Andrew , great to have you here 😀

  • @filiuslaurentius
    @filiuslaurentius Жыл бұрын

    A very useful insight into how gutenberg's potential is deeply disruptive. Love the gpt css flex "cheat" and links to supportive plugins to complete the site mimic.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    thank you 😀

  • @gisdeal1365
    @gisdeal1365 Жыл бұрын

    Great video series. The mount of detail is amazing.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @kaysha
    @kaysha4 ай бұрын

    Love these walk thrus. Learning so much and having great ideas

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Awesome! Thank you!

  • @eliramalho1231
    @eliramalho1231 Жыл бұрын

    Thank you so much for sharing all these valious information. I'm a teacher, and many times came to your chanel to help me to teach my young students, I allways ask them to came to learn more with you here. Thanks again!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Fantastic, thank you very much for taking the time to comment

  • @kentek3141
    @kentek3141 Жыл бұрын

    Ken again. I am using WP 6.2 on the 2023 theme. I ran into a big snag attempting to use the featured image from post. No way to size it. So, just changed to an image block and could do everything I needed.

  • @smartreach5326
    @smartreach5326 Жыл бұрын

    Possibly the greatest theme music on youtube! Love it.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏 it’s written by Meg my daughter 🤩

  • @modelsport2858
    @modelsport28582 ай бұрын

    Jamie, I hit the like as requested. This video is ridiculously helpful, especially the ChatGPT section for adding a bit of CSS to modify the center column first in mobile - wow! Thank you, mate, well done.

  • @jamiewp

    @jamiewp

    2 ай бұрын

    That's great to hear - thank you ☺

  • @EricBright250
    @EricBright250 Жыл бұрын

    I am so impressed. Thanks.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thanks Eric 👍

  • @kentek3141
    @kentek3141 Жыл бұрын

    It is the little things.... E.g. There is a difference between adding a Group Block and "Grouping a Row block" I figured it out after the 3rd or 4th visit...

  • @andyswaysland1152
    @andyswaysland11526 ай бұрын

    Another Excellent learning stream thanks.

  • @jamiewp

    @jamiewp

    6 ай бұрын

    Tks Andy

  • @itshazelpan
    @itshazelpan4 ай бұрын

    Thanks for this walkthrough! Makes me feel I can do this too but let's see. 😄

  • @itshazelpan

    @itshazelpan

    4 ай бұрын

    UPDATE: Because of this video, I was finally finished the home page design I wanted for my website! Thanks so much. Please keep making tutorials like this. :)

  • @Deutschlandaudio
    @Deutschlandaudio6 ай бұрын

    Thank you.

  • @jamiewp

    @jamiewp

    6 ай бұрын

    You’re welcome ☺️

  • @GigaArt
    @GigaArt5 ай бұрын

    Thank you so much Jaime!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    You're very welcome!

  • @tobiaslofi
    @tobiaslofi Жыл бұрын

    This was rather great to watch and learn. I am very interested in getting rid of traditional WP Themes and builder plugins and trying block themes.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @visualmodo
    @visualmodo Жыл бұрын

    Very good content!

  • @hijabstaff1074
    @hijabstaff10746 ай бұрын

    wonderful content, learned so much> Thanks

  • @jamiewp

    @jamiewp

    6 ай бұрын

    Great to hear 👍💪

  • @Shopify-WordPress-Developer
    @Shopify-WordPress-Developer5 ай бұрын

    Awesome! Thanks for the tutorial, Jamie. ❤ Was wondering how to add hover effect on navigation menu and on social icons in column 3?

  • @lindaddm5943
    @lindaddm5943 Жыл бұрын

    Respect!Solute!Fantastic Job! all admires...

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @changNoi1337
    @changNoi133710 ай бұрын

    Cool!

  • @jamiewp

    @jamiewp

    10 ай бұрын

    Tks 👍

  • @imbuyersclub9207
    @imbuyersclub9207 Жыл бұрын

    I love your demos! Any chance that you can do one about the best way to create themes with dark and light mode? Plugins needed? Which block theme to start with?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Great idea 💡

  • @PaulShadwell
    @PaulShadwell11 ай бұрын

    I'm going through one of my non-profit sites, replacing Elementor with Gutenberg blocks. It's a steep learning curve but thanks to your videos I'm getting there. Is there a good way to show some menus to only logged in users?

  • @antons6146
    @antons61463 ай бұрын

    Thank you so much for this walk-thru it helped me tremendously to figure out how to use the blocks, one question i still can't figure out is how to add like a about page or a contact page which has different designs then a post page, Would i need to make a contact and about block template and load that into the page, hope my question makes sense.

  • @frederics.1795
    @frederics.1795 Жыл бұрын

    Thx for this video. But the source code delivery is ... I don't find the word ...

  • @ziofonta
    @ziofonta4 ай бұрын

    Nice video! How come I cannot set "padding" for my row block? I don't have those option you show at 6:49

  • @MrBrady95
    @MrBrady954 ай бұрын

    Thanks, I tend to have symptoms of "Guten Intolerance," but this has helped, a bit.

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thanks John 😀

  • @annetteyoutube742
    @annetteyoutube742 Жыл бұрын

    Curious: when shrinking to only one visible column, it appears the two outside columns completely disappear? (I checked out Austin's site using my laptop, and it seems this way.)

  • @teresamurphy2756
    @teresamurphy2756 Жыл бұрын

    It looks like you hard-coded the content of the right-hand column to get the look/design right. But what would you do differently if the author and metadata should be read from the post being referenced?

  • @xlwithusonlinelearningacad2682
    @xlwithusonlinelearningacad2682 Жыл бұрын

    Awesome video Jamie! Thank you! Are you using any special theme or plugin or is everything purely WP (free)?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Just Wordpress 2023 theme and Gutenberg 😀

  • @jnslzr
    @jnslzr Жыл бұрын

    thank you again, what amazes me most is the fact that you start using just the defaults themes WP comes with, not Kadence, no Astra, no GP, lol, any comments on this would be helpful.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    I'm planning a video on just this topic 👍

  • @1Garrett2010
    @1Garrett20109 ай бұрын

    I'm ignorant, but the navigation menu wasn't better to copy it one only time in the header section, avoiding to copy and paste it among different pages?

  • @ViktorChuprin
    @ViktorChuprin Жыл бұрын

    Love your reconstruction videos! I have a question: how can I add more icons to social icons block?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Tks - this plugin will do that wordpress.org/plugins/icon-block/

  • @ViktorChuprin

    @ViktorChuprin

    Жыл бұрын

    @@jamiewp thank you!

  • @roccomarsico
    @roccomarsico Жыл бұрын

    Fantastic video.. learning more and more through your videos.. Just one question: can you show us how to handle the top bar so that in responsive mode (small screen view) the objects in it (logo, navigation and social links) position out properly. Thanks!!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Yup will put a tutorial together :)

  • @roccomarsico

    @roccomarsico

    Жыл бұрын

    Thanks Jamie... another question.. I was following your tutorial and I noticed that some options in your WordPress are not in mine... then I realised that you have ver. 6.2, while I have very. 6.1.1.. I done some googling and saw that ver. 6.2 is in test mode, and not officially released. I am working in local.. should I install ver. 6.2 or wait till it is officially released for instalation?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    @@roccomarsico 6.2 is released end of the month so it somewhat depends when you dev site is going live

  • @roccomarsico

    @roccomarsico

    Жыл бұрын

    @@jamiewp Thanks a lot for your prompt answer.. catching up with all the videos you've already published and looking forward to the new ones.. I was quite ahead with Wordpress a few years ago (as a hobby), but then I abandoned everything.. now I have got the necessity to build a couple of web sites (a profile site for my son Gaetano Marsico, who is an Italian actor, and a site for his rock-metal band Falling Giant) and I found everything changed.. but thanks to your fantastic videos, very clear and detailed, I'm getting into it again.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    @@roccomarsico cool to hear , will check out Gaetano Marsico 👀

  • @dinorossi6611
    @dinorossi6611 Жыл бұрын

    Do you offer a full site build tutorial anywhere ? I'd love to build a news like website looking like single landing page site with this system.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Have you got an example ?

  • @littleshen3547
    @littleshen3547 Жыл бұрын

    How would you realize the Header if the navigation AND the social Icons should float both to the right like in the original page? Is this achiveable by just grouping the navigation and social icons? Or is there a better way?

  • @tubeymoto

    @tubeymoto

    Жыл бұрын

    you will need to make two columns in that case

  • @GarySchiltz
    @GarySchiltz Жыл бұрын

    Very, very cool! I'm within my 30 days of purchasing a license for Elementor Pro, and this convinces me I don't need it for my meager needs. Perhaps I'll use the $$ from my refund to enroll in your class. By the way, what are you using to get that ability in your browser to split it into two horizontal panes?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    that would be great to see you in a class :) Im using the vivaldi browser for the split screen

  • @PreparelikeJoseph
    @PreparelikeJoseph Жыл бұрын

    When you were using full site editing, will the header display while you’re adding a post or page?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Yup

  • @davidson7838
    @davidson7838 Жыл бұрын

    Hi Jamie, can you tell me which plugin is best to use for image effects on gutenberg. I have seen you have used a plugin but I am not able to remember it or the video you showed the plugin? Thank you.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Hi, what kinds of image effects are you looking for?

  • @davidson7838

    @davidson7838

    Жыл бұрын

    @Jamie Marsland Thanks Jamie, I am searching for a plugin that can add interaction/animation to to images while scrolling and on mouse over etc... I saw you while using a Gutenberg plugin in one of your videos.

  • @davidson7838

    @davidson7838

    Жыл бұрын

    I also need to know transparent/sticky menu techniques for Gutenberg header like Spectra One theme, but for other themes.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    @@davidson7838 this video shows how to create the sticky header - you just need to make it transparent in the colour picker

  • @justqtip
    @justqtip Жыл бұрын

    I can’t find the sticky option for the row block. Is there a plugin to get this functionality?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    You need to put it in a group block - the sticky position can then be set on the group

  • @michieltieleman9462

    @michieltieleman9462

    Жыл бұрын

    It's in WordPress 6.2, which is not out yet. There is a block plug-in that does the same called "sticky block". But WordPress 6.2 will be out soon and then you wouldn't need the plug-in anymore.

  • @monkeysgone2heaven1
    @monkeysgone2heaven111 ай бұрын

    Hi, off topic but....what browser are you using?

  • @jamiewp

    @jamiewp

    11 ай бұрын

    I use Vivaldi because it has a cool split screen option - great for these videos

  • @kentek3141
    @kentek3141 Жыл бұрын

    Well, this is a great find. But, I am on the bleeding edge using WP 6.2 beta 4 and found a bug. Site Logo block letting me search for my logo. As I have lots of time to complete this, waiting for actual 6.2 release. Comment on production: Volume a bit soft | Lovely if you made text a bit larger. Suggest you test view on someone else's computer. Hard to see the block names.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    tks for the feedback :)

  • @JasonValasek37
    @JasonValasek37 Жыл бұрын

    I’m relatively new building websites with Wordpress. Should I be using basic, WordPress, Elementor, or Gutenberg?

  • @jamiewp

    @jamiewp

    11 ай бұрын

    imo it's always best to learn what's in core wordpress first (e.g gutenberg). From there you'll have the knowledge to know what's possible with wordpress and also whether you need to use a pagebuilder. But learn core first is my advice.

  • @user-pf7xy8nz3t
    @user-pf7xy8nz3t4 ай бұрын

    Awesome! I've learned a lot. Thank you. I do have a question. I'm a little confused. In another video you say that you should never put content in a page template. You just put a content block there. (front page) You place the rest in a regular page that uses front-page as a template. Or am I not seeing it right?

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Yes you are right, ideally don't put regular content into page templates. The front page is one of the places where it's ok to bend that rule ;)

  • @user-pf7xy8nz3t

    @user-pf7xy8nz3t

    4 ай бұрын

    @@jamiewp Thank you! Finally got up the courage to start using Gutenberg. I always fell back on the classic editor. In the beginning you are in your underwear for a while. After 2 days I start to feel comfortable and see the benefits. Also using twenty twenty four template. The building blocks of this template are great. You are at the top of my subscribed channel list.

  • @jamiewp

    @jamiewp

    4 ай бұрын

    @@user-pf7xy8nz3t thank you - there is a learning curve, but it's worth sticking with it

  • @PaweK-do3zo
    @PaweK-do3zo Жыл бұрын

    I have one problem with gutenberg. How to make a nicer menu. All menus made in gutenberg look the same. This also applies to the mobile version of the menu. In elementor it is possible to create a completely separate mobile menu. And gutenberg does not allow more flexible editing of the menu and mobile menu. I need more flexibility. Is it possible to do something about it?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Great questions 👍 I'm actually interviewing Rich Tabor today (automattic product manager and working on gutenberg) and will ask him your question 😀

  • @Traderhood
    @Traderhood Жыл бұрын

    Did you say which template are you starting with?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    the 2023 default wordpress theme

  • @brianhardaway5469
    @brianhardaway54692 ай бұрын

    'Manage Theme Fonts' does not appear with 'Create Block Theme' in WordPress 6.5.3. Where can I find 'Manage Theme Fonts'?

  • @jamiewp

    @jamiewp

    2 ай бұрын

    They are now in core WordPress 👍 So you don't need a plugin anymore. You'll find them in global styles by typography.

  • @russaraujo9533
    @russaraujo9533 Жыл бұрын

    To make the sticky menu stick, you have to put the Group (with Row and Navigation) directly on the Front Page page, not on a Header Template.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Yup 👍

  • @WineGiftBoxMaker
    @WineGiftBoxMaker Жыл бұрын

    More useful is how to delete the content/structure of a older scrap WP site, and start with basic skeleton using Theme 2023 and Gutenberg blocks - all free stuff. The exact match to other site is interesting, but better done in a 2nd video . IMO

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Do you mean how to move from a classic theme to a block theme?

  • @dreamweapons
    @dreamweapons5 ай бұрын

    What is the editor you're using?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Gutenberg (WordPress)

  • @dreamweapons

    @dreamweapons

    5 ай бұрын

    I'm new to wordpress and web design, and sorta confused by the terminology. I guess I meant which block editor?@@jamiewp

  • @brightonmusic
    @brightonmusic Жыл бұрын

    What theme are you using?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    The 2023 default Wordpress theme

  • @brightonmusic

    @brightonmusic

    Жыл бұрын

    @@jamiewpThank you! Looking to build website without page builders and default WP theme.

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq11 ай бұрын

    Is GeneratePress a block theme

  • @jamiewp

    @jamiewp

    11 ай бұрын

    Nope

  • @uzimatele
    @uzimatele Жыл бұрын

    Your teaching skills are exceptional. I truly appreciate the quality of your sessions, and I was genuinely interested in booking one with you. However, upon reviewing the pricing, I realized that it exceeds my current financial capacity. I believe it would be beneficial if you could consider incorporating Purchase Power Parity, especially for individuals like me residing in developing nations. Please understand that my inability to afford your sessions does not diminish their value in any way; they are undoubtedly worth the price.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you and that’s a great idea - is there any particular course you were loookg at ?

  • @uzimatele

    @uzimatele

    Жыл бұрын

    @@jamiewp Yes, here it is: Mastering Site Editing and WordPress Block Themes course

  • @jamiewp

    @jamiewp

    Жыл бұрын

    @@uzimatele 👍

  • @StartThenProfitINC
    @StartThenProfitINC Жыл бұрын

    Why don't i see position sticky option?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    You'll only see it on the group block - also for now you'll need to also use the gutenberg plugin - sticky position is being rolled out in wordpress 6.2 which is released in a few weeks

  • @StartThenProfitINC

    @StartThenProfitINC

    Жыл бұрын

    @@jamiewp thanks figured that out. I built the site pretty good but mobile was pretty bad. Lot to learn

  • @jamiewp

    @jamiewp

    Жыл бұрын

    @@StartThenProfitINC what was bad on mobile (i'm interviewing rich tabor about mobile and gutenberg next week, so will add your problems)

  • @StartThenProfitINC

    @StartThenProfitINC

    Жыл бұрын

    @@jamiewp to much padding all 3 sections. Some reason image logo didn't show. Might have had to do with adding the left and right padding. Images didn't scale probably because of the padding. For day one. I did pretty good. Think I'll actually be able to build decent pages soon

  • @fabiangetti
    @fabiangetti Жыл бұрын

    very good work..........but honestly your mouth is very dry .......some beers or w... last night. Jamie is very good work. Honestly more of those videos would make you to the king of wordpress.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    haha - yes you might be right ;) tks for watching

  • @WineGiftBoxMaker
    @WineGiftBoxMaker Жыл бұрын

    This is NOT your best teachable video - it's a race against a clock. You win the award. I don't learn much except where the YT slow motion button is....

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Sorry to hear that - however i'm running a hands-on course which might be a better fit for you www.pootlepress.com/wordpress-full-site-editing-course/ (a couple of spaces left)

  • @annetteyoutube742

    @annetteyoutube742

    Жыл бұрын

    Yes, I slow down the playback speed (which I've used for other KZreadrs, especially when I'm taking notes).

  • @VictoriaAlfredSmythe
    @VictoriaAlfredSmythe4 ай бұрын

    nix load intro please. woke baby

  • @jamiewp

    @jamiewp

    4 ай бұрын

    ?

  • @michieltieleman9462
    @michieltieleman9462 Жыл бұрын

    To b honest, while the other intros (time for block news, block of the week) are nice, this one is rather annoying. Screamy, pushy and the volume goes from low to high. Had to adjust the volume on the video twice just for the intro. Perhaps a couple of tweaks at least for the volume?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Noted 👍

  • @Slurkz
    @Slurkz Жыл бұрын

    The devil's in the details, and I'm sorry - but the details are just not cutting it.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Detail ? 😉

Келесі