Block Editor (assemble content from blocks like a constructor)

What this solution does

The Block Editor module is a content builder for creating element content within Bitrix infoblocks. It allows assembling pages from pre-prepared blocks, offering content managers a more efficient alternative to standard visual editors. This tool enables the rapid creation of landing pages for news, articles, blogs, and other detailed pages.

Using the builder ensures valid and responsive HTML markup, eliminating the risk of incorrect rendering or unpredictable behavior of page elements. Blocks are added to the page via drag-and-drop functionality.

The module is compatible with the Business edition, version 22.400.100 and higher.

Functional Blocks Description

Text. This block is designed for placing text without additional styling. Text rendering relies on styles defined in the component or site template.

The Block Editor enables content creation by assembling individual modules.

The Text with Styles block is designed for placing text with options to adjust font weight, size, color, and other styling parameters.

The Image block is intended for inserting images with alignment and spacing controls. It also supports adding a title that appears when the cursor hovers over the image.

The Image with Caption block combines the functionality of the Image and Text with Styles blocks. It allows configuration of the caption title, its position, and the layout of text and image within the block.

The Video block is used for embedding video content with settings for autoplay and spacing.

The Video from Platforms block supports embedding videos from online video hosting services (such as YouTube, Vimeo, Dzen, etc.) via an embed link, along with spacing adjustments.

The Columns block enables the arrangement of functional modules within columns using a grid layout.

The Slider block allows placing images with configurable spacing. Additional component settings are available in the configuration panel.

The Block Editor allows assembling content from individual elements like a construction set. Available blocks include: a separator with settings for line color, thickness, length, alignment, and vertical margins; a button for links with options for background color, width, alignment, and margins, where text settings match the 'Text with Styles' block; a code block for rendering arbitrary HTML in the public part of the site (requires knowledge of HTML basics); and a 'Hidden Content' block that creates a button with a header and a collapsible section displayed on click. The content settings for this block are similar to the 'Text with Styles' block, while default visibility is configured in the component settings.

The 'Interactive Block Editor' complex component is designed to display a list of infoblock elements and the detailed page of an element. It includes a standard template where the element list displays cards with a title, image, and teaser text.

The 'Block Editor' module by FRESHSOFT allows building content using blocks as a constructor.

The 'Info Block Element List' component is designed to display a list of elements. Two templates are available: the standard template displays cards with a title, image, and teaser text; the tiles_with_blocks template displays cards with a title and block editor properties selected when adding the component.

The 'Info Block Element Detail with Interactive Block Editor Property' component is designed to display the element's detail page. Its standard template renders the title, image, and teaser text, along with the detailed image and text. Element properties and block editor properties are displayed separately.

The 'Block Editor Content of Info Block Element' component outputs the block editor properties selected when adding the component. Standard components utilize templates from the fsoft.bootstrap_v4 package.

The Block Editor module enables content assembly from individual blocks, functioning like a builder. For the 'News Detail' and 'Catalog Item Detail' components, it adds the ability to output block editor properties in a separate block. For the 'News List' component, it allows displaying these properties within each list item. In the complex 'Catalog' and 'News' components, block editor templates are embedded directly into the component structure.

When configuring components in the public part of the site, settings for the Slick slider are available. Users can enable the JS library connection required for slider operation. For horizontal carousels with a single slide, fade animation and adaptive height can be configured. Settings include the number of visible slides and the number of slides to scroll. Automatic slide scrolling is supported with adjustable speed in milliseconds. The display of forward and backward navigation buttons can also be enabled or disabled.

The library for lazy loading of graphical elements (Lazy) can be connected only when the option «Use lazy loading for public section (Lazy)» is enabled in the module settings.

The module supports batch image upload: dragging multiple images into the designated field automatically creates separate blocks for each image appended to the end of the list.

Detailed instructions on using the module, configuring components, and setting up templates are available in the attached video.

General iT can connect “Block Editor (assemble content from blocks like a constructor)”, configure it and verify the integration with the existing website.