Best Ways To Add And Use Wix Strips
Updated: Jul 7, 2020
Knowing how to use the Wix strip is one of the fundamental elements to building your site.
Using them in the best way is how you'll keep your design across devices, move whole sections, and keep your site organized.
Wix strips are essentially containers you can add elements to, like text or pictures, in order to add design and organization to your Wix site.
When I first started designing on Wix I would just attach text and pictures to the page background without using strips.
And every time I wanted to change the design and switch sections I had to go through this long process of clicking every single element and grouping them together...
Dragging them to where I needed....
Aligning them where I needed....
Ungrouping them....
Repeating the process for the other section...
You know what I mean...
When I learned the best way of adding and using Wix strips I cut the time it took to build a site in half.
So I'm sharing with you the methods I learned when building sites for clients on the Wix platform using Wix strips.
Is your website getting out of control? Get your website working for you with a free Wix Consultation. Immediate relief from your website needs.
Table of Contents
How Do I Add A Strip in Wix?
Adding Columns In Wix Strips
What Are Wix Gridlines
How To Use Wix Strips Creatively
How Do I Add A Strip In Wix?
Building a site using Wix strips is like drawing up floor plans when building a house.
You can start to get an idea of how the site is going to look visually before you add all your content.
You can draw a template for free using Google Drawings before starting in your editor.
Once you have your template laid out log into your editor so you can start creating your site and adding Wix strips.
1. Log in to your Wix account and access the editor of the site you want to make changes on.
2. In your editor, click on the "Add" button on the left hand side menu.
3. Move your mouse over the "Strip" tab to view your options. Move your mouse again over the "Classic" option and click on the white, blank strip or drag it onto your page. You can also choose from a series of strip templates pre-built by Wix.
4. Now you have added a strip to your site that you will be able to attach text, pictures, video, etc. and be able to move anywhere on your page! Circled in red are the Wix strip editing options and the Wix Toolbar that helps with arranging your site and knowing dimensions.
When exploring the strip settings you will find areas to add images, videos, change colors, opacity levels, layout options, effects, and a lot more.
You will also be able to find out the exact dimensions of your strip by using the Wix Toolbar where it will display the height, width, and exact position in your editor.
The video below was created by Wix to give more foundational information about adding Wix strips to your site.
Adding Columns to Wix Strips
Wix columns can be added to any strip on your site. Under the layout settings you will see a button that says "Add Column". Click on that and you will immediately see your strip cut into two different sections.
A strip can be broken into as many as 5 different columns but remember, each column with have it's own gridlines that get increasing smaller in width every time you add a new column. More on Wix gridlines below.
For a visual guide, follow this easy-to-understand video below that was made by Wix.
When you first add a Wix Strip you are only allowed to stay within the gridlines on the page, but with columns you can actually stretch your content and graphics to be the full width of your site!
You will also be able to change the layout in more dramatic ways and keep your design more appealing than other bland templates.
One way to change the layout is to click the "manage columns" button and then the layout icon. This will allow you to change the ratio of the columns and be able to give you some cool effects (I use this for my headers to get logos and menus on the far edges of the page).
But wait! There's more! You can also click on the individual columns and go into the layout settings and you will be able to change the alignment of the column to left, center, or right. This can really open up some design choices for you once you get used to how it works.
Before you go crazy experimenting keep in mind this key factor when working with columns so that you don't end up with an awesome look but then realize you have to change everything.
Stay Within The Lines
Just like when we added a Wix Strip without columns, you want to stay within your column gridlines. If you are asking yourself what the heck are gridlines, I have more on this below.
By staying within the lines your site will be able to look better on mobile and tablets. The only problem you will notice is that when you add more columns the lines get closer and closer together...
There is usually a choice to make and I have been laying this on thick but you need to ask yourself about design vs. functionality. Does this create the best experience for my guest in my online home?
Responsive design is huge and you do not want to sacrifice the mobile and tablet version of your site for a cool looking desktop design.
Don’t let your website get in the way of growing your business. With a free Wix Consultation you can focus on what matters most and get immediate help for your website needs.
Alright, What Are Wix Gridlines?
By now you should have seen the Wix grindlines that are running vertically along your page cutting your editor into three major sections.
If you are not seeing these then just move your cursor over the "Tools" tab at the top of your editor and then click on the "Gridlines" box.
These lines represent what a tablet device is going to pick up on your site.
If you were to move some text or a photo across these lines you will get a warning from wix letting you know that people are not going to see past these lines on certain devices.
This is great information for adding individual elements but remember if we are adding a background image or video to a strip like we mentioned they will be allowed to go outside of these lines.
How To Use Wix Strips Creatively
I went over a fun technique I use for strip columns in the previous post about parallax scrolling where you can change an individual column background and make that a parallax scrolling effect. This give a pretty cool look.
The Wix design team is incredibly creative with their platform and while still having a modern and professional look to the sites they create. Below is their example on how to creatively use your Wix strips to make beautiful designs.
Add Wix Strip To Header
I also mentioned about adding a strip to your header or footer. This is perfect for putting logos or menus on the far right and left side and for the footer it is perfect for adding "All rights reserved" or contact info in the same places.
To do this add a strip to your page but make sure under the strip settings that it is set to a smaller height than your header. Then you should be able to drag the strip into your header. You will want to change the opacity as well so that the backgrounds align.
You can also put a strip inside a strip! This will allow you to put two different scrolling effects on your background making your site have very unique design.
I like to mess around a lot with the alignment of columns within Wix Strips and see if I can't get some interesting designs without adding a lot of elements on my page.
You can also take icon elements and attach them to a strip, resize them to make them huge, change the colors to how you like and create your own background!
What To Watch Out For
Naturally we want to be careful of the design vs. functionality battle across our site at all stages and a strip is no difference.
If you don't need it, don't use it.
Like anything else it is taking up space on your site and is a factor in loading times so if you have a lot of unnecessary Wix Strips it might be one area you can improve.
If you are stretching out icons to get a custom background be careful with overlapping elements and use the arrange function to make it look the best it can.
Are you using Wix strips for your site? Comment and let me know your experience or tricks you have learned that could help others!
Like and share this post if it helped you get some examples on how to use your Wix strips creatively so that I can know which content you are enjoying!
Strips help a lot with making sure your sites look good on all screen sizes and devices. If you are having trouble getting your site to look right message me on my contact page letting me know your issue and I'll set you up in the right direction!