Dynamic sliders for Products, Custom Posts & Posts using Dynamic Slider - Oxygen Composite Elements

in this video we're just going to have a look at the oxygen dynamic slider which is part of the oxygen composite elem elements add-on and you'll see how that we have a couple of slider sets up we have one which looks at a product bringing in product information as well as the price here we have a custom post type and here we have a standard post here we're bringing in the category here we just bring in the title and the read more and here we bring in some product information so let's just refresh that and then we're going to head over to see how it sets up so product composite post custom post so when we head over here to the backend in oxygen i've set up three of these composite elements and i'm just going to take you through each one to show you how they were set up so when you look at the composite element you'll see that it's made up of several pieces you have the dynamic slider dynamic slider code and then you have the slider container inside the slider container is a repeater inside the repeater is an element called slide and then you have the div now you can edit anything or add any content after the div so you'll see that what we've done here for the product is we've brought in the post title so there you can see data equals title and then here we've brought in the we have the oxygen add-on installed for oxygen builder and here we've actually brought in the product meta using the product builder and i'll show you how that's done now we did the same thing to bring in the price and then we have the standard read more button which then links through via the data we just link that through to the post permalink so that's how we set up that particular post here we have a custom post type and we just set up the title and the read more here we have a standard post and we did the heading with the category and then the read more so to show you how these items are put together i'm going to delete this one and then we'll create it again so this is the product one so right the first thing we're going to do then is create the product slider again so what i like to do is add a section hit add again go over to helpers and look for the dynamic slider and insert the dynamic slider and the moment you put it in it just runs off some default settings so in this case probably putting in just the standard post information but we want to do something now with the product so what i'm going to do now is just click on the title here so we can make sure we're in the right section here in the builder and i'm now going to head over to the repeater head over to the query and change the post type here from post to product right so now we've set up the product i'm not going to look at any particular item and then i'm going to just apply the query parameters and now you'll see this is actually a product that we're putting through so i don't want to be pulling through the vouchers and stuff here so what i'm going to do is i'm going to head over here in any of the following taxonomies and i'm going to put in hoodies and maybe accessories right so with that selected that will now apply once that's applied we can apply the query parameters and now we have the updated set of products being pulled through right so that takes care of the repeater and now what we want to do is maybe pull in the product information so let's just make this title a little bit smaller so standard editing applies so here maybe we're just going to drop that down to 40 and the font weight will make 500 and then what we'll do for the typography here is we'll just set that for the whole slide and we're going to set that to the middle right so now what we can do is add in some product information so to do that we're going to add the woocommerce and then we're going to bring in the product builder and you'll see it's going to pull through the product builder and it's not the way that you'd like it so what we do now is we just add the product price and you'll see now that the product price will display and then if we want to we could add another element and maybe for that we'll bring in the product meta so there we have the product meta being pulled through and what we'll do is we'll just arrange that above the price right so now what we're going to do is just change the styling a bit now that we have all the information that we want on the page so now i'm going to add a div so let's bring that div in here and then i'm going to uh let's just add another div inside that div and then i'm going to duplicate first set the width there to um well let's make that 50 and then i'm going to duplicate that div right and then what i'm going to do is head over to the the encompassing div and just change the layout to horizontal so now we have the layout and now it's just a case of moving the items around so what i'm going to do then is the heading i'm going to push that into the second div and then we have the product builder and i'm also going to move that into the second derf so now we have our information being displayed here on the right hand side and what we want to do now is just have a look at that button as well let's move that button across so now we have the button there as well and in that div we're just going to centralize let's just select that div and then we're just going to make sure everything is aligned in the center and you can see it's a little bit hard to read so what i'm going to do then is change the text color here to black and then what i'm going to do is take that div and give it a background of white and then let's give it size and spacing let's give it a bit of padding all the way around so that the elements come in but you'll see that it's still not um filling the full slot so traditionally the slide would would basically fill the entire background with the featured image and then you would place elements on top and what we're doing is we're just moving that around so we'd like the image to be here on the left hand side now so what i'm going to do in that div i'm going to advanced i'm going to head over to the background there and set the data and now i'm going to set the featured image of that to large insert i'm going to set it to cover we'll say no repeat and we'll also just make sure that it's centered so we set both the left and top position to percentage and drop in a 50 and a 50. so now we've centered the image but you can see that the div doesn't fill up the whole space so now what i'm going to do is head back to the top div and stretch the elements and now you'll see that the divs do in fact now fill that space what i'm also going to do now is just change the line height on that particular item so that over to typography and the line height will make to 1.2 and now you'll see that this encompassing div doesn't actually fill the entire space so to make that work advanced size and spacing and now i'm going to change the height here to 100 and now you see it fills the space completely and you can't see anything above or below from the image in the background now what i can do as well of course is i can head over to my section and i'm going to set everything to zero on the padding and then i'm going to set a background color just to make the slide stand out a little bit and we'll leave it perhaps something like like that so now if i save that so here we are looking at the items on the front end and what you'll notice now is that some of these items the spacing is very narrow so you'll see for example here and that's not how we designed it if that happens the way to fix that is to head back to your slider select that first div for the content and change that to 100 percent save and then when you head back to the front end and refresh then you'll see now that every slide is correct so you'll see that it's neatly positioned fifty percent fifty percent on each slide so that's how you would set that up if you wanted to [Music] create the layout where it overlays similar to this that's quite easy to do in this case what we can do is we have that div here and we have two choices here what i'm going to do first before i even do that then is i'm just going to wrap this div in another div that way i can keep all the elements together so i'm going to wrap that with the div right so that's what we'd expect to see now i'm going to set the width of that new div to 50 percent and and then and set this first of here that's on fifty percent and that's been set to fifty percent and this div that was on fifty percent we're now going to set that to 100 percent and now it will fit to get the divs the same height we'll head over to that div and we're just going to make the height a hundred percent so with that made a hundred percent it's this div that we don't want a hundred percent so that is correct so what we're going to do now is i'm going to set the div here i'm going to set the layout of this div to to relative and then i'm going to head down to this div and i'm going to set that layout to absolute there we have that then i'll head back to this div and i'm gonna just request that the data be centered so that moves down to the center and then what i can do now is take this div and head back to the layout and then what i'm going to do is set the position here to minus 50 and you'll see that it moves over and maybe we're going to make it minus 100 and so there we've moved our div over what we can also then do is maybe give it a box shadow so let's just head over there to effects box shadows horizontal let's make it 10 make that zero make that five and then give it a color below so there we have our shadow just heading over on the right hand side and we'll give it a spread of ten so [Music] that's just something that's optional if you'd like to you know give it a slight uh drop shadow you can do that or if you want to you can just centralize that something like that maybe and then maybe just change that spread to a little bit less so maybe something like that just to have it stand out more and now you'll also see that we have the background image coming through which doesn't look too bad and what we also want to do here then is just move that up and let's actually make the price a little bit bigger so the font size there let's make that 20. and then let's also change the color to red right so we'll save that now we'll head over here to the front end again and reload that and now you'll see that the new layout has taken effect the image is slightly over to the left and it has a whole lot of products but if we don't pull through all the products what we can do then is head back to our repeater and head back to the query um and what we can do is count post per page and let's make that four apply that term save that let's head back to the front end and now you'll see that we only have the four dots displayed with our slider so there you see just the four products so that's how you can set up the slider then to bring through product information if we have a look at a custom post type which is what we have here and let's head over to that in the sidebar here and if i head over to the repeater you'll see here that the difference here is that the post type is set to product test which is a custom post type that was created and then the rest of the information follows as normal for a standard post where that links through to the post title the read more links through to the post permalink we've just put in an image in the same way that we established the two columns there we did that here and in this case we just took out the background image and just made it white and the standard post works in the same way here we've just added the dynamic element from wordpress so we went add wordpress dynamic data and we said categories and that pulled through the category and that's how that was inserted on the slider over there hope you enjoyed the video and thank you for watching

Channel: Bruce Young

Views: 189

Keywords: oxygen builder, composite elements, dynamic sliders

Id: wLQGRC0YBqU

Length: 17min 8sec (1028 seconds)

Published: Thu Dec 02 2021