Understanding Columns
Sara Moore avatar
Written by Sara Moore
Updated over a week ago

Each page is comprised of one or more types of content: Hero, Content Block, Columns, Simple Text, and various feeds.

Columns have many different features that you can customize, depending on what you'd like. With Columns, the options include:

  1. Title: Give your column a descriptive title for the Product, Service, or Benefit you are highlighting.

  2. * Description: Include a brief description for your column.

  3. Adjust the number of columns: When you click the 3x to the left of your columns, you can choose between 2, 3, or 4 columns within a row.

  4. What's what in the Orange Control Panel: When you hover your mouse over the icons in the orange control panel, a little popup will appear that details what that icon does.

  5. Image or Media - Include an image (Image tab, by default) or other media (Embed tab (such as a YouTube Embed)

    1. Select Image - If using an image you can either upload a new image or Browse images already uploaded. It's completely acceptable to reuse images in multiple ways... just make sure the image is relevant.

  6. Move Column block up or down on the page: hover your mouse over the 3 lines to the left of your row of columns until an anchor appears. Then you can click and drag your row of columns up or down on the page.

    1. Move an individual column left or right within a row: hover your mouse over the 3 lines in the orange control panel until an anchor appears. Then you can click and drag your column left or right within the row of columns (note: you cannot move a column from one row to another).

  7. Set up a button: Add a button to a column to direct visitors to another page on your site or an external site.

  8. Settings for Column: on each column, you can change the background shade, text color, add a background color, and some other advanced settings that require CSS (see image below).

  9. Delete an individual column

  10. Save Changes: Changes on a page don't save automatically, so be sure to save changes as you go.

* A Note on the Description: When you click to add the description to a column, you will see a white control panel giving you some additional options for formatting your text. You can adjust the style of the text (Header 1, Header 2, etc.), add a bulleted or number listed, and more.

NOTE: To add additional blocks to a page, click on any one of the desired blocks at the bottom of the page.

Advanced Notes:

We set the height for columns sitewide in the CSS so that they all match - if you need assistance with adjusting the height, let us know at help@locable.com. However, we recommend uploading photos to columns that are all the same dimensions so as to avoid the need for adjustments.

We set colors of buttons in columns (as well as Simple Text Blocks and the Hero) in the CSS and it is applied sitewide. If you'd like to change your button colors, please let us know and we can assist.

For inspiration on custom design elements that can be applied to columns, check out our Design Lookbook.

Did this answer your question?