Build Your Own Business Website header image

J Shortcodes Plugin – Part 7 Adding Basic Columns

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is Part 7 of the J Shortcodes Plugin and in this session we show how to create columns and specify the width using J Shortcodes.

Video Transcript

Now the next thing I want to do is talk about the columns. And the columns allow you to take a block of text and divide it up into you know, different columns. So for example, if we come over here to our edit page and then we go take a look at our shortcodes and scroll down here to their thing about columns you know, the very basic element of columns is just to do your wrapping shortcode and then individual column shortcodes.

So for example, if you were to…yeah, so for example, this. You would take J columns as your opening, j column in between each of the successive columns and then J columns at the end. So let’s just go ahead and grab all those and demonstrate that here. I’m going to put these at the top for the moment.

Okay so we’ve got our J columns and let’s put our closing J column at the bottom of this piece and let’s put our intermediate J column right there. So now what we have is we’ve started off with J columns then we’ve told it to start a new column then we’ve closed up the columns. So it knows we only want 2 columns here. If we say update to that and then go to Demo 1 and look at our page, here we have it. We have created 2 equally sized columns where the 1st column ends at that one little box and then we start the next column.

And if we wanted to add a 3 column to that… actually you know, I think what I’m going to do here is I’m going to get rid of the sidebar on this one. So if we come back over to that page and instead of… let’s see, we’re working on Demo 2. Let’s say we do no sidebars template here and then let’s take our J columns and paste it there and then just get rid of the umns here….so now we’ve got 3 columns: column 1, column 2, column 3. Hit update, go to Demo 1 and refresh it. I think I must have done that incorrectly. Let’s see, J col… oh that’s what I did. It’s actually over here is what it is. That’s what the thing looks like. J col… like that. So if we hit update and now we have 3 columns, each equally spaced.

Now you notice that this has some column spacing here. But it doesn’t have very much column spacing so if we want to have more column spacing, we use the column space or the column gap attribute.

So go ahead and copy column gap. By default, they do 12 pixels but generally in WordPress, that is going to be 22 pixels. So if we replace that asterisk in one with col gap = 22 and we hit update, that should put the 22 column width in between both of these. And that appears to have done that. It doesn’t really look quite like 22 does it? 32, update, refresh. Yeah, okay. I just made it wider even.

So you can specify the spacing in between and in this method of laying these things out, you end up with equal number of columns, right? Well, not equal number of columns, equal spacing of columns. All 3 of these columns are the same width because all we’ve done is specify that we wanted 3 columns and specify the spacing in between the columns. It doesn’t add any spacing to the left or to the right.

0 Comments… add one
0 comments… add one

Leave a Comment