This is Part 8 of the J Shortcodes Plugin Series and in this session we demonstrate how to add variable width columns by specifying each column’s width size. We also show how you can add colored boxes in a column, all this using J Shortcodes.
So however, we do have this ability to have variable width columns. And so, if we come back over and look at the code here, model is the method for specifying a variable width column. Now, model by default is empty and so the columns are equals. But one of the ways or sort of the way to think about specifying widths is to think about as parts like you know, 2 parts tequila and then one part triple sec. You have a grand total of 3 parts and the tequila is twice as much. Well, that’s the way this would work too.
If we take model and right there, model and we said 1 2 1, it would be the outside columns… would be the same size and the middle column would be twice their size. So it would essentially be parts, 2 parts middle column, one part left column, one part right column. Think of mixing a cocktail. So we select update here, come back over and look at this. Now the left and the right columns are the same size and the middle column is twice the size.
You know, another way of thinking about that for example, would be… let’s just say we get rid of this J col and let’s say we’re going to do 3 and 1. So now what we have is 2 columns and the 1st column is 3 times the width of the next column. If we hit update and refresh it, here’s our one big column and here’s our 2nd narrower column.
Let’s go ahead and add a space there. So you can use that to do a little sides with and in fact, you know you could even…within this then you use a colored box. So if you recall what those colored boxes look like, let’s say that you want to use a J box yellow. We can just…yeah, let’s just say we’re going to use a J box yellow.
So right here, we’ll say J box color yellow and then we’re going to close out the J box. Not L box, but J box. J box color yellow, close out the J box, hit update. Take a look at that and so, maybe in fact, what we should do here is yeah, let’s just delete a bunch of this. Oh no, pardon me, that’s not right. We’re not deleting that… let’s see, we’re deleting the other one. So we’re going to… well, let’s just add another paragraph of text to the first one. So we hit update there and now you’ve got you know, 3 paragraphs of text beside this box and you can reduce this amount of text inside the box so that it matched, for example.
And now, you have you know, columns and you’ve got a colored box to set off and you’ve specified that this is 3 times the size of that and so on and so forth. So there’s a lot of you know, different ways which you can manipulate these columns and still then come back to… notice, come back to a…I’m going to spit this out….come back to a non-column arrangement.
So if we come back over here again and let’s just grab all of this stuff….actually, first thing I want to do is give myself another paragraph and then I’m going to come over here and copy that and put it below that paragraph. Update it again. You can see we can use this for fairly complicated you know, layouts. And in fact, if we wish to, we could switch this over.
And so, if we come back down to this bottom and we could take this colored box, we could in fact, make this 1 and 3 and then you could take the colored box part of it out of the first one or rather, the last one and put it in /jbox. And then let’s see here, add /jbox, update that. Oh yeah, I need to move the place where that column is too. That’s what I need to do.
So in fact, let’s look at full screen. It’s so much easier. So then we come down here to our J box and we take this J col and we put it right there. Update it, view it. And so you know, here’s a way of you laying out a page, a fairly complicated page you know, with different elements, different column layouts using this J shortcodes plugin.