Wix Tutorial: How To Build A List From Scratch On Wix

hi guys I’m Calvin from raw coding today I’ll be showing you how to design and add a list from scratch on your Wix website hey guys I’m currently in the Wix editor and I’ll be adding a list to this section of my web page to add a lists press add on the top left go on to lists and grids and you will see a variety of different list designs that have been created by Wix it’s important to know that all of these lists have been created by the same
template the only things that have been changed are the images text colors and settings used for each one so I’m just going to drag one into the editor it has been designed for holiday bookings so these elements have just been added to the list cell so there’s an image over here with some text and as you can see you can change all of this and add your own stuff so I’m going to take this delete all the elements and basically start from scratch and
show you how to do everything yourself so I’m just going to delete the pictures the writing and the buttons as well and then what I’m going to do is delete the cells itself press one of them say manage items and you can delete the item three and item two over here so now we will be left with a list template with a single cell inside of it before making this video I created my own list design on powerpoints to give myself an idea of what I would
like to create in wigs so this is the design I’m going to be creating on my Wix website I’m going to add three separate cells with different colors I’m going to add these pictures into each of the cell our ads and text over here and I’ll also add a semi-transparent box overlay with some lines on the end which I think looks quite nice I’m going to upload this image and pop it into the Wix editor so I can transfer this design into the list on Wix
easier so I’m just going to upload it now I’ve uploaded my design that I created in PowerPoint and I’m going to add it to page now so this is what I’m going to try and recreate in the list above to start I’m going to resize the first cell by double clicking on it going to drag the button down and I’m going to drag this out all the way to the end next I’m going to double click on the first cell again press design and I’m going to add some
corners to it I’m gonna say 30 pixels so now it looks quite similar to the design I created on PowerPoint next I’m going to select manage items and I’m going to duplicate these cells twice one two so now we have three separate cells in the list I can see that the gap between the cells is a bit large so I’m going to click on the entire list once press layouts and reduce the spacing between items over here there we go next I’m going to change the
colors of each cell double click on the first one press change background select color and I’m going to choose a light blue on the second one I’m going to do the same thing change background color and a pink the third one double click on it press color and add a green I know the colors don’t look exactly the same versa they will do for now next I’m going to add some text I’m going to press add text I’m going to choose heading to pop it in there
for my convenience it’s automatically added it to each cell in the list so I’m going to change the first one to coding tutorials I’m going to change the second one to web design and I’m going to change the third one to building computers I’ll be editing the text to make it look similar to the one our design previously next I’ll be adding a line to the list press add go on shape and I’m going to press on one of the themed lines at the top attach
it to strip rotate them it’s actually double click on them maybe choose a stronger line quite like that one actually I’ve uploaded these images to my Wix files and I’ll just add them to the list now press add image my image uploads I’m going to select the first image press add to page drag it in over here and Wix will automatically duplicate the image onto the rest of the list cells to change the other images select them click on change image and
just choose the next one and repeat for the last one finally as an added design I’m just going to add this transparent box onto the list over here to add the box press add click on box and just choose the top one over here I’m going to edit this box by double clicking on it press customize design full color and opacity I’m going to choose a gray I’m going to bring the background down to 30% now I’m just going to resize this press attach to item
and then it will be attached to the list over here finally I’m just going to add a quick page title and then we’ll have completed the design of our list to add your page title press add text heading 1 bring it to the top so now we have completed our list and copied it exactly as it is from the image design that we uploaded I’m just going to delete the image and as you can see this is the final list if we quickly go back on the lists the Wix
templates really are great and you can just change the elements and you won’t need to resize and set up everything yourself but as a learning curve I thought it would be great to just start from scratch if you are interested in joining Wix please do click on the link in the video description below it basically tells Wix that you join through me and helps me out a lot I really hope you enjoyed watching this video if you would like to watch more
tutorials on Wix please subscribe to our youtube channel and take a look at my other videos thank you so much for watching take care