PrestaShop description block editor - columns and content
Build descriptions with images and text in responsive columns. This TinyMCE editor extension adds blocks, separators, spacers and quotes.
Available languages:
Column grid available in the TinyMCE editor
You split content into columns directly in TinyMCE. You can pair a photo with a description or plan several product sections of different widths.
Separators, spacers and quote blocks
Separators, spacers and quotes help set the rhythm of a longer description. The layout stays part of the content and can be edited later in the store back office.
Columns stacked one below another on the phone
On a small screen the columns switch to a vertical layout. This lets you prepare a single description that stays readable on desktop and phone.
Who is this module for?
A solution for anyone preparing rich product descriptions and informational content without writing HTML layout by hand.
What can you set in the module panel?
01 / Column layout
Column layout
Mobile breakpoint
Sets the screen width below which columns take the full width. Rows marked as no-wrap are the exception.
Horizontal, vertical and below-row spacing
The first spreads columns side by side. The second separates columns after wrapping within one row. The third pushes whole sections apart.
02 / Style loading and images
Style loading and images
CSS on all pages and controller list
You choose global style loading or specific page types, e.g. product, category and cms. The list is ignored when global mode is on.
Lightbox and CSS scope
Enables image zoom in the content. The selector points to the containers where it should work. Linked images and those smaller than 80 × 80 px are skipped.
03 / Working in the editor
Working in the editor
Full-screen mode
Adds a full-screen editor with TinyMCE tools, blocks and a section outline. You can turn it off in case of a conflict with the editor.
Design mode
Lets you move, duplicate and delete blocks instead of editing the text inside them.
04 / Block appearance
Block appearance
Separator: style, thickness, color, width and margin
You set separately the line type, its thickness in pixels, the color, the share of the section width, and the spacing above and below the separator.
S, M and L spacers
They define the heights of the ready-made spacer blocks used when composing a description.
Quote: accent and background
The accent color applies to the bar next to the quote, and the background color to its surface. A page-colored background gives the effect without a highlighted surface.
Four image backgrounds and padding
Image URLs form a set of backgrounds to choose from. An empty slot is unused. Padding sets the distance between the photo and the background edge.
