WordPress Twenty Twenty-Four Theme Customization Tutorial - How to Edit Your Website Templates
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 2024
- The new WordPress Twenty Twenty-Four theme takes full site editing (FSE) to the next level paired with WordPress version 6.4!
In this tutorial, we'll customize it using their beautifully designed patterns to insert pre-built layouts into our website.
Download the 2024 theme tutorial guide below: 👇
websiteprofitcourse.com/go/dl...
You'll see how it's even easier to edit your WordPress theme templates visually using Gutenberg blocks, plus new features like editing page/post content directly within your editor and opening your images in a popup when clicked.
You don't need to be an expert coder with WordPress theme development to accomplish an elaborate design. Now, you can do it with drag-and-drop, crafting your website layout from header to footer using styles, settings, and patterns.
Did you find this video helpful?
Say "thanks" by getting the ball rolling on your next website!
If you're ready to jump into WordPress, I recommend two hosting companies.
For the most AFFORDABLE, go with HostGator...
🌎 How to Install WordPress on HostGator 👉 websiteprofitcourse.com/how-t...
✅ Start now with HostGator 👉 websiteprofitcourse.com/hostg...
For advanced WordPress features built-in, go with SiteGround...
🌎 How to Install WordPress on SiteGround 👉 websiteprofitcourse.com/how-t...
✅ Start now with SiteGround 👉 websiteprofitcourse.com/sgwp
Tutorial links & resources:
Download theme - wordpress.org/themes/twentytw...
Free stock photos - www.pexels.com/
Here are the chapters to follow along:
Intro - 00:00
Install Twenty Twenty-Four theme - 00:23
Full site editor overview - 00:39
Pick a style - 01:22
Publish photos to media library - 01:43
Publish pages with patterns - 02:45
Navigating the new template editor - 04:15
Set your custom styles - 06:39
Edit "Blog Home" template - 08:58
Edit "About" page - 15:30
Edit a template part - 17:07
Edit "Portfolio" page - 18:00
Expand on click lightbox with CSS - 20:12
Edit "Pricing" page - 23:36
Start now with WordPress - 25:44
View blog post - websiteprofitcourse.com/wordp...
Use the links below to build your side business today!
___________________________________
Start Freelancing & Make Money with Your Skills!
🧰 15 Tools to Start Your Web Design Business - websiteprofitcourse.com/dl15
❓ Web Design Client Questionnaire - websiteprofitcourse.com/dl02
⌚ FREE Time Tracker Sheet - websiteprofitcourse.com/dl05
🤝 Web Design Business Pro Community - websiteprofitcourse.com/join
___________________________________
Create Your First Website or Blog Today!
💻 FREE WordPress 101 Training - websiteprofitcourse.com/dl03
🚀 Launch Your Blog in 14 Days - websiteprofitcourse.com/14day
🌎 Best WordPress Hosting - websiteprofitcourse.com/hosting/
🎨 WordPress Drag-and-Drop Visual Builder - websiteprofitcourse.com/divi/
___________________________________
DISCLAIMER: Please note that some links are affiliate promotions. I only recommend products & services that I know and trust.
![คบซ้อน - วงL.กฮ. [ Official MV ]](http://i.ytimg.com/vi/5MtesqJ0I1c/mqdefault.jpg)
perfect video/delivery ... bravo
This video is exactly what I was looking for to get started! Very well explained and just using the default WP features without any additional plugins. Big thumbs up 👍👍
Did you start?
Thanks for all the info. I'll use what you've offered and I enjoyed your presentation
Thanks so much for posting this. I am a former WD who coded my own websites. These new themes make it "easier" buh sigh a little bit of a learning curve. I was trying to figure out the new updates to use on WP and you made it soooo easy. LOVED, LOVED your right-to-the-point approach, yet it was very well explained. Keep them videos like this one coming- you are doing a great job. I'd love to see more. Quick question. What do you think about builders like Kubio, Elemntor etc.. Do they really make a difference? I felt tied up when I tested some of them,. TIA. Keep up the good work Ray. Loved your style of explaining- immediate follow.
Thanks for this informative tutorial. It is very well structured and shows how to work with an fse theme very well. It is also very commendable that you enable the assets to be downloaded.
That video was so helpful, thanks. I'm a complete beginner at WP and have chosen to use the Twenty Twenty-Four theme despite others saying it is too hard and I should use an older one. It has been very challenging but bit by bit it's all sinking in. Your tutorial has been part of that. 🙂
Excellent video! Thank you very much! I was a Wordpress developer 15 years ago and now it seems has a lot of changes and I feel like a beginner with it haha
Appreciate it - I feel the exact same way as I'm preparing for these videos!
thank you very much.
thank you so much .😀
どうもありがとうございました🙃
I am using a local host and the option to expand the picture in a new window is not available. Just so you know. Thanks for this wonderful tutorial.
Thank you.
Hi! Thanks for the video! I wanted to ask if you know how to change the website logo, I could put it at first... but now I'm trying to change it and I cannot find where to edit the logo. Thanks again!
Thank you for this brilliant tutorial! I'm just starting with the WordPress Twenty Twenty-Four theme and I'm looking for where to set the background image instead of the background color (like you showed in "Set your custom styles 06:39") but I can't find where I can set this. Do you know where or how to set the background image instead of the background color ?
Is it possible to have different menus show up if a user is logged in or not? I have it for my Twenty-Twenty One theme but can't seem to get it for Twenty Twenty-Four
Thank for the video. I have question regarding page templates (maybe I'm using the wrong terminology here), but what I'm trying to create is a page template or layout using all of the blocks and/or patterns that I want to have on a page, and then save that page layout so that I can reuse it multiple times. For example, Let's say that I have 6 categories and would like to have a page for each, but still keep the layout of the page uniform across all 6 pages. In the end, I'd like to be able to create a new page, pull up this category template, and then add the items associated with that specific category. Every attempt that I've made always results in a blank page. Not sure if I'm supposed to populate the blocks with content (only to delete it and add the correct category content later), but when try to create the template by just adding the blocks and patterns that I want on that page, and the save it, I can never find it later. What am I doing wrong?
Yes, it sounds like something you can do. Look into creating a new template that applies to all categories. Within any blog-related template you can use the "Query Loop" block. So the template will apply across all 6 categories in your example, and the query loop block is what imports the specific blog posts for that category onto the page (I briefly went through the Query Loop block on one of my tutorial from the Twenty Twenty Three theme last year).
hi, how can j use google fonts in twenty twenty four? thank
Can you tell how I can edit my category layout page As it is showing posts in column and I want them in list format
does anyone know how to change the asterisks on the home page to an imported image?
Thanks for the video. I created a page, but not sure why I can only see the section "Posts" instead of the "Page" when trying to link a URL to another website (9:33) any idea?
I'm not quite sure what you mean... if you link to a 3rd-party website, just copy/paste since the search won't bring anything up. If you have published pages on your own site and want to link to those, they should show here when you search.
@@RayDelVecchio for some reason they don't show up. I need to create a post using the pages template, and that way I can copy and paste as you suggest. I manage to fix that anyway. Thanks for the guidance.
What better way to edit a Twenty Twenty-Four and keep the changes even after template updates?
Using child? Make a copy of the Styles and the css?
Where do you add custom CSS site-wide? Where do you add header & footer scripts?
Hi Ray,
thanks for the tutorial. When I tried to download the assets it recognized my email address from a previous download and wouldn't allow me to access it. Is there another way to access?
Cheers - roy
Good call - I have to try and fix that... it's the standard response from my email provider if you're already signed up. If you reply to one of my emails I'll send it to you.
Thanks for your reply Ray. I used a different email address and was able to download the pdf. However, next time I'll have run out of options so if you can fix that it'd be great. Once again, thank you for your video. Cheers
The template didn't automatically show up when i try to make a new page, can someone help me pleaseee😭😭😭😭😭😭
With this 24 theme. Can you put a button on top of the hero image? And my hero image has bezels, but I can't seem to make it a hard corner. Do you happen to know where it is located?
You should be able to put a button block anywhere... or you might prefer the "Cover" block, which is an image with other content overlayed. Regarding the bezel question, I think you're just referring to the margin and/or padding. Go to the top level block for the hero section and see if you can set the margin & padding to zero to make it extend 100%.
Got it thank you! played with all the stuff you mentioned. @@RayDelVecchio
Great video. I have an issue with the footer logo. Why does my header logo change when I change the logo in the footer?
They are likely linked. It's designed that way so if you update your site logo, it'll update everywhere you've added it to your website. If you want to place a custom logo somewhere, you can use a plain image block.
@@RayDelVecchio Thank you :)
Hey there, cant seem to save this video?
How do you change the site identity for this theme? Ie change the W logo on the tab with your website name to something you want it to be
I know the site identify changed for me with the logo upload. It used the logo and you saw it was updating the site identity when I saved the template. This used to be in the Appearance > Customize menu, so I'm not sure off the top of my head if there's an alternative way to set that on a block theme.
Got it - thank you. Forgot to mention in the comment above but super helpful video. Thank you for posting it
You talked about everything except the navigation menu. WordPress has changed all of this part, which used to be in Appearance and Menus; today, it's no longer there, and it's very difficult to find the section for adding new menus.
Does anyone know how to change the width of the blocks that are automatically set to be centered and a 1/3 of the full width? it seems so simple but for some reason I can't figure out how to change the width. I saw how he changed the width of the columns but I haven't been able to alter the width of the blocks themselves. I feel so stupid lol
how do you change the asterisk to a clip art photo on the home page?
You'd probably need custom code, or replicate the look using the image block
I'm trying to get the 15 tools and client questionnaire, but since I already signed up for your email list, your site won't allow me to get it.
Yes, this was a problem with my email system. I think I fixed it, please give it another try!
When you increase the text font size in the Twenty Twenty-Four theme, for example to 1.1 REM or 1.2 REM, the text on the phone becomes very small
Interesting, could be a mobile style overwriting the desktop one. Since I know CSS, I usually fix that way vs. struggling with a potential editor bug, haha.
I've found that certain fonts won't display correctly on Android phones. I used a font called Libre Baskerville. It worked fine on my desktop PC but on my phone it defaulted to a different font. I'd embedded the font in my web site. It wasn't a WordPress site, it was just an HTML / CSS site.
is it possible for blog?
Yes👍
I'm looking for someone to build my website for me as i find it all very complicated even with the amazing elementor! if your interested, let mew know it would be much appreciated
When add CSS where is the FIle .CSS??? Thx
It's not stored as a CSS file, it's in the WP database.
This is great! thank you so much. I have a question regarding making a website that uses this theme multilingual. I'm trying to use Polylang but since this theme hides the menu options I'm confused on how to do it. Do you have any workaround or plugin that works with it?
That is something I've never dealt with (multilingual site), but there may be a way to create a custom menu. It's tough to say without knowing how your specific theme and/or plugins are interacting.