Rebuilding the Taylor Swift website in Webflow Part 2 - Live Stream - 11/23/2021

hey what's up everyone john here with web dev for you here to help you build awesome websites without code in webflow uh welcome yes uh if you're new to these live streams i do these every monday through thursday from 12 p.m to 1 p.m central uh where we go over everything related to web flow and web design and development so i cover how to build entire sites and web flow how to create animations and interactions and we cover uh kind of general web design and development concepts like uh like grid flexbox and um just best practices in general uh so yeah so if you were at my live stream yesterday um we are rebuilding the taylorswift.com website in webflow so i kind of designed it here in figma just a rough sketch in figma and uh yeah so this is the the taylor swift the actual website and i just thought it was a bit uh like not good in a way like i know that's probably not the best way to say it but the sections on her website are images and that's like a website like you can't really do that with websites that you know have images because search engines can't read the text in the images and yeah when i first saw the site i couldn't believe that it was at her actual website so i i wanted to rebuild it in webflow obviously it's nothing too extravagant but i just wanted to quickly show how you can make a much more user-friendly site um in webflow and and we can do it quickly it doesn't require a lot of um time necessarily to to build a much nicer website and workflow so uh for the rest of the week this is what we're going to be working on um we are gonna add e-commerce to the site because on her website she has products um and she has this video uh so we're just gonna make it a lot better uh for sure and um yeah so today we're going to add this section where she has kind of her cd and the vinyl um yeah hey manuel yeah i talked about uh no code a little bit uh it was super dope i i mostly saw the i want to call it the keynote like that first video where they mentioned you know where vlad talked and a few other members from webflow talked about the new features so like memberships subscriptions logic flows the new filters we did talk about that uh yesterday so yeah i touched upon it a little bit i did attend timothy rick's uh breakout session which was really great i like how he thinks and you know how he approaches design so that was a really fun breakout session during no-code conf all right cool so what i have uh planned for today we're going to create some better mock-ups of her cd and her vinyl here so if we go to envato elements um yeah envato elements just a great place to find assets and there's a link in the description area below to to these assets or to the envato element subscription so hey joey joe how's it going so i'm just going to type in cd mock-up and we'll find a good one here so let's see i kind of like this one excuse me and yeah we'll we'll work with this one so i just have to download it and let me show it in my finder here and it's just a psd file so it's a photoshop file and all we have to do is replace the image so i just have to double click here and uh drag the image in in this area so i downloaded the taylor swift album cover art which i think is this one i'm just gonna drag and drop it in here and i think i just have to make sure it covers the entire section oh no actually never mind let me undo that i have to double click in here i believe so let's see let's try that again okay your image here i think this should work just gonna try this and actually it should fit within something like this okay i think i just have to save it go back in here and no that was not it um let's see placeholder cd base here let me try this oops your design here just bear with me for a moment while i it needs to be a mask so the image so let me create a new layer and put the image in here and let's see how do you do the mask all right uh so kevin wrote i did not listen to some taylor i did swift after yeah neither did i for sure yeah um that's funny yeah if anyone's proficient in photoshop i'm trying to get this i know there's a way to do it it needs to be not a mask but i need to place it oh there we go yeah perfect okay and let's go back in here and i should be able to make this image yeah hit command t and we'll do something like this yeah it's not perfect but yeah something like that will work okay and hit enter we're going to remove that actually place that's an image so yeah we'll just remove that uh you can make a selection from the cd shape by clicking with command on the cd shape [Music] gotcha okay yep yeah that's good all right thanks manuel um yeah i just wanted to put the image okay so that looks pretty good and let's go to the cd case which is right here and i'm going to add a different image because the the other image wasn't large enough and it was kind of too small so it's going to look pixelated okay let's take a look that's not bad i just don't like this image this image is like pixelated or like it's a small image like i really had a hard time finding a good quality image so i might i'm actually thinking of replacing this image with this one okay all right that's a bit better yeah we'll go with that it's a it's a much higher quality image and i i just like it a bit better um i don't want a background so i want it to be transparent uh i think the shadow is okay um now i kind of like it without the shadow we'll remove the shadow here alright so that's going to be our image and let me see if i can change the canvas size let me uh let me quick export it as a png so export hey what's up dylan uh let's do export quick exports png and yeah we'll just save it to the downloads all right it doesn't look bad uh cool there's just a lot of um i might have to change the canvas size to would it be two thousand by two thousand okay i wish it had like um or is it trim transparent pixels perfect yep that's what i was looking for export quick exports png replace all right perfect so now we'll go into webflow and we'll add this cd section so here the way it's set up um it has the image of the cds and then it has what the cd includes so i'm thinking for this i'm gonna put a heading so it's gonna be an h2 heading and for the video wrapper i'm gonna add some margin from the bottom oh the other thing i wanted to mention so yesterday i mentioned making this position sticky and yeah i was able to do it and it's actually quite simple so what you want to do to make this side position sticky is that the main content wrapper has to have more height and then we can select so this is called main content right i gave it a specific width and height and i set it to position sticky and 60 pixels from the top and when i scroll this stays here which is exactly what i wanted i wanted this to always be visible so the user could either either buy the album on amazon or listen to it on spotify so we scroll stays in place and great so here i'm just going to write album and then yes we have that we have the short film we have the album and i'm trying to think of the format i want to use for this um so we'll do album and then i'll add another heading we'll make this h3 h3 and i'll call this cd version and we'll say um actually before i do that let me in the main content wrapper let me add a div block and we'll put it below the video wrapper and this will be called album underscore wrapper just keep it organized and then we have the h2 in here and the h3 will be album underscore heading [Music] and then we'll set it to normal and red okay so we have the cd version and then here i want to add a list item or list excuse me a list cd version a list okay then we have cd version includes [Music] and i'll just grab some of this text so we have exclusive album booklet with never before seen photos artwork and lyrics for the nine songs from the vault cds will be delivered starting november 12th okay so then for this we'll say album list item and for the list we'll call it album underscore list all right so we just have to style the list items let me call all of these album list item and this one as well album underscore list item let's add some margin from the bottom and the top maybe 20 make this a lot larger maybe 18 and the color will be red okay so just a a nice neat list here and i think let's see album list i think i want to include the image before so let me grab it just drag it and drop into webflow oh it looks very large so let's grab let's open it and resize it yeah it's too large probably just a thousand in width it's not gonna be that big yeah this is yeah too large we're gonna delete it drag and drop hey how'd you fix the sticky part uh yeah great question eric so with sticky you need the parent element to have more height yeah to have a specific height basically some scrolling height so to the main content wrapper i added 300 vh and then to the main content right i just set it to sticky and then it worked i also gave the main content right a specific width and height but i don't think it needs it to work or yeah it actually does need it to work so a height that's less than the parent element and then it works all right so we have that it's much smaller okay cool that looks great actually i like how that looks so we'll have this album underscore cd image and we'll add some margin to the top and the bottom maybe some like 40. and maybe the the album like this okay perfect i like that all right that looks much better and it's nice and and pretty crisp i do like that um yeah i'm feeling that good stuff yeah so just by adding some nicer images and formatting the text a bit better right like if we look at the at her website like this is just text in an image and it's just just not i mean like even reading it is not great right but if we have you know elements that are easier to read it's much better all right and let's add a call to action as well now i can add this button here and you know what just to just to kind of encapsulate each each section um let's see here so we have album wrapper yeah this list should go in the in the wrapper yeah and then below the there we go and this primary button should go in here and something like that the album list will add some margin there and let's see album wrapper yes primary button should go in here okay great nice then we'll give it a display setting of flex vertical and left yep i would want this button to be aligned to the left so primary button and output is album and we'll remove this margin from the left and yeah the padding should be 40. okay buy on amazon yeah that looks pretty good and we have the video short film wrapper so i'm thinking for each of the wrappers we can add a border radius a border with a radius to it so we're using 30 i believe yep 30 and then we'll add some padding to the the uh the wrappers so maybe something like 20 and same for this album we're just trying it out right i'm just trying some design concepts here and short film wrapper let's do 40 and padding we'll do 20. yeah it's not bad it's not bad um let's right and this is just a rough draft so we'll we'll definitely uh polish it up a little bit as we continue to build yeah but just having it in nice neat sections i think looks much better and then for this main content let's put it to the left yeah so it's a little bit closer we'll work on that ideally i would want this element here aligned to the right so i kind of want to work on that a little bit but i don't want it so far from this that it looks like a separate thing unless here i get an idea we will justify to the right and then for the columns the gap will say zero and that's still too much so let's edit this and let's make this 3fr yeah and then the gap will add more gap here we'll change it back to 60. all right nice that looks good john is there a way to make the list bullets custom and webflow could not figure this out yet so i did it with background images a great question manuel let me take a look and i'm going to i'm gonna rename this to uh main content heading and then i'll say is album and for this i'm going to say 20 actually the yeah i don't know yeah let me remove this album that's better it was too far from uh from the top there and i might add some more padding to the wrappers maybe 40. uh and i know what something i didn't do section content no i did i added the uh the 10 vw all right so yeah that's kind of more of what i was thinking so we have the short film we have the album and this stays position sticky so the user can always click to buy on amazon or listen to it on spotify alright so so far so good let's take a look at the bullets manuel was mentioning so yeah that's a good question i don't know if we can edit the bullets i think no it's not an option yet um can you add a div inside of a list item i don't think you can no no you can't um yeah it'd be nice if they had kind of like like a an option to have custom custom bullets i mean you could obviously do it like by adding a wrapper and then two divs in the wrapper and then the first div would be a custom uh bullet you could add an icon or anything like that and then you'd have the um the text uh but for now uh maybe we'll we'll come back to this we'll revisit it and add some more custom design to this but we'll just leave it for bullet uh to bullets for now um so i'm going to copy this album wrapper and paste let me add some margin to the bottom let's do like 40 and this will be album cd and this will be album or just maybe i'll just say cd and then i'll say vinyl something like that cd vinyl so let's go into um envato and i'll search for vinyl mock-up and we'll create um we'll find a mock up here yeah this one will work simple enough it's 1.5 gigabytes why is it 1.5 gigabytes that's very large um let's try this one oh this is 1.2 gigabytes all right i'm gonna cancel this we'll just work with this first one that's a really large file for a mock-up but we'll work with it okay so i'll open up open it up in photoshop and if you noticed yesterday i had this shadow on the hero image so if i i had the shadow which i removed because i didn't like it and then i thought about adding just a nice subtle shadow i'm not sure how i feel about that yet so i definitely want to add something a bit more designy to this hero section and let me remove the border to see if i like it without the border no i like the border yeah um all right so we have the vinyl record let me open it which one do i want to use the main file believe this this one all right and let's open it okay i don't want this weird shadow it has on it we'll remove that shadows nope background nope and the disk is fine we don't need to change that but let's go into here and this is where i will replace the image okay i'm holding down shift to make sure it's proportionally correct there we go it has this kind of nice effect to this vinyl cover let me save that and let's go back in here nice let's let's go to the vinyl disk and actually should be yeah this right here i guess we can use try to use this something like that yeah all right and then i'm going to image trim okay didn't really trim much here oh because it has a filter on it so i had to remove the filter we'll remove that global light i don't think we need it trim there we go perfect all right then i'll export this to quick export spng and let's put it in the vinyl record folder i'll resize it [Music] drag and drop still kind of large but we'll work with that and i'll replace this with that cool we have the cd and the vinyl version i'll say vinyl [Music] vinyl version includes let's take a look at the site so nine songs from the vault with lyrics for all 30 songs [Music] never before seen photos [Music] artwork and a copy of taylor's hand written lyrics for the 10 minute version of all too well [Music] okay uh yeah so yeah i'm already liking it much more than her other site this feels a bit wide this section so let me go back into grid or maybe i can make the max width of the container a bit smaller let's do 1200 for the container and i'm gonna do container is main content and we'll do 1200 and auto yeah it's a bit better um make sure there's no margin here content left content right no okay it doesn't feel perfectly centered for some reason but i like that i like that i set the container to something a little bit smaller because i just felt like the content was too wide on my screen and on large screens it would be the content would be very wide so i just wanted one it nicely down the center and [Music] looking good just doesn't feel perfectly centered for some reason say main content container section content no it is it is i think it has to do with this gap maybe let me change the gap to zero nope no i guess that works all right i'm just gonna publish it just to get an idea for how it's looking um but yeah i think that's all i wanted to cover today um we used photoshop to make the mock-ups and envato elements yeah if you want a subscription to envato elements i do have a link in the description for the video we did leave a shadow here on this which i don't quite like but i might revisit that so let's let's do that now i'll go to photoshop and let's go in here and let's remove this shadow not that shadow the light setup is okay i removed that shadow that's good the light is fine that shadow's okay is it the shadow i can't really tell that's a shadow i think it is that shadow so now if i image trim yep perfect file quick export as png save that will replace it go back into webflow and let me grab that image [Music] resize it yep um do you think it's good enough to center your team eric i'm just kind of i mean i think it's better than her her site i just uh yeah maybe i don't know i'm gonna work on the design a bit more maybe add some more design elements and yeah if i feel it's good enough i could probably send an email or something but yeah compared to her site this is i mean it wouldn't take much to make a better site than than this like and i almost like part of me is like is this a real site like but it is taylorswift.com you know it's uh it is her site the fact that they used images for um yeah for the sections is a bit uh daunting to me yep this does feel more polished i think i would want to work on the buttons a bit more um the fact that this doesn't feel centered is bothering me i don't unders yeah it doesn't unless let me see did i add some i must have added some margins somewhere section container image wrapper overlay content ah there it is no no that's not it and actually for this i thought of something i don't need to add padding here oh wait maybe i do yeah i do never mind yeah okay uh section container see if i set the container to 1200 ah i think i know why okay because this container is not set to auto so auto there it is yes that feels much better it's nice and centered uh maybe different max width for the sections yeah it was a container wasn't set to auto here for the the uh hero section and i'm going to remove the the fixed on this i just want to see something yeah i kind of like it that it's not fixed yeah we'll leave it like that um maybe shadows like i'll start trying to work with some shadows um let's see distance just something real subtle and the size the opacity will make it 20 and we'll put it at 180 and distance yeah it's not really noticeable the shadow but it's there adds a bit more depth to it um yeah i don't know if i quite like it it feels like it doesn't need a shadow this type of design for some reason but we'll remove it and yeah what else let's go i guess we can start building out the e-commerce uh portion of it so let's see so we have the album chop the holiday collection while supplies last all right let's just skip over to the merchandise okay so that's good all right and let me go into the main content i'll remove this height there we go yeah perfect okay so let's add another section so we have the section hero section content and we'll have another section and we'll call this section shop [Music] alright so shop new merchandise okay so we'll add a container so div container and i'm gonna make all containers 1200 we don't need that much space on the left and the right and then for this one for this container i'm going to say is hero and we'll make this 1440 1440. so it's a bit larger than the other containers but kind of want it that way all right and then we're just gonna add a heading and let me see here yeah i think the shop we're going to make it a full section or a full so this position sticky is going to scroll up and then the shop is going to come next all right so container great uh let's go into let's enable e-commerce so let's do uh do this and yeah we'll just go to products right away so we'll add add 10 10 items just to see if they provide pictures for the products [Music] yeah they do uh so let's see what her products are so she has you know what let's just download the images straight from her site i could have used this i'm going to see how large that is you know what i think we just spent all that time in photoshop for no reason uh let's let's uh let me just double check and see that these images are large enough so i think that would work except that album covers so the quality of it but let's just try it we have that just want to see how this looks no no i don't like that image at all okay so yeah let's go back into products into e-commerce and we'll just replace you know what i'm going to delete all of these products because they're not really what i'm looking for all right so let's create a new product and her first product on the shop is taylorswift.com it's a album cover heather gray long t-shirt and it goes to another site it's just and the green and the red um can somebody check and make sure there's not another taylor swift site out there i just i it it boggles my mind that this is her site album cover had it grey long like i feel it's like a fan site that was accidentally made and they just didn't change the domain or something uh let's see oh uh yeah this one so there's that the price is forty five dollars and cool i'm not going to go and add the option sets i just want to create a collection list of products so i might just add maybe three products or something for now because we're almost out of time and then we'll finish this up tomorrow album cover ringer t-shirt and that is forty dollars and one more product the all too well knit scarf and that is 35 dollars is there a thunderstorm going on um no no it might be a jet okay so let's see inside a heading you know what let's call let's add a div and i'm going to call this shop wrapper and we'll add a heading in here make it an h2 heading and we'll say shop merchandise and we'll say shop underscore heading okay for the section i'm just gonna momentarily add some padding to the bottom so we have some scroll to work with and i'll center that okay cool so now i'll go ahead and add a collection list and we will grab it from the products and we will add an image get image from the main image and we'll make it 300 by 300 and for the collection list let's make it let's see shop underscore collection list and we'll make it grid that'll work and we'll just make the elements centered okay cool the collection item will add a this will be an h4 heading or maybe just a text block yeah text block get text from um name let's get the name and then we'll say shop product title [Music] center it make it red make it a little bit larger cool and then we'll add the price and we'll also say shop product title and we'll just duplicate this and call this product price okay i'm gonna add some padding there for the grid let's go ahead and do something like 60 by 60. no that's not quite working maybe flux for this flex yeah and then for each collection item we'll just add some margin and for the collection list say center all right much better okay so far so good uh let's see why okay there it is 400 section content we're just going to add some margin from the bottom maybe a little bit more all right so far so good we just made the shop section look way nicer and they'll be able to purchase right on webflow so i can add the cart to the nav bar and yeah yeah so i think the user experience is much nicer like i'm looking at her site like just a huge image i have to read this text the image quality is not very good there is this holiday collection um wow wow um yeah and we'll add this latest releases section and maybe a newsletter in the footer we'll add a nice footer at the bottom for the site but yeah i think the site's coming along considering i don't know if the red outline is too much see shop wrapper oh this should go in the shop wrapper yep shop wrapper border and 30. the shop wrapper will add some padding um maybe maybe it works i'm not quite sure yet see his last yeah that's better i don't know let me know what you think about these borders i feel like it does yeah i would want something to divide up the different sections um yeah starting from tomorrow i will be in indonesia for two months so i might not be able to bother you with my questions unless i am getting up at 1am for your stream we'll check the recordings though sounds good manuel uh have fun in indonesia um thanks for yeah just stopping by and and your questions uh they never bother so they're always really good questions um yeah so i think this is it for today uh we're working on e-commerce i might add some add to cart buttons we'll add the cart here tomorrow and we'll add the footer section and yeah that that could be what we do tomorrow um but as you can see we we're definitely making some progress here with a much i feel much user friendly site right i'm going through the site i get to watch your new video cd vinyl there's a shop merchandise everything's just a little bit more accessible what i would want to do actually to add more design to it is add like a grain effect like a nice grain overlay because i feel there's something really vintage about her album and her look like these images are like a little bit vintage so maybe i'll find like a nice dirt vintage overlay that we can sprinkle through the site to give it more texture i think that would be kind of nice but yeah the last thing i'll do here before we sign off is just add more padding to the bottom here maybe like 60. yeah that's good yeah i'm pretty happy with it so we started here in figma you know i started building it in figma and it's it's pretty much what i envisioned as i was designing it in figma okey doke all right so yeah that's it for today's live stream uh thanks everyone for joining uh appreciate everyone who comes to these live streams i know sometimes i'm pretty quiet as i'm building but hopefully you can pick up some things as as i'm working on the site you know just how i approach a web a website build and yeah feel free to ask questions i'll be here at the same time tomorrow we'll finish working on this site and i think that's all i got for today thanks for watching everyone uh stay tuned for the patreon membership that's coming soon maybe not this week but probably uh next week alright thanks everyone appreciate all of you have a great rest of the day thank you peace

Channel: WebDev For You

Views: 208

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, taylor swift website, taylor swift website rebuild, taylor swift website rebuild in webflow, taylor swift web design

Id: 3V1ykUbHNEQ

Length: 60min 55sec (3655 seconds)

Published: Tue Nov 23 2021