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