I spent weeks mastering WordPress Layouts, I'll teach you in 3 minutes!

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

👉 FREE THEMES www.pootlepress.com/free-word...
👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Get WordPress help : www.pootlepress.com/get-wordp...
👉 Channel Sponsorship opportunities www.pootlepress.com/youtube-v...
👉 Godaddy WordPress Hosting Deal - bit.ly/jamiewp
Today, we're diving into the world of WordPress block themes, specifically focusing on how to manage layouts effectively. In the next three minutes, you'll learn about adjusting content and page widths to enhance your site's appearance. We'll explore the essentials of working with block themes, including normal, wide, full, and custom widths. This brief guide is designed for anyone aiming to understand or improve their use of block themes in WordPress, from beginners to those needing a quick recap.
Video Summary
- **Understanding Layouts**: To create stunning websites with WordPress block themes, mastering content and page widths is crucial. This includes normal, wide, full, and custom widths.
- **Setting Widths**: Use the site editor to adjust page widths. Global styles allow for the setting of normal and wide content widths, affecting all pages site-wide.
- **Content Width**: The default width for content like paragraphs is adjustable globally, impacting the layout across the entire site.
- **Wide and Full Widths**: Wide width allows certain blocks (like videos or galleries) to extend beyond the normal width. Full width stretches a block across the entire site width without needing a special setting in global styles.
- **Custom Widths**: For unique design needs, custom widths can be applied to any block by using group blocks, allowing for precise control over the layout.

