WordPress Gutenberg: Design Unleashed! 🔥

[@ClarkeDesign]

More tutorials like this please. Good to see how you use the various layout blocks to structure the page.

[@jamiewp]

Cool tks 👍

[@SuttonsNest]

The thought that occurred to me as I was watching this is "He's using WordPress like a camera!" but then I thought, no, that's not quite right, you're more like painting with WordPress. Reproducing electronically, what was originally done in print! The next thought that occurred to me is "Man, he makes that look easy!". Bravo, Jamie. Very nicely done.

[@jamiewp]

Thank you so much , that's one of my all-time favourite comments ❤

[@TsuiFeiCHEN]

I like the idea of presenting the graphic design layout as a webpage! Awesome!!

[@jamiewp]

Thank you 🙏

[@cholo2605]

Thanks for the shift return trick!!!!

[@jamiewp]

👍

[@tomnelson8936]

Maybe I'll finally remember that

[@jdccool]

With every "re-build" vid, a great tip. Thank you so much, Jamie.

[@jamiewp]

My pleasure!

[@blue_jazz]

Great video, really practical. Effortless Mastery!!

[@jamiewp]

thanks Brian :)

[@techbyfinne]

You are a inspiration for us all 💪

[@jamiewp]

Thank you 🙏

[@derek-hanson]

Yeah, that’s a cool concept! So much if web design is based on traditional print, like mastheads or newspapers and magazine spreads. Maybe doing something like a billboard would be cool.

[@jamiewp]

That would be cool - be fun to dive into traditional print a bit deeper maybe and explore mastheads etc

[@GrantSpoon]

This is amazing. Thanks so much for all your videos. This totally opens up the possibilities with gutenberg

[@jamiewp]

Thanks Grant 🙏

[@comartse]

That was fun! It's fun to follow you as you convert printed matter to the web and see how you find ways to use Gutenberg. The cover block is handy. Thank you for an excellent presentation. Besides AI, there have been useful tools for a long time to identify fonts like MyFonts WhatTheFont service. The logo was close to the Transcend Semibold font but a more condensed version. It also reminds me of a condensed Times New Roman. But, I think they engaged a typographer to get their own expression in their communication.

[@jamiewp]

Thanks Cay 🙏 and thanks for sharing the fonts tips 👍

[@visualmodo]

Excellent job, thanks for sahring!

[@jamiewp]

👍

[@MercadeoDigitalco]

awesome !!! thank you for showing the power of Gutenberg!!

[@jamiewp]

👍

[@Whatreally123]

Thanks Jamie. I was looking for something simple like this. This helps a lot in me wanting to create a website as I am not a developer.

[@jamiewp]

Glad it was helpful!

[@vaughanprint]

There are conventions and there are conventions. With the practical constraints to fit all sorts of things like SEO best practice, it’s always nice to see creative layouts, even if we aren’t supposed to do it that way.

[@jamiewp]

Exactly- it’s freeing sometimes to have room to play

[@mikeswheels]

I have used magazines as inspiration for years! Real Simple is a fun one.

[@jamiewp]

Cool - I don't know real simple , will check it out

[@jonbloor8661]

Great idea Jamie, thanks for creating

[@jamiewp]

cheers Jon - any suggestions for other Magazine cover gratefully received :)

[@CampanellaFoto]

Nice video. Thanks for the inspiration.

[@jamiewp]

Cheers MIchael :)

[@СамотокинВладимир]

Your advice on working with the Gutenberg editor is just great for me as a beginner learning WordPress. And the lessons on recreating the design of popular websites generally amaze my imagination. Your work on two screens of the same browser is very interesting - this is when the target site is on the right in one screen, and a copy of the project is being created on the left. Please tell me the browser extension that you use to split the screen into two parts. I am grateful in advance for the advice.

[@jamiewp]

Thank you 🙏 it’s the vivaldi browser

[@TACDetective]

Loved this video. I wondered if you can put content within the coverblock (im sure thats what you called the yellow areas) similar to the original piece with its red writing?

[@montyksycki4092]

THANK YOU FOR SHARING!!! HAVE A GREAT DAY!!! ~ PEACE :)

[@jamiewp]

Thank you 🙏

[@georgekaramolegos]

Great job Jamie . What happens if you don't want to use the spacer block ? What would be the alternative? Btw do you offer student discount for your lessons ?

[@lorenzi_feinste_stahlwaren]

Very cool!! 👏👏🙏

[@jamiewp]

Thank you 🙏

[@chadreilly]

Cool page. I would like to see what 2024 theme can do with more of a "mobile first" design that does more than just stack content. Or is it just not suited?

[@jamiewp]

