Section Widget

This widget offers the possibility to add section elements into the editor and make them optionally distinguishable by configurable CSS classes, so you can apply different styles on them.

All sections will have three editables: heading, media element and content. But all of them are optional. If all editables are filled with content and CSS classes are configured, the resulting HTML will be

<section class="...">
    <figure class="...">...</figure>
    <div class="content">...</div>

The optional configuration expects an object with one or several CSS classes as the properties and the corresponding labels visible in the section dialog as the values, p.e.

config.section: {
    'block-content': 'Content Block',
    'block-info': 'Info Block',


This widget will always upcast all section elements, unless an element was already upcasted by another widget. To give other widgets the chance to do so, the value for upcastPriority (defaults to 10) is set to 20, so that the other widgets' upcast methods are called first.




880 downloads (view stats)


Plugin versions CKEditor versions
4.24 4.23 4.22

Version: 2.11

DownloadRelease notes

Add ukrainian translations (thanks @Sensetivity)

Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check