WordPress Gutenberg Site Editing & Block Themes: Build Anything!
Vložit
- čas přidán 10. 07. 2024
- 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 - Věda a technologie
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.
thank you - that's really lovely to hear :)
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.
Thank you 🙏
WOW. I've been trying to find good wordpress blocks videos to learn this stuff but this is the best by far.
thank you
Possibly the greatest theme music on youtube! Love it.
Thank you 🙏 it’s written by Meg my daughter 🤩
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.
thank you 😀
Great video series. The mount of detail is amazing.
Thank you 🙏
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!
Thanks Andrew , great to have you here 😀
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.
That's great to hear - thank you ☺
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!
Fantastic, thank you very much for taking the time to comment
Love these walk thrus. Learning so much and having great ideas
Awesome! Thank you!
I am so impressed. Thanks.
Thanks Eric 👍
Another Excellent learning stream thanks.
Tks Andy
Thank you so much Jaime!
You're very welcome!
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.
Thank you 🙏
Thanks for this walkthrough! Makes me feel I can do this too but let's see. 😄
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. :)
Very good content!
Respect！Solute！Fantastic Job! all admires...
Thank you 🙏
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.
Cool!
Tks 👍
Thank you.
You’re welcome ☺️
wonderful content, learned so much>
Thanks
Great to hear 👍💪
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...
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?
Great idea 💡
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?
Awesome video Jamie! Thank you! Are you using any special theme or plugin or is everything purely WP (free)?
Just Wordpress 2023 theme and Gutenberg 😀
Thanks, I tend to have symptoms of "Guten Intolerance," but this has helped, a bit.
Thanks John 😀
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.)
Awesome! Thanks for the tutorial, Jamie. ❤ Was wondering how to add hover effect on navigation menu and on social icons in column 3?
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?
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.
Thx for this video. But the source code delivery is ... I don't find the word ...
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.
I'm planning a video on just this topic 👍
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?
you will need to make two columns in that case
Love your reconstruction videos!
I have a question: how can I add more icons to social icons block?
Tks - this plugin will do that wordpress.org/plugins/icon-block/
@@jamiewp thank you!
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.
Hi, what kinds of image effects are you looking for?
@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.
I also need to know transparent/sticky menu techniques for Gutenberg header like Spectra One theme, but for other themes.
@@davidson7838 this video shows how to create the sticky header - you just need to make it transparent in the colour picker
Nice video! How come I cannot set "padding" for my row block? I don't have those option you show at 6:49
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!!
Yup will put a tutorial together :)
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?
@@roccomarsico 6.2 is released end of the month so it somewhat depends when you dev site is going live
@@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.
@@roccomarsico cool to hear , will check out Gaetano Marsico 👀
When you were using full site editing, will the header display while you’re adding a post or page?
Yup
I’m relatively new building websites with Wordpress. Should I be using basic, WordPress, Elementor, or Gutenberg?
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.
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?
that would be great to see you in a class :) Im using the vivaldi browser for the split screen
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?
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 ;)
@@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.
@@user-pf7xy8nz3t thank you - there is a learning curve, but it's worth sticking with it
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.
Yup 👍
I can’t find the sticky option for the row block. Is there a plugin to get this functionality?
You need to put it in a group block - the sticky position can then be set on the group
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.
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?
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.
Have you got an example ?
Hi, off topic but....what browser are you using?
I use Vivaldi because it has a cool split screen option - great for these videos
Did you say which template are you starting with?
the 2023 default wordpress theme
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?
Great questions 👍 I'm actually interviewing Rich Tabor today (automattic product manager and working on gutenberg) and will ask him your question 😀
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.
tks for the feedback :)
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
Do you mean how to move from a classic theme to a block theme?
What is the editor you're using?
Gutenberg (WordPress)
I'm new to wordpress and web design, and sorta confused by the terminology. I guess I meant which block editor?@@jamiewp
'Manage Theme Fonts' does not appear with 'Create Block Theme' in WordPress 6.5.3. Where can I find 'Manage Theme Fonts'?
They are now in core WordPress 👍 So you don't need a plugin anymore. You'll find them in global styles by typography.
What theme are you using?
The 2023 default Wordpress theme
@@jamiewpThank you! Looking to build website without page builders and default WP theme.
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.
Thank you and that’s a great idea - is there any particular course you were loookg at ?
@@jamiewp Yes, here it is: Mastering Site Editing and WordPress Block Themes course
@@uzimatele 👍
Why don't i see position sticky option?
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
@@jamiewp thanks figured that out. I built the site pretty good but mobile was pretty bad. Lot to learn
@@StartThenProfitINC what was bad on mobile (i'm interviewing rich tabor about mobile and gutenberg next week, so will add your problems)
@@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
Is GeneratePress a block theme
Nope
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....
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)
Yes, I slow down the playback speed (which I've used for other CZcamsrs, especially when I'm taking notes).
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.
haha - yes you might be right ;) tks for watching
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?
Noted 👍
nix load intro please. woke baby
?
The devil's in the details, and I'm sorry - but the details are just not cutting it.
Detail ? 😉