Create Your Header with GenerateBlocks 🤯 Say goodbye to the limitations of the customizer! 👋

Подписаться 11 тыс.

Просмотров 12 тыс.

50% 1

This might be my favorite trick of the year: Creating your header with the full arsenal of the block editor (thanks to a little bit of code from my man Taylor!).
In this video I'm going to show you how you can insert your GeneratePress menu via a shortcode - and how that unlocks endless possibilities when it comes to designing and developing totally unique headers.
Get Taylor's code here: snippets.tdray...
Checkout the Snippet Club here: snippetclub.com/
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.co...
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.co...
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.co...
Write proposals in less than 15 minutes with this template: theadminbar.co...
Fill your prospect pipeline in this 3-week challenge: theadminbar.co...
5 Airtable templates I use to run my agency: theadminbar.co...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.co...
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.co...
Kyle on Twitter: / kylevandeusen

Опубликовано:

5 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@NittyGrittyTechy 4 месяца назад

YES!! thank you for sharing this shortcode and the video. I designed my menu with no outside buttons or text. I did it right inside the menu and added CSS and it works great. This way it keeps my style on responsive. For those that do not know, since the new GP update you will need to disable the primary menu. Under primary menu you should see Navigation Location. Click the dropdown and choose No Navigation. Be sure to have GP premium and activate the Menu Plus (Set up a mobile header, sticky navigation or off-canvas panel.). Then under menus you need to manually add a menu to the Off Canvas Menu. This will allow the menu to work on responsive views. Hope this helps :)

@Ron_Crow 5 дней назад

Please explain a little more? I am having an issue with this when someone clicks my menu on mobile. I am hoping what you are saying addresses my issue. Sorry, I am new to GP.

@upstatenyrider8413 9 месяцев назад

Well, you just took everything to another level. Working with the GP header is a PITA - this provides absolute control over everything, offers the ability for custom headers based on location rules and dynamic content changes when linked with ACF. Going to be interesting in implementing a custom header with sticky nav... That's another GP feature that is full of difficulties especially when using a mega menu. Great Stuff Kyle - many thanks!!!

@JulianStark Год назад

Great video! I also hate working with the core menu block. You solved another one of my problems 😉

@torbenheikelvinther4535 Год назад

@IainMace 8 месяцев назад

Like the other comments, this is a truly game changing video - there are SO many nuggets in here. The standard nav block is basically unusable ...I'm so happy to have seen this video. I recently found your channel and I have learned so much in the last few days (super grateful). You really know your stuff, your method of presenting makes everything nice and clear... but most importantly you know your audience well and your subject choice is absolutely spot on... thanks!

@anarosiris 7 месяцев назад

I thank you for sharing this super video. You are simply a great expert in Generateblocks and a super teacher. A hug from southern Spain.

@hamid-n9 Год назад

Awesome! Always a treat to watch your videos.

@TheAdminBar Год назад

Thanks so much - I'm glad you enjoyed it!

@landonporter77 Год назад

You are the man Kyle, thank you

@TheAdminBar Год назад

Glad you enjoyed!

@adamwrightdesign Год назад

Wow, this is cool! Man, I never even explored building the header out this way....opens up a lot of possibilities!

@TheAdminBar Год назад

Yeah, certainly makes it more flexible, huh?

@jamesgedney-higham456 Год назад

Great video, just been struggling with these issues on my site so cant wait to apply this!

@TheAdminBar Год назад

I'd love to know how it goes for you!

@EdHallPhotoFL Год назад

Another great tutorial Kyle! but seriously I'm trying to finish this big site and you keep giving all these ways that would make it even better🤣

@TheAdminBar Год назад

😂 I'll stop!

@dmdesign Год назад

Thanks Kyle, great video (as always). Is the shortcode limited to the Primary menu? Is there a way to call a different menu?

@yGrumpyStegosaurus Год назад

Nice, thanks for the tut!! Have you tried switching the order of the menu toggle with the CTA, after it becomes a hamburger, so the hamburger can be the last item and Log in and button in the middle. I think the hamburger being in the middle on smaller screen makes it less visible, while the CTA is always visible with that big bright button.

@TheAdminBar Год назад

Good thinking - I'll give it a shot. Should be easy with flexbox!

@ProudPupDigital Год назад

Hi Kyle. I’ve completed a header based on the tut. Awesome thanks! I do have a question tho. When I was looking at the mobile view the menu wasn’t breaking into a hamburger menu. Are there settings in customizer that need to be turned on in order for this to happen? Use nav as menu on mobile?

@TedBream 11 месяцев назад

Appreciate the video! Is there a way to make this custom header sticky?

@TheAdminBar 11 месяцев назад

Sure, with CSS :) Give it a class, add position:sticky;

@VikyTiague-z2v Год назад

Always Great value. Thank Kyle.

