Build content block by block

Building content block by block is a new way to create pages according to WYSIWYG principles. This approach implies building your own page from ready block templates and filling them with content later.

The classic way of WYSIWYG editing of content is to put the entire content into one column including images and video. And the only thing you can change then is the way the text wraps around media objects. This is enough for editing a simple article, but not the entire complex web page.

Edit article in WYSIWYG — Edit article in CKEditor

N1ED is an add-on for TinyMCE and CKEditor that enhances functionality of classic WYSIWYG editors and offers a universal tool to build a block structure — Bootstrap Editor.

Any web page of an information-rich website or e-shop consists of visually independent blocks each having a certain design, for example a website title, a block of text, a multi-column description, a side bar with images and so on. If you have a set of such blocks you can quickly outline the basic layout of the page and immediately start filling it with content. Below, you can see the example page built with such Bootstrap blocks.

Layout built with predefined templates — A simple structure of web page built with Bootstrap Editor

How it works

In order to add blocks you should switch to the structure mode (Bootstrap Editor). There are two ways to do this, and you can use any of them.

1. Bootstrap quick panel a violet toolbar below the editor. The bar is convenient if you prefer editing content in the non-fullscreen mode and you don't need anything too complex. For instance, when you just need to add a few blocks.

To add a new block, use the "Add block" button or the "Add block before selected" button. The template menu opens at the left.

Insert template — Example of inserting a template from the Block gallery

Aside from adding blocks, the toolbar also has buttons to move the selected block up or down, delete it, and save it as a Custom block. If you are an advanced user you may prefer to compose your grid in the fullscreen Bootstrap Editor PRO mode.

2. Bootstrap Editor PRO - provides a full set of tools for creating and editing Bootstrap structure blocks such as columns, rows, and containers. This mode is preferable for more complex manipulations with the structure.

To switch to the structure mode, click or (if you are working in the non-fullscreen mode). When you switch to the structure editing mode, the following block management buttons are activated: Add container, Add row, Delete, Duplicate block, Move block up/down, Save as template. When you click Add block icon , a Bootstrap block templates sidebar is shown.

Bootstrap block templates

On the panel opened at the left (or at the right, depending on settings of your editor), you can see types of templates to build the page block by block.

1. Custom blocks

Your own gallery of previously saved custom blocks that you can reuse at any time. This category becomes available as soon as you save your first block (the "Save as template" button). Read more »

Insert custom block — Custom blocks gallery

2. Block gallery

You can use ready-made presets. The gallery already has block templates sorted into categories: "Headers", "Content", "Features". Read more »

3. Custom grid

A constructor to build a block from scratch with the option to select fillings. Read more »

4. Block constructors "Feature horizontal", "Feature vertical", "Text content"

Constructors of simple 1 or 2 column blocks with options to fill them the same way as with the Custom grid constructor. Read more »

Feature vertical Block constructor — Block constructor "Feature vertical"

Feature horizontal Block constructor — Block constructor "Feature Horizontal"

Text content Block constructor — Block constructor "Text content"

In conclusion, users can pick the appropriate block from the gallery "on the fly" or construct it from scratch to build a nice multi-column structure. The content type can be anything from a simple text block to a customized slideshow — there is a number of widgets for that.

Inserted blocks can be freely edited, deleted, you can add new blocks, duplicate existing ones, move them up or down, save as templates and adapt to various viewport sizes. Advanced preview of your Bootstrap breakpoints (target widths for different mobile devices) right in TinyMCE or CKEditor will make you sure the content displays fine for all of your website visitors.

Conclusion

Build your page block by block by choosing them from the gallery or using the block builder feature. Just insert them and then fill them with content. In the following articles of this section we will show how to define and reuse custom blocks, introduce you to Bootstrap Editor editing specifics, and teach you how to create responsive design.