DESIGN SERIES: Recreate Facebook Community Tabs design in Oxygen + ACF

hello and welcome to design with cracker today i'm going to start a series a short series i'm going to calling it the power of oxygen elements this is going to be taking a look at how to recreate existing websites um with oxygen you know builder elements today we're going to be taking a look at how to use the oxygen taps element to recreate these facebook community you know tabs and this a very nice and creative way to to you know present it up the other section here but we're going to be focusing on this one so what i did was i went ahead to download these pictures the small one and the big ones and uh i also created um custom fields i'm gonna walk you through how i did that and you know so let's just go right into it um this is the back end so what i did was uh if you go to plugins you realize that i installed advanced custom fields now this is not the pro version this is just the free advanced custom field so it does not have all the options it doesn't have for example it doesn't have repeaters and now for the purpose of this tutorial i wanted to use custom fields to populate all these i don't want to you know put them individually so in a client's website for for example if you're designing a website for a client the clients would want to be able to make say uh say change name on the picture maybe there's a replacement okay and let's just hope that there are just four of them because we're not going to be making use of repeaters since these are tabs so um so let's say there are four positions to be filled and there's a possibility that you know you know someone could be replaced and they need to change the picture and even these so you want a situation where the client can go into the back end without opening oxygen builder to change that you know information so i have that information set up here in a page called um in a sample page actually so i put it here in a sample page um so i'm going to open that up all right so um so you can see these are my custom fields in this sample page you can see the name the position the image and the large image so i have four of those okay one two three four for the four persons so i call these people fields i have person one and i have person two i have person three and person four so i'm going to show you how to set that up so let's go back um i'm gonna go back go to custom fields now i've already installed advan sorry advanced custom fields and then i'm gonna go to custom fields so i already created you know a custom field so that is done by creating you know adding new so just say add new and then i call that um persons that's what i did i call it person so i'm gonna call it person person 2 okay and then i'm going to go ahead to add the field so what i'm going to do is so the first thing i did was let um the show this field group if the page is equal to sample page so i want this um i want this to appear to appear in this page only so i don't want it to be general okay so only that page will have you know the fields i'm going to create so once i do that um so all these i didn't touch anything here all this i just leave them as default maybe the only thing i did was i wanted this thing to be this custom field to be placed after the title above other you know elements for insta for instance the oxygen builder metabox i wanted this to be high above that and then i started adding my fields of course you can click publish then i add the field so i'm calling this person one okay so that's what i did and then when you click here it automatically adds the slot so the next thing is i'm going to select the field type now because i want each person to have different attributes for for example one person is going to have a name the position a small image and a large image so i want to use a group you know so i'm going to use a group all right so under that group i'll have the option to add the different fields for that group so i'm going to go the first one i'm going to add name and then of course when you click here this lock is automatically inserted um the the field group the field type is gonna be text so i'm just gonna leave it like that and every other value remains the same okay so that's the name i'm gonna add another um field um now notes these are subfields you know these are subfields on that person one because it is a group you understand so we have subfields uh as you can see so this begins from here to here and this begins from here to here so it's easy to identify that you're working with a sub group so um the second one will be say position and that is just a text and then i'm gonna add another one now this is gonna be image okay um or you could just call it a small image or thumbnail depending on whatever you want to call it and this field type will be image and then one important thing is to make sure you select image url so if you select this your field your image field is not going to display inside oxygen builder when you're using the advanced custom fields to insert the dynamic data so um and every other thing remains the same so we have that i'm going to add one more which is for the large image okay and then this you know so always remember to click there to select uh to insert the slug i'm gonna change this to image and then the same thing image url and once you're done um we're gonna click publish now so you can see that i have person one so all that we've done is for one person okay so the next thing i'm gonna do is now i'm gonna duplicate this for the remaining three people so i don't have to create this all of us i'm just going to go duplicate and change this to person person2 and then i'm going to delete this and set my cursor here and bring it back here and it inserts the slog so um and then i'm gonna save that uh you know i'm gonna duplicate this one again okay so we have person two so i'm gonna do person three delete this put my cursor here bring it back here and then i'm going to duplicate that again so we have person 4 okay all right so once that is done i'm going to update this so now that is how i created um my custom field so i have person one two three and four okay so now what i'm gonna do is i'm gonna go ahead and delete this since i already have it okay so i'm gonna move this a trash and uh i already have it here so this is the original one i created so that was just to show you how i went about that so this is the original one and remember that this was set to display if the page is equal to sample page so i'm going to go to pages and then i'm going to go to sample page so you're going to see so here we are in sample page you could see that so you have this people feels that person one we have name position image and large image so what i did was i went ahead and copy the names and then you know just insert the image just the way like if i remove this because you can see add image and i'm gonna go add image from the library yeah so i did the same for all of this for the large image i i downloaded the large image so you can see all this so once i did that i click update and then i'm going to open this page in oxygen builder okay so i'm going to edit i was enough we're going to have to open it here so um let's take a look at this tab so uh we have this tab we have three i mean four tabs and we're going to design this layout exactly the way we want to get it exactly the way it is here okay so um [Music] okay let's let's just start some the first thing i'm going to do is to add a section and then in that section i'm going to add a div okay and that diff i want to make that diff let's take a look at this this is like almost like the page with the typical page width so i'm just going to make that div um let's try a hundred percent so 100 gives us the page width okay so um i'm gonna give it i'm not gonna give it any background okay so perhaps i should maybe i should okay so i'm just gonna give it a background of white okay and then i'm gonna go ahead and style it so giving it giving it um a border uh radius and a shadow box shadow so so first of all let me just uh give it a height and a width so okay let's leave that for now so i'm going to go to the border and just change the border radius of 10 um nothing is really happening so i'll go to effect box shadow i'm going to change this to black and then give it an opacity of 45 and then i'm going to give the zero zero blur let's say 20. okay so we're beginning to see you know what is happening um let's probably make this uh on the spread uh maybe we should just leave the split let's let's try negative five okay and if this is uh straight c okay so all right so now that is said we could come back to adjust that if we need to uh the next thing we're going to just do is to drop in two div so we're having two divs here so i'm gonna put um one div it's gonna be like 40 and the other one is going to be like 60 so i'm gonna drop in to these so i'm gonna add a div inside this and then i'm gonna duplicate it okay now i'm gonna set a child element to stack horizontally and this is going to be 40 while this is going to be 60 percent okay so yeah those proportions look like they are okay all right so uh what i'm gonna do here is to have um i think i should have two divs here you know we could do without having two divs okay so let's not have a lot of um divs inside so i'm gonna i'm gonna go to my structure okay so i'll select the section and then what i'm gonna do is to add the oxygen tab element so you go to helper and then okay let's just type tab and so you have the tabs elements so now you know the amazing thing about the oxygen tab element is that it's so simple you know when i was using you know themes you know some of them you know they used to have these you know pre-made tabs where you have the top element and you have a bunch of setting you know and then you can just adjust some things the way you want um maybe not for what you want to do but this is just bay bone oxygen you know uh elements used in these tabs and i like it so much because it has so much potential it has so much flexibility you can use it to create advanced layouts okay so now we have the tabs and we have the tabs content so these two make up the oxygen tabs elements so what i'm going to do is i'm going to move the tabs inside this div and then i'm going to move the contents inside this inside this div so let's move so the content doesn't want to be moved so i'm just gonna yeah do that so i moved it inside from there from the navigation panel so um so if i click here so you see you have um content one show um content two and content three so you can see showing here all right now what i'm gonna do is i'm going to set these tabs to display vertically okay and now um and then i'm going to set now to make this tab grow and fill up you know just the way it's filling up here what i'm going to do is to select i'm going to select this tab okay so you have different tabs inside so you have the tab and then you have the different tabs okay so i'm going to select this and i'm going to set the width to a hundred percent okay so we have that 100 all right so let's first of all do some preliminary styling i'm going to um i'm going to add one let's add one more tab now i'm going gonna hold this tab and just duplicate it so we have tab four so i'm just gonna call this tab four okay so we have four tabs and then for the contents i have to duplicate that also so you want to make sure you have equal number of uh so so this is the last one so i'm just going to call it content for okay so you want to make sure you have equal number of tabs and equal number of tab contents okay so the next thing i'm going to do is i want to do some styling so we notice that this tab has the active has a top border of that blue color so i'm going to go to tabs active so now when you select a tab element it has two classes it has tab and it has active class okay and then it also has an id so i'm going to select the active class and then i'm going to go to advanced border and then currently editing top border i'm going to set it to solid and then i'm going to make it a width of say three okay and then i'm going to give it a color so um all right i don't seem to have um these colors so what i'm gonna do is i'm just gonna um let me copy this color using my eyedropper extension chrome extension so i'm just gonna go copy color from wave so i'm just going to copy that color i'm going to put it here okay so i'm going to save that as uh i'm going to save that as fb blue okay facebook blue so i have that color there all right so let me just go ahead and copy this other one so i'm going to copy this this is a nice sweet blue so um let me just put that and i'm gonna save that as a let's just call it sweet blue i like it all right so i'm gonna delete this and you know take the other one all right so um now that we have our tab you know active so we have that style the next thing i'm going to do is to go inside this tab element now we have a text here we will have to take away that text but then i'm going to add a div inside there so i'm going to add a div okay and i want to make sure that you know i have let's say um okay so perhaps i don't need to add the div maybe i don't okay so there's a lot of reasons i might need to add or may not need to add that default let's have a div because i want to i want to i want to give it a class you know so that we'll be able to control some of these hover effects so we have a div inside here and then i'm going to call that div um data or let me call this i'm trying to look at how to plan this so we have this uh when we hover and this this um this face but the picture does erase so that means we need two divs so i'm gonna have like so i'm going to call this image okay image wrapper and then i'm going to add another div not not inside it's going inside so outside here okay so we have the image wrapper and then this one i'm gonna call it um um data that's i'm trying to give it a class for the name and the and the position okay let me just call it name position wrapper okay so and then i'm gonna select this tab and stack this um horizontally i'll take away that text i'm gonna delete it okay so i have this so i want to make this like say maybe 30 okay and then i'm gonna make the remaining 70 all right okay so we have that those two things and then uh what i'm gonna do here is i'm gonna add an image element add image and then i'm going to use um my custom data to insert that image so i go to data advanced custom field now this is for person one and then i want to put the normal image and insert okay so we have that image so i'm going to give it a class of profile image okay so i need to add the dash there profile image so i'm giving a class of profile image and then i'm just going to go ahead and style it with say 50 border radius okay all right and then the width i want to make it small as this so i'm going to give it um size and spacing um width of say 50 50. so height is 50 width is 50. so i think that does it okay so um to for it to you know center horizontally i'm gonna just select um the tab and then just center everything in the middle okay and uh for this we made it 30 i think i'm going to make it 25 and then this will be 75 okay so i'm going to add the name and the position so i'm going to add a text to this name position wrapper so i'm going to add let's just add a heading for for that and then give it you know h4 okay and uh maybe h5 and then i'm gonna um just let me just style it give it the text no i'm not going to style it yet so let me clear the style i just i don't want to style it until i've given it a class so i'm going to call this i'm going to give this a class of name okay it's very important that i add classes at this stage because you know it's gonna control you know all this so i have that then i'm gonna style it i'm gonna give it h5 i'll give it a color of sweet blue and then i want to have a line height of 1.2 and then i'm going to add another text this time a text and then i'm going to give it a class of position so i'm going to add proposition as a class for this one and then i'm gonna um just give it a fun weight of say that and then the color i want it to be somewhat ash just like they have a very light you know color so i'm gonna just eyeball it and then i think i'll just add that color you know all right to the global colors and then uh then for the line height i still gonna make it um 1.2 and then uppercase okay and then the font size i should make it say like 16. now let's make it very small 10 okay so that looks like a 12 so let's go 12. all right i think that's showing up well okay so now time to edit this so i'm going to double click this and then insert data advanced on field person 1 name okay insert so that is going to show the name so yeah showing the name and then i'm going to do the same here select everything in set data advanced custom field person one position insert okay so we have a little bit of a margin bottom here so i'm going to select that make sure it's on the class go to size advanced size and spacing i'm just going to give it a 8 pixel i think that is too much let's just give it a 4 pixel okay i think i've done something wrong let me undo that but okay so we have four pixels there are four pixels all right okay when i selected this this one jumped okay so how do we solve that okay so i i know what happened here so the problem here is that we applied it to the active okay we applied these to the active so i'm gonna just remove that from the active i'm i'm gonna go to the tab and then apply that horizontal so that you know whether it is active or not it's going to have that um so this is why it's important to to um be careful of the the class you are applying styles so what i did was i applied it to the active and in the active i already you know did i have other styles i didn't have any yeah i did the the top border which is for the active actually so that's correct so but for but for the alignment the alignment should be the same for all the tabs okay so i have this um div because i have these two divs okay and what and since i've already set up the styles here right now okay i'm going to i think i should wrap these two this and this so let me rename this this is um for my image so i'm just gonna rename it image so that it's gonna be difficult easy you know to um to navigate so i have that as image i'm gonna call this position name position okay this is just a name it's not a class okay so so we have tab one here all right all right so i'm gonna wrap that in a div okay i'm gonna wrap that in a div to make things easy i'm just gonna move this in okay and then i'm gonna make that a hundred percent all right the reason i'm doing this is um i want to be able to move these into so into these tabs okay and control it better so i still have you know my control all right i'm going to call this um date um person okay i'm just going to rename that to a person by the way i'm using um hydrogen pack so i have shortcuts to rename so you can always go to here and then click on rename but i find the hydrogen park shortcut very handy okay now that we have all that i'm going to give this a class so i'm going to call this person okay person data all right so that's person data and this is now i have already up um you know given it a style so i'm just going to copy all the styles from the id to the class and then delete the ones from the id okay so i can have my and for this one i'm just going to remove this okay from that tab i'm going to remove that you know horizontal alignment and uh so so everything is now here on the person okay all right so now i'm going to duplicate that and move it to the second tab okay and then do the same thing move it to the third tab and then do the same thing and move it to the font tab of course i'm going to take away these texts here now so the reason i had to you know apply all those classes you know before moving them so that now if i come here and then change the font size to say 20 you see all of them will adjust so let me just delete that okay so let me save this let's go ahead and review this to see i think i should make my phone type just for the sake of it something similar so i'm going to go to typography and choose pop-ins that looks similar to pop instead i'm going to change the font size to 20 yeah 18 okay now smaller i think that should be 14 okay so it looks like 14 and then for this one uh for these we're just still going to choose poppins that is one of my favorite fonts by the way i'm going to make this 10. okay 12. all right and uh just gonna make it okay now um realize that um only the um only the active text is blue so i think we might have to readjust this i'm going to delete that from there and then i'm going to go to the tabs the tab okay um the tab active and then i'm going to go to typography so we're selecting the active class for the tab and we're saying typography no this is not going to work because if we set it all the typography might you know change um okay that's that's cool okay so it's working it's working because um because we have already set a style okay for for this text okay for this text we have already set a style for on the on the class here so um so it's cool so if we remove this see it's gonna affect it so i'm gonna undo that so we already have that uh class for this so it's not affecting you know it's not affecting you know that particular one so so we're gonna here to set that style active okay so all the classes now if you notice that i have this weird transition okay and that's because i have included a code block in my workspace and then i have a css that says you know i use a selector that says everything should have a transition okay so i did that on purpose because i didn't want to you know you can see even my you know builder you know ui elements are transiting so but then that is okay so i'm gonna save that so we have this set up now another thing is they have these borders so and then one more thing this text okay so i'm going to take this and then what we're going to do is we have a tabs here we have this div so i'm going to add a heading okay i'm moving above the tabs okay i'm just gonna paste that okay and uh for that um i think um what do we do with that so these elements don't do they actually do have a padding here so the tab active and the tabs they do have i think they do have a default padding okay so uh to make all of these align to the same i think what i'm going to do is i would like to remove that padding okay from both the active class all right and then i'm going to select the div and apply that padding you know the diff that is the parent to this tab okay i'm going to select it and apply that padding to so wait so i'm just going to give it say 16. for the 16 or 32. okay it looks much like 32 this looks a bit bigger okay so i'm just gonna make it 40. how about 50 okay 50 looks like it so i'm gonna make this um so this is just one so no need to give it a class okay and uh i'm gonna give it a very dark color all right something like that so i'm just gonna add it as dark blue yeah i know this is kind of black but i want mine to be blue so i'll go to typography the line height give it 1.3 maybe a 1.2 and then i'm going to make the font size 24. okay uh use poppins now normally if you want to do something like this you don't want to be repeating what you know setting this font type you could set it you know in the global settings you could go to settings uh global styles fonts you know just choose the font type you want to use here display text fonts and all that but since we're just doing this i'm not going to bother with that so so 24 doesn't look good so we have all right so i'm going to set the line height to 1 point 2 points 1.3 looks more like it alright so then i'm going to give this um a padding and perhaps maybe that's what i should have done to give the whole of this yeah so we already done that so all i need to do is just to you know just to make that padding applied to all okay so that padding applies to all at maybe the top and the bottom is a bit smaller so we could just take that to 32 32 okay okay so i'm trying to see that we don't have any margin no no margin all right okay so let's save this so now what i'm going to do is to bring in this data so for this i'm going to go to the image okay advanced custom field person2 you know image insert these you know i'm gonna just select that so of course i could actually rename it here to her2 okay and then um for this one i could rename it to two okay and that should work so because this is just the same thing you know but this one is based on three so i'm just going to rename it to three as long as i spelled it correctly now it's saying no data found here so why okay let's continue um okay what did i write here these two okay so this is should be three so it's saying no data so i'm just going to select that in set data advanced custom field person2 position all right so we have that okay what we miss well since it's not working that way so i'm still gonna go the normal way person three position insert okay these worked so i'm just going to call this four okay then for these so i'll do so so i'm just basically you know using the dynamic you know custom data custom field to insert the positions for this now another thing is we have this border so we're going to have um the border top and bottom for this and bought a bottom for this butter top for this so um i think that should do so we have the butter top butter top butter top butter top okay so we're gonna give all of them butter top so so i'm gonna select this and then i'm gonna go to the top not active clasp at the top class advanced borders top i'm gonna select solid one and then i'm gonna choose that sweet light color but it seems that one is lighter so we may have to modify it or change the opacity okay all right so something like that so that looks like one pixel okay so let's save it all right so we have a border now onto our top content did i say border yeah and i want to set this heading to have a margin bottom of say 32 pixel something like that so we have a 32 pixel margin okay so that looks good that looks good okay all right so do we have uh okay so everything looks great here okay so the next thing we're gonna do is you know concentrate on this side so let me just collapse this so we're walking on this side okay so um we have these tabs so you have a tab contents i mean if you click here you have to contact one so we're going to go to let me just collapse everything and then open this okay so we have this okay so we want to put um so what happens here is um you know there's an image so um whether it's gonna be an image or a background image so i think because of uh because of this gradient i'm gonna use a background image okay so that we can apply this gradient without having to you know put a lot of other elements inside it okay so i'm gonna do the same thing go to yeah we uh id so there are no there's no okay there's a class here all right tap content but we're using the id okay because each um tab content is gonna have a different background so i'm gonna go to advanced background and uh i'm gonna use this uh data to include that background image so we have person one large image okay then we have size i'm gonna select uh original for the size okay this is very important because if you leave this blank uh that image is gonna come in let's just let me go back and then come here person one large image i will not select anything uh and then i'm gonna choose cover now okay so to make this uh grow all the way down here i'm gonna go to uh this parent div for for these two divs okay so you have this is for the this for the right div okay so i'm just going to rename it to let's just call it let's say right left okay left div and then this is for the right d okay so um so i'm going to select the parent div and then stretch you know the vertical item alignment set it to stretch so that this div you know fills in the height and then i'm going to select this and set the height a hundred percent okay so that fills in a hundred percent then for the top contents i'm just gonna uh go to advanced size and spacing also set it to 100 all right so now notice that this background image is very blurry and that's because when we were applying the you know the background image to our background we didn't specify so i'm just going to go back advanced custom field person one large image i'm gonna choose original and then i'm gonna insert all right so you see that works well so the original image comes out the way it's supposed to look so that's one important thing you have to note that the image has to be set to original okay so we still have our text item here uh i don't think i'm gonna bother deleting that text item okay so i'm going to select the top you know content okay and then i'm going to style this text okay so um because i want all this text to be the same for all the type content so i'm going to set the typography style font family pins color white okay so you have that right there and the font weight let's look at this i think that should be like 600 or more so let's go 800 okay so yeah that is about it and then that's basically it but then we have this seems to be okay it's left aligned let's check okay it's left aligned all right okay so that's good then i'm going to go select the text and then i'm going to give that text a class um because i want to apply that class to all the other text so i'm going to give it a content uh what what should we call this quotes okay content quotes all right or person quotes let me just call it uh person quotes so i'm gonna add that and then on that um text class i'm going to go to advanced now i want to bring it all the way down here okay and since we don't have anything in this um div to push it down so we're going to go to size and spacing margin top auto so that brings it down but then i think we have a padding in here so i'm going to set that padding um okay still using this i'm going to set the padding to say everything 32 pixel all now all right it's going to save that okay so the next thing we're going to do is just to you know bring in this text so i'm not sure you can copy this text but i'm just gonna just copy from here copy i'm just gonna click test all right let's see how it looks okay and the size i think the size should be more than that so let's try 18 i think that takes is a bit too thick of 18 or i think 18 is fine 18 is finally go for 20. okay uh let's try the thickness um so let me remove that i think our styling was somewhat okay so we had two two stylings okay we had the present quotes okay that was for the you know for the margin okay but for the typography we we're styling it from the top so probably would have just to use this to style everything but uh let me let me remove that okay and uh i'm gonna remove the typography styling okay and then i'm gonna put all that styling in the present quote so um we can just apply that class to it okay so let's do that all pins the font weights this is 700 20 okay and uh now i'm using hydrogen pack so i can just copy that style and paste you know so if we go to this other tab uh we could just just apply that style to that text you know there's some code so we go to say tab you know i could just select that and then apply that class so it's okay so let's go back to content one all right okay so that that seems to work okay this um so the font size here is 21. um maybe we should just make it 21. okay nope all right let's stick to 20. okay so um so the next thing is i'm going to do the same for the remaining types of um contents too okay i'm going to go to uh tab content2 okay and uh let's see what way do we apply our size and spacing 100 so i'm going to take it out from there okay and apply it to the class 100 height all right so what our contents won so we have um for the top content class so that we're putting that hundred percent you know on on the class so that it will apply to all these other classes so i'm going to tab content2 and then i can set my background image from the id advanced background image data advanced custom field person2 large image original insert okay so we have that cover set it to cover now repeat and then let's just go ahead and set all the background images for this i'm gonna do the same on the id remember to always select the id background all right now for the for the text here i'm just gonna copy this text you know okay so we have this anything community letters all right so this uh for some reason i don't understand what i did here for these two reverse so um i suspect i must have added this it's a profile image yeah i must have added that to the class so i'm gonna just cut that out and paste it in the uh that's image three okay all right and then for this i'm gonna cut this out and paste it in the id so i must have made a mistake to paste that uh to insert that data on the class image four okay all right so so let's save this and then go to the front end and see what we have just refresh oops okay so we have this we have these we have this and we have this so just the same way so i'm gonna close this just the same way we have it here okay so the next thing i'm gonna do is to add um so add this um glow okay these are gradients so i'm gonna use the i'm gonna use the class for the tab content to do that so i'm gonna go to the background um i'm not sure i want to do that because let's see gradients i'm going to add two colors i'm gonna add this i'm gonna add white okay and it doesn't look like it's working so that means we're not to use the class so i'm just going to use the id so we have uh you know this tab selected so i'm going to go to the id where we have the background image i'm going to add two colors one will be a blue and the other one i think i'm still gonna make it blue but i'm going to drop the opacity down to zero okay so now i want this um i'm gonna set this position say 70 okay and then put this at maybe 90 all right maybe 100 okay so gives us and our color i think it's this color yeah okay so something similar color seems to be lighter but it's okay so um i'm gonna do the same to the other tabs so for this okay so let's save that and go to the front end refresh all right so we have this okay so the next thing that is left is this you know flash animation that we have here okay so so to have that and we're going to have to set um you know fade animation you know basically animation you know for for the tab content so i'm going to select the tab content class all right and then i'm gonna go to advanced custom css and then i'm gonna just write i think that that will work that won't work so i'm gonna go to my code block and then add css first of all let me copy this class all right so so this is the tab content a content class for all the type content i'm i'm going to go to the code block and then i'm going to paste it dot that so um i'm gonna say animation i'm gonna just call it fade uh maybe one second um linear okay and then for the animation i'm gonna go at keyframes fade and then i'm gonna define it say from opacity yeah zero okay to opacity one okay let's taste that okay so that's working but uh i think that timing is too fast let's see okay and maybe opacity also is uh is too much you know so i'm gonna go back to the code block and then change the passage from maybe say something like 0.3 and then our timing should be okay let's let's save that and check out how it looks is it the same okay so this fades in faster so we're going to reduce that by half so i'm going to set the the animation duration to 0.5 seconds all right so that works so here we go so that is it so now the next thing we're going to do is now you notice that when you hover on this everything fades out but then when you come in here this you know fits in so while the others fade out so we could just leave us like this like oh go ahead then um so if you have the time to continue watching i'm gonna go ahead and do that so the first thing we're going to do is to make sure that this person okay we have a tab so um we are fading we are fading just the name and position wrapper okay all right so uh the first thing i'm going to do is when we come in here to this div block so i want to give this deep block the left div so i'm just going to give it a class of left left thief okay um so i'm going to just maybe copy all the styles i hope nothing breaks so the dip left deep okay and then delete so everything is working fine everything remains the same okay so now so i left thief i'm gonna add a state to it because i want to target this name pose wrapper okay but i want when i hover on the left div i want the opacity of that to reduce by half okay so i'm gonna go state i'm gonna add a custom state i'm gonna say um cover dot name post wrapper so what i'm saying is that when i hover on this left div target the name position wrapper so this is a custom state i'm going to add that and then i'm going to go to opacity i set it to 0.5 so when i hover so that should that should work so let me see um let me be sure that we got the name of our name all right let's check that out front-end refresh so you see when i hover when i hover on the div everything fades out just like this okay when i hover on the deep everything fits up but then when i come here i want this to opacity to return to zero so we have to enforce this opacity okay on the tabs uh on the tab so what i did was um okay so we have different tabs here so so i'm gonna take this class okay i'm going to copy that class now because when we come here and hover on that tab element we want to see you know this um opacity turned to one so i'm gonna use the code block instead okay so i'm just gonna go and just put that that tab okay dot um hover then i'm gonna target the name post wrapper okay and then i'm gonna change the opacity to one and i'm gonna add important so that will enforce okay that person so when we come here and go in there you know it's going to work so once we come in here and then once you hover on it it works so so i think that is uh that's the approach that i decided to take if you know of any other approach you can kindly share all right so you have this when you hover here and then when you go in okay just like we have here when you hover just like that okay so uh that's all that's basically it so that brings an end to our tutorial the power of oxygen elements so uh from here you can see how powerful and how flexible the oxygen element is in being able to create um you know this nice looking tab using advanced custom fields so um i hope you enjoyed this and if you do please like and subscribe share this with other people let them know about the power of oxygen elements have a great day looking forward to the next tutorial

Channel: Design with Cracka

Views: 2,308

Keywords: Web design, Oxygen Buidler, Page Builder, UI design

Id: R9F7E79YI7A

Length: 54min 49sec (3289 seconds)

Published: Tue Mar 02 2021