WORKING WITH COLUMNS
In most of the pages in fmbr.org there will be the center content area, and there will be
the right informational sidebar, which has the Google Map for directions, as well as other
information. As your website grows and changes, that right sidebar will also change.
This document, however, refers to adding and using columns in the main content area.
Dashboard > Pages
Go to the page you want to edit.
The bottom row of editing icons will show six icons when the Kitchen Sink icon has all
three rows of editing icons turned on. These are the icons for adding columns to the
page. For instance the first icon from the left, on the bottom row will divide the content
into two columns, each of equal size, into which you can place your content. You can
hover your mouse pointer over each of these six icons and it will tell you how the page
will be divided into columns before you press the button.
Whenever you create columns using these icons, the results will be responsive on the
page for the visitors to see. So, for instance if you divide the editing area into three
columns with the appropriate icon, and you place three images into the editing area, one
into each column, then in the front end of your website when the screen is wide, the
images will appear one next to each other, from left to right. On a cell phone screen
however they will appear on top of each other.
Let’s step through an example.
Click on the second column adding icon from the left after you have placed the cursor
into the editing area.
The screen will show two columns, Column 1 and Column 2. The columns will be
colored a light color, and will have dotted lines around them. This is a visual aid to help
you the website page editor. Neither the light color nor the dotted line will show up in
the page which the visitor will see. Above these two columns is a light grey bar. This is
to remove the formatting for the columns. If you hover the mouse pointer over the gray
bar, a red circle will appear on the grey bar at its far right. If you click on this red circle
twice, the formatting for the columns will go away, but the contents of the column will
remain on the screen. If you wanted to delete the columns in their entirely, you would
need to first remove the formatting for the columns, and then remove the remaining
contents which previously occupied the columns.
You can click into either column and then delete the text, “Column 1” or “Column 2”
which is just placeholder text to tell you that you have columns. You can then proceed to
add content to the insides of either of these columns like you would any other content in
the Edit Page screen. You can add text and image and Headings and anything else you
would like. Then click on the blue, “Update” button when finished and take a look at
your work.
These columns can be used to make your page more presentable, as well as to conserve
screen space by placing information side by side. One use may be to place an image next
to some text. So, you might want to use the 1/3 – 2/3 columns and then place an image in
the first column, and some text pertaining to the image into the second column.