WordPress Gutenberg Site Editing & Block Themes: Build Anything!

Рет қаралды 26,183

Күн бұрын

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 9 күн бұрын

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

@jamiewp 9 күн бұрын

Cheers Grant :)

@tomcha75 5 ай бұрын

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 5 ай бұрын

Thank you 🙏

@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 Жыл бұрын

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

@kaysha 4 ай бұрын

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

@jamiewp 4 ай бұрын

Awesome! Thank you!

@h3h3umm 9 ай бұрын

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 9 ай бұрын

Thanks Andrew , great to have you here 😀

@gisdeal1365 Жыл бұрын

Great video series. The mount of detail is amazing.

@jamiewp Жыл бұрын

Thank you 🙏

@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 Жыл бұрын

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

@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 Жыл бұрын

thank you 😀

@smartreach5326 Жыл бұрын

Possibly the greatest theme music on youtube! Love it.

@jamiewp Жыл бұрын

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

@modelsport2858 2 ай бұрын

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 2 ай бұрын

That's great to hear - thank you ☺

@EricBright250 Жыл бұрын

I am so impressed. Thanks.

@jamiewp Жыл бұрын

Thanks Eric 👍

@andyswaysland1152 6 ай бұрын

Another Excellent learning stream thanks.

@jamiewp 6 ай бұрын

Tks Andy

@itshazelpan 4 ай бұрын

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

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

@visualmodo Жыл бұрын

Very good content!

@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...

@GigaArt 5 ай бұрын

Thank you so much Jaime!

@jamiewp 5 ай бұрын

You're very welcome!

@hijabstaff1074 6 ай бұрын

wonderful content, learned so much> Thanks

@jamiewp 6 ай бұрын

Great to hear 👍💪

@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.

@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 Жыл бұрын

Thank you 🙏

@lindaddm5943 Жыл бұрын

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

@jamiewp Жыл бұрын

Thank you 🙏

@Deutschlandaudio 6 ай бұрын

Thank you.

@jamiewp 6 ай бұрын

You’re welcome ☺️

@MrBrady95 4 ай бұрын

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

@jamiewp 4 ай бұрын

Thanks John 😀

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

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

@changNoi1337 10 ай бұрын

Cool!

@jamiewp 10 ай бұрын

Tks 👍

@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 Жыл бұрын

I'm planning a video on just this topic 👍

@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 Жыл бұрын

Great idea 💡

@xlwithusonlinelearningacad2682 Жыл бұрын

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

@jamiewp Жыл бұрын

Just Wordpress 2023 theme and Gutenberg 😀

@antons6146 3 ай бұрын

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 Жыл бұрын

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

@PaulShadwell 11 ай бұрын

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?

@ViktorChuprin Жыл бұрын

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

@jamiewp Жыл бұрын

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

@ViktorChuprin Жыл бұрын

@@jamiewp thank you!

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

@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 Жыл бұрын

Yup will put a tutorial together :)

@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 Жыл бұрын

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

@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 Жыл бұрын

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

@ziofonta 4 ай бұрын

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

@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.)

@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 Жыл бұрын

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

@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 Жыл бұрын

Yup 👍

@1Garrett2010 10 ай бұрын

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?

@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 Жыл бұрын

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

@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 Жыл бұрын

Have you got an example ?

@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 Жыл бұрын

you will need to make two columns in that case

@PreparelikeJoseph Жыл бұрын

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

@jamiewp Жыл бұрын

Yup

@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 Жыл бұрын

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

@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 Жыл бұрын

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

@jamiewp Жыл бұрын

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

@user-pf7xy8nz3t 5 ай бұрын

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 5 ай бұрын

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 5 ай бұрын

@@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 5 ай бұрын

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

@justqtip Жыл бұрын

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

@jamiewp Жыл бұрын

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

@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.

@JasonValasek37 Жыл бұрын

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

@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.

@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 Жыл бұрын

tks for the feedback :)

@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 Жыл бұрын

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

@uzimatele Жыл бұрын

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

@jamiewp Жыл бұрын

@@uzimatele 👍

@Traderhood Жыл бұрын

Did you say which template are you starting with?

@jamiewp Жыл бұрын

the 2023 default wordpress theme

@monkeysgone2heaven1 11 ай бұрын

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

@jamiewp 11 ай бұрын

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

@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 Жыл бұрын

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

@dreamweapons 5 ай бұрын

What is the editor you're using?

@jamiewp 5 ай бұрын

Gutenberg (WordPress)

@dreamweapons 5 ай бұрын

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

@brianhardaway5469 2 ай бұрын

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

@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.

@brightonmusic Жыл бұрын

What theme are you using?

@jamiewp Жыл бұрын

The 2023 default Wordpress theme

@brightonmusic Жыл бұрын

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

@HaifengZhu-pn3uq 11 ай бұрын

Is GeneratePress a block theme

@jamiewp 11 ай бұрын

Nope

@StartThenProfitINC Жыл бұрын

Why don't i see position sticky option?

@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 Жыл бұрын

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

@jamiewp Жыл бұрын

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

@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

@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 Жыл бұрын

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 Жыл бұрын

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

@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 Жыл бұрын

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

@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 Жыл бұрын

Noted 👍