@TheAdminBar Год назад

Glad you enjoyed it!

@bradenrooke2349 6 месяцев назад

Great video! What is the colour picker you have set up on you Mac bar? That's so handy!

@jeffbarnhart6441 Год назад

Good video. been searching for the snippet part. probably better idea to move the sale portion to a preheader. less confusing.

@TheAdminBar Год назад

Design it however you'd like!

@Simulacra001 6 месяцев назад

Another great tutorial. Thank you. Oh and the # symbol is called a ‘hash’. This is a pound sign: £ 😝

@BradWarren 6 месяцев назад

I was using a Site ibrary theme and I got odd behavior. But disabling Use Navigation as Header ( Customizing ▸ Layout▸ Header ) fixed this oddity. Works Great! Have you talked creating a Mega Menu using blocks?

@torbenheikelvinther4535 10 месяцев назад

Nice tutorial as always Kyle. I wonder how you define the font for the navigation as you can't style the short code block? As far as I understand from your other video about your new starter site, you only define the body-font and headline-font in the customizer and then create a bunch of CSS variables (brilliant btw!). But I can't see you create a variable for your nav menu!? But maybe a solution could be to add the class "gb-headline-body-s" to your "GP Nav" container block in order to get the same setting as the Log In in your example header?

@TheAdminBar 10 месяцев назад

I think you'd either do it through the customizer>typography (like most normal people 😂) or write CSS for it.

@torbenheikelvinther4535 10 месяцев назад

@@TheAdminBar Sure. I was just curious to hear how you do it :-) It could be that you've come up with something clever so that you only have to make corrections in one place (CSS instead of Customizer).

@SoufianeBenali-t9j 7 месяцев назад

This is awesome. Thank you. Do you have any way to also create a mega menu (with pictures and everything) using GenerateBlocks, in combination with this header?

@TheAdminBar 7 месяцев назад

There's a tutorial on snippetclub(.)com

@SoufianeBenali-t9j 7 месяцев назад

Thanks, I had indeed seen this link on another comment down below. However when I do everything as described on snippet club (also subscribed to get access to the paid snippets), then insert the menu in [shortcode] section of the header (as you've done in this video), the mega menu visually doesn't cover 100% (width) of the screen. It only shows right below the "[shortcode]" block in a very small and cramped way. Is it possible to get it larger (full screen and fitting) and do you perhaps have a fix for that? :/ @@TheAdminBar

@NicholasZein Год назад

Great video! 👌 Just a heads up though, the thumbnail is missing a 'T'. 😉

@TheAdminBar Год назад

🙄 ugh, you're right 😭 Thank you, Nicholas!

@troyphillips6820 6 месяцев назад

Can you create a sticky navigation with this setup?

@anjak.8583 Год назад

I have another question. What is the tool you are using at 8:05 to pick the color? Obviously love the video, too ;-)

@TheAdminBar Год назад

It's just the system color picker on Mac

@anjak.8583 Год назад

@@TheAdminBar thanks. I am VERY new to MAC so I am a little lost. I only find "Digital Color Meter" on my mac which looks different and is not that little drop icon in the top bar. But I will figure it out and leave you to it.... Thanks again for the great videos.

@SoniaZannoni 3 месяца назад

Hey Kyle, awesome tutorial, thanks! I have a question about the code snippet. Do I have to use the code snippet plugin to add the code, or can I use the element (hook) instead? If so, under the hook section, what location do I choose? I guess I have to check the boxes to execute shortcode and PHP. What about the priority setting? Do I leave at 10? Thanks.

@leonardo_iann Год назад

This is very huge, thanks Kyle! I hope Gp/Gb team in the future will implement these possibilities as basic options! Ps: snippet expired

@tdrayson Год назад

The snippet link should be fixed

@TheAdminBar Год назад

Sorry about that. Thankfully @tdrayson fixed it 😅

@markatgraf1x Год назад

Game changer 🙌🏻

@TheAdminBar Год назад

Pretty epic, eh??

@angelhernandezbiz 2 месяца назад

The shortcut doesn't work, please can you explain the pre-settings needed to make it work and integrate the menu?

@CGInnovation-js6rk 4 месяца назад

Great video Kyle but it’s obvious that the no-ul snippet is a “no brained” to most, because I don’t see any questions about it, but I can’t get mine to work. I gave my header text a class of no-text-ul In the customizer, in Additional CSS I added: .no-text-ul { text-decoration: none; } But if I use: text-decoration: double underline hotpink; The text displays the same as original except that it has the double underline and the bottom line is hotpink. I can’t get the original underline to go away.

@TheAdminBar 4 месяца назад

It's probably just not specific enough. Try targeting the "a" after the no-text-ul

@CGInnovation-js6rk 4 месяца назад

BOOM! 👍🏼👍🏼 Thanks Kyle!

