BaseKit: Setting Up & Managing Columns

As of June 19, 2013, BaseKit is not available on new Shared accounts; however, Weebly Web Builder is offered as a replacement.

When you first create a new page in BaseKit, it is only one column wide.  But it may be useful to divide your page into columns to make it easier to place navigation and content on the page.

Divide the Page into Columns

To divide your page into columns, follow these steps while viewing the page you want to change:

  1. Click on "Widgets" on the left side of the screen.
  2. Click on "Content" to expand the Content Widget icons (if not already expanded).
  3. Drag the "Column Layout" icon to the section of the page you want to divide into columns.  This will automatically divide the section into two columns.
  4. Click on the Gear icon immediately above the columns you just created to view the Settings.  A dialog box will appear with the Column Settings.
  5. If you want more than 2 columns, select the number of columns.  It should immediately change once you select the number from the drop down list.
  6. Adjust the gutter width to control how much blank space is between the columns.
  7. You can close the dialog box by clicking on the X.
  8. You can adjust the width of the columns by dragging the gutters (the space between the columns).  When you hover over the gutter, you would get a double arrow indicating that you can drag the gutter left or right.

The column widget just divides the page into columns, but does not actually specify what content is to go into each column.  You would select other widgets, like the Text Block widget or the Image widget to specify what you want in the column.

You can have multiple columns areas per page, and you can even put column areas within existing columns to create complex layouts.  For example, you can use the column widget to divide the page into a content area and a sidebar, and then insert another column area within the content area to further subdivide the page.

Deleting Columns

You can delete a column area by clicking on the column area you want to remove.  Be careful not to click on content you placed into the columns, because you do not want to accidentally delete that instead.  You can tell the column are is selected because the outside border of the column area will change to a bolder line with tiny stripes.

You can then click on the red X immediately above the column area you just selected. 

It will ask you to confirm you wish to deleted this widget.  Click "CONFIRM" only if you are sure. 

Be careful when deleting a column area, because it will permanently delete the column area AND everything inside of it, including images, text and any other widget you added.