In C1 CMS v.4.0 or later, you can use the Block Selector. You can select one or more block elements (for example, a few paragraphs) on a page and format them with a specific style (for example, put the paragraphs into 2 columns).

To add your own block style to the Block Selector, you should create an ad-hoc class in a CSS file and add a <format> element in the common.xml with a specific attribute that identifies it as a block style. Make sure the CSS file in use is listed in the common.xml.

1. In a style sheet listed in  common.xml (e.g.\Styles\common.css or style.less), create a style class, e.g.:
   

   div.demo{
       padding: 19px;
       background-color: #f5f5f5;
       border: 1px solid #e3e3e3;
       border-radius: 4px;
   }

2. In common.xml, find a <radiogroup> where <format> elements have the attribute wrapper="1" or create a new group.
3. Add a <format> element to the radio group.
4. Add the following attributes to the format and specify their values, e.g.:
   • id="demo"
   • label="Demo"
   • notes="Demo" (optional)
   • block="div"
   • classes="demo" (the class you defined in the CSS)
   • wrapper="1" (always 1)
5. Add the <select/> element below the <format> element.

This is how it may look in the common.xml:

<radiogroup> 
  <format id="demo" label="Demo" image="" notes="Demo" block="div" classes="demo" wrapper="1"> 
    <select /> 
  </format> 
</radiogroup>

Please note that you are not limited to <div/> elements. You can use other block elements as well.