Blocksy Theme Header Builder: Create an AWESOME Sticky Website Header Like Apple.com (FOR FREE)

hello all you website builders out there in today's video we are going to walk through how to use the bloxy wordpress theme to build an absolutely stellar header on your wordpress website and for inspiration today we're gonna look at apple.com and try to replicate some of the best pieces of their header and apply it to our website and we're gonna start from complete scratch today using the bloxy wordpress theme and diving really deeply into the bloxy header builder on your website the things that we'll do and that you'll have as an outcome today is a sticky header on your wordpress website we'll build these three different sections and you'll have an awesome looking mobile header as well where if we look at how apple looks on mobile is they have a beautiful header here with a nice fly out modal navigation so in this tutorial we're going to dive into how to use bloxy header builder uh and get everything going from soup to nuts for your wordpress website header today so let's dive on in on our website here we have a complete bare setup you'll see it's just using the 2020 or 2021 wordpress theme at the moment it looks like 2020. so the first thing that we're going to do is actually install the bloxy wordpress theme so go into themes click on add new and search for our friends bloxy and it will be this one right here so we're gonna install this puppy and activate it before we do anything and dive into the the website builder or the header builder inside of bloxy we're going to go up to where we see this bloxy sidebar navigation here there might be a little moto pop-up for you that asks you install the bloxy companion go ahead and do that and what that does is it adds this control panel on the left side and the upper side of your wordpress nav bar that gives you control over your theme in a much more powerful way and the first thing that we're going to do is click on starter sites and feel free to pick any of these starter sites for today's demonstration because apple has this grayish section here we're going to go ahead and install this modern shop so we're going to click import you'll see in this you'll have a child theme automatically installed this is great go ahead and add that what this does is if you add any custom code one day to your wordpress website into the functions file in your theme you're not going to corrupt or override any of the changes that you make on the non-child bloxy theme so let's go ahead and do that and for our web page builder we'll choose elementor and then it's recommending some plugins for us to activate and install and let's make this a complete clean install if you have content on your website already uncheck this we don't want to override any of the content or images or pages that you have today so really make sure to uncheck this but for today since we're starting from scratch we're going to go completely clean install this shouldn't take too long anywhere from 20 seconds to maybe 60 seconds depending upon your hosting provider um we're using this in a local environment so it's just using my computer to to do all of this so once this clean install is done you're gonna have a pretty good looking modern shop already and before we dive into any of the details on making your page archives or your product pages or your home page look better we're going to focus just in this video on how to use the bloxy header builder to make a beautiful header in wordpress a sticky header in wordpress and then make it totally mobile responsive so it looks awesome so here's our theme with the starter site up and running and you can see right now that the header takes up quite a bit of real estate and in apple's case they have three distinct sections on their header this top row middle row and bottom row and we're going to replicate almost exactly what apple's done on our website so in order to do that now that we've installed this dummy content and have this starter theme a starter site taken over the look and feel of our website let's go ahead and click the customize button in the upper left here and this is going to open up all of your customization options inside of bloxy we're not going to go through everything today and we're mainly going to live in this header section but as you can see there's a lot of advanced functionality and easy customizations that you can make using bloxy to make your website exactly the way you want which is why we love bloxy so let's go ahead and click into our header section and off the bat you're going to see a few things i'm going to walk through the screen real quick just so you have a lay in the land and understand everything at your disposal here so inside of the left pane when you click into headers you're going to see all of your widgets that you can use to drag right into your website so for example if we wanted to add a button let's say maybe right next to those social icons up here we can just click and drag this button right onto our webpage and voila there's our button if we wanted to move our logo around i'll show you how to do that in just a second but all of these widgets here give your website additional functionality things like a search box rather than just the search icon so in order to replicate what we're going to use as inspiration on apple.com we're going to need our logo in the upper left our menu right here in the center of the top row a search box and our cart icon and let's just actually get things arranged here so we can start following along so here's our modern shop logo let's bring that to the top row on the left hand side just like apple has the apple icon on the top left hand side actually before we do anything else i'm going to give you a couple more bits of information around the bloxy header builder as you can see as i hover over these different rows bloxy's labeled them top row main row and bottom row and then there's settings icons that you can click into here to start manipulating any of the style of those given rows so this is perfect because we're going to go in and do a lot of customizations to make it look exactly the way we want and each row has its own set of settings so we'll continue to play with that in just a minute let's go back to apple looks like the top row also has the navigation right in the middle so let's take that menu one and slide it right here in the middle now we can see our home shop products about us contact us on the top row which is exactly what we want then they have a search icon and a cart icon so let's drag our search icon up here to the right let me move my face over here now we have search and then let's move cart right up next to that now we have search cart menu and our logo and if we use this fly out arrow over here we can now see what it will look like live on our website this is the beauty of the bloxy header builder is it makes it really easy and intuitive to drag and drop and start manipulating all of your content here so now let's take a peek back at apple and start to see what row two looks like it is just one big row with a link right in the middle with a blue background so let's just try to figure out the best way to do this now so we're going to get rid of our social icons get rid of our button and get rid of this account widget and it looks like our main row height is quite a bit let's click into apple just to see what their height is here we right click inspect element and hover over it looks like it's a 44 pixel height as you can see in the upper left of the screen there so we're going to change this to be exactly the way we wanted it with apple perfect so let's go back and drag in a [Music] let's see let's do an html box right here in the middle now we have our sample text in a 44 height main row and let's now turn uh the the background of this row into the blue so i'm gonna right click inspect this element over here and now it looks like apple uses this color so we're going to copy this hex code go back into our bloxy demo header builder click on the main row settings this is where we're going to manipulate a lot of the the row information here and we're going to click on design and now we have our color picker right here as you can see it's set to white at the moment let's click on color and then this hex section paste that color that we just took right from apple's website now you can see we have this blue bar the same way apple has this blue bar what we're going to do now is turn this sample text into a link that looks just like apple so let's click into the html section maybe verbatim copy what apple has here and as you can see it right now it's linking to apple if you want to edit where that link is going to click on edit and now we can just have this go to you know our slash learn more page if we had one of those so now we have the button in our middle row but it looks like the colors are yellow so we're going to go back and manipulate what that looks like here in just a second so let's do that actually right now while we're at it so in this main row we're still on this html widget as you can see we're customizing that we added our link we go into the designer of the html widget and we can see our text initial our link initial and our link hover so because this is a hyperlink what we're going to do is change our link initial to white which you can do in many ways either change the hex color here click on our color picker at the top if you have that preset white already added there or if it were that yellow or black color or red color you can just click and drag around this color wheel to get the exact color that you want now we're on white we can click out of this and we have our white uh text right here starting to look a lot like apple looks like their font size is smaller than our so let's try to turn down our font size a bit let's lower it so we can click on the 15 pixel font size and then let's make this smaller i think theirs was 14 pixels on their website so we'll do 14 pixels on our website and the last thing is when we hover over this you see how it's that kind of horrid orange yellow color let's see what apple does when you hover over theirs their stays white and just underlines ours is already underlined which we might be able to change in our link settings but let's just make this a little bit off-white so we can show people that there is some sort of hover effect happening here so ours are now looking white to a slight gray which i kind of like a lot so we're going to stick with that and we're going to click publish just to save our changes so far so now we have our main header row up here with our logo the navigation the search and the cart which we'll edit in just a little bit we have our main row which is that uh link text here that's going to direct people throughout our website and then we want to build a bottom row with another call to action it looks like this one has more of a gray background so let's go ahead and add that here as well so i think you're starting to get the hang of this if you're following along nicely we have our bottom row we're going to set this to that 44 pixel height the same way we did the middle row and what we're going to do is change the design to be a little bit more gray like apples here so let's see if we can find the color of their their row here here we go here's their background color fbfbfb or fd at the end there so we're going to copy that hex color go into here go into bottom row settings look at the background color and we're going to paste that code right on top now we have this gray color background and when we drag a widget on it maybe menu 2 or we can do another html box depending upon what level of bloxy theme you have there's a completely free version which is everything we've walked through here today but if you wanted to have multiple html boxes the way that i do and i can clone this item you have to upgrade to bloxy pro so if you want to work around that just drag a different menu in there if you don't want to upgrade that's okay and then what we can do is change those items to be a link in there but if you don't want to do that let's clone this html box by clicking this clone item now we can see html2 and we're going to drag that right into the middle of the bottom row here what's interesting is now you can see that the text is the same as the one above it's a white text which we're going to have to change let's go ahead and make that maybe the the normal color here so our link initial let's now make it this gray color and our hover lightens up a bit i don't mind that but let's make the link hover a little darker which i think just is more in line with the rest of our theme here and apple looks like they give you kind of a call out so let's change this here on ours by pasting right into our page here so now our header is starting to look pretty good we have three sections our top our main and our bottom when we scroll notice there's no stickiness though let's go ahead and try to change that now the same way apple leaves that top row desired to be sticky for us so let's go ahead and see how we set that up so let's go back scroll all the way to the top now we're just in the main section of our header right here let's click on headers and now we can see this global header this applies to every page in our website and right inside that we have the sticky header functionality sticky functionality we're going to turn that on and what's cool about this is we can choose which parts of our header we want to remain sticky since we're trying to replicate what apple's doing it looks like they only have their top row as sticky so let's go ahead and do that on our side looks like this one is only top row and now when you scroll down our header stays right on the top starting to look really nice and very aptly if uh if that's even a word so now we have our top main and bottom we have our products and navigation right here in the middle our cart off to the right and our logo there as well i think we're looking pretty good so let's hit publish and let's go and view our website here nice so side by side we have apple which is just a different color palette than ours they have their top middle or top main and bottom we have our top main and bottom i think this is looking pretty good if we want we can even change the color of this header which i can show you in just a little bit if we want to make it exactly like apple and one thing that we can also do is try to smush everything a little bit closer together inside of this top row the same way that apple doesn't have so much spacing between their logo the search and cart icon so let's go ahead and try to do that now so we're going to go black and back into our customizer here go back into the header builder click on top row and the way that we do this is right now we have our logo off to the far left and our search and cart widgets all the way off to the far right we're going to merge everything right into the middle here now what this is going to do is basically smush our information right into the middle now we're looking a lot more aptly right starting to get there which is cool and let's look at our top row settings let's make this full width to see if that changes anything for us it doesn't do too much but now let's go into our menu items let's actually click in the cart for a second we're going to get rid of this dollar amount so and we're also going to change the the icon to look more like apple which looks like this type 4 here yep and what we're going to do is turn off these cart total positions so in order to do that where it says zero pounds we just unclick where we don't want that to show right now we don't have the icon or the the dollar amount next to it like apple does that's perfect what we want to do is start to stretch things out a bit more so let's click on our logo let's see if with modern shop if there was anything in here that was just the m yeah let's use just this logo now instead of having the ver the words on there we have just our m icon it's starting to look really nice um and then let's get this going let's now start to open this up a little bit so our item spacing let's actually just start maybe with the the logo side for a bit here if we add some more menu items let's see what happens here so in order to add to your menu let's uh let's do that so we're going to click on our menu this is just the settings for our menu so what we need to do is go all the way back into the theme customizer now we're at the main and we're going to scroll all the way down to the bottom and we see our core menus since we know that this is the main menu on our website we're going to click on that one and let's start to like maybe pull some things out onto the top of the the menu side so that it starts to maybe get a little wider like we want in the apple right so now we have right side bar let's get left sidebar in there as well and this is where you can actually add real pages and we're just going to rename them from our menu size so it looks more like apple so we have mac ipad iphone watch let's start with that so instead of home let's call this mac instead of left sidebar let's call this uh iphone and then we have what else did we have mac ipad iphone watch and tv music support and now click publish and let's see what it's starting to look like on our site so we have mac ipad iphone watch tv music support the same way that apple has their locations but you can see that those are a little bit more spread out so let's see if we can add a little bit more uh space between our items here so we're gonna click back into customize go all the way back up to our header now we're gonna click on this menu 1 and now we have this item spacing section so if we move these farther apart you'll see it gives our our items up here more space to breathe so let's go ahead and click publish on this and reload to see how it looks with a little bit more space i think our menu items look great but what we need to do is add a little bit more space between the search our cart and our logo so let's now figure out the best way to do that if we click into the logo we can go into design and now we can add some margin what margin is it's basically giving you more space between the top top right bottom or left side and if we if we add 10 to this notice how our this this lock icon is here which is going to add 10 to everything so let's click unlock and we're going to add some distance between the mac and our logo so it's on the right side so maybe let's see what 50 pixels looks like i think we're gonna need a little bit more than that maybe try 70 maybe a little less 65 now i feel like we're starting to get into some good spacing right there let's click publish and let's do the same thing on the search so we're going to go click on the search icon hit design unlock the margins so that we can just play on one side on the left let's add that and on the right let's add that 65 as well now our header is looking really awesome and spaced out very similarly to how apple has it too maybe we can tighten this up a little bit here it seems like there's a good amount of space so instead of 65 on the right let's maybe bump that down at 55 and this is where the the fine tuning comes into play and i like the way that looks so we hit publish and now let's view what our site looks like starting to look really really sharp we still for whatever reason have this number next to it let's see what's going on there let's try to troubleshoot that might be cached for whatever reason let's do a little hard refresh do a little hard refresh not sure why those dollar signs are still coming up we'd turn them off um let's try to hit publish again maybe we'll just get out and see what the heck is going on okay it worked it grabbed so now we have our good icon similar to more similar to apples we have our search box when we click it it comes up with a nice little global search here support mac ipad iphone all the navigation items that you want let's just make sure so theirs aren't capitalized maybe we can lower case ours i'll show you how to do that or capitalize just the first letter and then as we scroll we have our header section grab on the top this is looking pretty good i'm pretty proud of us here so let's go back in and let's try to change all the capitalizations to match that of apple instead of just having caps on everything so let's go back into customize which is our best friend click on header click on menu click on design as we scroll down let's see if there's some settings here it's actually i it's a little hidden so we're going to click these three dots and right now it's telling us uppercase every letter instead of just capitalize the first one now we click that looks like it's capitalized if we were to unclick that it would just match whatever it is we typed in but in this case we want to uh and let's see if apple does a lowercase it does so we're not going to click capitalize we're going to leave this off because we did a good job in our menu of capitalizing the way we want and let's hit publish and let's actually go back and do something at a global level for our theme is let's go play with the colors a bit because what we're seeing here that's happening is our yellow is our hover over where we might want it to be in our case of our of our theme uh maybe we want that to be like a blue hover so we click into colors let's just see what happens if we change our color palette to this blue one oh that started to work nicely and if we wanted to manipulate what the hover color look like we can do that multiple ways we can change it in our palette or we can go right into that item and change that initial unhover state i'm really liking the way this is looking so i don't really want to play with it too much so let's click publish and now let's just review let's i think our header from a desktop perspective is pretty perfect i don't know about you all but i'm really happy with the way this looks apple has their logo up here all of their navigation items maybe we can make ours a little bigger so they're not so small which we can do in just a second here they have their main row with the link and then their bottom row with that call to action as well and we've got the same exact thing going on and i just think it looks pretty stellar last thing we want to do on our on our desktop version is let's make these texts a bit bigger in font size so again we can get there multiple ways we can click on these three dots which brings us right to that menu and now we can see the font size and let's click it up so that's 13 pixels 14. let's keep it at 13. i think that one extra pixel does a pretty good job for us let's reload and see how this looks i think we got ourselves a pretty awesome header and so as you can see there's a drop down too if we want to change the drop down styling we can do that as well maybe i'll show you how to do that next and then what we'll want to do is look to see what our mobile header looks like with which right now is is not that beautiful because we got some ugliness going on we got that blue background uh fly out on the left with with maybe the incorrect menu so we're going to play around mobile in just a second after we get really really happy about our desktop version here um so what did we just say we wanted to change the backgrounds or the styling of our drop downs like we have with watch here so let's go back into our customize click into header once again i told you we'd be using this a lot as we scroll down we have top level options here we also have drop down options here and so as you can see the item spacing is set to 13 that's the spacing between these items if we were to make this smaller you'd see it smaller if we make this bigger you see it bigger i kind of like the 13 pixel item spacing the thing that i don't particularly love about the way that this drop down works today is one the color background two the divider option and three this little gap that's happening between the top of the drop down and the actual bottom of the top row so let's close that gap this drop down offset if we just bring this back to zero now our drop down attaches really nicely to our top row so we're good there let me make the width of this a little bit bigger let's make this 220 pixels which adds a little bit more width to the menu item in the drop down and now let's go into our design features here i think the font size is good i kind of like having it a little bit smaller than the top what we're going to have to do is let's change the background color to white so it matches the top row and now you'll see that our text is basically invisible because the font color is white so let's make this this dark bluish here i love the way this is looking and now let's change up that divider where we had it before in dots we're going to make it a straight line and maybe we're going to give it a nice little gray feature here oh this is looking good so as we zoom in you'll see a subtle gray divider our dark text with a blue hover on our links here and this is exactly the way we want maybe i want to add a little bit more roundness to the bottom of the drop down as well so let's do that we can see that the bottom border radius is only two uh as well as the bottom left so let's maybe make this 10 and let's see 10. now we got this grounded bottom here i'm loving that feels a little appley to me and let's go ahead and click publish and start to see how this looks oh yeah now i think we're cooking with gas i think our desktop version is looking really sharp very aptly to us but our own spin which is starting to feel good so i think we're done now with the desktop version now let's start manipulating and styling up our mobile header so to navigate over to the mobile header you can just click on mobile header in the bottom the power of bloxy making it very simple for us and now with our mobile header we'll see very similar layouts so we're going to show this builder again we have a top row a main row and a bottom row and then you'll see one additional feature that is our off canvas menu or off-campus section here which has our menu and these social icons before we play with that let's get our mobile header set up correctly so the same way apple let's let's go look to see what they do they have their same color on their menu as they do on the desktop and they have these three sections they have their cart on the upper right and a mobile fly out on the hamburger menu on the upper left we're almost there what we'll see is we added this weird margin on the right for our logo on desktop right here we have to change that for mobile so let's just move that to zero which is going to recenter our logo let's actually move everything up a bit because we're going to want to do the same thing we did on the mobile side as we did the desktop side now we got our style from the top row this is looking awesome i think we're in good shape there and then let's add what we did on the mobile side so html1 and html2 are on the desktop side into our mobile side so we're going to get out of here drag html 1 to our main row and drag html2 to our bottom row and voila we got ourselves a pretty awesome mobile header now looks like there's a lot of spacing here though so let's try to close that down a bit we'll set the mobile spacing to 50 give it a little bit more room to breathe same with the bottom row and maybe same with the top row oh it's already there perfect now we have ourselves a pretty appley mobile header that was easy using bloxy theme and let's check out the menu fly out it comes from the left side not bad not bad and it has some weird menu items so let's play with that for a second we're going to click the off canvas menu we're going to select that main menu that we had on mobile now we have our pretty perfect mobile menu i'm loving the way this looks it's actually almost better than apples which is kind of cool and let's also just hide our social icons because we don't really need those here so here's our mobile header now when you uh look at it compared to apple theirs is just a little darker than ours but it has the same sections here ours has the white background which i like a lot and when you click this menu item on the left we have a flower from the left with our navigation and a little drop down there this is pretty sharp uh if we wanted to maybe we'll change one thing instead of this fly out being dark black on the background maybe we'll make it a white fly out so it kind of matches the look and feel of our site so let's pull back up that mobile builder or header builder here click on off canvas click back into design and our panel background let's change this to white now we have white and notice the text isn't visible because it's white text so we're gonna have to change that here as well so let's go click onto off canvas menu click design instead of font color being white let's give it that blue that we have and i hope let's click refresh or publish this and maybe view it let's see how we're doing here if we view our live site from a mobile perspective boom we got ourselves a very aptly looking website and i think we are basically done maybe we'll make this text a little bigger so that as people are on mobile the the targets to click are a bit bigger so let's get out of here click customize again go back to our header builder click mobile header off canvas menu you guys are going to be experts at this by now and let's turn the size of our mobile fly out text up a bit so here we go up to 21 22. let's do it so it's like kind of bold i like that right there so if we were to open this up from our mobile side this is what it's going to look like i think we got a pretty sharp looking menu awesome so i think there we have it you've now if you've followed this whole tutorial we've done a complete walk through on how we can make a beautiful header in wordpress using bloxy theme [Music] it has sticky header functionality so on mo on desktop when you scroll down you can always access your navigation i love that on mobile as we inspect it and see what it looks like looks absolutely stellar and your visitors won't see this uh login section here that's just because you're an admin our flyout really sharp we have drop downs here that match our our our style i think we did it so if you follow this complete tutorial you should now be able to go back watch these step by steps get really accustomed to the bloxy header builder and be able to build any kind of header you would like in this case we drew inspiration from apple and made our website look and feel very much like apple so i i hope you give yourself a nice pat on the back uh and i hope this tutorial was helpful if it was feel free to leave a comment in the section below we can get to any questions you have if you have any feel free to like this video and and subscribe to our channel for more content the one action that i would love to ask of you as a as a website builder designer and creator is feel free to in the section below in the comments leave topics of videos you would like to see we are always looking for new tutorials to give to our viewers so that you can go and build beautiful websites online and really succeed so hope today was a good walkthrough of using bloxy header builder with the bloxy theme and make a sticky header in wordpress alongside a very beautiful mobile responsive experience all for free using wordpress bloxy theme and that's it so that's a wrap on today's video on how we make a beautiful header in wordpress and draw inspiration from the best company in the world apple so that our visitors and shoppers and viewers have an amazing experience across your website and brand so thank you for tuning in and if you have any additional questions please let me know in the comments below and thank you for watching and i hope your website success is now leveled up take care everybody and have a good one

Channel: Greg Karelitz

Views: 4,996

Keywords: Blocksy Header, blocksy header builder, blocksy sticky header, blocksy theme tutorial, wordpress sticky header without plugin, WordPress Sticky Header, blocksy theme, blocksy theme review, blocksy theme header builder, sticky header, elementor sticky header, sticky header elementor, sticky header wordpress, blocksy theme pro, blocksy theme woocommerce, blocksy theme elementor, elementor sticky header free, blocksy theme wordpress, WordPress Header, Apple Website Header

Id: qpb5afBDpVc

Length: 37min 59sec (2279 seconds)

Published: Sat Mar 13 2021

Reddit Comments

[u/techvoiceweb]

you can do it by editing the header.php file in the theme by writing some html code first and then make it dynamic. it is little difficult and developer can do it. Second method is use elementor template header and find the template that is quite similar with the Apple.com and select that header.

[u/Archteryx]

Like the demo, good comparison build ...