How to Use Strips in WIX | WIX FIX

[Music] hey guys welcome back to wixfix today i'm going to be teaching you about strips whether you're a new wix user or a veteran i'm sure there's something in this video that you can learn i know i used wix for about a month before i even learned about what strips were and when i learned about them it completely changed the way i designed websites in wix so today i'm going to be covering the basics about strips and then show you some really cool things you can do with them before i jump in the tutorial i just want to remind you guys that now through the end of the year i'm offering free email consultations so if you need help getting something set up or just want design tips go ahead and go to yourwixfix.com help and follow the instructions and fill out the form and we can go ahead and get started and set up your website alright so now let's get into the tutorial so if we look at this template that wix has created you can kind of see that the this image this background image stretches the full width of the website now if we look right here this is also an example of a strip so as you can see there is an image on the left and then there's a portion on the right with content inside now if you know wix they recommend putting everything in between this line and this line that way every user whether they're on a big desktop small desktop tablet they'll be able to see your website in full however if you stick everything in between these two lines it's going to kind of look like a lame website to be honest so today i'm going to be teaching you how to create wider websites that are responsive and how to stack strips so you can create cool things like this rounded edged border at the bottom of this strip let's go ahead and get right into the tutorial okay so when you first open up a website in wix this is basically what you're going to see unless you choose a template the first thing i'm going to teach you about is how to add a strip so if we go to this add button right over here we go down to strip it's going to give you so many options for what strips you can use on your website now personally i like to design my own strip so i go to classic and i pull out a blank one right here so you can see that the strip stretches the full width of my website and then you can also press stretched and then you can add margins so you can kind of change like you can see on the left and the right side how it is kind of bringing in the strip a little bit from the outsides this is kind of a cool technique if you want some borders on the left and right side it kind of looks clean with certain websites so that's an option for you and then also you can have it on the page so you can literally just have your strip within these two lines but the whole point of the tutorial is so that you can have expanded websites that are still responsive so we're just going to go to screen and then the next thing i want to show you is how to add images so you can change the strip background by pressing this button you can choose an image you can just choose an image whatever image that you want to use and then you can also expand the height of this image to as far as you want since this would be kind of like a home page i'm going to do it around 600 and you can change that by using the toolbar right here so you can change the height in pixels to whatever you want if you don't see this little toolbar thing right here then you can go up to tools and make sure toolbar is checked okay now that we have an image in our strip you can also go into settings and change a few things so if let's say the image is too bright or the text that you put inside of this strip isn't popping enough you can come over here choose a color and then you can change the image opacity bring that down a little bit and then your your text or whatever elements that you put inside the strip will pop a little bit more okay next thing i want to show you is how to add parallax to your strip okay so if you click the strip press this little background scroll effect then you have a few different options on what you can choose personally i really like the parallax effect so now if we preview the site and we scroll down you can kind of see that the picture in the background of the strip isn't moving quite as fast that is a very popular modern web sign design type technique and it's really cool that it's built into wix next let's go ahead and add another strip we'll add it underneath the other one i'm just going to change the background color to another color of my choice if you want to add one of your own colors you can go to add color and put in the hex code or the rgb or the uh hue saturation and brightness i believe that's what it's called a code for that but for this one i'm just going to choose one that i already have and then i kind of want to show you how to add multiple things so you can see right here so this strip is currently set to the boundaries of wix's current website so you can see the boundary right here and the boundary right here currently you do not want to put anything outside of here that's important otherwise if a person is on a smaller desktop or a tablet they may not be able to see what's outside here so what we're going to do is go to layouts and we're going to do add column now you can see it's split into two different sections both with their own boundaries inside of it so let's say you wanted to add an image here and then maybe some content here now when we preview this and we shrink down the window you can see that the website is still keeping it responsive so no matter what screen size the user is on they will still be able to see the content within those strips so i'm going to go ahead and move this one down a little bit i'm going to add another strip so when you put content in a strip you can select both of them you can come over here to this align tool and align them to the left that way they're exactly aligned with each other then you can press group and now that the group is selected you can come over here to align tool and you can center it within the strip next i want to show you this technique that i used over here so we can have a rounded border at the bottom so we're going to go ahead and press add strip classic we'll just add it right here okay and then we're going to change the background to an image now this is something that i created in illustrator if you do not have illustrator then i will add a link to this in the description below if you do have illustrator this is pretty easy to recreate but now that we have selected the image and put it into the strip we're going to select settings we're going to choose color background or color behind image to zero percent we're gonna select the position to right here to up and then we're gonna shrink this down quite a bit just enough so we can see the full image right there okay then we're going to bring this down and we're going to pop it and we're going to snap it right on top of the strip and if it goes behind all you have to do is press this little arrange button and bring to front so now when we preview the site it's going to have that nice rounded border at the bottom that transitions very nicely into the next strip next i want to show you how to create a wide responsive header within wix so if we select the header in wix we still have these boundaries that we can't put stuff out of so similarly to what we did with this strip right down here we're going to go ahead and add a strip it's basically going to force us to put it on the regular page but if we select the header we can see that the height of the header is 111 so let's select the strip that we just put we'll make the height 111 and now we can actually bring the strip into the header and you'll see it highlight and say attach to header that's exactly what we want now that we have a strip in the header we can do exactly what i showed you earlier and press layouts add column so now we have two sides that we can put content in and it'll still be responsive across all screens that the users see okay so next let's actually select the left one let's do layouts and we'll align to the left and we'll do the opposite for the right side plus layouts and align to the right so now what that did was change where we can where the boundaries actually are so now on this one we can put content in the left side and on this one we can actually put content on the right side so let's go ahead and do that so most websites have a logo in the header so let's go ahead and just add a logo i am just going to do a quick icon i'm going to drag it into the header you're going to see it say attach the column shrink it down a little bit and then center it up you'll feel it connect and then what i'm going to do is do a line align to the left then i'm going to press the shift key on the keyboard and right a few times there we go the next thing i want to do is add a menu over here so let's go to add menu let's grab the basic one out we'll obviously shrink this one down quite a bit three pages don't need to take up that much space we'll align to the center horizontally we'll align it to the right shift and left on the keyboard a few times so now you can see we have a wide header that is also going to be responsive no matter what size of screen the user is on that basically wraps it up for the tutorial today i hope you guys did enjoy if you did learn something please press subscribe because there is going to be more content like this coming in the future thank you guys so much and i'll see you all in the next [Music] you

Channel: Wix Fix

Views: 21,658

Keywords: how to use strips in wix, wix strips, wix strip tricks, wix responsive, how to make wix site responsive, wix use strips, add a strip wix, wix strip, customize strip wix, strip background wix, wix tutorial, wix design tutorial, wix tips and tricks, quick wix tip, wix beginning tutorial

Id: MrcvFsQi5zc

Length: 10min 45sec (645 seconds)

Published: Wed Nov 18 2020