How To Make Hot Spots In Oxygen Builder Using OxyExtras and ACF Pro

[Music] welcome everyone we are going to jump into our next tutorial here in this one i am going to cover building out hot spots using oxi extras hot spot component and specif specifically in this tutorial i'm going to go over using them with a repeater so you can see in my example here i just have two built in here i go ahead and click on the hotspot it pulls up an image and this one i have some text along with it and then this one i just have an image so the very first thing i did is i'm going to jump over to my build now and i just have a pre-built site from the oxygen try link other than that i haven't done anything to it yet in my media library i did go in and add in my three images here and the very first thing i'm going to do is we're going to use a really handy plugin along with this so i'm going to go into add new plugins and i'm going to search for a plugin called advanced custom fields image hotspot field and it might take a moment here let's take a look and see if we can find it here all right let me just paste this back in and we'll look again i think it's going to be towards the bottom here all right this is the one we want right here by andrew rockwell so i'm just going to go ahead and click install now and then we're going to go ahead and activate it right away all right and i'm going to assume that you already have advanced custom fields and advanced custom fields pro and oxy extras already installed which i do here so next let's jump over to our custom fields and we're going to go ahead and build that out so i'm going to add a new field group here and we're just going to call this hot spots and we want to set this equal to page just for my example certainly you can change that to where you need it to be i'm going to change my position to high after title just so it's above most of the other stuff and then from there we're going to just go ahead and jump in and add our our groups here so the very first thing i'm going to enter here is actually going to be a repeater so i'm going to hit my drop down here come all the way down to repeater and for this one i'm going to just name this hot spots if i tab through it's automatically going to make my slug for me and then we can scroll down a little bit and start adding each item in here so my first one that i'm going to go ahead and add is going to be my hot spot image again if i tab it's going to automatically make my slug there in my field type drop down i'm going to choose image so let's take a look here under content image i'm going to scroll down a little bit more um it is important to make sure that you set it as image url otherwise you're probably going to have some issues so make sure you do choose that because it's not the default i'm going to leave my preview size the same and i believe that's going to be everything we need to do on that one so next what i'm going to add is going to be my hotspot location and this one is where we're going to be using that plugin that i had you install so if we go in here we're going to look for image mapping is what it's going to be called in our list here so if we go ahead and choose that it's going to add some options down here and what we need to do is we're going to have to enter in the image field name which i don't have yet so we're going to come back to that i do want to go ahead and check this check box here which allows us to use percentages and next we're going to add our next field here which is going to be hotspot title and this one i'm just going to leave as text and then lastly we're going to do hot spot text again i'm going to leave it as a text field here actually i'm going to change this one to a text area just so we have a little bit bigger of an area to use and we are good with that grouping and then now i'm just going to add my next field which is not inside the repeater with everything else and this is going to be our main image that we're using so for this i'm going to name this our hot spot main image and this is where i'm going to copy our slug here and again i'm just going to choose image and our drop down here and again i want to set my image url under return format and again i'll leave my size medium and we should be good on that so now i'm going to scroll back up having copied this and i'll just copy it one more time because we need our field name i'm going to scroll back up to our image mapping option you can see that i need to paste that in right here so i go ahead and do that and now i can go ahead and hit save on everything or publish and we should be good to go so now if i jump over to pages and in my case i'm just going to do this under the features page i'm just going to open it in a new tab here and i jump the gun on that one i need to actually go into the page first not just loaded in oxygen so i'm just going to x out of that and now you can see that i have my options here so the very first thing i want to do is click add image to my hotspot main image so i do this and i'm going to choose this one here and i'm going to hit select and then i'm gonna add a row here and now you'll see that i have the option to add in four different areas here so i'm first gonna select my image which will go with the steering wheel for this one and i didn't worry about any alt text or anything in this case just because i'm giving you an example certainly if you were doing this for real you want to make sure you do have all that info in there and in our case we did have a title and some text on this one so i'll just copy and paste that in here all right so i have those in there and then what it's going to do is in this image you see i have this little plus arrow now this is going to allow me to choose where i want this hotspot to show so this is the really nice part is once we do this we're not even gonna have to go into the builder to set where hot spot location is so in this case we're on the steering wheel so i'm just gonna go ahead and just put my point right there so now you can see i have this red dot and it automatically generates these percentages which gets pulled in within the builder so i'm going to go ahead and add one more row here and do the same thing this time we're going to use the navigation image and i'm not going to use a title or text in this case in this one i'm just going to set my location to be right here in the middle here just like we saw on this one so now i can go ahead and hit update and we have all that info in there so now i can come down and click edit with oxygen again i'm going to just do this in a new tab alright so we're in our builder i'm going to go ahead and open my structure panel here and what i'm going to do is insert a section right below our hero here so i'm going to click add in the top left and section and from here i am now going to insert a heading and i'll just double click this and we're going to call that hotspot images and next i am going to add in a div so again i click add in the top and then select div and i'm going to expand that now here so we can see this and in my section i'm going to go ahead and just set it to vertical and center and i'm going to come over to my sizing and spacing it's already set to 100 so i'm happy there and i'm not going to mess with the padding at all right now so now you can see we have that centered here and i don't want that to actually be an h1 in my case so we're just going to set that as h2 because our h1 is typically going to be up here so now let's go back down to our div here so we're going to click on that and from here we're going to add our hotspot so click add and come all the way down to extras and once you click here we're going to want to just choose hotspots so again i'm going to expand this and now here we're going to choose to add our image and then my image here is where i'm going to now browse actually i lied to you we did not want browse i'm sorry i want data so if i go ahead and click data it's going to bring this up and i'm going to choose advanced custom fields and hotspot main image which is going to be my only option and i'm not going to set any sizes at all right now because it should just pull the default so i'm going to click insert and you can see it sets it up there the main thing i do want to do is we are going to set the size of this so if i go back to my media library i'm just going to have this open in another page so i have that ready in case we need to go back from my media library i'm going to look at my image and see what size we have so it's 900 width so i'm going to come over here to oxygen builder and we are just going to go ahead and set that to 900 right away and i'll set my height to auto let's see how that looks i'm going to have to play around with this here shortly so you can see it looks a little bit blurred right now but we're going to fix that as we go through all this i just want to get all the different things added in here first and then we'll come back through and stylize them all right so we got our main image in there now i'm going to come back up to my hot spot and click on this and we're going to now add our repeater so here it still has my oxy extras open so i'm just going to start typing repeater and click that otherwise you can search for it in there as well and in here what we want our query to be is we're going to use acf repeater so i'm just going to click that check box and it's going to give me my option here and i'm just going to choose hotspots and apply query parameters at the bottom here i'm going to go ahead and click my back arrow here and now what i'm going to do is expand that out again click inside my div and in here we are going to now add in our pop over so i'm going to go ahead up to the top left corner click add and now choose pop over and again i'm not going to start stylizing all this yet but we will get to that additionally inside my div here i'm going to also add text in two spots and i'm just going to duplicate that right away so i have that open now my first set of texts i'm just going to double click in here and come up to my insert data and here we want to go to our advanced custom fields and you you'll see here we have the option of the advanced custom fields or repeater field we want to go ahead and choose the repeater field and in our drop down here we want to choose our title for the top one we're going to click insert and then in our next one we're gonna also double click here again click insert and do the same thing except we are now going to choose our text and insert and lastly inside our div here we are going to add in our image so again i'm going to click add you can just start typing image and get that added in and here we're going to choose data again our repeater field and this time we're going to choose our hotspot image and go ahead and insert so now we want to go through and actually make sure everything is in the right orders here so what i want to do is set my image between my two text fields here and make sure that all of these are actually under my pop over so you're gonna have to drag those over and it might be a little tricky but we should be able to get it here all right so we got all three of those in there now and the last thing i want to do is i'm actually going to close these up a little bit just so i can move this easily i want to make sure that my repeater is above my main hotspot image and we need to do that to make sure that everything shows up properly so now i'm going to go ahead and expand that back out just so we can get in to everything here i'm going to come down to my image and we can start sizing everything so you can see i have it at 900 here i'm going to go back up to my hotspot and from here i'm going to click on advanced size and spacing and i'm going to set that to 900 again all right so we've got that in there all right so you can still see that the image is blurry even after we set our width so i'm going to actually jump back down to our image and i'm going to click on data advanced custom field again choose my hotspot main image this time i'm going to choose my size and just set it to original let's see if this fixes it for us all right it did you can see it cleared that up for us so we're good there i'm going to jump all the way up to my div up here and we're going to set up our layout here a little bit so i'm going to set vertical center and middle i'm going to set my width to 100 percent all right now jumping back to our hot spot again we should be good here i'm just going to double check my settings got our size and spacing set all right so let's go ahead and jump down to our pop over now so from here what we're going to want to do is set our marker position to dynamic and now you can see that it gives us this new field here with two percents and this is where that custom field that we added which with the image mapping comes into play so i go ahead and click data and click on my repeater field again and we're going to choose our hotspot location and click insert that's going to preset where our locations are showing up so from here we want to now go and add in our pop over width so in my case i'm just going to set it to 625 you'll have to play around with it a little bit to see what is going to be best for you and then we can go through and play with our marker a little bit to get it to look how we want in my case i am going to style it a little bit i'm going to leave it as the same icon i'm going to increase the size a little bit we're going to go to 25. i'm going to set my color for it and in my case i'm just going to do a red just like i have in my example which is ff000 and you can see it's red now and next i'm gonna click on borders and i'm gonna set my border radius to 50 percent might work with pixels as well but i'm going to actually set it to percent and you can see it showing up just like we had in our example just like we do here all right so let's go ahead and jump back into our oxygen builder i'm just going to hit apply parameters here and you can see once i did that it jumped my my hotspot into the correct position so it is important to make sure you do click that all right i'm going to jump back a little bit here and let's see if there's anything else we want to do certainly you can play with some of these other settings if you want to um i'm not going to at the very second i am going to double check quick to see if there's anything that i'm forgetting in there all right i think we are good there so i'm going to go ahead and click save and we're just going to jump to our front end and see what we have here so i'm going to go ahead and click refresh and you can see we have it here if i click here you can see that it opens up and i have both my text and my image here and if i click on my other one the same thing so you can choose to style this how you want i'm changing the background of this making your corners more rounded in my case i would do want to center this a little bit so we're going to jump back here and inside here where we have our text and everything i'm going to click on advanced layout we're going to do flex column center and center let's see if that does it for us it might actually be inside the pop over settings that i have to do that but we're gonna check it out quick and yeah it is all right so i'm gonna undo what i did there and you can do that just by clicking on each of those options again and it'll unselect each of them so i'm going to click back on our primary and we want to let's go in here and see which one it's going to be i think it's going to be our inner layout we're going to want to do vertical [Music] center and middle and again i'm going to hit apply and save let's go ahead and take a look here and see if that was the trick yep so you can see their center now so now we can go in and stylize our text as we need to you can see everything is crammed so what we're going to do is on our text we're just going to add some spacing in there so i'm going to click sizing and spacing and we're going to add some margin to the bottom now depending on what you do for your different styling you can use um pixels or i typically use rem but in this case for my example i'm just going to be quick and add pixels here so i think we'll just start with 20 pixels there and we'll do the same thing on our text here and this one i'm just going to add it to the top instead of the bottom this time i'm going to click save and we can take a look and see how that turned out for us now you can see we have a little more spacing there and you can see in this case we do have space being taken up where the text would be here so what we can do is now click on our texts again and we're going to add in some conditions so in the very top here you'll see our condition settings we go ahead and click that we can set conditions and we're going to add our first one in our drop down we want to choose our dynamic data and then we're going to come over to our repeater field and you can see we're on our second text here which is kind of grayed out which happens to be our hotspot text and i'm going to click insert and we are going to set this to is not blank so basically what this is saying is if this field is not blank we're going to show it so you can go ahead and now just click the x and that's all set up in order to do the same thing on this one so click on this text and we're going to come up to the set condition settings set conditions add your first condition again we're gonna click our drop down here i apologize there's a little bit of lag going on here i'm gonna click dynamic data in our drop down then repeater field and then we're going to choose our title in this case click insert and we want to again set it to is not blank you don't have to put anything in the custom field here just is not blank is going to be good so now if i click the x on that and save we can come up here and hit refresh and now you can see that there's no extra spacing around this image and if i click this one you can see that it's still there and certainly if we go back now and on our page add some text here and i click update i apologize i have to hit refresh here first for it to let me do that and now i can click update sometimes i notice if i come to a page and haven't done anything in a while my update button is grayed out so i can't actually click it a refresh usually solves that for me so i have navigation in there i clicked update and now if i come back to the front end here hit refresh you can see that is showing in there and in the bottom it's still not adding any extra space because we still had this blank so let's jump back into the builder here and we're going to tidy up a few things so you'll notice right now that only one shows in the back end and if you hover over it it kind of disappears on you it's nothing to worry about if we come up to hot spots you do have the ability to navigate between hot spots i usually just leave that disabled i'll go ahead and enable that here and just so you can kind of see how that works i'll click apply and save and if we hit refresh here and if i click on one of these it's going to bring it up and i think i would actually have to add these classes in in order to be able to do that and that's something i have not played with so i'm not going to jump into that but i think based on what it's showing here if we use those classes that's how we're going to be able to navigate so i'm just going to set that back to disabled you can choose whether you want your hot spots open on page load i'm going to leave that at none i'm going to click save again and lastly we're going to come through here and make this mobile friendly so where i'm going to start here is i think i'm with my image so i'm going to come all the way down to the bottom here and we're going to slowly work our way down here you can still see at the 11 20 in my case it still fits okay if we go to 992 now you can see i get my scroll bar here so we're gonna have to make that a little bit smaller so in this case let's um jump down to 750 and see what that looks like still have a scroll bar so let's try a little bit more here we'll go to 650 and that looks pretty good here and in order for our hot spot to be in the right spot here because you can see that right now it's showing not in the right spot i do have to also go up to my hot spot section and here we're gonna also set our size to 650 once i do that you can see it pushes it back into the right spot so it is very important that you have your hotspot and your image with the same widths and you do actually have to set a width you can't just set it at what 100 percent otherwise you're going to run into issues where it's not going to be exactly where you want it especially as it scales so i found that it's very important to make sure you do actually set your width for both the hotspot and the image so next we're going to drop down to the next one down let's go to 768 here again you can see it's too big and we have our scroll bar here and we're at 650 before so let's try 500 now and that's a little bit better i'm going to come down to my image 2 and set that here and see how that looks might have to go a little bit more yeah let's try 400 and i think that's going to be good and we'll make this match just to make sure everything lines up properly and let's jump down to the next one and here we'll go ahead and set it at 300 and set my image also at 300. and we are good to go there so now i'm going to go ahead and click save and refresh you can see everything's showing up here fine and i'm going to use my handy dandy hoverify to click responsive and you're going to notice we're going to still have a little bit of an issue here once this loads so let's go ahead and find our hot spots you can see those are roughly in the right spot and when i click it you can see that these are showing up a little too big it's okay on an ipad but once we get to our mobile devices you can see they're too big that's because we have them set to 625 pixels so i'm going to jump back over to my builder here and we're going to start at the top again and work our way down so i'm going to choose my pop over and here's where we have our pop over with set and again i do want to have a actual pixel value set here to make sure that it's showing up big enough because if we do leave it blank i will show you go ahead and hit refresh here it's going to shrink my image way down and that's not what we want so jumping back in here um we do have the ability to change our units here as well but i'm just going to leave it for pixels in my case i'm going to set that back to 625 for our all devices and slowly work my way down here i think once we get to our 992 or less than 992 instead of 625 i'm going to drop down to 525 and then less than 768 i think i'm going to drop down to 425 and less than 480 we're just going to drop to 300. so i'm going to go ahead and click save come over to my hoverify tab here again and i'm gonna click refresh and once that loads up here again we're gonna scroll and now if i go ahead and click in here you can see that it's fitting in on the screen and on the bigger size it's showing here as well all right so you can see that we've made that a lot more responsive now so that it's fitting on all of our screens by sizing it out and it is going to be something you have to play with and go through and size it out certainly if you're changing your breakpoints within oxygen this might change a little bit and or depending on the size of your hot spot images that you're putting in there you may have to start at a completely different number but i'm just giving you a starting point letting you know that it is important that you do have have to actually set your value here so now that we have that all done um i think we are going to be good to go i shared all the main tricks behind this things that i stumbled and had some issues with initially the main ones that i had the hardest time with was not having the hot spot and image be the same size and therefore my actual hotspot location would be slightly off depending on the size of the image as i scaled so making sure that they're the same is going to ensure that every time your hotspot is right where you want it to be again the nice point is this allows you to only have to come in and add or subtract hot spots right from the back end you don't have to jump into oxygen builder anymore we're completely done with that and we're just gonna stay focused on here so it makes it really easy if you're building a client site and you don't want them to have to go into oxygen builder you can make this very easy for them by setting this up like this giving them the ability to add an image and choose right in the back end where they want that image located and add the text and all they have to do is click update and it'll automatically show everything that we want so that's the power of using oxi extras advanced custom fields pro within a repeater this is something that i found really useful and is pretty powerful once you decide to use it and certainly in this case i'm just adding it into a blank image on a page here you can use it in all sorts of different types of way and my use case i'm using it inside tabs and i find it very useful to be able to add different tabs with different images inside it and have different hot spots on each of those images so i hope you guys enjoyed that video certainly if you have questions drop them down below and i'll look forward to seeing you guys in the next video

Channel: LocalSBM

Views: 432

Keywords: Oxygen Builder, WordPress, Oxygen Builder 3.8.1, OxyExtras, ACF Pro, ACF Repeater, Image Hot Spots

Id: XOk5eGV3u_U

Length: 37min 5sec (2225 seconds)

Published: Fri Aug 13 2021