This module provides a drag-and-drop interface for creating and designing website content with a visual builder. Users can structure pages with rows and add various content components like text and images. The tool offers styling options, real-time editing (WYSIWYG), and responsive design previews for different devices.
Pagedesigner
About:
Module for structuring, designing and creating content for Drupal websites with a drag'n'drop interface.
The whole frontend is implemented with the web builder framework GrapesJS, which provides a clear and easy-to-use graphical interface for users of all kinds.
Structure:
A page can be structured with rows.
These are available in different layouts (single column, two columns, three columns etc.) and can be placed on a page via drag'n'drop.
The rows can be interlaced as desired, with the aim of covering as many design layouts as possible.
Content:
For creating content, several components (images, text editor, icons, quotes, etc.) are available as handy tiles and can be placed anywhere within the rows. All elements can be edited on page, the changes are displayed in real time (WYSIWYG - What You See Is What You Get). All Elements can be arbitrarily moved, deleted or copied on the page.
Styling:
Existing rows and components can additionally be provided with various stylings directly in the editor. Whether Margin, Padding, Borders or Colors, the user has dozens of possibilities to make his page as individual and original as possible.
Responsive:
To make a website appealing on as many devices as possible, the user has access to various responsive modes, displayed as icons.
Via click, a smooth change between the views can be achieved, and different sizes are already covered while editing the page. Settings can be applied to all views or specifically to one size (e.g. Mobile).
Expand:
The Pagedesigner offers ideal conditions for your own extensions. Additional components can be added and integrated. The module is based on the Drupal coding concepts, providing custom entities and a plugin system, and contains specific documentations for external developers and potential users.
Following up our talk at DrupalCon Amsterdam, we have created a distribution to allow quick testing of the pagedesigner ecosystem. The distribution can be found as pagedesigner suite.
Installation
Pagedesigner can be installed via composer.
There are two required patches bundled with the composer.json file:
- drupal/linkit: Issue 2886455 - Support multilingual crosslinking: "https://www.drupal.org/files/issues/2025-08-06/2886455-95.patch"
- drupal/ui_patterns: Issue 3315661 - Check for views live preview instead of preview when rendering row warning: "https://www.drupal.org/files/issues/2023-07-06/check-for-views-preview-3..."