With The WunderBar 1.8 or later, you can divide content into columns and edit them using Wunderbar's WYSIWYG editor. We have added an easy way to create CSS Grids, which are supported by around 95% of current browsers.
To create columns it is useful to understand just a bit about how HTML organizes content. The most common and obvious blocks of content are headlines and paragraphs and the like. Most every time you press RETURN for example, a new paragraph is defined using HTML <P> tags. For more control, collection of paragraphs and headlines can be grouped together by enclosing them in a <DIV> tag. That division (and the things inside it) can be identified and then styled differently from other paragraphs, headings, and DIVs. That styling can making it into a column of a certain percentage width, for instance one-fourth, one-third, or one-half of the width of the overall content. (There is a lot of background material on CSS grids online available through a Google search.)
The WunderBar can apply grid rules to DIVs within a given piece of page or post content. Two buttons in the admin area make this simple. The first button is “Show Blocks” — the leftmost button of the last button group.
Click that, and invisible formatting elements around your content become visible, showing their types and borders indicating their edges. When adding otherwise invisible DIVs, this helps you determine where you are working:
For a first step we need to create a div that will hold the columns. The “div” button (located two buttons left of “show blocks”) inserts a div. If you have no content yet, this is where you start. If you do have content already, you should select all the content that will become part of any column, then click the “Div” button. which will put a div around all of it.
The dialog box that pops up has a “Style” drop-down on the left. One of its choices is “Grid Columns.” Select that, click OK, and you will have added a DIV to your content that will contain the columns. As long as the “Show Blocks” button is set, you can see its normally-invisible edges.
While your cursor is inside that DIV, you can click the “Div” Button again. This time you should select a style that matches the column width you want — anything from “grid one-sixth” to “grid full”. Click SAVE and you'll will see your new inner DIV takes up the appropriate amount of space. Move your cursor out of that inner div, and repeat the process to create another column. (Tip: while “Show Blocks” is visible, as you move your mouse around, red lines will appear below or above of blocks. These magic lines can be clicked to help you position your cursor just after (or before) the content your want, so you can start new content in the right place.)
(If you already have content, you can select some of it then click the “Div” button and it will enclose that content, assigning it the width you selected in the div dialog's style menu.)
You can mix and match column widths as your design requires. If a column is too wide to fit, it will be moved below the current row of columns. You can change the width of a column by placing your cursor somewhere inside of it, right clicking, and selecting “Edit Div” from the context-sensitive menu. That brings up the Div dialog, and you can choose another column style.
Additional Notes:
Wunderbar columns appear on desktop browsers only. On small mobile phones screens, content will flow from top to bottom as if there was just a normal single column.
The grid's default settings are designed to work for most websites most of the time, but as this is based on CSS style sheets, you can add your own styles to take matters into your own hands. These are the classes involved:
.wbar_grid
.wbar_grid > .wbar_sixth
.wbar_grid > .wbar_fourth
.wbar_grid > .wbar_third
.wbar_grid > .wbar_half
.wbar_grid > .wbar_twothird
.wbar_grid > .wbar_threefourth
.wbar_grid > .wbar_full