Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

this is the first in a series of tutorials where I recreate popular or awesome or unique elements on other websites so that you can see how to do it and not copy what they did but use that knowledge that you gained learning how to do it and create something unique for your own website or your clients website and the way this is gonna work is you guys are gonna tell me what stuff you want recreated and if I feel that the audience would like it the broader audience would would enjoy watching that and get value from it I will create that tutorial and this is the first one in this tutorial Sebastian has asked me I'm paraphrasing here but he asked me to tell him or ask me if it's possible to recreate the header that Square hats would have a menu at the top they have their hero image then a menu at the bottom that is sticky when you scroll down the page and I told Sebastian yes you can and I made this video to show him how and anybody else who wants to see it now we're getting started right now hey what's up guys welcome back to another video it's Bjorn from Doh AP Learning Lab when we help change lives by teaching WordPress and giving you the ability to up your skills and earn more money for yourself and your family and if you like that kind of thing you like WordPress and tips and tricks and getting better at it make sure you subscribe then the belif ocation I can't see don't miss anything and make sure you check out our private Facebook group there's a link in the description down below with that out of the way let's head in the screen capture I'll see you there so this is the page sebastian was referring to they have a menu at the top and they have a logo and another menu actually there are three kind of three minions at the top and then they have a secondary menu below this nice big image and when you scroll down the top and you stays where it is and the secondary menu is sticky and it follows you down the page and I don't have this on every page just a few of the pages I've checked out you could have this in every page by creating an element or a template I'm gonna shade us creatives on one page and which will probably be the home page in most cases but we're gonna recreate this right now in Elementor in the free version I'm pretty sure so on this site all I have is installed is the free version of Elementor and Gutenberg because I'm trying to stay up to date and I go to pages and I have nothing going on here yet if I actually if I go to the home page you'll see what I have and this 2017 raw nothing going on I'm gonna click on the down arrow for adding you click on Elementor and let's see if we can recreate what Square has done I'm actually gonna download their image too while I'm at it it's a background image I'm gonna inspect I'm going to find the URL for the image on the right-hand side here there's probably an easier way but this is how I know it entrepreneur hero that's a bunch of URLs I'll just take this one see this is our image get rid of that bracket on the end and that is our image quite large I'm gonna save our image I just throw in here let's call this square here oh all right I'm gonna try to make it look pretty much exactly like theirs I'm not saying you should rip off what someone else is doing but I'm just showing how to recreate what they have so you can choose or not choose to recreate those exact different things or edit them as you see fit you get what I'm saying so let's come into here change our it's gonna get rid of that bar at the bottom change our layout to canvas so we have nothing cluttering our workspace however a blank canvas the first thing I want to do is add a section with two columns and these two columns represent the middle part of this image I see this is three sections there's a top with the links and the icon or the the logo there's the middle with this text here and the button and the image there's the bottom which is going to be the menu we're gonna build this middle spot and then overlay the top over top of that in a different section I don't make more sense in just a minute so let's build the middle we have our middle right here this two columns click on the six buttons here to add our background click on style click on normal click on classic click on image upload our square Hiro click on insert media actually first add alt text so HTML validates insert media let's just give this a height so we can see some more of our image here go to layout min height I might change this later but just so we can see what we're working with so we have our image here it's quite large this image looks a little bigger than on their site but we'll deal with that later first let's add our content let's start with a headline I guess it's a small headline put our text in here all capitals go to style let's make it white it would be great if I could show two different screens in one video but it's a little too cramped to do that this looks a little too bold so I'm gonna put that down to normal and let's inspect let's see if we have this exact font that they're using go to the inspector see what kind of font they have going on no indication of that specific font maybe they defined as a default font family square market that sounds like a custom square font I doubt we have that night for sure that that is the font that's used there another square marker miscues open sans guys open sans it's pretty much everywhere except for square apparently so we have our headline I'm just gonna copy this over I'm going to add this as a text section I'm just going to worry about getting the content in here first and I'll worry about making it look exactly how they have it so I don't want to have all that gray in there let's go to the HTML editor paste that in doesn't add any styles let's change the color to white let's make it bigger it's quite a bit bigger than the heading font it's also quite a lot thinner let's change this heading font size a little bit refer back so we have it on two lines and we have much a thinner font that's about two lines about like that but our font family is much thinner to open sounds looks because open sans is everywhere it sounds pretty thick if you know any really thin fonts is the yelled amount right now I won't be able to hear you let's change the the margin at the top or make sure it's zero make sure padding is zero make sure this one also has zero and zero everywhere they clearly don't padding top let's go be margin margin top of -10 get those little closer together because at their website they are quite close together so let's ignore differences in font for now and let's add our button drag and drop that over there button is blue get a free reader and we guys should get these colors quite easily copy the background color for the button get your free readers of your get a free reader all caps get a free reader and the button size about the same size just the font is a little smaller and not bolded Elementor seems to like bold fonts by a default and we are going to change the button color to the one we copied and we're gonna go get the hover color click on hub here we see the hover state or we can choose the hover state and now we have a new color here let's take that and we go to hover change our hover color to the one we just copied and now we have my nice hovering effect there it's very nice their text is or their fonts is still a little bit smaller I don't hover choose it on normal a little bit smaller there that's pretty good now for all intents and purposes our middle section is looking pretty good pretty to go skip that right there we're going to now add an upper section up above here let's click on this plus we're going to add a three column section because this is three columns this menu the icon and this menu icon or logo whatever you want to call it so let's add these menus in here first let's we don't have a menu created yet let's create the menu first let's do that let's go back to our dashboard and I'm going to create the exact same menus that they have go to appearance and then menus let's call this it's all caps still top nav left Wow there we go great menu what we have is payments point-of-sale payroll capital more let's just add custom links payments payments point-of-sale capital more good I'm not going to add that to a menu option that's gonna click on save menu I'm going to create a new menu and it's going to be this throne the right sign in and shop so I'm going to call this top nav right save to menu or a save menu and then we're going to create this one down here overview features Tech Specs testimonials pricing save menu let's head back into Elementor I'm gonna click on publish and I'm gonna refresh just to make sure our new menus are pulled in before we add them up here so up here we're going to add the top nav left menu it's good a menu get the navigation menu and top nav left beautiful now over here let's put in the menu navigation menu and top nav right equally beautiful see if we can adjust these a little bit they should be possible in the free version right you might not be might not be can't add custom CSS right to here so we're gonna have to add custom CSS in the theme so let's make these menus let's put this one up to the top first what I was seeing earlier so let's get this up go to advanced go to margin we're gonna add a negative margin I'm gonna add click on the link actually so we're doing just the top let's add a negative margin of 50 pixels let's make it much more than that how the menus are disappearing we're gonna bring them to the front just a minute so let's hover let's go to the section for the menus go to advanced change the index to 1 now they're out in front now we can't click the section this is where it gets tricky with these overlapping things you can't click on the section for this middle area because it's behind the menu so I ever want to select this section again we got changes the index back to zero that back and forth can be a bit of a pain but either way that's how we have to have our or our setup in order to have the background image that flows between sections so let's go to customize so we're do some CSS in here so I should not we're going to where we're gonna do it right away so let's good preview this we're going to paste the CSS in to customize we're going to do it in here first so we go to advanced we may not need IDs and classes for this just going to try it without first so let's inspect this and let's edit some CSS right in here so the first thing we want to do make sure we are selecting the entire navigation menu the UL first thing we want is to get rid of the dots so I want to change the list style type to none dots gone boom that easy now we want to select the Li and float to the left and add a margin right of 20 pixels so much they have 20 capiro right we want to text transform uppercase and we want to have a font size of 14 pixels how much do they have it's pretty small inspect font size of 11 pixels so let's make it 11 pixels and a color of white and the color did not change we have to probably apply that to the link I'll just leave the color from here for now okay so what we have so far is applied to just one so does make a lot of sense for what you're seeing here we're going to copy these styles into the customizer now so for the UL we have a menu ID of top or menu top and nav left so let's copy that it's an ID which means you have to use the pound icon inside customizer go additional CSS use the pend the pound paste in the ID open and close curly brackets and then copy our one CSS rule and paste it in here the next one we now click on the Li it's gonna copy I'll first load in customized ok copy what we have here now we're just gonna use a downstream selector or a child selector just add an Li to the end now we're going to copy these styles put it in here paste and now we have these styles theoretically applied to the Li let's copy this and now don't do that don't do that okay now let's call this one Li a let's change the color to white let's kick on publish to update those changes now if everything went well I should be able to refresh and those stuff should be applied here if I didn't do that and refresh just to go back to whatever the default was but now if we're lucky and we are those are applied mores in the second line because the width of this column is not quite right for that menu will change that in a minute let's look at this menu let's inspect it and we have our top nav right so let's copy that so it's the exact same look on there's both sides look the exact same so let's head back in to customize I'm gonna edit comma and then jump the gun there pound and then top nav menu right and then for this one I'm gonna add pound top nav menu right Li and then comma pound menu top nav menu whatever right Li a and now all these styles have to be pound on that now all these styles should be applied to the second menu this one up here on the right so it's fresh and there we go it is applied so now I'm going to find a square logo because the one they have on their site is generated dynamically it's not actually an image I'm going to copy this into Photoshop and just make this white I will be right back okay I've got the logo in white now I'm gonna close this head over into here and I haven't tried this before but I'm hoping when I eventually refresh the lnter Builder that these Styles will be applied to the menus in here they were pretty fancy first gonna add this image so let's add the image and upload our logo that our alt text insert media now we have our fancy logo up here in the middle click on update and I'm gonna refresh I want to see if those CSS styles are applied they are isn't that fancy that's pretty cool let's drag this over make the width just right this one on there's always had to make sure cuz I'm doing this so well I have to make sure I'm actually on their site and not our pretend site here cuz it's pretty pretty much identical so this menu looks like it's shift to the right so our menu in here we want to make sure that we are aligning it to the right which apparently is an option the pro version not in this version so that's great we'll deal with that in a minute okay so let's refresh out here actually I didn't save that column adjustment let's refresh out here and now we have our menus all in the line this one sought to be shifted to the right so let's do that right now more custom CSS because the free version does not allow much to happen with the menus instead of float:left let's try flow right now we're getting somewhere change flow right for both of those than it is how we want it let's go back into the customizer we're going to not copy and paste the whole thing just copy and paste the selector and I'm going to undo the float:left and make it float right and then publish then come out here and refresh and now there we go foot to the right we looking pretty good looking pretty good the sizing is a little bit different we'll get to that a minute let's add the menu at the bottom so they have their menu this is the one that needs to come with us so it's just a sticky one so I'm just going to add a new section down here I'm going to give it two columns because we have a button this button is not part of our menu this is our menu this is our button so we want to have two columns in my example here we're gonna add them into the left-hand column so let's add menu it's the main menu let's get the styling right on this menu before we add this button so let's click on update and let's come back out here come back to ours refresh because we want to get the ID of this menu so let's inspect it and then UL ID menu main menu that's pretty good and the styling is incredibly similar if we go to the square one so the styling of the menu up here is promotes the exact same just the difference is the colors and a hover effect so we're gonna copy most of these same styles so I'm going to add our main menu here we don't want the bullet points we want to be floated left just like these ones so we're going to add it here we want the color to not be white it's not going to add it here so we're gonna make a new rule I'm gonna make the color of this one whatever this color is let's take a look and our color is this gray right here so let's copy that and then we have a hover color as well which we didn't for the others a tad and a I might to add an Li a but it might not because all the links are there's only one set of links in there they're all in the Allies but we'll see so if we add a li a and then : hover for the hover pseudo selector we then come back out here click on hub click on hover and we should have a new color being represented right here which is the same color this button it turns out don't ask me how I remember that but I did click on publish come back out here refresh and our menu down here should be looking pretty solid not quite as solid as I would have hoped because I didn't add the Li to the float left right here it's nice to add the LA there publish that's refresh again that's looking pretty solid the size looks a little small this one looks a little bit bigger for some reason and the top ones I could be wrong I want you to go away there we go so the font size is also 11 that's pretty solid then alright so I want to refresh in here so that we get the new styling applied of course if you have Elementor Pro you don't need to go back and forth you can just add custom CSS if you go to advanced there's a custom CSS tab which is in the pro version and then it updates right away not like we're doing here we have to go to customize put in our Styles update come back in here refresh then it applies them small price to pay but if you already have Pro this is a lot easier if you want to get a lament or there's a link in the description down below it's an affiliate link purchasing Elementor through there does not make it more expensive for you but Elementor does send me a small Commission which helps support me and this channel helps keep the lights on so I really appreciate want to get Elementor through there if not I'm showing head of this for free so you can do all this stuff for free I'm going to add a button over here now let's wrap this up button if I could spell button this widget would stay on the screen hover button I think our button is very similar to this one someone's going to copy the styling from that button gonna right-click on it copy right-click on here paste style now we have similar styling to that button at least when it comes to font sizes and things like that it was our button say get started and now our button says get started – now I want to change it to have a background color of white or non-existing one you can't actually tell what there's is text color needs to be gray the same gray as our menu so let's get our menu gray here and let's put that in there and it has a border has a solid border the color of that border is not the same as the menu it's quite a bit lighter so let's inspect this guy let's check on the span there it is there's our border border color of this guy and it's only one pixel wide so let's change the width to 1 pixel we're getting there so if we can align us to the right we can that's pretty sweet now we have some spacing issues because theirs is aligned in one line if you had a ruler you could put on the screen I've actually had clients to put rulers to the screen to measure things on the screen so if you have a ruler and you do that kind of thing you could confirm as you're lined up but using a ruler I'm not gonna do that because that's a terrible terrible thing it's scars it scars the person doing the work on the website it scars them forever let's make these margins zero and padding of zero this so er work on the clean slate here so now I'm going to add some margin actually padding to the top of this one edit padding of 10 not quite there there we go you can see that the bottom is aligned and that's kind of guesstimating here I might actually have to get a ruler and put on the screen I won't I'm kidding kidding it brings tears to my eyes when I think okay now we have our junks set up more or less I just want to add a one pixel border like they have to the bottom so I'm going to click on the six dots go to style go to border add a border type and it's going to have a width on the bottom of one it's going to have a color of the same color as this button border which was I don't which car that was let's get the button border color so to fix the hover on that button apparently okay border color here so change the border color to that guy that's click a different click out so we have a nice border down there I can actually hover over it but you get the idea let's change the hover effect over here to what there's is which is just a highlight of that text so click on style go to hover change our text color to the background color that's pretty close make the background color transparent text color to that now if we hover now we're there look at that that font looks a little big let's change it to size 11 that's what everything else is there we go let's save this come out here to our version refresh the page now we have our menu down below looking pretty nice got a hover effects we've got our border bottom we've got pretty much the whole thing set up but we don't have yet is the scroll because a is not enough content to scroll and B we haven't set it up yet so I'm just going to add a bunch of dummy content it's gonna add a section here with just text okay there that's enough text look at that assume that's a whole novel right there so now we have our text here but our menus not sticky yet so we've been thwarted on the very last step we can't make this menu sticky with the free version of Elementor I had checked in their documentation here it says go to header go to advanced and then choose scrolling effect which is not there in the free version so go to advanced and it's just not there so I'm going to install a mentor Pro and I'm gonna finish this off because our awesome you guys are having a mentor program I want to recreate this so I'm gonna do that and if you stick around I'm going to show you how to make this image parallax in the free version of Elementor that is pro feature making things parallax but I'll show how to do it for free after I show you the sticky menu so I'm just gonna install Elementor Pro and I'll be right back okay I've installed Elementor Pro if i refresh this page now first we'll save it actually save my changes then I'll refresh and now we should have that option appearing after a refresh so I click on the 6 dots for the section go to advanced and now we have the scrolling effect which we didn't have a minute ago click on that change it to top click on update and now we come out here and when the difference in our sizes is they have a boxed website as noticed so they have gray bands on the side because our site doesn't go full width or is the demo we created does go full width and that's probably why things look a little bit bigger but if we scroll now I think I refreshed we have our menu come with us however I didn't add it background color so let's go to our section let's add a background color to our section white it's a pretty good choice click on update come back out here and refresh and now we have our menu being white and we have I think successfully recreated the square page that we said to create scroll down sticky menu pretty good the sizes are a little different the fonts are different because they have a custom font or logo image is a little bit bigger that's fine tuning is great if you want to add on there too this tutorial but if you can fine tune on your own then you can go ahead and do that because it's just what we did before just click buttons and it adjust things but we recreated all the functionality that we were going for and I promised I'd show you to make this image parallax without the pro version of Elementor we do the option making things products now that I have Pro installed but without pro all you have to do is come out to your site just see here it's not parallax so I haven't applied it yet click on inspector need to get an ID or some way of selecting this background image so let's see this is where the background which is applied this is the selector here it says copy and paste this thing put it into our CSS here open and close the curly brackets and add a back ground position parameter sorry attachment parameter of fixed publish refresh close this inspector and now look at that that's a parallax background right there that's literally how easy parallax is it's this one rule it only works on background images but that's how you do parallax outside of Elementor Pro and really on any website outside of a theme builders you don't need theme builders I've had everything theme builders do has a basis in CSS and or JavaScript and or HTML or some combination of all that front-end code so anything a theme builder does you can recreate manually using a combination of HTML CSS and JavaScript quite often just CSS the sticky menu however is Java scripts you have to do JavaScript for that but it's still doable without Pro you don't need Pro but may having Elementor Pro sure does help a lot makes things go a lot faster and that is the end of this recreate tutorial if you like this kind of tutorial where I recreate existing things let me know and I hope Sebastian watches this because this is the one who wanted to recreate and there we go so that's how it works up this video helps you if you haven't done so yet make sure you get subscribed and the bell icon pseudo Misty thing check out our Facebook group link in the description and next click or these videos that popped up on the right-hand side so you get even better WordPress until next time keep crushing it and I will see you in the next video .

Video Discription

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist:

Check out the free WP & Online Marketing Summit For Beginners. The online event is June 18, 2019:

Elementor Recreate – Square's Sticky Secondary Menu

Elementor Client Dashboard:

Sebastian (a fellow WP Learner) asked how to create a secondary sticky menu on a website with Elementor. This is the video that shows how to do it. I show you how to recreate Square's entire header area. Even if you don't want to know to build a secondary sticky menu I guarantee you'll learn something in this video like how to use custom CSS in the free version of Elementor and how to create the parallax effect in the free version of Elementor.

Join our private Facebook group today!

Post videos of your WordPress success using the hashtag #WPLLCommunity!

Get on the Unofficial Ultimate Guide To Elementor course waiting list here (no obligation):

Here's the link for Elementor Pro (aff):

WP Learning Lab Channel:

 

Leave a Reply