Using the Column Shortcode

Columns are a nice tool to keep in your back pocket when formatting your content, especially for content in list form. For example, you might use columns to list our people on your Board page or to list and link to past issues on your Newsletter page.

You’ll create columns in the same way whenever you’re formatting content on a page or in a blog post. You can even add multiple columns if you wish, like in this example showing the three calls to action in different columns.

Helpful Terminology

Columns are added to your page or post using a shortcode. These small snippets of code are simple shortcuts that we use to add objects or design features. These codes can be generated automatically through the content editor. You’ll just need to make sure it appears in the correct location within the page.

Find Shortcodes

Column Widths

You can create a variety of column sizes within your Wired Impact website. The width selections are easy to envision as each fraction takes up that percentage of the page.

  • One Third
  • Two Thirds
  • One Half
  • One Fourth
  • Three Fourths
  • One Sixth
  • 5 Sixths

We’d recommend sticking to combinations that equal one in the end. For example, a “One Third” column paired with a “Two Thirds” column or two “One Half” columns.

Creating Columns

To create a column, you’ll need to add a special column shortcode to your post or page to enclose the content that you would like to appear in columns. Follow the steps below to learn how to find the column options and add the shortcode.

1. Place your cursor in the location where you’d like the columns to begin.

2. Click the Shortcode button and select “Columns”.

3. Select the width of the column.

4. Add the text you would like to appear in this column to the “Column Content” box. Learn about adding images in columns below.

5. Add additional columns by selecting the “Add Column” button in the bottom left-hand corner of the box, selecting the width and including content for each column you add.

6. When you’re ready, click “Insert Shortcode.” The columns will be added wherever you placed your cursor in the first step.

Shortcode Parts

7. Preview the page or post to see if the columns look correct and are placed where you would like them.

Preview Shortcode

8. If necessary, you can continue formatting the content after it is enclosed in the shortcode so long as the code itself is not adjusted.

9. To adjust the column width, we suggest starting the process over with your desired width rather than making changes to the shortcode. Be careful not to delete your content until you’ve created your replacement columns if you don’t have it saved elsewhere.

10. When you’re done, be sure to save or publish your changes.

Formatting Images in Columns

If you would like to include an image as the content of one of your columns, such as on a Staff and Board page, simply create the column as indicated in the steps above, but skipping over the step where you add text. We think it’s helpful to include a little placeholder text (like “add image here”) so that you know where to place the image once the shortcode is ready.

Once you’ve inserted the shortcode, you can find that placeholder content in the content editor. Delete it, and add your image to the content editor in its place. You’ll want to make sure your cursor is exactly where the placeholder content was previously, between the two sets of shortcode, when you go to add the image.

Shortcode Labels

You can still adjust the content enclosed within the shortcode, such as adding text below an image, without breaking the code so long as you don’t adjust anything within the brackets.

 

Still Have Questions?

Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.