Wix Design Tutorials: Creating a Column-Based Site with Dynamic Scroll Effects

hi I’m Sam from the Wix design studio in this tutorial I’ll show you how a design expert uses the Wix editor to create an entire strip based website using columns and multiple scroll effects this technique is great for any website but especially a creative CV or portfolio so let’s dive in first I’ll open the Wix editor and start with a blank page I always start by saving and naming my site so it will autosave in the future in the editor I’ll
change page background to pink and change page design to no color so it matches my background to add the first strip go to add strip and drag it into place I’ll set the Y position to 0 to customize the look of my strip I’ll change strip background to an image I’ll upload a dot PNG of a cross pattern and select change background click settings to get to image settings I’ll leave the image opacity at 100% but changed the color behind image to 0% so
it matches the pink color of my site I’ll also add a parallax scrolling to the image from the toolbar I’ll adjust the height of the strip to 450 pixels I’ll add some text to my header and customize it then I’ll go to the toolbar and click align to Center next I’ll create a full width strip with columns I’ll add another strip and adjust the height to 750 pixels then I’ll change strip background set the opacity and color to 0% to add columns
select the strip click layouts and add column I’ll add three columns now for the design I’ll start by adding an image to column to select it and click change column background then go to Settings image and upload media under column layouts select align content to Center this will keep the image centered no matter how I play around with the columns next go back to manage columns click layouts and under customize proportions I’ll resize the width
of each column by dragging the handle and add some spacing 100 pixels for column spacing and 40 pixels for padding in preview mode you can see how the parallax scrolling the header creates a smooth transition to the image back in the editor go to add box and drag it into place I’ll adjust its scale and customize the design set the fill color and opacity to 0% and add a three pixel white border I’ll also add some text and make it match the look of
my header now for some visual effects select column to change column background settings and under scroll effects I’ll go with her relaxed in preview mode you can see how parallax gives the image of cool effect as I scroll while the text remains static back in editor I’ll make some final tweaks to the design just like before I’ll add a strip and columns for column one I’ll add two more images attached them to the column and layer them in a
playful way I’ll add some text and save it as a theme so I can use it anywhere on my site then add a button finally I’ll click on the strip layouts and slide the customize proportions handle to adjust the width of my columns in preview mode you can see how the image in column 2 appears to move while column 1 remains static I’m really digging the parallax effect to duplicate the previous strip select the strip right-click and choose duplicate
now to change things up a bit select column 2 layouts and align content to the left then select the whole strip click layouts and use the customized proportions handle to set the column widths to 55% and 45% in column 1 I want to create a layering effect with the background and foreground image first I’ll change column background to an image then go to add image and add to page as I drag this image into place I need to attach to column not the
background to break the column layout of the site I want to switch up the design with a classic strip go to add strip and drag and drop click stretch and stretch it to the page next I’ll change strip background to an image and under image settings add the reveal scroll effect because I want more of my image to be visible without scrolling I’ll adjust the height of this strip – 543 pixels I want to play around with the column based strip from
above select the strip right click and duplicate drag and drop it into place setting the y position to 3851 pixels to switch the order of my columns I’ll go to manage columns choose column 1 and move it to the right now I’ll repeat the actions from strip 4 but align my content to the right in column 2 I’ll create the same image layering effect as before finally under layouts I’ll align content to Center preview to see how things came together in
this strip and head back to the editor to make some minor adjustments I’ll save time by duplicating the last strip drag it into place setting the Y position to five thousand five hundred and ninety pixels switch the order of the columns so the site’s design is more dynamic now the image is in column 1 and the text in column two for column 1 changed column background to an image from image settings keep image opacity at 100% but reduce the color
behind image to 0% so it’s transparent next add the reveal scroll effect and column to go to layouts and align content to the left I’ll edit the text and play around with colors I’ll add a new image to this column and drag it into place finally I’ll customize my footer click Change footer design customise design fill color and opacity and pick a color reduce the center background to 0% lastly I’ll reset the footer position to 6400 and 41 on the
y-axis in preview mode you can see how all the strips play together look how the images come alive as I scroll through the site to finish up I’ll show you how additional scrolling effects can give the site more cohesion add a new strip then change strip background I’ll upload images as dot PNG z’ and click change background in image settings reduce the color behind image to 0% so the effect is clear I’ll also add the parallax scrolling then I’ll
adjust the height of this strip to 1000 pixels now in preview mode see how this image appears as an overlay on the second main strip this frames the main image and then disappears as I scroll further down the site I’ll repeat this process again for two other strips and that’s it here’s my final column based web site with multiple scroll effects thanks for watching I hope you had fun and we’ll see you in the next one