Creating a Flip Card Element using Zion Builder and WordPress

all right for those early birds who are showing up we will get started here in about three or four minutes kind of right at the 3 o'clock time thanks for joining me for our quick and down and dirty insta webinar so if you've never had a webinar by me everything we do is live in real time and we just kind of build everything nothing cookie cutter nothing pre-built we're gonna dive through the whole process of what it is to build a flip card with zion builder so and i'll probably build it twice one using a simple css method using zion builder and then we'll dive in to see can we actually build it without touching code or touching css so it should be fun we'll start here in about two minutes or so so we got people logging in from on facebook people logging in on youtube you should be seeing the zion builder website and hearing my voice we're going to keep this really simple none of the flair of other webinars other layouts basically i'll just be sharing my screen with you all and going step by step how to do the process so if you just found yourself here because you came from the zion builder facebook page or something welcome i am benjamin and i have been teaching wordpress code development all sorts of stuff for probably over 15 years and we'll start right at the top of the hour and the best part about this is you if you can't stay for the whole thing that's too bad but it'll all be recorded and i'll just leave it up on the youtube channel so you can watch the replay if you need to um and if there's if people want i can also maybe cut out all the code and provide code for people directly because i will show you some css stuff i'm just waiting for it to flip over to three o'clock here on the east coast of the united states so we got just a few seconds to go greetings from south africa it's been a while since i've been in south africa i spent a lot of time down in cape town durbin elizabeth richards bay loved my time in south africa okay it is now three o'clock so let me hit record and we will get started good morning good afternoon good evening wherever you are in the world tuning in to another live wp studio event this is a special insta webinar that actually stemmed from a question that was asked on the zion builder facebook page somebody was asking hey can you use zion builder to create a flip card where you hover over the card and it flips around to other content and as you can kind of see hey look we are inside zion builder so yes this is what we are going to be building today uh so we're going to go through the whole process of building zion builder or building a flip card and make sure i've got everything set up here one second i've got like three or four monitors here i just want to make sure that everything is visible so this is what we're going to be doing today we are going to be building this card so and that's a great thing for those of you who are in the chat room and you're wondering hey i know that they've got this little great deal going on at um appsumo i'm not going to give you any affiliate link i'm not a big affiliate person i believe every product should uh should speak for itself and so therefore you can make up your own mind after you see everything and how it's done so we are going to start from scratch so i'm going to jump back over here use the zion builder and i'm hoping that those people here who are attending live or if you're watching at a later time you have some familiarity with zion builder i'll try and keep some of the stuff but i'm not going to go through every setting and how you operate or how you build something from scratch so what we're going to do here just for our example i've got a demo wordpress site that i use for tons of my training i've got zion builder installed and just to make life super easy we're just going to create a new page we'll call this page our super flip card and we're just going to dive right into our edit with cyan builder we won't deal with any of the theme we won't do deal with anything else and to make life a little bit easier we're going to jump over here to our settings to the page options just to use the zion builder blank canvas so we don't have to see anything else on the screen all right so one of the key features to understand how and what we're going to do for this flip chart this flip card is to understand basically structure and if we were to be writing like an html flip card which you can with straight css we would need an a wrapper uh that wraps around two divs so basically you're creating a front and a back of the div again you're creating the front and back of this div and as you can see basically with zion builder we can create a section and a container and two elements notice how they're inside the other sections and containers now you might say well can't you just do one section and then put two elements you could but in order for us to get some valid uh transform or some animation capability added in i want to be able to hover over a certain section that would then affect a lower section to do something to transform something to rotate on a certain axis so that's what we're doing so let's create our structure and anytime i build with science builder or play or develop something with zion builder i always operate on the idea that everything should have a section there should be a container inside that and then the elements live inside that so it's fairly easy just come in here and say i could do this i could use any of the pre-made layouts that already have a section and a container involved but let's start from scratch by just simply going to the elements and say we're going to create our first section now in this section notice how i open this up i tend to use the tree view a lot when i'm trying to lay out some structure rather than deal with the canvas i'm going to come over here click my little plus button and as i said we want a container only reason we are doing that is we are going to create a command that when somebody hovers over the whole section that hover will then affect the css of this container which will then turn around and modify the two elements so now we need two elements basically we need the front of the card and the back of the card and again if you didn't see the facebook page uh sorry the facebook question uh we are not building an actual element that you would see here we're not building an add-on for zion builder we are simply using what zion builder already provides to create some advanced elements all right so let's jump on down here we're just going to grab an image do the same type of thing notice i've got one image here we will do settings later and in the container i'm clicking on this uh so i'm selecting this because i want to add another image right inside this so this is what my structure wants to be we need section container two elements now in our section container and two elements let's go ahead and grab images or set the images so again i can i can click right click on this click edit and it brings up my editing capability now i can scroll you can see that there are two images here waiting on our area let's just go ahead and add our images i'm just going to let let's here let's do two different images different from what i did in the prior example these are from other templates that are probably used from other themes so i'm just going to add that image um actually no let's do something that has a larger image i've got some larger images here yeah let's use this one larger image great artist called vlad studio who makes these and let's edit this second image and we'll come i don't how about a dancing dog now i purposely wanted to have different sizes of images and sure i can go into the setting of each element and adjust the image size but there actually is not a need because we are going to uh set size limits in our section and container so that whatever image is going to be here is going to be restricted by what the section and the container might operate so let's start dealing with and again i'm going to show you two different ways to to develop this the first one i am much more of a person who operates with css i love css there's so much you can do with css and that's why i i actually like zion builder as a page builder for wordpress because of its flexibility that allows me to work with just straight css if i wanted to so i'm going to go over to my section here's my section that's wrapping everything go to my advanced tab go to my custom css at which point i don't have to know what my unique id is or anything i mean i could write a unique id if i wanted to uh like i could say oh this is my flip box id or i can just simply come in here and say elements and now we can start to set some css now i'm going to show it to you this way and then i'm going to show it to you using the styling so we'll first build it so i'm going to set a width of i don't know let's do 300 pixels we'll keep it fairly small notice how by simply me setting a width on this wrapper element i've already constrained my images that are going to be for the front and back of the card uh so i don't have to waste my time resetting image sizes for individual things making sure it's pixel perfect or anything like that all right let's go through here and also say let's set a height of 200 pixels um we'll do a border of one pixel solid kind of like a little gray just so i mean i could do black if we wanted to oh that's the other thing um if you've never been on a webinar with me please ask your questions at any time i'm actually watching the chat room or the chat box for both facebook and youtube at the same time while i'm teaching so if you get a question while i'm teaching you're like well hey can you redo that or can you do that i'm watching that so we'll respond this is live development so i can we can run down rapid trails if you want okay so i've got this item and an important aspect of this is to make sure we have like a transparent color because we're going to be moving stuff around i don't want to make sure that just in case there is a background somewhere else i i don't want this like flashing to occur if there's a different solid color that's there now before we go any further there is one key element of our item and that is something called perspective if you've never dealt with css you know doing 3d stuff this may be something new but if you've poked around in the styling section which i'll show you in just a bit if you've poked around there in zion builder there is a setting called perspective and you might have wondered what that is so i'm going to set a 1000 pixel perspective so that's going to be able to give us some type of a rotation now we're going to come back to this element here in just a moment but we need to add a few a bit more css to other elements so inside our element here we have our container so let's edit this in our container again we're going to do everything with css and then i'll demonstrate it straight with styling um i love the fact that i don't have to figure out what the css class is or the id if i wanted to i could do flip box inner or something because that's the inner container or i just do element here it already knows how to target that css so just to make sure and the the reason why i'm adding the code that i'm adding here in just a moment if for whatever reason now everything i do at wp studio is training developers who who work with clients so a lot of times we're trying to think ahead like what if a client uploads a tiny image and if they upload a tiny image into whatever flip box we are creating for them it'll just mess everything up so we want to make sure that whatever image they they provide and we've already taken care of the big images resizing down with this container we want to make sure that uh if they upload something that's too small uh we're gonna do like a width of a hundred percent and a height of height of 100 then i'm going to go through because anything i put in here we're going to go ahead and do a text align now the text align isn't going to affect us too much because we're using images but one of the questions in the facebook group was well what if can i have image and text on something absolutely could and so which case i would just center my text align there and finally i want to position this is important we need a position of relative because this element is going to be is relative which is going to allow things inside to refer to this location and basically i can turn this container into having a front and a back it's just a cool feature you could do with css we're going to come back here and add animation in just a moment but let's go to our first image our first image has its own css option here this one and we're going to do the same thing element and this time the position is absolute so the first one was relative do you see what just happened we just lost something our image went away because what happened by setting the first element as absolute and again we'll set the other element they now stack on top of each other so that's what that's what actually happens when you set something absolute inside something that has a relative position all of the blocks or we're going to call them sections or elements and it's easy to see here in the tree view each of these items would stack on top of each other so even if i created multiple items they're all going to stack on the same place with the position of absolute again i always like to add a height of 100 percent and a width of 100 percent just to make sure as long as the image we wanted to fill out our 300 by 200 block here now this is where we add a back face visibility you may or may not have ever heard of this property in css but especially when we're doing some 3d rotation we want to be able to create a front and back of the card so our back face visibility is now hidden now we're not seeing this yet it's not in effect yet uh because we haven't added any styling and the absolute systems of the other box of the other image but we've got one more thing to do uh let's just again backface visibility works on chrome and firefox and others but it will not work on safari so because it won't work on safari or any of the apple stuff we need to do a web kit back face visibility and actually you know what it really helps if you spell things correctly so let me add my eye that i missed all right there we go otherwise it wouldn't have worked anyway all right so let's go ahead and finally go to our fourth image or sorry the second image but the fourth block that we are going to add some css to and we're going to do basically the same thing so i'm going to copy this now i would use the functionality that zion builder offers of being able to copy stylings everything but we haven't done any styling we've just done css so at this point i literally have to copy and paste at this point when i show you this in another method we can do the really cool feature of zion builder of copy pasting stylings so it can make life go a lot faster but we're going to edit this dancing dog add this custom css and hit absolute now notice how it's hidden back face same thing is there but we're going to add one or two other things so i'm going to just keep this as separate elements element and this time i'm going to start instituting some of our transform capabilities so i'm going to transform if i spell it correctly to rotate on the y-axis 180 degrees i'm gonna make it a little bit easier to do a background color let's do our dodger blue again i'm i'm choosing not to do hexadecimal stuff i normally i would do that sure we can do hexadecimal so i'm adding this because right now we have just basically flipped this around and it we flipped everything around that's why nothing is visible right now so i need to modify and add the additional transforms for it's going to look a little weird it comes on let me pull it up here we go back to our container our container where we only added the css for positioning of relative this is where we need to do a not only a transform style i have to preserve the 3d that will give us that 3d effect and then we will do a transition of transforming over the course of 0.8 seconds now go back up to our full section we have one additional element to add to this and it is a requirement of a hover so when we come to our section we want to be able to say hey for your element oops hover now remember i cree i added a flip box inner i'm gonna do flip box inner so what's happening is i am targeting this css class or actually this element the unique id but when i hover over this one we are saying this id which we'll just i'll show you make sure everybody can see flip looks like i call it flip box is that right flip box inner let's go back to this flip box enter that's right now we're going to do transform rotate y 180 degrees okay now i've got to figure out what did i do oh see this is the other fun thing uh yeah i'm using dashlane i like it uh this is the great thing about doing live development i have some code what we just did incorrect i got to figure out what i as i was trying to talk through what did i miss okay just make sure i'm not missing anything oh the benefits of live coding i probably have a spelling error somewhere let me just see sometimes scion no okay let me pull this up why is hmm okay where's my code we shouldn't have to set anything like that because i am oh i think i found it oh that's what it is one second let me pull this up and i'll show you and i'm just clicking through the different areas all right so if i close this one and let me bring this over there we are okay it was a spelling error uh in the in the transform so what we then have is we are left let me pull up yeah here's the tree view we now have our ability to bring this over show our back face visibility turning one image backwards and then our transform just simply flips between these two images which means if i didn't want to use an image what i could do is we can rather than just a straight image i could put a different element like text or a field or content with a background i can then just attach this custom css now i what i'll do for everybody in the comments um on the on the replay on youtube i will give you all this code here but i wanted to show you what you could do with this exact same setup if you didn't want to get into the code why if we went to our little let's go to the first image there's our settings here's our advanced options i can go through the whole thing in using regular styling so for example if i want to know width height position absolute and other like back faced visibility go to style go to my wrapper now here's where i can do my the 400 300 pixels the 200 pixels set my width and my height i can do it there jump back over here oh if i can set 100 there one hundred percent there well what about my positioning i can come over here and go to my display and uh positioning options i click absolute so i didn't have to go through and do my css i'm just more comfortable using css and then this is something that i kind of love about zion builder because you may be thinking to yourself well i don't see anything about back-faced visibility i don't see that that property in styling well i could look at this and sure we can come over here to some advanced options and hmm am i do i have the ability to do that type of item or you can simply say well let's write that attribute custom attribute oops just one custom attribute i can say backface visibility hidden so this is a great way that if you need to use some lesser used css declarations zion builder gives you that attribute that you can add additional things into wrappers into the divs that generates the css remember when i said well what about the the dynamic changing of items well here's our transform here's that perspective thing where you could set it at the thousand pixels perspective perspective is how far it will spin and yes you can always search for that so for example great reminder i can come over here and say perspective and it's going to show you is it from this wrap this style wrapper the link style the image style i can pull all that off most of the time to do what i just demonstrated you're going to be using the wrapper um in case you were wondering because that's basically what we're doing when we directly enter the css we are just dealing with the div that's wrapping around each of these elements so i hope this has been yeah you don't have the back face visibility option yet but that's one of the cool things about using the attributes so we can um we can do things that are cutting edge in css that i don't think any page builder offers out of the box but we can with scion builder so i hope this has been helpful just to see with just a small four pieces and css you can do some really advanced options uh that are not traditional and you don't have to go down the road of of building full-blown um elements that you would add in you could do it with section container images text those type of things i hope this has been helpful again i do lots and lots of training for wordpress over at wpstudio.com you can find that out i normally do at least weekly free trainings here on the youtube channel if you like this type of stuff definitely subscribe what however you want i i don't market and monetize the youtube channel at all oh and uh georgia absolutely the webkit attributes that is a also a way that you can use a benefit of using custom attributes that's basically what you'd be doing a web kit you could do both webkit backface visibility hidden something like that so you you do both so and that's the other thing um i've been doing a lot with zion builder just over the past week found a lot of things that are really cool if there are things that you wish you knew how to do or you want an example of how to do go ahead and leave comments on on this this video and or you can do it on the facebook page i'm following the stuff that's happening on zion builders facebook and we can see if we can schedule a number of these webinars that can just walk through how to build something and maybe next time i'll start with something that's built using the built-in styling rather than just straight css yasean i'd love to to spend more time with you i'm actually out of time uh because of other things that i have on the schedule so maybe we can do another webinar or another video that i'll put up here on the youtube channel of just going through and using regular elements uh regular widgets if that works so thanks so much for hanging out with me i know this was kind of a last minute webinar maybe we can do a few things in the future so take care everybody have a great rest of the day and again you can feel free to comment on this this video even when it on the replay uh you can always reach out to me at benjamin wpstudio.com and i can try and answer any of your questions or redirect you to a place that you might be able to find an answer so take care have a great rest of the day and hopefully i'll see you on a future event

Channel: WPStudio

Views: 192

Keywords:

Id: yP_ICIE-yOY

Length: 34min 22sec (2062 seconds)

Published: Wed Aug 25 2021