Building Gary Simon’s 2023
ฝัง
- เผยแพร่เมื่อ 10 ม.ค. 2023
- In this video, I show you how I recreated Gary Simon’s 2023 Crash Course design using GeneratePress and GenerateBlocks inside of WordPress.
I did use the alpha version of both the free and pro version of GenerateBlocks, so there are lots of lessons on how to use all the new flexbox controls along the way.
Make sure to check out Gary’s original videos, and check out his two courses at DesignCourse.com
UX/UI Crash Course: • The UI/UX Crash Course...
Frontend Development Crash Course: • The 2023 Frontend Deve...
Design Course: designcourse.com/
QUESTIONS? Email kyle@theadminbar.com
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.com/group/
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen
![แล้วแต่เวรแต่กรรม - ครูศรีหนุ่ม [OFFICIAL MV]](http://i.ytimg.com/vi/Xide0fkAS8g/mqdefault.jpg)
Awesome!
Thanks, Gary! 🙌
If you get something out of this video, please hit the like button - and if you wanna see more, consider subscribing!
Kyle, I learn something new every time I watch your new videos.
Thank you for keeping this channel going.
Thanks so much for that! I'm happy you have found them useful!
This was so amazing to watch and it continues to prove that GenerateBlocks & GeneratePress is a great and refreshing choice.
So glad you enjoyed it!
great!
Glad you enjoyed!
Awesome stuff, feeling smarter just watching this. Thanks !
:) Wahoo! Glad you enjoyed!
This is so awesome and you make it look so simple to do. I know some CSS but I definitely learned a huge more stuff here. Thanks a lot and please continue to create more videos like this one!
Glad you enjoyed it! 2 years ago I didn't know how to even spell CSS 😅 Just takes patience and practice. I'm in no means a master now, but I feel a lot more comfortable!
Great stuff, Kyle. You bring all the ingredients for success and I am a big fan of your tutorials.
Thanks so much, I really appreciate that!
Love This ♥
Thanks! I'm so happy you liked lit!
Kyle, I subscribed to your channel only for videos like these! Thanks a lot. Keep up the great work! 🙂
Thanks a lot! I really appreciate that! I'll do my best!
Hi Kyle, can we use Generateblocks to create a home page where we have different sections showing posts of different categories?
Man, this looked fun! The new alpha controls are 🔥
Yes they are! 🙌
I built this out using generatepress but when I went to the tablet view, the 3 right side boxes were messed up. when I changed them, it changed the desktop view. I'm wondering if this is a bug? Does generatepress have elements that have a device setting? I know kadence does.
Great vid, Kyle. You rock!
Too kind :) Glad you enjoyed!
Great video. Many thanks. I am looking forward for the final release of the update.
Thanks bud, I'm glad you enjoyed it!
Great Video, Kyle!
Thanks, I appreciate that!
Do you know weather this could be done in Elementor as well? The Nav Menu CSS?
You make this look effortless! Great video mate
Don't ask me how many takes it took ;)
Another Vote for Losing It. Such a fun fast track 🔥👍
awesome tutorial ! I've learnt a lot about GB
Thanks so much! Glad it was helpful!
how do you make this design work with mobile?
Great job Kyle, really enjoyed it! Question - when do you prefer to use the Grid block and when the Flex options for the Container block?
I'm still trying to figure out where I'll still use the Grid block. It is, sometimes, just easier to drop it in and go... but I haven't come up with a "system" of when to use it or not.
Can we use latest version of generatblocks Tab features as a dropdown list on a single button like category dropdown option
Humm that I'm not sure about. Maybe with the accordion? That would be a good test!
I loved this, thank you. Blimey, I remember when you didn't really know CSS! What tool did you use to copy and paste the button colour please? I've been using the eye dropper extension for years to find a colour on a website and it doesn't have that capability. Thank you!
I think I just copied/pasted out of figma - but I use the Hoverify extension for this all the time. It does a million handy things!
@@TheAdminBar Doh! Yes of course you were in Figma, not on a website. I love Hoverify! Just checked and I hadn't even noticed it was available on right click. Habits can be a bad thing - I've only been using Hoverify for a couple of years 😂 Thanks again 🙂
the icon alignment seems to have disappeared, no ?
I thought you are going to use image with absolute position for sure, then Bam! css after.
Never thought we could do that.
Yeah, I think you COULD go either way there. What I like about using the :after is that then the image is just part of the CSS and not the HTML. It's only a design accent, so there's no real reason for it to be part of the HTML.
Ehy Kyle! 26:00, with the new version of Gb are we able to implement effects like this? Im playing around but im not sure!
Yep, you can do all of that within the editor now without writing a single line of code! I got a video coming out on that :)
@@TheAdminBar Super, can't wait!🙌
Kyle I have a proposal for another video 😂😂😂: if you have a look at Gary's homepage, there is a section headlined "The Curriculum Roadmap". In this section he has several green dots which are linked kind of diagonally with each other. In mobile view they become vertical lines. I have now spent 2 hrs in devtools of chrome and firefox and I am not able to even get a slight clue of how something like this is done. Maybe Gary doesn't mind if you do that 😇
Ahh, just checked that out - super nifty... But I have no clue! 😂
cool
Glad you enjoyed!
At about 13:35, you add a 50/50 grid. I see the convenience in that, but why would you use a Grid and not a Container with Flex? Isn't the point to leverage the new features? Or is this a simple convenience issue?
(I'm really sorry for the uber-picky question, but in embracing GB + GP (which i absolutely love!) I'm really trying to get a good handle what components to use and when to use them.) :)
That's a REALLY great question actually. The Grid block is not going away and I think in some cases it does make things "simple". Sometimes flexbox controls might be more than you really need.
If I'm 100% honest, I'm still trying to figure out when I'll use what. Obviously it's just now in alpha and I think I'll just have to play around with it a bit to figure out when I use flex and when I use a grid block.
@@TheAdminBarAfter watching Jonathan's walkthrough, I agree 100%. While Flex will provide excellent granularity (and I'll probably use it most of the time) Grid may be perfect for those "just need to drop in some columns" moments.
Does anybody know when the final version will be released?
The alpha versions just got released on Wednesday (Jan 11th). Typically the alpha/beta stage takes about a month until final release. However, this is a pretty big change (one of the biggest for GB), so I wouldn't be surprised if it were a little longer. If I was a betting man, I'd say no earlier than Feb 15.
I'm only 9 minutes in and you're awesome to share as always. A thing though... why complicating the css with non selectig the last child for right margin? Why don't you just give a margin-left? :)
hahah thank you! :) Yeah, I guess there are plenty of ways to do it ;-) I think if you did the left-margin, you'd still want to exclude the FIRST item so when the browser window is smaller the spacing isn't funky on the left of the first item. 6 of 1, half a dozen of the other!
mobile versiion plis