Versions Compared

Key

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

The Column Builder

Component The

This page of the user guide will help Sitecore Contributors add a 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. (see image below) 

    Image Added

  2. Click Add here.

Image Removed

  1. (see image above) 

  2. Click Column Builder
and then click Select to continue. 

Image Removed

 
  1. . (see image below)

    Image Added

  2. Click Select. (see image above) 

  3. Click Create New Builder. (see image below) 

Image Removed



  1. Image Added

  2. Select a Column Type from the drop-down menu. (see image below) 

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

Image Removed

  1. Image Added


  2. Click Add New Row.

Image Removed

 

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

Image Removed

 

Hover your mouse over
  1. (see image above) 

  2. Click inside the Two Thirds and One Third Title

. The blue components box will appear. Click inside the box and
  1. box to change the

words
  1. title in the Heading. (see image below) 

Image Removed

  1. Image Added

 


  1. Click inside the text box. (
1).
  1. see image below)

    Image Added

  2. Then click the

red
  1. icon

(2). 

Image Removed

  1. on the left. (see image above) 

  2. Make your text changes and then click Accept.

Image Removed

 

  1. 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

 


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. 

Image Removed

 

  Info
iconfalse
titleIn this Guide:

 

Sitecore Training

How to Login

Becoming Familiar with the Interface

Finding Your Pages

The Rich Text Editor

Adding an Image

Adding PDFs, Non-Image Files and Hyperlinks

The Column Builder

Submitting Your Page for Approval

Sitecore Contributor Training Post Assessment