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 

  1. Click inside an empty gray placeholder.
  2. Click Add here.

    Image Modified
    (Click image to enlarge)
  3. Click Column Builder Click Select Builder.
  4. Click Select

    Image Added
    (Click image to enlarge)
  5. Click Create New

    Builder 

    Builder

    Image Added
    (Click image to enlarge)
  6. Select a Column Type from the drop-down menu.

  7. Click Add New Row.
    Image Added


    (Click image to enlarge)


    Note
    titleNote

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


  8. Click

    Add New Row.Hover your mouse over

    inside the Two Thirds and One Third Title

    .The blue components box will appear. Click inside the box and

    box to change the

    words

    title in the Heading. 

    Image Added
    (Click image to enlarge)
  9. Click inside the text box (1). 
  10. Then click the

    red icon (2). 

    icon on the left, as seen in the image below.

    Image Added
    (Click image to enlarge)
  11. Make your text changes and then click Accept.
  12. Repeat
the steps above to open the Rich Text Editor for
  1. steps 9-11 for One Third Column located on the right-hand side
One Third column. Click inside the text box and then click the red icon

Image Removed

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


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

 

 


Next: Submitting Your Page for Approval