@syedwasiqbukhari Год назад

great video, i recently did this with one of my client's project, but i used the default wordpress nav block and it was working okay as well, why didnt you used that kyle?

@TheAdminBar Год назад

I've found the nav block SUPER difficult to work with. Might just be limitations in my skills.. but it felt like I had to write a TON of CSS to get it to look the way I wanted.

@WalikhanOmari 8 месяцев назад

Great video and tutorial, I have found one issue regarding Primary menu inside header, and that was the shortcode [gp_nav] not implemented and the menu looks disappeared, is that have any solution. Thank you

@strikerd8821 Месяц назад

do I need a plugin to be able to ad Elements to Appearance menu? Cause in current version of WP with a GeneratePress Child- theme I dont have such "Elements" option. thx in advance.

@strikerd8821 Месяц назад

Looks like Elements is only available in premium version of GP. Is there another way how I can do it without to pay for premium?

@Presstwood 4 месяца назад

Not sure if missing something but is the snippet needed? Can't you just build directly in GP Elements then use the header hook?

@TheAdminBar 4 месяца назад

You can't insert the menu that GP produces without the snippet. You could use the nav block, but that leaves a lot to be desired.

@webdev.vidyutpal 11 месяцев назад

Gp Nav shortcode is not working

@mitchmartinez1031 11 месяцев назад

For me it's working in that it brings in the nav into the element - but is not disabling the primary nav - so now I have two nav bars at the top... Disabling the new nav that I'm trying to create until the original nav can actually be hidden

@webdev.vidyutpal 11 месяцев назад

@@mitchmartinez1031 go to customizer - header and disable header as nav

@dynurha 3 месяца назад

Hallo, Why is it that when I try to change the hook header element, there is no change in the appearance of my website?

@thantran3051 Год назад

nice video. Could U help me to made vertical menu , plz ?? .

@APRR123 Год назад

Hi please help create a video on load more button for loop elements

@HindiLite-j6u 10 месяцев назад

Can i use this type of header for blogs

@TheAdminBar 10 месяцев назад

Sure! Just make sure the Element is set to display on your blogs!

@evanbaker6375 9 месяцев назад

I'm new to trying to work with CSS and generatepress itself, but with the nav menu, I love how your demo works, but wondering how to set the background color of it. It's currently white on a site that I'm trying to work on to learn how to use all this. I'd like to set the color to a different color if possible.

@TheAdminBar 9 месяцев назад

Just use the color options in the Customizer.

@evanbaker6375 9 месяцев назад

@@TheAdminBar 🙈….. didn’t even think of that thanks. And thanks for all the great videos

@JoeMendel 10 месяцев назад

Is this how you created the mega menu on the TAB site?

@TheAdminBar 10 месяцев назад

No, that was done here: snippetclub.com/building-a-mega-menu-with-generatepress-blocks/

@aditmb Год назад

Thanks for the tutorial kyle. I want to switch to gp/gb from another theme, but i'm having difficulties adding custom font. I read the add local font article but struggling to add non google font, even taking css from fontsquirrel but still no go. Can you make video about that please?

@TheAdminBar Год назад

I would just use a plugin. The brainstorm force team has one that works fine.

@aditmb Год назад

@@TheAdminBar oh? I used that with my astra theme. I never really tried that since I thought it's exclusive for brainstorm. Thanks man!

@aditmb Год назад

@@TheAdminBar tried to install a generatepress theme and disable my current astra theme but leaving my font plugin active. Still can't see my futurapt in my typhography. With the brainstorm font plugin I should be able to see it withouth additional css right?

@thedoctor16 11 месяцев назад

Why not just avoid the snippit and use the WP navigation block with this method? Then you can choose the menu you want instead of being limited to one.

@B0binch0 6 месяцев назад

this thing is not working anymore i think

@bitkahuna Год назад

well that's certainly not simple. 😂

@TheAdminBar Год назад

What are you finding difficult?

@SparaCash Год назад

Snippet has expired buddy

@RiddleRebel Год назад

add_shortcode ( 'gp_nav', 'tct_gp_nav' ); function tct_gp_nav( $atts ) { ob_start(); generate_navigation_position(); return ob_get_clean(); }

@tdrayson Год назад

The snippet link should be fixed

@TheAdminBar Год назад

Sorry about that. Thankfully @tdrayson fixed it 😅

@Ron_Crow 6 дней назад

Sigh, why did you remove my comment?

@TheAdminBar 4 дня назад

Don't know or remember, but I only remove things if people are total asshats. Were you being an asshat, Ron?

@Ron_Crow 4 дня назад

@@TheAdminBar No, I simply asked for assistance to figure out why my site's menu was displaying incorrectly with 0% asshatness. I find your comment a bit unnecessarily sharp, but I appreciate the feedback. Would you say you're being an asshat here?