Build content block by block
Block gallery
Custom grid
Block constructors
Custom blocks
Edit column structure
Responsive content
AI Text
Widgets and media
Widgets basics
Boostrap widgets
Image widgets
Image Editor
File Manager
Font Awesome
YouTube
Placeholder
Page embed
Typography and basics
Text, paragraphs, headers
Links and anchors
Tables
Custom widget
Source code
Classes, styles, attributes
Working with breadcrumbs
Translator

Define and reuse custom blocks

Building a page block-by-block is based on reusing predefined blocks. Every website or information portal is a gallery of repeating HTML templates. In order to speed up website development and layout makeup, one just needs to define the required set of templates and then simply insert them and adjust for the best fit.

Define block

So, to make sure a template suits for reusing, it must be versatile. A template like that is easy to modify.

Let's switch to the Custom grid section and select the required Number of columns, for instance, 2. The Filling for our future template is selected depending on what type of content it should hold.

Lifehack: the Placeholder option is the most universal one.

You can select the required widget with one click when editing such a block.

You can also set your own filling by selecting one of available widgets. To do this, switch to the Placeholder tab and select the required widgets from the list of widgets. For example, Image. This would be a pseudo-image, but it still reserves the space for the image that you can insert there in the future when you will be filling the template with content.

Choose placeholder screenshot
1 Step
Choose placeholder for YouTube screenshot
2 Step
Insert placeholder screenshot
3 Step

Here, you can also set the value of vertical margin to increase the distance between blocks.

Save block

Define any block you edit in WYSIWYG editor as a custom block and save it into your personal blocks gallery. To do this, click the "Save as template" button. The screenshot is generated automatically. When the block preview is ready, you can set its title. To quickly access the template in the future, assign it to some existing category or create a new one. Categories greatly simplify your work when you have a hefty list of templates.

Save the designed block as template
Press "Save as template" to store your block in the library
All saved templates have preview screenshot
Screenshot is generated automatically. Specify a category for this new block

When you use Custom blocks, you can modify and change them. To save changes in the current template, click the "Update template" button.

Manage custom blocks

So, you can create blocks from N1ED only. To remove them or to move them to different categories (or manage categories) please go to:

  • N1ED configuration Configuration button (the top right button on the toolbar of TinyMCE or CKEditor)
  • or press "Edit" on the N1ED sidebar with the list of blocks
  • or in your Dashboard. You can also export blocks from one website (API key) to another from here.
  • or into CMS configuration (if N1ED configuration widget exists on your CMS)

All these ways produce the same results.

Edit Bootstrap block library on the sidebar screenshot
Edit on the sidebar.
Edit Bootstrap block library in configuration screenshot
Edit in N1ED configuration editor

You can share your block templates between different websites (API keys) you have. This is useful when they have similar markup and content structure.

To copy one block template from one API key to another, go to Dashboard and click "Configure" near the "Bootstrap Blocks" icon. You should see the templates list. The "Export" button opens the dialog where you can copy this template to another configuration.

Export Bootstrap block screenshot
Export Bootstrap block

Conclusion

When you edit your content you can select some block (actually a container in Bootstrap terms) and create a block template from it. This block can be used for constructing content on any pages on your website.