Пікірлер: 105

  • @DavidStavegard
    @DavidStavegard5 ай бұрын

    Whenever you have your whiteboard, I know I will understand what you’re talking about in the video! Great video, as always!

  • @CarlMadsen

    @CarlMadsen

    5 ай бұрын

    Love it when the whiteboard starts the video

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks David- the whiteboard is very useful for me to clarify thoughts as well

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍

  • @Hanneslsm
    @Hanneslsm5 ай бұрын

    I think the toggle is it what causes the most of confusion. Good video again, Jamie! Well explained!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks - yup i agree about the toggle

  • @wells2671
    @wells26713 ай бұрын

    Jamie, you should make the videos for the Learn WordPress team. I'm a novice at all of this and have been wrestling with the different width options and what they affect and when. Your short video just clarified this for me. Thank you very much!

  • @jamiewp

    @jamiewp

    3 ай бұрын

    thank you that's very kind 👍 I have helped out a little with the team at Learn WordPress and I'd love to do more. It's just there's not enough time to do everything i would like at the moment 🕰

  • @Mathijsvanderbeek
    @Mathijsvanderbeek5 ай бұрын

    Thank you. I made some changes. Very helpfull. Somehow I do not have the button when I select a group block to set the full width, wide width and normal width. I setup a test website and used the default 2022, 2023 and 2024 theme. Installed the Gutenberg editor changed view settings. It is visible when I select a title or featured image, but not the group block.... any ideas how to get this button active?

  • @elliottrichmondwp
    @elliottrichmondwp5 ай бұрын

    Great take on this! I actually touched on this very topic in my last video. It's quite a challenge to grasp, even from a developer's perspective. Communicating and understanding it can be tricky, but you've done an excellent job here for users. 👏👏👏

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Elliot, yup it’s quite tough. Even though its a 4 min video it took a chunk of time to plan so it made sense 😉 btw your video was fab 👍

  • @elliottrichmondwp

    @elliottrichmondwp

    5 ай бұрын

    thanks @@jamiewp I'm still a total newb 😂

  • @brucknerdevilliers
    @brucknerdevilliersАй бұрын

    Whiteboards are up there with air fryers. Well done and thank you.

  • @jamiewp

    @jamiewp

    Ай бұрын

    Hehe thank you 🙏

  • @vishalmukadam
    @vishalmukadam5 ай бұрын

    You are the Master!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    🙏

  • @RonNVids
    @RonNVids5 ай бұрын

    I JUST came against this question myself, and then you release a video about it. Thank you so much!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    My pleasure Ron

  • @melvamosco5586
    @melvamosco55864 ай бұрын

    Hello Jamie from Argetina, i love your videos! What about the responsive layout for images?Thaks!

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Ive got a video coming out about this tomorrow 👍

  • @karl-ford
    @karl-ford5 ай бұрын

    Jamie, you are the man!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Karl

  • @jdccool
    @jdccool4 ай бұрын

    Quick and painless! Ty, Jamie

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Cheers

  • @MRMATTYMANN
    @MRMATTYMANN2 ай бұрын

    Thanks answered my question quickly without wasting my time : )

  • @jamiewp

    @jamiewp

    2 ай бұрын

    Great to hear 👍

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

    Thanks, you're motivating me to like Wordpress again!

  • @jamiewp

    @jamiewp

    2 ай бұрын

    My pleasure 😇

  • @_antaro
    @_antaro5 ай бұрын

    Thank you, thank you, THANK YOU! You made it so easy.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Great to hear

  • @davidjboozer
    @davidjboozer5 ай бұрын

    Thanks , Jamie! That helps alot...

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Cool , great to hear David

  • @gads_guy
    @gads_guy4 ай бұрын

    Amazingly simple. Thank you

  • @jamiewp

    @jamiewp

    4 ай бұрын

    You're welcome!

  • @ohia5654
    @ohia56545 ай бұрын

    This was definitely useful but I wish you would have showed us how that full width group behaved if you had made it Normal, Wide, and then back to Full. I've been working A LOT in the block editor lately and those settings are a bit confusing especially when you can then make custom page templates and have those a different widths. This is definitely inspiration to go set up a site clean install and play with just these elements and see how they react. Thanks for another stellar video dewd!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Noted and thank you 🙏

  • @shrikant6327
    @shrikant63275 ай бұрын

    thank you, superb helpful

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thats great to hear 👍

  • @dennis_woo
    @dennis_woo4 ай бұрын

    Amazing video as usual. Very insightful indeed

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thanks Dennis 👍

  • @Bodmar22
    @Bodmar225 ай бұрын

    Thanks Jamie! Grossartig!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍

  • @iktech117
    @iktech1175 ай бұрын

    Thanks for the effective tricks in minimum time. You are genious👍

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks for watching 👍

  • @WilhelmCazimirovici
    @WilhelmCazimirovici5 ай бұрын

    Great! Thank you!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks for watching Wilhelm

  • @samuelbhatti878
    @samuelbhatti8783 ай бұрын

    Great video! Thanks for your explanation.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Thanks Samuel 👍

  • @richmaniow
    @richmaniow5 ай бұрын

    Super helpful Jaime, more fog has lifted 👍I think your video also highlights how unnecessarily confusing WP is at times, the drop down setting is labelled "None" and the sidebar setting for the same thing is labelled "Content", I think it would have been a lot easier to understand if they had called both of these "normal" as in normal width, as per your explanation, which makes a lot more sense. PS- if you have the time a video on building a Header would be super useful, especially the difference between Rows and Columns and how you get content to sit in the right place within the header.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Rich - yup i'm working on some ideas for the header.

  • @richmaniow

    @richmaniow

    5 ай бұрын

    @@jamiewp fab 👍

  • @goatcheeta
    @goatcheeta5 ай бұрын

    Very helpful though just getting started with block themes trying to see if I can make a go of it from GPress and Pro - (Don't like their elements implementation). Microsoft may be interested in this video. You have been on a roll this week! Thanks!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks for watching 👍

  • @andyburnett4918
    @andyburnett49184 ай бұрын

    Thanks for a very informative video. Much appreciated

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thanks Andy 👍

  • @MattMikulla
    @MattMikulla2 ай бұрын

    How do these settings work when using column layouts? Are there default global settings you recommend for content and wide when designing common page layouts?

  • @susanpearson-creativefibro
    @susanpearson-creativefibro5 ай бұрын

    That was really useful thank you.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    thanks Susan, this one confused me quite a few times, so hopefully it saves some people some time

  • @visualmodo
    @visualmodo5 ай бұрын

    Very good content!

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Thanks!

  • @stephansandner3094
    @stephansandner30945 ай бұрын

    Thanks Jamie. This is Stephan from Germany. I really like your channel and learned a lot. Just one question: What do you think is the best size for content width and wide width? I`ve read a lot different opinions....

  • @Hanneslsm

    @Hanneslsm

    5 ай бұрын

    Not Jamie, but let me answer your question: It depends on the content. If it's text, it even depends on the font size and even language. A rule of thumb is about 40 - 75 characters per line for western languages. 600-640px for the content width is mostly a good value when using standard font sizes (e.g. 16px). Wide width is then just your preferences.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    I really depends on the project:)

  • @SpiritOfTrboule
    @SpiritOfTrboule5 ай бұрын

    Thank you for the video. I always wondered, why these page widths are usually in px and not percentage?

  • @tobiaslofi
    @tobiaslofi5 ай бұрын

    Thanks!!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Tobias

  • @vidikman
    @vidikman3 ай бұрын

    Great video, Jamie, Can you clarify why the padding settings effects on Full Width layout? So I had to move global padding to zero to make it real Full width.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    What theme are you using?

  • @vidikman

    @vidikman

    3 ай бұрын

    Regular one. Twenty Twenty Four

  • @paulroos8517
    @paulroos85175 ай бұрын

    Thanks very very much. I have also struggled for weeks to figure it out. Nevertheless, your KZread tutorial is useful!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Paul - is there anything else that is confusing for you ?

  • @paulroos8517

    @paulroos8517

    2 ай бұрын

    @@jamiewp I come for an intensive development world. financial systems for banks and insurance. Most of the confusing issues are NOW cleared. Thanks for asking.

  • @Malecare
    @Malecare5 ай бұрын

    thanks

  • @jamiewp

    @jamiewp

    5 ай бұрын

    my pleasure

  • @maartenklem2272
    @maartenklem227221 күн бұрын

    Thanks Jamie, extremely useful! One question though, what is or what do you say is the best page width?

  • @jamiewp

    @jamiewp

    19 күн бұрын

    It really depends on the nature of the website and personal preference.

  • @pmmueller
    @pmmueller4 ай бұрын

    Jamie, I absolutely love that t-shirt. Is there any way to buy a "Learn Core Deeply" from you?

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Great minds think alike Peter :) I'm working on it :)

  • @pmmueller

    @pmmueller

    4 ай бұрын

    @@jamiewp ... and fools seldom differ 😂 --- This fool's definitely looking forward to that t-shirt 🤗

  • @TheTwelfthEnt
    @TheTwelfthEnt5 ай бұрын

    Great video as usual. I saw in one of your other videos you have a header template and it looks like it makes headers much more simple and customisable. Am I able to download this anywhere? Cheers for the great content!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks can you remember which video (i have over 400 now :)

  • @kenyie8080
    @kenyie80805 ай бұрын

    What browser do you use to get that spit screen layout comparison?

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Vivaldi

  • @jeremyfairbrass
    @jeremyfairbrass5 ай бұрын

    That's super helpful, thanks!! :)

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Thanks Jeremy , this took me quite a while to get me head around so hopefully it clears things up

  • @jeremyfairbrass

    @jeremyfairbrass

    5 ай бұрын

    @@jamiewp definitely does! I'm planning to (finally) migrate my website from an old Genesis-based theme - still using the classic page editor - to a block theme, and using Gutenberg for the first time, this year. So, lots of things for me to learn, and videos like yours are really helpful in that regard! (Still hoping to have a video comparing the Spectra One and Ollie themes one day - I'll probably go for one of those themes for my site, but I'm not sure which is the best - Spectra One also has the Spectra Pro addon, which gives it some nice extra features, but the Ollie website says they're working on releasing their own addon sometime soon)

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Hi @@jeremyfairbrass did you see this video kzread.info/dash/bejne/g3yilNeEm7Wwh6w.htmlsi=2uDlrQ8LYpAqsmRv - it's not a direct comparison but i do highlight some of the highlights of Ollie and Spectra One (they are both great)

  • @jeremyfairbrass

    @jeremyfairbrass

    5 ай бұрын

    Thanks - I think I must have missed that one!

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍@@jeremyfairbrass

  • @PeterSzpakowski
    @PeterSzpakowski4 ай бұрын

    What are the best practice widths for normal and full?

  • @jamiewp

    @jamiewp

    4 ай бұрын

    Hi Peter, full width is full width of the screen so there is no option for that :) Re normal width , it really depends on the project and the type of website you are building .

  • @VijayKumarIM
    @VijayKumarIM5 ай бұрын

    Super helpful tutorail. Please raise your volume little up. Thank you

  • @jamiewp

    @jamiewp

    5 ай бұрын

    👍 volume improvements on the way

  • @Aphazel
    @Aphazel5 ай бұрын

    Hi Jamie! what is the best, and lightest, plugin to integrate some functions or blocks that are missing on gutenberg? Thanks ;)

  • @jamiewp

    @jamiewp

    5 ай бұрын

    It depends…what are you missing?

  • @andrewf.7813
    @andrewf.78133 ай бұрын

    I don´t have the controls when I have a block selected, I cannot change which width I want. The control buttons at the top are not visible.

  • @jamiewp

    @jamiewp

    3 ай бұрын

    Hmm what theme are you using ?

  • @mohdom6
    @mohdom65 ай бұрын

    Hi Have you noticed a WordPress logo issue where in the editor it shows a white square with no upload button? I thought it was theme specific, but I'm encountering it with old sites I made and new installs. I think it is 6.4.3 issue

  • @jamiewp

    @jamiewp

    5 ай бұрын

    Hi, I haven't noticed that one. I'll run some tests this end.

  • @mohdom6

    @mohdom6

    5 ай бұрын

    @@jamiewp I think it has to do with the host, litespeed sever issue.

  • @jamiewp

    @jamiewp

    5 ай бұрын

    @@mohdom6 👍

  • @arnelGo-fj7qc
    @arnelGo-fj7qcАй бұрын

    omg!

  • @jamiewp

    @jamiewp

    Ай бұрын

    hopefully that's an omg good

Келесі