Hi Chat , Yup 2024 is great on mobile - I built 5 sites with with it recently and also turned them into free themes 👇 Woo - xerothermic-xenomorph-kdxvn.instawp.xyz/ Bento - wicked-wryneck-orsjs.instawp.xyz/ Portfolio - graceful-gerbil-gwqrm.instawp.xyz/ Blog - dead-donkey-mnhb2.instawp.xyz/ One Pager - stormy-salamander-r6ek0.instawp.xyz/ Free themes here www.pootlepress.com/free-wordpress-themes/

[@chadreilly]

Thanks! But I'm not sure I understand the terminology here. What's the difference between 2024 "theme," and a themes you created? @@jamiewp

[@jamiewp]

@@chadreilly my themes were made using 2024 as the base. If you want to, with block themes, you can create a design using the 2024 theme, and then export as a brand new theme using the create block theme plugin. Let me know if that makes sense.

[@DiegoPereyra]

Very cool Jamie, thanks... What happens when you change the view for mobile? Does it still holds? Have a nice day...!

[@jamiewp]

Great question - i should have included that in the video . Yes it looks great on a mobile because I am used core group and cover blocks which flex - here's a screenshot www.pootlepress.com/wp-content/uploads/2024/02/Screenshot-2024-02-22-at-14.31.01.png

[@DiegoPereyra]

It does look great in mobile Jamie, nice work, nice idea, great iconic look with simple steps...! Thanks. @@jamiewp

[@jamiewp]

@@DiegoPereyra 👍

[@royby]

Thank yet again for the video Jamie. How can you upload an image to chatgpt? I can't find a way to do that. Cheers

[@jamiewp]

It may be you need the pro version- do you have that?

[@royby]

No, I don't have the pro version. I hunted around and discovered you need the alpha of their next iteration to be able to upload images and, yes you're correct, to access the alpha you need the pro version. Exciting times in the tech world huh? 😊

[@jamiewp]

Sure is@@royby 👍

[@pierreperreault1287]

Still new to wordpress and I love your channell! I'm a photographer and I love what I can do with wordpress, the only thing I haven't found to my taste, is having a nice & easy photo gallery (with an easy way to modify the layout) which is really easy on "builders" like Squarespace, Wix, etc... I know Squarespace, Wix, etc are not targeted to the same market... Any idea (beside using a paid gallery plug-in, which even then are not that great)? Thanks and have a great day!

[@jamiewp]

Thank you 🙏 Have you tried using the gallery block that comes with WordPress ?

[@pierreperreault1287]

Yes, I've tried it , but I've got so so results... I'll give it another try I'm pretty sure an episode for photographers (with emphasis on galleries, portfolios, sliders and lightbox) would interest a lot of people! :)

[@jamiewp]

@@pierreperreault1287 Yes i'm planning a video on that subject - if you can share an example of the gallery you are trying to make i'll try to recreate it :)

[@pierreperreault1287]

@@jamiewp , thanks for all of this! I don't know why but my 2 previous replies seems to have been erased? Maybr because I've posted links to gallery examples?

[@jamiewp]

@@pierreperreault1287 Yup KZbin sometimes randomly deletes comments (which is pretty annoying) Feel free to email though :)

[@kafinetIT]

Appreciated

[@jamiewp]

👍

[@mohdom6]

nice video I always had this in mind. btw do you think you can recrate meduim main page in block editor? I tried and it proven to be tricky without css

[@jamiewp]

Most of Medium is possible with core blocks apart from the way the header fades when you scroll.

[@antygod]

i have a question. in your beginner mistake video you said to never add content in the editor, yet you did in this video. was there a reason for that? or was it just convince as it was a single page demo? i've recently moved from a non-WP page builder to WP and i'm trying to get my head around how front pages/homepages differ between the two.

[@alexandrepessoa]

great video and another example of how stock WP can deliver amazing results and, more than that, how intelligently it has been built, rather than going the gazzillion blocks rabbit hole one seen in the "block packs" or "block builders". You just didn't cover the font spacing, a common design tecnique in print and web design and that makes a huge difference in headings (reduce letter spacing for focusing the reader attention on large fonts), that's used in natgeo mag cover to create separate content containers. Overall, amazing and keep up the good work, you are probably the best WP advocate, showing the masses its true power :-)

[@jamiewp]

Thank you very much for your kind words 😀 I didn't actually use letter spacing but i edited it out 🤦‍♂

[@SeanClarke]

I really appreciate your vids. How did you figure out how to do all this?

[@jamiewp]

Lots of hard work 👍

[@dinorossi6611]

You did not tell us in the video how did you create the cover image of the Afghani lady.

[@jamiewp]

It was the midjourney section 👍

[@sujitbiswasseo]

Always fun to see your videos. However, you are forgetting to publish videos with classic themes as most of the videos published are of FSE themes.

[@jamiewp]

Noted 👍

[@finditukcom]

Awesome, thanks for sharing 🙂

[@jamiewp]

thanks for watching :)

[@SeanClarke]

No! 1995 can't be 30 years ago 😭

[@jamiewp]

Urgh i know