Sliders, Carousels, and Tabs - A Webflow Tutorial

hey guys my name is Jose Oquendo I'm a Chattanooga based web designer and web blow developer and in this video we're talking about carousels tabs and sliders so as long as I've been a web flow developer sliders have just been a big request from clients and even what I haven't but the designer they've been part of the project so you have to be able to know how to use them but unfortunately they're just not the easiest components to use in a web flow they're not super user friendly so I decided oh great I'll create a tutorial video on this topic so that you guys can further understand how they're used and be able to implement them into your own projects so I created this space logo for one of those kind of like 30-day logo challenges and I thought it'd be fun to use it for this project and create kind of like a co-working web site so we're going to be taking this design and creating this website up here at the top this is a sliders or you can advance through these photos there's currently only three but you can add as many as you like we're going to be creating this awesome card slider that represent the buildings of the co-working company and you can advance through the cards by clicking on these dot indicators and also be creating this amenities slider with the tab component and I've noticed but as soon as the progress bar gets to the end it switches down to the next line and you can even click to advance manually so then last of all we'll work on this CTA section and the footer and by the way with a CTA section we're going to be using a CSS blend of multiply so if you have ever designed something and just wish like and I just how do you do like multiply or overflow not overflow overlay soft light hard light how do you do those things and web sites well we're going to be actually tackling that this has a background overlay that set to multiply so anyway it's pretty cool stuff so I hope that you'll stick with me as we go through this before I begin I just want to say a special thing to Austin distal or die still Austin thanks so much for your photos Austin took a bunch of amazing photos of this co-working space called I guess proof and so I used them throughout the website and then I also use photos by Jayden Chong and he has a smaller portfolio but just beautiful photos of these buildings and so I use those for the co-working space cards so anyways like I said I hope that you're interested in this topic and that you'll follow along with me as we create sliders carousels and tabs all right guys um before we jump into web flow let's take a look at our design and just kind of strategize about how we're gonna how we're gonna create the foundation for this section and essentially when I look at it there's two sections there's the one on the right-hand side that has the slider itself and then there's a section on the left that has our content and to do that we can use flexbox so let's jump into web flow here add a section make sure that we set the tag to header and then add a div block inside of that section and we'll call it flex horizontal and it's important to be thoughtful with these names because later on down the line we may need to reuse this element and so I'd be great to be able to reference it and know like oh okay that's the horizontal when it's not the vertical one okay so let's set it to flex and it's already set to horizontal and just by happenstance these are the exact settings that we need actually okay so then week and add a another dip lock and let's call it flex horizontal again I'm referencing the name but calling it child of 50 because I want it to be 50 percent of the parents width and there's two ways to do that one is to hit expand here and essentially what expand does is it makes all elements grow with equal and opposite force so since there's two they're not 50% but I have found that sometimes depending on what you add or sometimes the spacing that you add to these they can in grow a shrink a little bit in unexpected ways so I just prefer personally to use basis and 50% basis that's why I know these are at 50% inside of the right hand child I'll add a slider and let's do a little housekeeping before we actually start customizing this thing let's give everything names so first of all we don't need the dot navigation so I'll create a class called display:none and simply hide it and by the way we can use that class again later on anything that we don't want to be visible we can just add that class or even a combo class and it'll disappear but we're gonna call this hero slider arrow button and the same thing over here and then let's go ahead and name the slide itself your a slider slide and then in ascending order let's go up and name the next elements up here a slider mask and I'll talk about what that does in a second and then the last but not least they here a slider itself inside of the slide let's add an image and we'll call this hero slider image by getting T creative here let's go ahead and pick out our image that we need and with this selected let's give it a width of 100% and a height of 600 pixels and doing that because my design calls for a height of 600 pixels okay so you may have noticed that when I added that height all of a sudden the image got really stretched looking and we're going to address that in a second first let's go to the slide and we'll give it a height of 600 pixels as well and then we'll go to the mask and let's talk about the mask before we make changes so the purpose of the mask is essentially to reveal only the active slide kind of works like masks in Photoshop or sketch where if you put something inside of a mask if even if that object exceeds the boundaries of the mass you only see what's inside of the mask so for example let's say I set the height of the mask to 200 pixels well we're only gonna see 200 pixels of the image so if I select a 600 we're now seeing the image itself by the way you could set it to auto and you could also set the height of the slider itself to auto and then the content inside will determine the height of the slider but we want a fixed height of 600 pixels just specifically for this design alright now let's talk about the image now you see it's a little bit stretch especially when you look like right here but let's say I set this to like 200 pixels it looks really stretched and super ugly so let's address that let's add some custom code to make sure that our image looks good even though we've got this really weird setting excuse me and essentially we're gonna be using object fit cover to address that so let's add an opening and a closing style tag and essentially this is telling the browser hey we're this is a CSS okay and then we need to call the CSS class that we added for the image which I believe is here Oh slider image at our closing and opening brackets and then like I said we're going to be using object fits hover okay so make sure you add you little semicolon there and then look over here in the top right when I hit save and close we should if I did this correctly we should see it realign and get back to the original proportions okay great so now we can make it 600 like you had originally awesome okay and then the next thing we're gonna do is start working on getting our buttons into the right place so so to do this let's go ahead and mess with the absolute positioning and I think right now it's set to probably alright or some even though it's not displaying a saying Auto and I believe it's set to this so what we can do is set it to bottom right actually and you notice that it's hovering over here for some reason and that's because the height of our slider itself hasn't been modified so just that just make it easy to select these buttons and the feature I'm going to make them 48 by 48 pixels and that's just because these buttons are 48 by 48 okay and then with the hero slider selected we need to give the slider itself a height of 600 pixels so I think we could also set it to auto and that also gives it a height of 600 because the elements inside are 600 but we want to do a little bit more than that so to make room for our buttons down here let's add 48 pixels so now the slider is set to 640 a and you'll notice that our buttons are now down here which is perfect and we need to allow for the margin between the buttons and the image which is 32 so if I just add 32 in here then we're not a lying room and let's go ahead and we'll go we'll get one of these which one goes left and watching goes right this is the question okay so we'll call this left arrow button and we'll just use I don't want to mess with these settings because you'll see why in a second but I'm gonna use transform to move it over to the left negative 48 okay so I chose the wrong one so I want to delete left arrow button from here and add it to here left arrow button alright so now we're getting the correct buttons in the right place and we can go ahead and actually delete these icons the icons themselves they're just icons they don't actually have any functionality attached what what makes that that slider actually work is the link blocks here that we're currently messing with and then we need to make room for the margin here so if I go back down to here I can just do minus 16 and then I'll move it over if I do x-ray mode you'll see them over here on the right-hand side without here a slider we can go ahead and get rid of that gray background and why does this have margin that's weird looks like as a cream Porter okay anyways excuse me and then the last thing we want to do is and the design this is not flush with the edge so technically it's ninety four pixels away from the edge but we want to use a little bit more of a responsive unit so what we can do is instead of 0% we can make this 6vw or viewport width and that's gonna push it away again it may not be exactly ninety four but just like it kind of looks like the design all right and then inside of the button let's go ahead and add our our circle so we'll just call this up we need to add a diff lock and they didn't get added to the button like I was hoping it would okay there we go and we'll call this arrow circle give it a border of two pixels with our brand blue and same height as these link blocks 48 by 48 and the reason I'm not applying these settings to the buttons themselves is let's say that I want to reuse this arrow circle later on I might I don't want all this absolute positioning type stuff to get added to them all right and then if I disable x-ray mode you'll notice that it's currently a box and that's because I need to make my corner radius 50% by the way that only works if it's a perfect square otherwise you get kind of this weird more oval shape than you do a circle okay and then I can just duplicate that into this one and then let's go ahead and add our actual arrow and with the arrow circle just to make sure that this is a little bit off-kilter we can use flexbox to get it right in the middle let's give this a nine - I'm gonna call it arrow circle arrow and then we'll copy and duplicate and we need to give this we need to declare either a width or a height so that the browser knows how to show this SVG so I'm going to use 24 pixels it was displaying correctly but there are some browsers where if you don't declare a width or height then your SVG doesn't show up at all it just looks invisible so you have to make sure that you declare with her height and then we'll call this left arrow and we'll just use transform rotate and rotate it on Z five hundred and eighty degrees okay so I think that does it for the actual arrows so if we click on here this is working correctly all righty it's sorry I'm coughing a little bit all right so let's let's make our little caption area now and what I'm going to do is I'm going to set the the the parent element for this actually if I edit to block yes if I add a div block it's actually below the arrows and I don't want that right so we're gonna use absolute positioning just like we did with these arrows to make sure that this is in line with the arrows so with the parent element I'm gonna set its position to relative and what that does what the difference between static and relative is that static any absolutely position elements ignore static but if but if a parent element has relative attached to it then that absolute positioning now it's kind of treats it as its master and says okay I'm positioned according to you so we'll call this a hero slider caption rather position absolute like I was just saying and look down here it's targeting that flex child fit that's because we set it to position relative and we want to set it to bottom left we also want to give it a height and width of 48 pixels and now we're in line with our buttons so I want to make sure we're gonna use flexbox to create this so that this line kind of expands or minimizes so the way we can do that is we know that this is set to the button is moved over 6vw right whoops I can't click so what's going on is we need to set a z-index for things so with the slider buttons let's say the index 2/3 and with the caption is the index of the two all right there we go I can click on it so Z index is kind of like telling you kind of like the pecking order of things and something with a higher is the index will be above things with the lower Z index so I want to make sure that the buttons are the highest so that nothing interferes with the functionality of moving the slider back and forth but I want the caption to be clickable so I had to give it a Z index of 2 so if we know that this is 6vw and this is 50 then if we make though width instead of 48 if we make it 40 4vw then that's going to bring it to the very edge of our buttons and then we essentially just have to add padding so 48 plus 48 for the two buttons plus the 16 pixels of spacing in between them so if I go to enable x-ray mode and hover over the 112 and I set the padding is now making sure that nothing is going to be over the buttons all right let me had a paragraph and let's copy this so I already did the paragraph stylings just that we wouldn't have to worry about that I'm actually gonna use a text block as I said the paragraphs to that gray and so that we have that and with the caption wrapper selected I'm gonna make it flex box and align to the middle okay this particular text is a little bit bigger than normal paragraphs so we'll create a new class called paragraph jumbo and I think it's 18 instead of 16 okay and and then I think it's set to medium as opposed to regular yes okay let me take off x-ray mode and that is looking good I guess the only thing is I need to give some padding here to match the buttons so we'll do 6vw okay and then we'll add a newt dev block and this is gonna be our HR so I'll call it HR gray and I'll sit set it to expand it's going to be a height of two pixels and it's gonna be our dark value at 12% all right so now we've got the HR aligned and by the way HR is an HTML how you introduce a line like this of course I'm using a deadlock and not an HR but anyways I think the spacing was supposed to be 24 so we can just add that margin on either side 24 24 whoops and our HR is showing up appropriately and as we minimize the screen the HR line will get smaller okay I'm gonna click rap just to make sure that once it gets too small this cascades down to the next line and and this one wrong I think we're done with the slider let's add our other images so over here and the Navigator we can actually just click on the slide and delete it and then copy and paste two more and then we can just add our next images so I want this outdoor one to be next I want the this kind of like on the balcony one to be last so if we did that correctly you know I've got three images and object fit cover is working perfectly so that they're all 600 pixels tall but displaying correctly all right really quickly let's go ahead and work on this I think this section should take a little bit less time so the first thing I'm going to do is add that background graphic so if I use that same combo class of position:relative I can just simply add that image directly into the file to the box I should say and let's give it a glass of ikana hero background we're gonna set its position to absolute top left and I don't want I don't want this icon to brush up against this over here I want there to be a little bit of white space like we have in our design so I think I can do like am axle width of 40 for VW and that should work okay so as we move in it starts minimizing so that it makes sure it isn't butt up against the slider okay next let's add our content and we'll work on the navigation last so we'll add another div block I don't think they got added into the right place so let's move it over this way there we go and we'll call this hero content wrapper so it's positioning to absolute full and then we'll use flexbox to align it vertically in the middle okay so then we can add another box to block and this is going to be oops it's not inside of there we go now it's responding correctly so like this selected oh it looks like the kind of what I mentioned was e index the icon is over I think if we just move it that might fix it okay there we go then with the deluxe selected let's do a max width 492 and have that here and I we can add a heading oops add a paragraph and add a button okay like I said I already styled our heading and our paragraph so that we don't have this waste time to read that and by the way whenever you copy and paste from some programs it carries over some of like this styling but we want to get rid of that and make sure it's not apparently I misspelled coworking oh I don't like that all right but we do need to style our button and so let's style the text itself first so I think the only difference is that it's a semi bold so if I just move it from normal to semi bold that should be working great and by a pass and then next let's work on the padding so it's 12 top and bottom and 32 on the sides we need to make it the background-color are our blue our branded blue and then to get those a kind of like pill what is it called pill box we can just give it a radius or something ridiculous like 100 and they'll give us that circular side and then we've got to make sure we have the right margin and at the 24 this has a fixed ten pixels of margin automatically paragraphs do so if we just add 14 and that'll give us the total of 24 that we need okay and then there's a little bit of a shadow actually not a little bit a lot of it so we need to add these three drop shadows down here and the reason I use three is because it makes a little bit more of a realistic looking shadow it's just a little bit softer and like I said more realistic so zero in this case is 180 so that it points directly down and then it's one two and our dark value at 14 add one more and this one is zero four eight so 180 for eight and our dark value at 12 percent and then finally one more with sixteen thirty-two our dark value at 20% I created a nice soft looking shadow for our button let's give it a hover State and hover I wanted to go to our darker blue okay and previously for lengths I set border color font color and background color to all have a transition of 200 milliseconds with ease and that means that when we hover over it they'll kind of ease into that background color nicely okay I think the last thing we need to do is our navigation so not inside of this section but just in the body itself will add a map bar I have it above everything and what's going to give the navbar a class and so that's positioning not too relative but to absolute and now you see that everything moved up and it's now in the top left we can do the same thing make sure it's top left and set its width 250 V W excuse me okay let's get rid of that background color and add our logo whoops let's get our logo a class and I think it's 42 pixels tall yeah there we go and then in terms of space seeing there's 24 pixels of spacing on top and 48 on the left so we can just add that trek-like to our nav bar so 24 40 and then let's go ahead and get rid of the container because we don't really need it get rid of that container then with the nav bar selected use flexbox align everything in the middle and to the left all right now let's work on these NAB links and I think that almost there at 16 the only difference is their semi bold in their blue and let's go ahead and give them a hover state of our darker blue okay and then they've got 32 pixels of spacing between them so if we just make this 16 on either side and then let's bring the 20 down a little bit to like let's just make it 8 okay we can delete these and it's me locations amenities contact amenities is really tough to spell okay and with nav menu let's add maybe I think in this design I basically aligned it to the middle of this thing maybe I didn't but I'd rather use just spacing to the left of this so let's try 32 to start out with and that looks pretty good let's expand here and oops nothing I'm seeing I think 32 this may be too little so let's try 40 or maybe 48 just a little bit more let's try 56 okay alrighty I think we're done this is all working the one thing I'll mention is that I'd like to take care of is if you look at the button in particular it looks quite a bit more bold than what the design has even though I did set it to semi bold and I think some of that has to do with how browsers handle anti-aliasing so we can address that by using something called font smoothing so let's collapse everything let's bring our HTML embed up to the top so we can find it easily later and if we open up the code editor we can add a little bit of CSS class a little bit of custom code I meant to say and I've got it saved up here we want to use WebKit font smoothing anti-aliased okay so if I did this correctly if you look over here at this heading when I hit save and close you should say it get cut a little bit cleaned up so not a huge effect but now the button is looking really really good I feel like it actually looks how it's supposed to and everything is looking good alright so in the next section of this tutorial we're going to be creating this cool card slider that represents the locations of our co-working space so stick around and follow along with me as we create this card slider all right welcome back we're not entering section two of our tutorial and we're gonna be building up this fun card slider and I just had to apologize I'm having some trouble with my throat so hopefully I won't cough too much alright so here I was our body selected we'll add another section and let's give it a class of section and if I remember incorrectly there's about 80 pixels of spacing between sections so we can add that here and then we can add a combo class of light blue and that will be our background color and then there's 80 pixels of padding on top and bottom inside of the section itself ok so inside of here let's add a Dib block and we'll call this text-align:center and especially what we're doing is we're positioning the elements in the middle of the screen so if I add image it's not showing up in the middle and it's gonna be this thing and if I add a heading and make it h2 it's showing up in the middle as well so if I go back a text-align:center and delete that they move over to the left that's just a nice simple easy way to get things to appear in the middle of the screen let's give this a class of icon our locations and I can't remember how big it is 46 pixels wide I'm not recording yes I got freaked out for a second ok not inside of the text-align:center buff and the section I want to add our slider and let's do the same thing that we did previously so for example we don't need these arrows so we can just add our display:none class that we added previously we can take our dot navigation and just call it a card slider dot navigation we're dot nav I guess it's fine and card slider slide and again an ascending order just naming everything card slider mask and finally card a slider okay so now what's different about this is that we want all of the slides to appear together on the same screen so what we're going to do is with the card slider slide give this a width of 344 pixels and we can just give this next one over here the same CSS class let's go ahead and push everything over 40 pixels and then remember the mask the purpose of the mask is to reveal only the current slide and so like if we add a couple of these the issue is that we're only getting one dot you can't see them but there's three there's three slides so with the mask really what we need to do is make this also a 344 pixels okay so if we did that correctly now there's three dots for the three slides okay now by the way just so that we can see things let's grab the card slider make it transparent grab the slide itself and make it our background color which is like a slightly darker light blue and unfortunately we're not seeing the other slides that we had created right and again that's because of the mask remember it's hiding everything and only revealing the current slide but we don't want that in this case we want to see the other cards so we just have to change overflow from hidden to visible and now we'll see all of our other cards I forgot to add a little bit of padding to the top there we go and with the mask you know what the card slider selected let's add a little bit of padding maybe something like 6vw there we go actually I want to do seven no wait yeah seven point five and I'll show you why in the next section all right with the slide I also want to give a max width because I want to be careful about mobile phones and we may run into a situation where like most phones are between 375 and 415 pixels wide there's exceptions to that but on the lower end particularly like iPhone 4 through maybe 6 or some other models like that we may be rushing up against like the cards are too big for the phone so we want to get a max width of something like let's say so we know that there's padding of 7.5 so I think if we do 100 minus 7.5 VW minus 7.5 as well 85 VW you know plus 7.5 because there's already 7.5 of padding over here so at 92.5 VW that's going to ensure that on mobile there's at least 7 point 5 VW on either side okay we've got that taken care of let's go ahead and add our corner radius and our gobs and gobs of drop shadows ok so click on this and it's 0 1 2 0 one two zero and it's our dock value at 14 zero two four zero and our dark value at twelve and last but not least four eight zero you know this is a little bit smaller than the button shadow I just wanted this to be a little bit more subtle righty and okay okay so next is adding the image let's go ahead and add the brick building here and you'll notice that the building is quite large oh by the way we need to set the mask height to Auto and the card slider to auto and now the slider is big enough to hold our cards and this is the original ratio of the image but we want to have these 4:3 ratio so what we can do that is let's give this a class of card slider image we want the width to be a hundred percent and we know that the card sliders are three hundred and forty four pixels wide so for the height all we have to do is 344 times 0.75 and 258 pixels that is what's going to give us our are perfect for three ratio now we're running into an issue where it's looking all stretched again but that's an easy solution we just have to come back up to our embed code and right here next to here a slider image we can just do card slider image and now our thumbnails are looking perfect okay so inside of the slide it let's add another Dib block and this is going to hold our content so I'll call it card slider content wrapper and unless I'm mistaken there's 24 pixels of padding on all sides let me just add that here add a heading and make sure that it's set to h3 and I've already styled that for us and then we need to add a paragraph this is gonna say had a Tennessee and this is our over line so we need to give it a little bit more styling to make it look like the design so it's at 13 with 0.75 pixels of letter spacing of 13 over 16 m and that's 20 over 13 what just say 1.5 it's all caps 0.75 and I think it's actually medium yes okay and that looks like everything that we need and then you notice there's a spacing bit below so we can add that as a combo class because I don't want for every single over line to have 40 pixels of margin bottom so add that there and then let's add a text book and this is gonna include phone number there's eight pixels of padding below this so if you just add margin bottom eight and add another textbook and that will have our address oops we're running into the dot navigation kind of hovering over everything so let's go ahead and change that and an easy fix is change the positioning from absolute again it's hovering over things because it's kind of in its own dimension to static and now it's below its below the cards like we want them to be okay let's actually change this to invert colors just we can see them and will eventually change this and they're currently not centered because there's 7.5 vew of padding over here so if we just do add that over here on this hand side it'll not be nice and centered okay so this is Loveman building and unless I'm wrong I think we're done with the card okay so now all we got to do is copy and paste this a couple times two three four and let's replace these images really quickly I love this image this is so cool-looking this one and this one I'll make sure I didn't reuse any images alrighty and then just to kind of like give the appearance of their being multiples I'm just gonna add two copies of each slide so we should have eight total perfect okay so I think all we have left to do is to finish configuring the slider dots so the first thing that let's check out is the padding on top so I click that instead of ten this should be 40 but if we kept it at ten ended 30 there we go and I think that's it except for changing the colors okay so for the colors this gets a little bit tricky and by the way to change the colors or if you want to have them have like a border color instead of a fill you can do all of that but it requires a little bit of custom code so what we need to do is first we need to make sure that invert color is deselected I know it's really hard to see them now but when you have invert color selected it kind of messes with this a little bit we need to go ahead and publish this okay and then if I right-click on one of the inactive dots and hit inspect then we pull up the slider dots here and we can figure out what is the class name that we need to identify and by the way if I click on this just a test it out and make sure we're getting the right thing we can always like change this to zero zero zero and you'll see that we're affecting the background color the clatter gasps so so this class right here W slider dot is exactly what we need to address so go back to here activate our embed code open it up and add a new class here and we need to add our dot to effect the class open and close brackets and basically we just want to affect the background color and let's set it to blue for now just to make sure that we're actually affecting the current thing ah so here so now we know that we have the correct color and if I go over here I can steal the hex code for this and we need to add a hash tag there and I know it's at opacity 54% and when you're writing CSS you use decimal percentages so a point five four all right but obviously we haven't affected our active dot so what we do that is if I right-click on the active dot hit inspect again I can look see how this one has a combo clasp attached to it excuse me so I just copied that open to code editor and then we need to copy the thing above because this is a combo class right and then add a dot and W active and then let's copy this stuff and our background color is going to be our brand blue and opacity will be one all right so now our primary dot has the correct blue by the way you can affect the size of the dots like I said you can make them have a color you can get rid of the corner radius whatever you want to do you have to be using custom code but you can you can manipulate the dot and I think Iowa I want them to be a little bit more spread out so instead of three let's do eight OOP that's too much maybe six okay I think the last thing we need to do is if I scroll to the right we're getting this unfortunate horizontal scroll and it's really really ugly and as poor development so the way we fix that is with overflow:hidden so with our section selected I'm gonna add a combo class called overflow:hidden and over here an overflow just click the icon with the eye that has the line going through it and now I can't scroll to the right excuse me guys all right so that does it for this section of that tutorial so in the next one we're going to be creating this really fun tabbed autoplay where you can click on these elements to get the photo to change and it has a timer so it changes on its own so stick around and join me for the next section guys welcome back to section three in this section we're going to be tackling and it's really fun kind of like a feature list using the types component it's going to get a little bit complicated with absolute positioning and how we do that but I'll try to take it slow and make sure that you guys can follow along one little bit of housekeeping as I noticed that even though these have a corner radius for the images do not and so easy fix for that is with the slide selected just give it a overflow:hidden and now even the images have that nice curved edge that we want alright so let's move on with body selected let's add a new section give it that same class of section that we created previously and then the first thing we want to do is add a flexbox so let's add a div block and we can actually reuse the previous classes that we've already created so I just type 50 you should pull up so copy and paste and so now we have the kind of like the basic structure let me add a quick dummy section real quick dummy and height 50 VH just like we can scroll down a little bit actually just 30 should be fine okay perfect then inside of here let's go ahead and add our heading a paragraph and our tab component our heading is going to be a h2 and you know actually I think I need to add a block to add all these things in because we're gonna be using some max-width sure okay so with this selected I want to add padding left of six to kind of mimic what we did before so 6vw and over here you notice that has a max with a 493 so with that did block that we added I can simply do max with 493 okay awesome this is going to be amenities if I can spell it and this is just a little bit of hipster lorem ipsum I like using hipster lorem ipsum when I need to this kind of makes it fun and then we can start working on styling this first though let's go ahead and get this image to appear over here and what I was running into and I was kind of preparing this tutorial was that it would be easy if I could just click tabs make tabs a flexbox have the content on the left and the links on the right hand side but the issue that we have is that you can't put any non tab link items inside of the tabs component and that makes sense web flow is trying to protect the integrity this component so that they don't break when you're trying to use them but it does make it a little bit challenging to figure out okay how do we do this particular layout so fit to do it a few things so instead of well the first thing we're going to do is with the Flex horizontal we're going to make this position relative that means that we're going to try to get the image to the top left corner up here by referencing this item and then inside of the child 50 we're gonna add a dead lock and name it placeholder image placeholder image I'm not going to do anything with it right now just so I can show you guys what I mean and then whoops inside of tab pane I want to do a some interesting stuff so let's go ahead and call it tab pane I'm gonna call this let's just go ahead and name everything like we have done previously I think we need another tab and then then we can go in here and make sure that pain is attached to all of the different tab pains oh there we go okay and then I think we still have to name the tab menu menu and let's go ahead and get our tabs at class as well or simply tabs okay then inside of will the tab pane let's go ahead and add our image and the first one is like that podcasting studio which i think is this one okay and I think what I'd like to do is content to tab pane I think tab pane I want to set the image ratio here so we can do height zero pixels padding of 75% okay and then with the image selected we can do tabs image we can do a position:absolute full and height 100% I always do that and let's make with 100% to say keep it from having funky weirdness okay and we're having the same issue with that stretched image Ness but we can do the same thing by going up to up here tabs image oops I forgot the period at the front and this should not be looking correct and then with tabs content this is what we want an absolute position to the top left so tabs content position:absolute I think it's going to be up here maybe I don't know where it is actually if I give this a width of a hundred percent okay it's still down there I do top left oh it's because I think tabs is set to position:relative so we have to make sure tabs is set to position static there we go so now with tabs content selected let's give it a height not of a hundred but of fifty percent and so now this is showing up in the correct place by the way let's get our dummy and make it 100 eh and now we're running into a little bit of an issue with all this absolute positioning so if I turn on x-ray mode and click on the section right here you notice that this section actually ends at the bottom of the tab links and that's because these items are either static or a relative positioning whereas the image is absolute and so it's kind of like the website is not taking or the browser is not taking into account the height of this image but we needed to take that height into account because when we add this section below it we want it to be based off of this image and not off of the tab links so so a good effects is that placeholder image that we added previously the placeholder image so we can do the same thing where we have it zero pixels and 75% of padding and now when I click on section you'll notice that that it's not taking into account the size of the image and that's simply because our placeholder image is the same size same ratio as these images so I know that was a little bit complex but honestly it was like the easiest possible solution I could find making this layout so hopefully you guys be able to follow along okay the next thing I'm going to do is with the top links instead of oldham takeoff x-ray mode instead of having these be a position or display:inline-block I want them to be block so that they're showing up like a chart and then let's take off the background color and if I scoot over here I know that there's eight pixels of padding on the bottom and 24 on that top so eight 2400 and then this text block is actually P jumbo and then let's add an image that will be our icon so we'll just I love this car icon just think it's really fun we'll use flexbox to get these to present horizontally and the line in the middle let's move over this one to the right-hand side and then let's give this a class of icon a amenities and men that cheese icon and they don't have padding of eight on their right and I think sixteen on the right okay and all right so it looks correct okay and the reason that this still has a background gray is because you've got a state of current so we just got take off even though that says transparent we have to reek of redo the transparency there oh we forgot the border bottom one pixel of our darker value a twelve percent so let's copy over dedicated podcasting studio this is conference rooms presentation space and my personal favorite assigned parking and have it is what the car is for all right so let's replace these icons this is the microphone this is the conference table and this is the podium alright next let's go ahead and copy this image and in tab 1 paste it in our content and tab 2 with just conference rooms let's go ahead and change it to the conference room photo which I think is this one tab 3 is the presentation space which i think is this first one and tab 4 is the drone shot of the parking ok then next I want to do is flex vertical-align:middle for a combo class and we're gonna use flexbox to align this in the middle or to the left awesome and then with the max width I think I'm just gonna give it a little bit of padding on the or maybe margin on the bottom just because optically even though it was exactly in the middle optically I felt a little bit off okay and I think the last thing we need to do is add that little progress bar let's add a dead block and we'll call it tabs gasbar and I need to make sure tab link is set to position:relative which it is and we need to set the progress bar to absolute align to the bottom it's going to be a size of two with a background of our blue and let's just move it down like negative one pixels so that it's over the existing border okay perfect and let's go ahead and copy it to the other links excuse me and now we get to have fun with animations so we're going to add an element trigger on tab change starting animation and up you can see that I was already messing with this earlier but we'll add a new one called tabs active select the progress bar and use size so for the initial state I want the width to be zero and then I want the size to go to auto meaning like what it was originally and I wanted to take seven seconds so I think if we did that correctly start doing anything Oh what's doing it there I didn't network up why isn't it working there oh I think it's because this you need to set top one is the active one all right so now it's working I have pardon the interruption I think it's apparently break time in it so let's finish really quickly okay so with the tab link selected go back to interactions and we also need to start an animation for what its deselected so basically what we can do is just get rid of this one and have it go back to the initial State but I want the duration to be zero okay so so let's make sure that this works if I go down to this one it goes back to zero perfect now the way that we can apply this to all four of these is just by hitting class done here and that way whenever an element has a class of tab link attached to it it'll have this animation so we can make sure that works is that not every time I click on this the progress bar is going to start to move all right and then to make kind of for the finishing touch we're going to add the autoplay to this and this is a little bit of custom code and I found this on the web flow forum and the code came specifically from a pepper clip so a pepper clip I'm not sure what your name is but thank you and we're just going to copy this custom code here and come over here go to our pages open up home and we're gonna want to paste this oops I already did that apparently but I want to paste this here and the before body tag and you'll notice a couple of things that tabs menu and tab link are addressed in this so if you want this to work you have to make sure that tab these these tab links and the tabs menu have the exact same name as what's in the custom code otherwise this won't work then I want to change this to 7,000 another word 7 seconds so it matches our progress bar and you can't you can't see custom code here in the designer so let's go ahead and publish this and then on the live site let's make sure that the tabs are working correctly perfect okay so the custom code is working and now whenever the progress bar reaches the end of the line it switches to the next line but we can still go ahead and switch to a different one if we want to and that won't interrupt the custom code it'll still switch to the next link when it reaches those seven seconds alright so that was the end of section three and in the last section that should be a lot shorter we're going to be finishing out with this call to action and the footer and the call to action is gonna be fun because we're gonna be using blend modes so if you ever used blend modes like multiply or overlay or soft light hard light you can you can use those in web flow we have using a little bit of custom code I keep saying that to achieve that but I wanted to show it to you guys because it's really helpful and fun to use so stick around and join me for Section four alrighty welcome to the fourth and hopefully final section of this tutorial and this call to action is pretty easy to implement what makes it interesting is we're going to be using CSS blend modes and if I click in here you'll notice that there's a gradient fill on top of the background image and it's got a blend mode of multiply and I want to be able to do that in my project so that whenever the client uploads a new photo that multiply effect will always be there giving it that kind of like brand look so I want to show you this this is the w3 website and this is showing us the different valleys that we can use so right here you have background blend mode and then you can use any of these it might be familiar with them from Photoshop or sketch like multiply obviously overlay darken saturation color so so really need that we can do all of this and for the most part it has a wide spread browser support so here I'm can I use com I just searched for blend mode and you'll see that for the most part everything is green there's a few red spots like ie mobile and edge older versions of edge but for the most part most browsers support blend mode so just want you to be aware that there are some that don't so there's a little bit of catching up to do so alright let's get started by actually implementing this so we're gonna add a new section oops see if I can add it and here somehow with that there we go and a section we're gonna have a combo class of margin top 120 I wanted to give the call to action section a little bit more space to give it more presence kind of call it out a little bit I don't think we've done a container class yet there's a new container and essentially it's 85% maximum width is 1440 and margin auto I've previously done episodes on containers and the responsive video so I won't go into that now and then on a new dead block and we'll call this CTA and with the CTA we're going to have a height of 300 a corner radius of 4 I'm going to add to background type things the first is an image I guess this first one here such a cover and that's essentially the same thing as object fit covered by the way and then we're just gonna kind of manually move this image until it looks pretty good that looks fine and then by the way in the design file I flipped it so that the people around there right but just for the think of how to do too much work for this I will just leave this be alright so this is what it looks like without the doesn't multiply effect added so I'm gonna go to HTML embed scroll down so we can see our CTA open the code editor and if I add CTA here and I stole this earlier but this says background blend mode multiply so if I did this correctly hopefully you'll see this change all right so now we see that the the background the the top background is multiplying over the image which is exactly what we want and now we can go in and we can actually change this a little bit so that like for example here it's gonna be our darker value at 20% and our other dark value at 100% and we're actually going to make it a radial starting from the bottom left to the farthest corner alright that's looking pretty good next we're going to use flexbox to align everything in the middle and let's add a heading and with the CTA selected we can go ahead and set the colors to white because everything will be white basically in here and we've previously used 6vw Canada as a padding so I just follow that pattern and we can add a try space okay another DEATH block and I guess this needs to be vertical so aligned to the left in the middle and then we can just copy and paste this button and this button says buy a pass and then we're going to copy and paste another button and let's give this a combo class of outline and what do I want to do okay so now that we have an outline button one thing that's important is we have to go ahead and add the border to both oops otherwise they'll look like they're different sizes so without line I want the background to be transparent and everything else looks correct but I will say on hover I do want it to have that dark blue background okay and then we'll add a margin left of 16 as a combo class because not probably not every outline button will have that margin left and I think that might be it out the shadow let's go ahead and add that quickly so oops I think it should be this one so 0 1 2 0 this one is zero four eight zero and one last one that is 1632 so if I preview this and this is looking perfect okay and then oh I guess this just really say contact us now that I think about it the last thing we'll do is get rid of our dummy and instead of the body we'll add a new section and we'll want to make sure this is called footer and we'll add a class a section light blue and then margin top 120 and that still should carry over the settings that we need perfect and then all we have to do is see what I might do is duplicate this and call it a footer section I think this is actually 40 not 80 let's add our container oops an inside of a container let's add a link block with the container selected let's add a combo class of text-align:center and inside of that link block let's add our logo actually we can just copy it from the top of the website here awesome then with the container selected let's add another div block and we'll call this footer links wrapper let's add a text link and we can just use the nav link class that we created at the very beginning of this tutorial and take off the underscore but we do want to add a footer link combo class because this has a little bit more spacing between them so the padding is actually 32 as opposed to 16 there's three there we go with the footer links wrapper believe that's a spacing of 40 I think yeah locations amenities contact okay damnit the this one selected this is actually 0 0 yeah and then let's add a new dev block and we'll call this a footer sub will add a the dark blue background make sure that's got a margin of 40 and I can't remember what the padding is in here 16 on either side and then inside that let's add a paragraph actually no that's wrong we need to add a text link I can text align Center and let's steal this content and we can call this p2 for a paragraph number two and it's 14 over 16 m/s one point if it's fine and let's take off the underscore give it our 60% dark value but I do want to give it a hover effect so that people know it's a link so we'll give it our dark blue on hover okay I think that does it for I think we're done anyways thank you if you're still with me after I think it's probably like an hour hour and a half if you're still with me into this tutorial thank you so much for sticking through it I hope that the content was helpful to you and I hope that you now find it easier to implement sliders and tabs into your own projects if it was I hope that you'll consider subscribing to this channel I think I recently just hit 500 subscribers and so I was pretty excited about that and I really appreciate the support I've had a lot of people leave comments about how helpful tutorials were and that's really encouraging because obviously doing this for free and just was a little passion project and so you guys encouragement means a lot so thank you so much for that and again I hope this was helpful and I will see you guys in the next one

Channel: Jose Ocando

Views: 44,293

Keywords: webflow, tutorial, sliders, tabs, carousels, coworking, cowork, web design, web development, website, development, design

Id: MtpdgZ4TdSI

Length: 82min 38sec (4958 seconds)

Published: Sun Jun 16 2019