Beginner How To Wix Parallax Tutorial
Updated: Nov 24, 2019
The Wix Parallax effect if one of the most widely used animations by users but what exactly is it?
The Wix parallax scrolling effect is when the background of a web page moves more slowly across the screen than the foreground elements.
Chances are you have already seen this effect around the internet but probably had no idea what it is called. Anytime the text on a page seems to be floating past the background image is when you are viewing a parallax effect.
Wix actually makes it incredibly easy to add this, and other effects, to your site.
This post will help you add a parallax effect, show other effect options, add columns with parallax, and let you know what to avoid when using this effect.
The Wix design team made a video covering a really creative way to use the effect on a site that you can check out here.
**Keep in mind that mobile is not compatible with Wix parallax scrolling, yet, more on that below.**
Table of Contents
How do you add Wix Parallax
What other scroll effects are there?
Adding Columns and Wix Parallax Scrolling
Are there disadvantages?
How Do You Add Wix Parallax?
Adding the effect is easy! Any Wix strip background will be able to create this effect for you. Wix made an easy to understand video that outlines how to add the effect but I went into a couple extra steps in case you are just learning.
1) Click on the "+" icon on the left-hand side menu
2) Go to the strip section and add a strip with a static picture
3) Click on "Change Strip Background" and then click on "Settings"
4) Scroll down and click on the parallax section
It's that easy!. Adds a whole new layer to the site and gives it a professional feel while remaining modern. Great, easy addition to the site....
But what else?
What Other Wix Scroll Effects Are There?
We are entrepreneurs and by nature that means we are curious creatures so I'm guessing you probably tested the other effects you saw in the scrolling section? If you could keep yourself from exploring, these other effects are absolutely worth exploring and each give a unique feel to your backgrounds.
Reveal
This is very similar to the parallax effect and I actually like switching between the two to see which feels better with the other elements in the section. The reveal method will keep the background static as the foreground elements scroll past. With parallax, both background and foreground move but with reveal, only the foreground is moving across the screen. I find a lot of sites using this as a last section on the page to give one last engaging design for the guest.
Zoom In
Does exactly what it says! Scroll down on one of these bad boys and you will be rewarded with a depth experience unlike anything else on your site. Pictures that already have depth perception (looking directly down a tall building (hello extreme adventure sites)) will be extremely exaggerated.
Fade-In
The fade-in scrolling effect will gradually bring your background to life as the guest starts scrolling down. Your strip background strip color will show first with all the other elements already appearing and when the visitor scrolls then the background image will start to gradually appear. Perfect way to keep some mystery on the site.
Think Creatively
I linked to a video above from the Wix design team about creative Wix parallax scrolling but I want to give you something even more! Something I found but haven't seen many explanations even though it is pretty simple.
If you aren't designing your own site then remember the vocabulary I am using. Being able to tell a wix developer or wix designer that you need a reveal background effect on your strip is KNOWLEDGE and this gives you POWER. Power to make your own decisions for your business.
Adding Columns And Wix Parallax Scrolling
This is one extra step but will really give your site a unique design advantage over so many other Wix sites who choose not to use this method.
1) Click the "+" symbol on the left-hand side menu
2) Go to the strip section and choose a blank strip
3) Cick on the "Layouts" icon and then click the "Add Column" button.
4) Now you should have 2 columns in your strip. Click on one of the columns to pull up the settings and then click on the "Change Column Background" button.
5) Choose a picture and then click on the "Settings" button.
6) Click on the "Parallax" scroll effect and then preview your site to see your new parallax column!
Are There Disadvantages to Using Wix Parallax?
Whether you are designing sites or collaborating with others to get your site built, you will inevitably run into the old dilemma of design vs. functionality. The answer to that age-old question is in the head of ever Wix user but there are real reasons to be careful of abusing the Wix parallax scrolling effect.
SEO and Parallax Scrolling
You will want to avoid using parallax scrolling for your landing page because of Wix SEO. So if you were trying to accomplish the Wix design team's video for a great homepage intro into your site, then will want to rethink this strategy. Basically, search engines love content and love giving people the best content for their searches. So if you set up a homepage with no content but awesome graphics, the chances of you ranking high and getting found are slim unless you already have a trusted following.
Parallax Can Slow Loading Times
The same can go for any other design choice made to your site including colors, font types, font bold, images, videos, .png files, and the list goes on. Using too much of the parallax scrolling can cause your site to take a longer time to load and nowadays guests are expecting a site to load within 4 seconds. If your site is taking longer then 4 seconds there is a specific tweak you can make that will improve the performance and taking off a parallax or two might just be the answer.
Mobile and Wix Parallax
Mobile is not compatible with Wix parallax and if you don't know this ahead of time you might have a deflated feeling going into your mobile section or getting the site back from your developer and not seeing anything happening. I don't recommend spending a lot of time on your mobile design before you have most of your desktop in order, but you have to be checking on the mobile editor view every now and then to see how things are looking on every page before you end up having to rethink your whole design.
Mercado Wix Design Wix Parallax Takeaways
1) This one is the same that goes for every other design element on your site, you need to be striking a good balance between design and functionality. Check your site speed after every editor session. See if what you just added made a significant difference in how people enjoy your online presence. How do you welcome your guest into your online home for your business?
2) Whether you are designing or collaborating with others, knowing the vocabulary for what you are asking for will save you LOTS of time in miscommunication. Know what a parallax is first, then you can figure out if you need one.
3) TAKE ACTION! Experiment with parallax on your site or give the idea to your Wix team or maybe this jogged a different idea but whatever it is make sure your site has subtle, yet engaging animations that lead the guest through the best experience for your business.
Would you like a video of the parallax breakdown or a PDF with step by step instructions? Comment below with your requests and I'll make a short video to help with adding a parallax effect to your site.
If you need help building and maintaining your site feel free to contact me by filling out the form on my contact page. I'll get back to you shortly and we can start working together!