WIX Tutorial - Strips, Backgrounds, Layers

Everyone I hope you're all doing well. My name is Greg and welcome back to another Wix video this one is going to dissect the anatomy of a Wix website and what I mean by that is how to use the Backgrounds the layers different objects and different elements on your Wix website. This can be a little bit confusing for beginners so what I want to do is jump in the computer and just go through everything kind of step by step and show you how To use these elements and how they interact together. So without further ado. Let's get in the computer and walk through this alright So here we are just on the example website that I've been creating and using for some of these YouTube Tutorials and what I want to show you is strips and backgrounds first So first things first is these are all strips so on a lot of the templates you will find strips and what they are you can add them over here and You go to strip and it's basically a type of element and it's like a page of a website if you will So what this is in action is this is a strip right here It's kind of a landing page strip And then the next one down is the services section strip here and then we have the about strip and the contact strip They're all separate strips Now if we come up to the top and we zoom out here We get a better idea of what these strips are and how they're separated So we have the first strip here and then the next strip and all of these are individual strips So at any point, we can delete these strips and replace them with other things so I'm just going to zoom back into our site here and if we need to delete a strip, all we have to do is just click on that strip to select it and Just hit the delete or backspace button, and then that strip is completely gone and now we're left with the background of the website So this is where these strips are sitting on top of So as you can see all of these strips, we're touching each other before so you couldn't see this white background here So as you can see You can't see the white at all because all of these strips are touching now if we were to slide one of these strips up Just clicking it and dragging it up. You can see that the background is still back there so that's the difference between a background and a strip and just know that strips are the nice easy way that Wix gives us where we can just plug in elements and create kind of pages or Sections but you can always add elements to the background just like this you don't have to use strips So if you do want to create something like an about Us page, you can do it one of two ways So I'm going to use this section right here of our background to show you you can come over to add and you can go to strip and you can find and about us right here and you can just click any of these and It'll drop it right in. Let's see where that added that to our page. So it'll drop it right into our page Now what we were trying to do was add it to this white space right here So the best way to move that up there is actually to hit this zoom out And then we'll be able to drag it right into that gap So I'm going to grab it from down here and I'm gonna drag it up there's one I'm gonna drag it up one more and now we have it in this gap right here in the right spot and then we can just do one of two things either we Can drag to close this space of the background here or we can just hit delete space and now what we've done when we close out of this is We've just added our About section right to that white gap of the background that we were just talking about previously now if we don't want to add a strip here we can click on this strip and We can delete it With the backspace or delete button again, and we can manually add in elements here So there's one of two ways you can do this You can come right over here and you? Can just add in the elements that you'd like if you want to add in a header we can just click any of these headers Right here and it'll add it right to our website. It's in white text so I'm just going to hit edit and I'm going to switch that to black so we can see it and then I'm gonna make it bigger and We'll just slide this out and now we can start to create Basically in about us page, however, we would like it Now the other way you can do this is you can just click on that Delete it. We can come right to this and we can right click copy it and come down here right click and paste it and If you like the look of that text right here, you can recreate it with this That way you can make your sections look similar. So you have the same font the same color and Then you can just start copying text and copying any elements you want to put right on to the background now something to note here is you can change the color of this background and It'll change the color of the background throughout the entire website. So if we were to change this background We have to do is change page background go to color and then we can switch it to let's make it a blue right now and Now you'll see with this when we start to move these elements and it exposes the background All of it will be that blue now Again with all of these things here if you did something that you didn't want to do all you have to do is hit back and Then if you want to change that back to white again, you can either go into it manually And change it to white or we could have just hit the back arrow Again, right up here and it would have switched it and undone the changes we made prior So that's the first thing that's the difference between strips and your background and now I kind of want to talk about layers This is typically the next thing that becomes kind of a question when you're putting something on a page But you can't see it or it's partially hidden or covered up by another item So this is a common thing and it's easy to fix. So what I'm gonna do is I'm going to show you two things I'm gonna add two elements to the page and then I'm going to show you how you can switch which one shows and which one's On top of the other one so first thing we're just going to add a button here just a simple button and we'll put that over here and Then I'm going to come in and add a shape and I'll just add this shape right here So now we can see that when we put one on top of the other One is going to be on top of the other and one will be hidden now all we have to do here to expose this One on top of this one is we just right-click it? And we do a range and we can say bring to front and This will bring it all the way to the front now if you have multiple items here, so if I add one more button I'm just going to right click and I'm going to duplicate this button. So now we have a third button So now we technically have three layers here so we can decide what is in front of what so if we want to take this And we want it to be in the middle of these two buttons we can right click it arrange and Clearly it's all the way in the back right now so we can move forward Or we can bring to front if you bring to front it'll move it in front of every single item So it'll bring it all the way to the front and then it'll be in front of everything now. Let's go back one If we were to right-click and arrange and just move forward once you click it one time and see what happened Okay, that brought this one in front of there so now we can use this one as the front and we can use this one as the And you just play with this until you find the order so you can always change So if you know you want this one all the way in the back You can right click it you can arrange and you can send to the back it'll go all the way to the back of everything and Remember your background is always going to be the default all the way back. You can't put anything behind the background so just note that if something's hidden just Right-click it and go to arrange and see where it is in the order and move it forward or move it back or bring it All the way to the front or all the way to the back So that's a really good thing to keep in mind if you have something that's hidden like an image or you want buttons on top Of shapes and especially text things like that So as always just make sure that you go on to mobile before you finish anything up and see how it all looks on mobile You want to make sure that everything looks good on mobile as well because it won't line up Exactly the same as it is on desktop here So just keep that in mind Double-check mobile and make sure that everything looks good here before you publish your changes and make that live so hopefully that helps you guys a little bit and helps you understand the anatomy of Wix websites and the elements how backgrounds and strips and layers all work together with each other and how you can arrange them in front or behind each other if you Have any questions about putting your Wix website together. Feel free to leave it in the comments And as always if you like this video, feel free to give it a thumbs up or subscribe to the channel for more Alright guys. I hope you like this one and I will see you in the next one

Channel: Greg Gottfried

Views: 28,984

Keywords: wix tutorial for beginners 2019, wix tutorial 2018, wix tutorial 2019, wix tutorial - strips backgrounds layers, wix strips, how to use wix website builder, wix, wix.com, greg gottfried, gottfried09, drag and drop website builder software free download, free website builder 2019, wix pricing? should you upgrade, drag and drop website builder software, wix vs wordpress, wix tutorial, wix.com tutorial, wix website tutorial, wix website

Id: bp2_S3cf8uo

Length: 8min 13sec (493 seconds)

Published: Fri Apr 19 2019