Two and Three Column Pages

One of the features of Weaver II is the ability to produce two and three column page content and blog entries. Blog pages are handled by the Post Page Specifics : Columns of Posts option, or with a per-page option for the Page with Posts Template.

There are two separate ways to create two column page content display. The first is with the 2 Col Content (split w/ <!–more–>) page template. With this template, the entire page will be displayed in two columns. Column splits are handled by using the standard WordPress <!–more–> tag, which can easily be inserted from the visual editor using the Insert More Tag button.

There is an entirely different approach to creating two column page content, however. And it gives you complete and total control of your columns. The content doesn’t need to be all in two columns. You can even do 3 columns!

This involves the use of several built-in Weaver classes:
.content-2-col-left, .content-2-col-right
.content-3-col-left, .content-3-col-right
.clear-cols

Weaver II also includes a shortcode called simply [ div ] (without the spaces which are used in this description so we can discuss it). So, to create a page with two columns bracketed by full width lines, you could enter this into a default Page template:


Text entered into your page content like this:

This line of text will come at the top of the content, and extend across the full width of the page. It is just like regular text.
[ div class='content-2-col-left' ]ONE – This content will appear in the first left hand column. Everything here until the closing /div shortcode will be in the left column. This can be as long as you want.[ /div]

[ div class='content-2-col-right' ]TWO – This content will be in the right column. You can alternate content-2-col-left and content-2-col-right as many times as you need. When you are done, you must add one more div as shown in this example. Note the space between the ] and [.[ /div ]
[ div class='clear-cols'] [ /div ]

Now we are back to regular post text that will be displayed across the full width of the page.

IMPORTANTremove the space right after the [ and before the ] in these examples if you use them.


Produces:

This line of text will come at the top of the content, and extend across the full width of the page. It is just like regular text.

ONE – This content will appear in the first left hand column. Everything here until the closing /div shortcode will be in the left column. This can be as long as you want.

TWO – This content will be in the right column. You can alternate content-2-col-left and content-2-col-right as many times as you need. When you are done, you must add one more div as shown in this example. Note the space between the ] and [.

Now we are back to regular post text that will be displayed across the full width of the page.


Note that you can make 3 columns by using two content-3-col-left divs and a content-3-col-right, all followed by the clear-cols div. It would look like this:


ONE – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est.
TWO – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est.

THREE – Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est.

 

Comments are closed.