- 328
- 947 433
The Admin Bar
United States
เข้าร่วมเมื่อ 14 ต.ค. 2018
Voted The #1 WordPress Community (4 years running!), TAB is the place for WordPress professionals to ask questions, find answers, and goof around with the best group of agency owners and freelancers across the globe.
This channel brings you WordPress tutorials, interviews, and product demos by Kyle Van Deusen, Founder @ The Admin Bar
This channel brings you WordPress tutorials, interviews, and product demos by Kyle Van Deusen, Founder @ The Admin Bar
Making Layouts UNBREAKABLE! Using nth-of-type to solve this annoying problem!
One of my clients recently came back to me frustrated that their About page had become a total mess.
Embarrassingly, I kinda set them up for failure 😬
So, in today's video, I'm going to show you how I used a nth-of-type selector to help make their layout UNBREAKABLE!
💻 Visit Our Website: theadmin.bar/yt-tab
🗨 Join Our Free Community: theadmin.bar/yt-community
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/yt-tfc
🔁 Sell More Care Plans: theadmin.bar/yt-wom
🧮 Use My Website Price Calculator: theadmin.bar/yt-calculator
📜 Get My Proposal Template: theadmin.bar/yt-proposal
☑️ Get More Done with My Checklists: theadmin.bar/yt-checklists
🔴 Live Event Schedule: theadmin.bar/yt-events
🔧 The Tools I Use: theadmin.bar/yt-tools
⚡ My Agency, OGAL Web Design: theadmin.bar/yt-agency
0:00 Introduction: The About Page Problem
0:45 Building the Layout from Scratch
1:16 Creating the Team Cards
2:04 Adding Classes and Initial Styling
3:19 Duplicating and Spacing Team Cards
4:15 Responsive Adjustments
6:09 Challenges with Static Orders
6:47 Using Advanced Selectors for Automation
9:55 Testing the Automated Layout
10:57 Final Thoughts and Lessons Learned
Embarrassingly, I kinda set them up for failure 😬
So, in today's video, I'm going to show you how I used a nth-of-type selector to help make their layout UNBREAKABLE!
💻 Visit Our Website: theadmin.bar/yt-tab
🗨 Join Our Free Community: theadmin.bar/yt-community
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/yt-tfc
🔁 Sell More Care Plans: theadmin.bar/yt-wom
🧮 Use My Website Price Calculator: theadmin.bar/yt-calculator
📜 Get My Proposal Template: theadmin.bar/yt-proposal
☑️ Get More Done with My Checklists: theadmin.bar/yt-checklists
🔴 Live Event Schedule: theadmin.bar/yt-events
🔧 The Tools I Use: theadmin.bar/yt-tools
⚡ My Agency, OGAL Web Design: theadmin.bar/yt-agency
0:00 Introduction: The About Page Problem
0:45 Building the Layout from Scratch
1:16 Creating the Team Cards
2:04 Adding Classes and Initial Styling
3:19 Duplicating and Spacing Team Cards
4:15 Responsive Adjustments
6:09 Challenges with Static Orders
6:47 Using Advanced Selectors for Automation
9:55 Testing the Automated Layout
10:57 Final Thoughts and Lessons Learned
มุมมอง: 3 771
วีดีโอ
Using CSS Grid in GenerateBlocks (A literal and practical approach)
มุมมอง 644วันที่ผ่านมา
In last week's video, I showed you how to design using a 12-column grid in Figma - but I got questions about how to actually implement that in GenerateBlocks. That, of course, opens up Pandora's Box on CSS grid 😅 So, in today's video, I'll show you how you can take that exact 12-column layout and literally replicate it in GenerateBlocks. Then, we'll take a look at a more practical approach for ...
The Truth About "The Grid" (it's less complicated than you think, & more powerful than you realize)
มุมมอง 1.5K14 วันที่ผ่านมา
You’ve probably heard designers talking about “the grid”. But, if you’re not a designer that term might sound a bit abstract or confusing. So when people ask me about it, my aim is to always simplify it. A grid is just a framework of evenly spaced lines that helps organize and align elements. Instead of having an infinite number of sizes, the grid helps you narrow it down to a reasonable amount...
The ALL NEW Query Block in GenerateBlocks 2.0 🤯 Repeaters, Options Pages, CSS Grid, and More!
มุมมอง 1.5K21 วันที่ผ่านมา
In this video we explore the differences between the "old" and "new" query loop blocks in GenerateBlocks. The new 2.0 release has a ton of upgrades that not only make your query loops more powerful, but allow for better semantic HTML, and more styling control! Check out all the new goodies! 💻 Visit Our Website: theadmin.bar/yt-tab 🗨 Join Our Free Community: theadmin.bar/yt-community 📨 Get the B...
Creating Custom Breakpoints in GenerateBlocks - It's easy and solves a ton of frustration!
มุมมอง 827หลายเดือนก่อน
In this video, I quickly explain the role of media queries and how they work within CSS. Then we take a look at the media queries (or "breakpoints") built into GenerateBlocks and show you how you can easily set up custom breakpoints to solve some of the frustrating design challenges when things aren't breaking just the way you want! 💻 Visit Our Website: theadmin.bar/yt-tab 🗨 Join Our Free Commu...
Figma Components are crazy-powerful (it's so easy to do!)
มุมมอง 655หลายเดือนก่อน
Figma can be a bit overwhelming if you're not using it day-in and day-out - but their components are something anyone using Figma should give a shot. Not only does it speed up your workflow, but it can help keep your designs much more consistent and scalable. I'll show you just how easy it is to create components with multiple variants (and even nested components) in seconds! 💻 Visit Our Websit...
GenerateBlocks NEW Dynamic Data System - What you need to know to use 2.0
มุมมอง 1.4Kหลายเดือนก่อน
The 2.0 release of GenerateBlocks brings in a whole new system for working with Dynamic Data. In today's video, I'm going to walk you through a practical example of all the different ways you can work with dynamic data in GB 2.0 by building out an author bio box. User Meta Tags: {{author_meta key:display_name}} {{author_meta key:first_name}} {{author_meta key:last_name}} {{author_meta key:user_...
Create a horizontal scroller with CSS Grid - An instant UI improvement for any blog grid!
มุมมอง 4Kหลายเดือนก่อน
In today's video, I'm going to show you how you can instantly improve the UI (especially on mobile) for any of your grids using just a few lines of CSS that create a simple horizontal scroller. This works in the new GenerateBlocks 2.0 (currently in Beta), thanks to the use of CSS grid. 💻 Visit Our Website: theadmin.bar/yt-tab 🗨 Join Our Free Community: theadmin.bar/yt-community 📨 Get the Best o...
I made a free plugin!
มุมมอง 2.4Kหลายเดือนก่อน
Something that was actually on my goals list a couple years ago has finally happened - I created a WordPress plugin! In today's video, I'm going to show you how it works and talk about why it might help improve your workflow. You can download Noted! for free at wordpress.org/plugins/noted 💻 Visit Our Website: theadmin.bar/yt-tab 🗨 Join Our Free Community: theadmin.bar/yt-community 📨 Get the Bes...
These subtle tweaks took my logo from amateur to professional (anyone can do it!)
มุมมอง 1.2K2 หลายเดือนก่อน
In the process of doing all the branding work for my new plugin, I ended up using a few little tricks to create a simple logo, that's both polished and professional. None of these take an art degree or rocket science - they’re the little things you pick up with years of experience. But luckily for you, you don’t have to spend years learning these things the hard way, I’ll show you in just over ...
My Care Plans just got a MASSIVE upgrade! Never Miss a Lead - Automated Form Testing (w/ CheckView)
มุมมอง 2.7K2 หลายเดือนก่อน
If you’ve ever received that dreaded email from a client saying their form isn’t working, you know the awful pit-in-your-stomach feeling. And if this has happened to you, you’re probably hoping those missed leads were at least stored somewhere. But even then, it’s embarrassing to follow up with people who think you’ve ignored them for weeks-or worse, months. This kind of problem can cost your c...
Nested loops with repeaters? F*ck yeah! GB 2.0 is gonna BLOW YOUR MIND! 🤯
มุมมอง 2.6K2 หลายเดือนก่อน
GenerateBlocks just released the alpha version of 2.0 - which has been rebuilt from the ground up for performance and accessibility. With it comes the ability to not only query ACF Repeater fields - but access to nest repeaters inside of repeaters 🤯 There is a *lot* to see in this release (maybe their biggest ever), but today I'm going to start by diving into the deep-end head-first to put all ...
Website Launch Process - Testing Performance, Accessibility & SEO and going LIVE with @instawp
มุมมอง 21K2 หลายเดือนก่อน
*Welcome to Episode 4 of "Layout to Live"!* In this series, I’ll take you step-by-step through my entire process of building a website from scratch using GeneratePress and GenerateBlocks. Over the next four weeks, we’ll dive deep into everything: - Design review & planning - Site architecture - Theming (with a custom child theme) - Making the site dynamic with a custom post type, custom field, ...
Global styles, query loops, dynamic data, modals, and more! [full site build w/@instawp]
มุมมอง 15K3 หลายเดือนก่อน
*Welcome to Episode 3 of "Layout to Live"!* In this series, I’ll take you step-by-step through my entire process of building a website from scratch using GeneratePress and GenerateBlocks. Over the next four weeks, we’ll dive deep into everything: - Design review & planning - Site architecture - Theming (with a custom child theme) - Making the site dynamic with a custom post type, custom field, ...
Website Theming, Custom Post Types, and Front-End Forms [full site build w/ @instawp]
มุมมอง 3.9K3 หลายเดือนก่อน
Website Theming, Custom Post Types, and Front-End Forms [full site build w/ @instawp]
Website Setup Process: Design, Specs, Child Theme Configuration & More! [full site build w/@instawp]
มุมมอง 13K3 หลายเดือนก่อน
Website Setup Process: Design, Specs, Child Theme Configuration & More! [full site build w/@instawp]
Building a form with conditional logic, calculations, multiple actions, & dynamic data using WS Form
มุมมอง 1.3K3 หลายเดือนก่อน
Building a form with conditional logic, calculations, multiple actions, & dynamic data using WS Form
Get paid to find issues with websites (accessibility, SEO, performance, compliance, and more!)
มุมมอง 1.3K4 หลายเดือนก่อน
Get paid to find issues with websites (accessibility, SEO, performance, compliance, and more!)
You've Never Used Taxonomies Like THIS! Create a remote control for your websites!
มุมมอง 2.7K4 หลายเดือนก่อน
You've Never Used Taxonomies Like THIS! Create a remote control for your websites!
Save your clients from THEMSELVES 😵 This surprising solution could transform WordPress security!
มุมมอง 1K4 หลายเดือนก่อน
Save your clients from THEMSELVES 😵 This surprising solution could transform WordPress security!
There’s More to Taxonomies than Categories and Tags!
มุมมอง 2K4 หลายเดือนก่อน
There’s More to Taxonomies than Categories and Tags!
A Web Designer's Secret Weapon for Endless Inspiration!
มุมมอง 8K5 หลายเดือนก่อน
A Web Designer's Secret Weapon for Endless Inspiration!
The easiest way to sell websites (and get paid for discovery!)
มุมมอง 7K6 หลายเดือนก่อน
The easiest way to sell websites (and get paid for discovery!)
They said my design would be too difficult to build... 🤷 Even called it "abusive" to developers...
มุมมอง 3.5K6 หลายเดือนก่อน
They said my design would be too difficult to build... 🤷 Even called it "abusive" to developers...
You'll never UNSEE this amateur design mistake (how to avoid "stripey" layouts on websites)
มุมมอง 25K6 หลายเดือนก่อน
You'll never UNSEE this amateur design mistake (how to avoid "stripey" layouts on websites)
Is this $5 host a potential replacement for Cloudways?
มุมมอง 3.2K6 หลายเดือนก่อน
Is this $5 host a potential replacement for Cloudways?
Top Tips for Typography: Tools & strategies to improve responsiveness, balance, and accessibility!
มุมมอง 3.2K7 หลายเดือนก่อน
Top Tips for Typography: Tools & strategies to improve responsiveness, balance, and accessibility!
Download My Brand New GeneratePress + GenerateBlocks Template!
มุมมอง 4.9K7 หลายเดือนก่อน
Download My Brand New GeneratePress GenerateBlocks Template!
5 Simple Tricks That Have Made Me a Better Designer (anyone can do it!)
มุมมอง 7K7 หลายเดือนก่อน
5 Simple Tricks That Have Made Me a Better Designer (anyone can do it!)
Hi Kyle, First of all, I want to sincerely thank you for the incredible educational videos you share on your channel about GeneratePress and GenerateBlocks. Your tutorials are not only practical but also game-changers for designers like me. I was wondering if you could create a comprehensive and highly practical video on customizing WooCommerce product pages using GeneratePress and GenerateBlocks alone, without relying on additional plugins. It would be immensely helpful to see a step-by-step guide from you on achieving a fully customized product page. Your expertise and clear explanations make complex tasks so much easier, and I believe such a tutorial would be highly valuable for many of your followers. I really hope you’ll consider this request! Thank you so much for everything you do, and looking forward to your next video! Best regards,
So you used the AI to make a plugin. Anyone can do this now. This is nothing special.
Sorry for the shitty life you must have. Hope trolling people on TH-cam gives you some glimmer of comfort in what must be a miserable existence
@@TheAdminBar Yes. Mission achieved. I ruined the wankers day. This so called expert is a joke. Your a joke to me.
I thought I am somewhat advanced CSS Wordpresser - but at the beginning of the video I only had a guess on what you're about to do, but not the actual code. Thanks for reminding me of that selector. Good job! 👏
Genius ❤ 🇧🇩
CSS Wizardry 🪄🤘
So, what's the plugin for the whole CSS integration to the block editor? Sorry, I'm new here
That's just GenerateBlocks :) I am using the latest beta version in this video.
@@TheAdminBar Yes, it's good that you have the GB logo in the thumbnail. It's tedious for you to have to repeat, but probably best if every video like this continues to state prominently that it's aimed at GB users, since everyone else might miss that and be confused.
@@TheAdminBar could we do that without GenerateBlocks or is it necessary? Why do you add a class and set all the css via the user interface?
Super <3
Glad you enjoyed!
This is great. A perfect example of “the computer” replacing manual work and saving time. Thank you for the code and demo.😊
Glad you enjoyed it 🙌 Thanks for the support!
Love From India, I learn many things from your videos. Please make video for mega menu using generatepress and sliding testimonials. Thanks & Regards Web Karo India
Send me some examples of what you're looking for. Mega menu and sliding testimonials can take many forms!
Which Beta version is this? Blocks Pro Version 2.0.0-beta.8 hasn't got it yet.
This may have been Beta 7 or 8 - I don't recall exactly.
Very helpful video! The first question I have is that I am noticing an issue where even my category pages are getting returned in the search results. Is there a way to ensure that only posts are returned on the search results page? Additionally, can you please provide the Post Meta Field for Yoast SEO, as that is the plugin I use and I'm not able to find it online myself.
Epic demo, I'm continuing to learn more and more about CSS grid thanks to you! Love these simple and easy walkthroughs 🙌
Great vid. Very useful
Great stuff. One tip: I think using negative track numbers for the right hand edge of content that spans the centre of the design is better (e.g. for the featured image, span: 1/-1 rather than 1/12) because if you change the number of columns (say to eight or fourteen) it will still span the full width as desired, without causing overflow or …um.. ‘underflow’?
Yes, I love doing that too! There were so many things I wanted to talk about, but tried to cut down for the sake of simplicity knowing that the people asking the questions that spurred this video really need an "intro" to Grid. Like I said - the interesting thing about grid is that it can be as simple or as complex as you want 🤣
sigh.... "Purchase the Premium plan to activate CSS customization"
any plans on an updated vid? The plugin has changed since ;-)
Edge cache is also available with Free Cloudflare
true, but like... bring it into GP/WP. am i missing an episode? i gotta figure out how to USE grids BETTER within GP
I'd be happy to do a follow up :) Which of the 3 layouts that I showed at the end would you most like to see @tylergebhard ?
@@TheAdminBar The first/main one would be good!
Publishing a follow up where we take this concept into GP/GB on Wednesday @DavePerth!
thank you, it did work perfectly on my computer, there is only 1 problem... when i look from a mac/ iphone otr Ipad.. the effect does'nt work anymore. do you know why?
I'm a fan of Piet Mondrian's "grids". No need for the lines to be evenly spaced 🧇 👍 🥳
Hey Kyle, just to let you know - last few videos have only had audio in the left ear. Maybe something you can check in your export settings. It's a bit annoying to listen to in headphones. FYI :) Keep it up!
Woah supe strange! Thanks for the heads up - I don't know what's gone wrong!
So, I just checked with my headphones on the computer and on my phone, and both channels seem to be working fine on my end 🤔
@@TheAdminBar That's odd! I have normal audio from your video "Create a horizontal scroller" then from "GenerateBlocks NEW Dynamic Data System" and the ones after, I only hear audio on left ear. 🤔it's not only left ear, but it's a lot louder than on right ear
Verrry strange. I'm gonna keep digging into it!
where are some good places to sell websites? Any place better than godaddy or afternic?
You probably don't share TH-cam videos often - but if you enjoy this video, I'd love if you considered sharing this with any of your developer friends or communities 🙏
Fluent Forms URL redirect string, I wanted to display it on the Thank You page, like in the video. But it doesn't work.
Thanks Kyle, this give me new idea for my new project.
Very helpful, Kyle. Thank you.
One question - Do you create new account for every client? Or rather add client's domains to your Cloudflare account?
I'm waiting for GB 2.0 launch to begin working with it on my site and you are my favorite TH-camr right now.
Thank you so much for the tutorial. I would love to see if this design can be done with Elementor Pro?
This video was a real eye-opener for me. The container width was an "Ah huh" moment. I've had my website for a long time and I've left most of it on default. That meant my containers were full-screen. When I heard "make it smaller", a light in my head finally went on. I tested it with one post and noticed a huge difference. It changed the balance of the page layout in a positive way. It looked like a book! Now it is easier to read. Actually, much of what this video contained is now being included in my blog. I have 500 posts so it's going to take a long time. Still, I feel The Admin Bar has pushed me in the right direction. Many, many thanks :)
I have question, how can I set the wrapper if the page is set to full width?, some of the container is set to full width
Hello, with the help of a views plugin, can we order posts according to the number of views? Using Meta Key? If so, which plugin would be compatible? Could you make a video about this? I think a lot of website owners are looking for such a feature. Thanks!
Seeing that you know Taylor Drayson can you ask him how to do this "Automatically calling custom functions in GenerateBlocks" and make a video about it?
Container queries are so cool. Thanks for the vid. It is not so easy but I guess i have to practise it.
Great video, thanks for that
Thanks Kyle! Waiting for next videos, can't wait to see what beautiful stuff we can achieve now! Ah ps: happy new year :D
your audio seems to be higher on left channel
A major issue I’ve had with forms is that spam filter plugins either blog the form from submitting with real entries or it filters real entries as spam so me and my clients aren’t getting the messages. We don’t realize unless a potential customer reaches out another way, which most don’t do. I’m going to try Turnstile and hopefully that solves it instead of other spam plugins. I’ve mainly had problems with Human Presence.
Nice, I’ll give it a try! I just found your YT. I’ve been in your FB group for years, but didn’t know you had a YT channel! I’ve been kinda avoiding FB lately but your group is one of the only reasons I still use it!
I love the last section of your vedio .
A slightly expanded version of the old video with Jonathan, which was very interesting. Just one small note. In rare cases, you may get unwanted results using 0 margin bottom for all the last paragraphs. For example, when your grid consists solely of paragraphs. When you jump, let's say, from 3 columns for desktops to two columns on tablets and 1 column on mobiles, you get a couple of inconsistent spacing.
Kyle, would you mind sharing the CSS that you briefly showed here: 1:31 Just today I thought I need some base CSS for GP, for fluid typography etc. Looks like you have it all figured out already!
I wish the GenerateBlocks team would bring back the 'generateblocks_media_query' filter and expand on it to allow custom, global breakpoints.
thank you worked seamslessy
Love your videos. They help me a lot!!!
Would be nice to have container queries instead of media queries. Or both.
You can do both :) I have a whole video on container queries :)
@@kylevandeuseni have looked for it but I couldn’t find the video
th-cam.com/video/fklCB3zYhqU/w-d-xo.htmlsi=cxLmbpP5XqrT_1zX
@ thank you 🙏🏼
Nowhere near as frustrating as the 150 Global Styles limit in GB :) That’s something I’d be really interested to hear about from you. How do you handle this limitation? Also, in the context of using Patterns in Cloud.
😳 Really? I have never heard about that.
@@Gojiyaravi Yeah. Me too. Until last week, when newly created styles just stopped working :) And according to GB support, only a few people have reached this limit so far. I'd bet that it will be more and more of us. Probably, following five Kevin Geary's PB:101 videos step by step should be enough to hit the limit :))
@ Yeah, I follow Kevin too! I haven't reached the limit but that's concerning. Let's see what Kyle thinks about this one.
I didn't realize that existed, but I will go complain about it to Tom. That's dumb.
@@kylevandeusen I've also asked the team earlier to communicate this topic. But I think it will be fair to expect a response after the holidays :) As Alvind from the support team explained - it was made to optimize performance. Excessive number of global styles can lead to issues like crashes. Sounds to me like some technical blocker under the hood. But the weird part is: "We generally don't expect users to create more than 150 global classes, as that's already quite extensive." I definitely need more :)