WordPress 5.9 Tutorial | Full Site Editing Tutorial
HTML-код
- Опубликовано: 14 июн 2024
- In this tutorial, I walk you through the new features that come with WordPress 5.9. A lot has changed in this version. The theme customizer, menu customizer, and widget customizer are all gone. In WordPress 5.9, you can create and adjust all those things using the Block Editor. And you see all the results in real-time.
Since it can take quite some time to find your way around in WordPress 5.9, I decided to dive deep, practice a lot and create a tutorial about it. We will discuss creating a menu, creating the header, using classical or block themes, and Full Site Editing (FSE). I will show you how to navigate through the Gutenberg Page Builder and create a page from scratch.
We will add extra Gutenberg blocks, work with patterns (my favorite feature), and the Block Styler. I will talk about the header template, footer template, blog template, archive template, and we will add a sidebar and use blocks instead of widgets to fill your sidebar.
In my opinion, using Full Site Editing and The Gutenberg Page Builder is not the easiest and best way yet to create websites, but step by step, WordPress is getting better and better.
You can go to a specific subject in the video by clicking on one of the timestamps below.
Timestamps WordPress 5.9 Full Site Editing
00:00 Intro
01:29 Classical WordPress Themes vs. WordPress Block Themes
02:30 Old WordPress vs. WordPress 5.9
03:16 Create A Menu In WordPress 5.9
04:37 Add Pages To Your WordPress 5.9 Website
07:11 Adjust The Header
08:26 Configure The Logo
09:24 Can You Use WordPress 5.9 With Classical Themes?
10:14 Add A Block Theme / Full Site Editing Theme
13:05 Introduction To The Gutenberg Editor
16:34 Add Third Party Blocks To Gutenberg
18:31 WordPress 5.9 Patterns
21:25 Add Patterns From Multiple Block Themes
23:02 The Block Styler
26:42 Adjust the Global Colors and Block Styles
Make A Page Using Gutenberg
28:35 Create A Hero Section
33:40 Create An Advanced Button
39:00 Create A 3 Column Section
44:00 Finish The Page
48:35 Adjust Images
49:50 Optimise The Page For All Devices
51:28 Create A Blog Page
52:32 Adjust The Blog Template
56:21 Adjust The Footer
59:01 Create A Single Post Template
01:01:20: Create A Sidebar
01:06:24 Thank You 
Хобби
I'm only 6 minutes in and this is already the most honest tutorial I've ever seen. You're not just selling us hype - you're giving us your genuine experience. Really appreciate - thank you!
THANK YOU SO MUCH! This is the most helpful tutorial I have found! Perfect for someone who has worked with WordPress before and is frustrated by the Editor!!! NOW I FEEL READY TO USE IT :) THANKS!!
It is a very informative introduction to new WordPress 5.9 and the Gutenberg. Thanks
Thank you SO much! I've worked with WordPress for 10 years and this block editing stuff completely stomped me.
It's crazy how much work you put in your videos! Thank you for this great tutorial! I always recommend your channel to my friends if some asks me about wordpress. All the best to you and your family!
Very glad to find this as I prepare to leave an old theme and the Classic editor. You helped clarify a lot of the confusing differences between block and non-block-based themes. Thanks, Ferdy!
Thanks for this video Ferdy, I really also wondered where all the fonts had gone and how to add ones that we are used to using. I guess we all going to have to learn this new approach. You really put a lot of effort in this one, thank you.
Am a biginner but with the tutorials bro am like i started years back my friends must see tNice tutorials too thumps up
This is a great WordPress 5.9 tutorial! You are a true WordPress expert. You make WordPress so exciting to watch. Thank you so much!
This was excellent!! It made me feel less frustrated with the issues I’ve been having with FSE and inspired me to try again. Thank you!
Awesome video, Ferdy! It was my first look at 5.9 and I learned so much from watching this tutorial. Thank you for putting in the work, I'll definitely be checking out the rest of your work on here.
I have surfed 10s of google ranked top WP tutorials but this one really looks very user-friendly. explained in a very simple way. Without any show-offs! Thanks for it!
Major changes in wordpress 5.9. That's great that you share your wide experience with us. Truly useful. Thank you so much!
Damn Bro, i can work with 2 websites in a day just by following your tutorials. This is awesome! Thanks a lot!
You are wonderful for sharing your trials and tribulations of FSE with us. I so appreciate it - thank you!
Ferdy , i have immediately press thumb up because I know that your tutorials are always valuable and productive . Thank you
Thank you Ferdy ✌
This has to be the best and only tutorial video I need. Thank you.
Very timely video on WP 5.9! Thank you Ferdy! 👏🏻
Amazing tutorial on a something new on Wordpress as always. thanks a lot Ferdy
I like how you show us one step at a time and why you take it...good job Ferdy...
amazing, cleared so many things for me, thank you
Thank you for your fine work. Very recently I found FSE, so have been reading and watching videos (probably 4-5 today) and yours (while flying all over the place as video time went on) was by far the best. From your video here, I see how to remodel one of my sites for Glass Art and it will be far more useful and attractive. In closing, thanks for your efforts! Dave (retired by still love website work)
Great tutorial, I'll give it a spin to start learning since this will surely become the norm in a couple of years
His explanation is super amazing and crystal clear
Thank you Ferdy! Much appreciated!!
Thank you. Love the explanation and loved watching you work.
Hello Ferdy - Absolutely wonderful video covering the exciting features of WP 5.9! Its so precise and concise. The presentation style was magnetic. Just had to hit the Subscribe button! Thanks a ton! !😳♥ Above all: - kee up your channel and never stop to make such awesome films - Thank you!😳♥♥♥
one of the best tutorials ever 💖
Very helpful video, Thanks!
Hi Ferdy,
It was an amazing video! I am very interested in trying out WordPress 5.9, and since some of my friends are thinking about starting their own websites. I will be helping them set up. I think your video will be invaluable in the process. I learned a lot about the full editing process, and I am looking forward to implementing it into my process. Thanks a lot for sharing such an in-depth video, it was a great watch, I will definitely share this within my network.
Thank you so much, Ferdy! This really helps clarify things. Now I have a better idea of what is possible (and not!)
man you really made a video taht is really easy to understand. Thanks bro. really helps me alot.
Great video - many thanks for all your effort
This is a great tutorial video. I learned a LOT.
Oooo thanks sir... it's really confusing.....
🤩..... & Now it's really soo easy because of you
Thank you very much for your time...
Thanks for this tutorial. I learned a lot! I got a little confused at first when you were going to your original website to grab content. Wait! What??? 😲I am updating my WP "classic" site and this video has been an enormous help. Subscribed!
Thanks for the tutorial Ferd :)
Great Video as usual Ferdy, thanks man
Great video today! I really enjoyed it and learned a lot.
Thank you for the honest look at this new "Feature". Following WP core development these past couple of years has been like watching a carcrash in slow motion.
Wordpress is no longer fit for agencie work.
If the "full site editign" paradigm doesn't send a chill down your spine, i don't know what will. Just image all the marketing interns destroying hours worth of design from the professionals at the companys web agency.
Hi Ferdy,
You say in your video that you don't know how to change the headers height. Here's how you can do that. Click on the icon with the 3 bars in the top left. Under Group, select the first Row.
Then you change the padding. First you unlink by pressing (-), so that you can change the 4 sides separately. Change PX of the first and third columns (that is, the top and bottom) to VA. All space in that row above and below is removed. If that doesn't work, do the same with the Row below this Row.
I'm not a fan of Gutenberg either, but I was curious what you think of the new release. I quickly found the problem. Maybe it will help you.
Goed bezig Ferdy. Brilletje staat je goed!
Thanks 😊
Many many thanks brother
Thank you Ferdy!
I was waiting for the video, Thank you ❤️
You are welcome! :) I hope you enjoy the video!
Great video, I am just starting with WordPress. I have never built a website nor coded a single page, extremely non-technical user. I was just learning Elementor, and Divi basically.
Fantastic as ever Ferdy 👍
Ferdy! your the best hope all is safe with your family....!!
Please do more of this FSE demos.... Maybe if you have time..... Help Kadence Transitioners! (PLeeeeeeze)
cheers, Kai
good job, thanks
Oh, I goodly want to hear so!
Thank you Ferdy. I really appreciate your time/effort in this video - Big Hugs :)
Good job Ferdy! Mooi alle mogelijkheden geshowd, en mee eens: Gutenberg is er nog niet, maar de block-based thema's/templates gaan wel de toekomst worden!
Nice tips
You are master, Thanks
Buen vídeo le felicito
Thanks for the great video! How do you add favicon in 5.9?
Prrrety nice! Thanks Ferdy. I really appreciate your sharing the workarounds. I am not a designer but working with a theme demo. You have solved a LOT of my problems. Whew! One question I have that you touched on and mentioned workaround but didn't get to it is the website title in mobile mode. Can you help me please? My name doesn't show in two letter groups but in clusters of letters. It looks like the title H1 has spaces between letters. Is that the issue? I really appreciate your help with this. I am almost ready to launch but this bit is a real problem.
Thank u ❤️
thank you so much for this! i do have 1 question thought how do i change the fonts as it is no longer in customizer
What do you use to create the zoomed and angled screen recording like at 4:41? Great video!
Gosh, you put in so much work, but I think it was worth it. Without your tutorials, many wouldn't bother to learn about Gutenberg. Many thanks for that. I only ask you for one answer: at minute 31:19 you change the column width, unfortunately I don't have that option (no button there). Do you maybe have a tip?
Hello! I found something about the space under your figure (minute 33:12 of video). At every group that has background color, wp adds the style: .wp-block-group:where(.has-background) { padding: 1.25em 2.375em;} . So I tried to set additional CSS at customize: .wp-block-group:where(.has-background) {
padding: 0;} and it worked for me!!
Great content Ferdy, much appreciated! I've been looking everywhere and cannot find a way to display the thumbnail of a RUclips video as a post in same way as before. Before 5.9 I could choose a "Format" of a post (Standard, video, etc), now by default it shows the picture from the post but I want to display the Thumbnail and I can't find answers anywhere.
Great veiod
way too much info to take in for me personaly !! thank you for the video and tips
Ik bouw al jaren themes om voor klanten en geef ook les in WordPress aan MBO 4 studenten.
Nu voor het eerst maak ik kennis met de editor. Dank voor je tutorial. Ben net bij je je navigatie stuk. Mijn hemel wat ingewikkeld allemaal!!! En dat zeg ik als ervaren editor.
Als ik dit aan mijn arme studenten moet gaan uitleggen...
Zal wel 'muscle memory' zijn, dus het betekent keer op keer doen, doen, doen, denk ik.
Klanten die NOOB zijn wil ik dit al helemaal niet aandoen.....
Ben benieuwd of ik er aan ga wennen. :)
Hey! Wat gaaf je je thema's bouwt. Deze tutorial is al meer dan een jaar oud. Ik heb laat de WordPress editor in actie gezien bij een agency! Wow! Het gaat echt wel de goede kant op met de WordPress Editor! Ik hoop er begin 2024 een tutorial van te maken!
Cool. Ik kan niet wachten, haha. @@ferdykorpershoek
i am your fan
Great video! So what benefits will particular themes have if we can now edit everything we want?
I think it will be the pre-build blocks that are designed especially for that theme. You don’t have to use them, but you can if you use that theme. At least, that is my view on how the themes will be made in the future. With of course a suggested layout
Hi Ferdy, thank you very much!!! What I don't understand yet is : if I create template-parts. For example a "middle part" - I see no option to put this part of the "puzzle" into a template.
So as far as I understood it, a template consists of some template parts. But I found no option to - for example - create the template "normalpage" with the templateparts "header", "middlepart", "credentials" and "footer".
Or is there something twisted in my thinking?
Thank you very much in advance!
Danke! FerdY!
Hi Ferdy , You´ve got to grab hold of the handles to be able to make the logo bigger or smaller!
My main problem is how do I put pages and templates together, can you help me?
Well, it´s a long video, I´ll have to look for it...
Thank you for this video! Do you think this will be a competitor to elementor? Right now I don't think so. What's your opinion?
Right now absolutely not. In the future: Yes!
Thanks for the tutorial! Do you know if there are freelancers out there yet who are expert with FSE web development who could be a resource to me if I get stuck or need help with my specific FSE project?
Do you still do courses? I only seem to find older ones. I'm interested in buying a course either on demand or live/online.
Grate
Hi Ferdy, with the new 5.9.2 upgrade, I cannot figure out how to change the font or background colors. The text color is also missing from the dropdown menu. Has it moved somewhere else? Can you share where I can find this info? Thank you
It definitely feels very laborious and tedious to work with. Using this as a viable page builder at the moment does not make me particularly excited just yet...
Hi, your video is very usefull but i just installed 5.9.2 and its not the same with a lot of things, i dont know why they keep changing its soo confusing
There is bug in wordpress 6.3. If you notice that there is gap in your block, try either specify "0" in spacing/margin/padding. spacing/margin/padding are using slider, move the sliders to another values. Let the value changed to your adjusted value. After that, adjust the sldiers back to zero again. That will set your spacing/margin/padding back to zero instead of the usual 40. You do not need to go to the CSS level.
HELP!
Using the new version and following your instructions.
At 3:34 you click in "Page list: No pages to show" so that you can add the pages you want.
In my wordpress it says "Page list: Cannot retrieve Pages." and if I clik on it it shows "Page List: Cannot retrieve Pages." and it's impossible to add any page to the menu.
Can you please help me solving this?
Hello I have 5.9 as well but when I choose bricksy, there is no widget or menu options in my apperance. I can not find editing widgets
I understand now, it all depends on theme. If change theme, some menus disappear. If I am using bricksy there is no widget, because no need for widget
Hi Ferdy! Do you think Wordpress is aiming to (and succeeding to) eliminate all page builders? And do you think they'll succeed in this soon? =)
Hi, may i know how to add cookies consent by html to wordpress? My latest wordpress only shows Theme editor beta.
What theme do you recommend that we use with this new 5.9?
i have a Home Page Template (?) that's not showing up in Pages at all. In "Reading" under settings, it says that the homepage is set to displaying latest posts. It is not. I switch it to land on static page, but the 'Home page' is not availible in the list of pages. But it's there when i go back to the editor. ay ay ay ?? what to do
I will change my theme, tk.
I did not watch the whole video, did he suggest changing to another theme?
@@rlh238 default theme is fast and suitable for my case dude.
Most important is to check if it is a block based theme. And if you want the new way of editing, I think you have to select the feature full site editing when searching for new themes
Hi. How can refresh my website and restart everything from scratch? Thank u.
Thanks, Ferdy how are YOU?
.
.
.
Has anyone figured out how to set up the login/logout feature on Wordpress 5.9? I used the login block but now I am stuck. In the older version of WP, we would go to Appearance > Menu and then see the option of login/log out after installing a plugin. Now that option is gone. Someone help please!
Thank you very much for the video. But you added some plugins, so it is not pure WP FSE. Indeed, very many thanks for sharing your work.
You don't have to add plugins if you want to. I wanted to extend the amount of Gutenberg Blocks 😊
All I've learned from this video is "don't bother... not yet". Don't get me wrong, you did an excellent job of explaining it all, well done! But this is way too convoluted a system right now with WAY too much broken stuff that can't be easily customised without going with a custom theme anyway (which kinda defeats the purpose) and has the potential to completely destroy your site's layout in a couple of clicks with no easy way back when (not if) you do. I can't even find an easy way to backup a custom layout so you can restore it when you do inevitably screw it up. Which means there's also no easy way to export from your dev site and import into your live site. I guess the WP devs just want us to experiment and gamble with our live sites or waste a bunch of time trying to figure out exactly what we did on our dev site and then do it again on our live site.
It shows promise and I was really excited when I first heard about this system, but omg, no. Definitely no. Not yet.
I can't find how can I align a small image to the right. By default it stays in the middle, there's no option to align it to the right.
can you do on how to get more traffic on your website
How do you think this is going to work with Woo Ferdy?
andy plugin info, that changed I believe.
can you also do how to get more traffic on your website
I'm going through the tutorial with you, and six months later, cannot choose the page menu item and hit enter to add. It just puts it on the next line. Now, we have the + to add right in the page.
So, changing the header height, these blocks I would think of them as HTML containers, nested in each other. The default has lots of spacing, we can change. The header Group height depends on the container inside it-the Row. Select that Row and experiment with the padding. When you make the padding smaller top and bottom, the header Group shrinks to that height size as well. Add Margins and it pushes it away top and bottom. Best way to try to understand is to add color to each container, which seems to add padding, but you visually see what's going on.