Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


The Column Builder Component 

The Column Builder is a component that allows editors to organize content similar to how it would appear in a table. Layouts containing columns display content side-by-side, which is commonly used on websites, in magazines, in newspapers and more. 

How to Add a Column Builder Component 

Navigate to the page you've been authorized to edit.
  1. Click inside
one of the
  1. an empty gray
placeholders.
  1. placeholder
  2. Click Add here
.

Image Removed

 
  1. Image Added
  2. Click Column
Builder and then click Select to continue. 

Image Removed

 

  1. Builder 
  2. Click Select 
  3. Click Create New
Builder. 

Image Removed

 
  1. Builder 
  2. Select a Column Type from the drop-down menu.

    Note
    titleNote

    For the purpose of this tutorial, we will be selecting the Two Thirds and One Third option.

Image Removed 

  1. Click Add New Row
.

Image Removed

 

You will see the outline of the columns pop-up
  1. .
 

Image Removed

 
  1. Hover your mouse over the Two Thirds and One Third Title.
  2. The blue components box will appear. Click inside the box and change the words in the Heading.
 

Image Removed

  1.  
  2. Click inside the text box (1). 
  3. Then click the red icon (2).
 

Image Removed

  1.  
  2. Make your text changes and then click Accept.

Image Removed

 




Repeat the steps above to open the Rich Text Editor for the right-hand side One Third column. Click inside the text box and then click the red icon

The Rich Text Editor will display, and content such as images or text can be added into the One Third column. 

 

Here's an example of how your page may look with text and images using a Column Builder. You can use the Move Up and Move Down arrows to change the order in the Column Builder. 

 

 

Next: Submitting Your Page for Approval