Pagedesigner
pagedesigner
A drag-and-drop page builder for Drupal that enables visual content creation using UI Patterns.
Overview
Pagedesigner is a comprehensive visual page building module for Drupal that integrates GrapesJS, a powerful open-source web builder framework, with Drupal's UI Patterns module. It allows content editors to create rich, structured pages through an intuitive drag-and-drop interface without requiring technical knowledge.
The module introduces a custom entity type called 'Pagedesigner Element' that stores the building blocks of pages in a hierarchical structure. These elements are connected to nodes through a specialized field type, enabling seamless content management while maintaining Drupal's revision and translation capabilities.
Key capabilities include real-time visual editing, pattern-based component system, media integration, content locking to prevent conflicts, and extensive customization through a plugin-based architecture. The module supports multiple themes, responsive design editing, and integrates with various Drupal ecosystem modules like Webform, Linkit, and Yoast SEO.
Install
composer require 'drupal/pagedesigner:^4.2'
Features
- Drag-and-drop visual page building powered by GrapesJS editor
- Pattern-based component system integrated with UI Patterns module
- Custom Pagedesigner Element entity with full revision and translation support
- Real-time content editing with WYSIWYG text editing via CKEditor 5
- Content locking mechanism to prevent simultaneous editing conflicts
- REST API for element CRUD operations, pattern management, and rendering
- Extensible plugin architecture for custom element handlers and asset types
- Event-driven system with before/after hooks for all element operations
- Dynamic per-pattern permissions for granular access control
- Media integration supporting images, videos, audio, documents, embeds, and SVGs
- Support for Drupal Blocks, Webforms, and external integrations
- Multi-theme support with pattern filtering based on active theme
- CSS styling management with responsive breakpoint support
- Page duplication and cloning functionality
- Debug tools with Drush commands for structure validation and cleanup
Use Cases
Marketing Landing Pages
Create visually rich marketing landing pages with flexible layouts, hero sections, feature grids, testimonials, and call-to-action buttons. Marketing teams can build and update pages without developer assistance using pre-defined patterns.
Blog and Article Pages
Build structured article layouts combining text content, images, embedded videos, pull quotes, and related content sections. Authors can focus on content while maintaining consistent design patterns.
Product Showcases
Create product detail pages with image galleries, specification tables, feature highlights, and embedded demonstration videos. The gallery submodule enables rich media presentations.
Multi-language Content
Build pages that support full translation workflows. Pagedesigner elements are translatable and maintain separate content per language while sharing structural layouts.
Form-integrated Pages
Create pages that combine content with Webform forms for lead capture, contact pages, or surveys. The webform submodule enables seamless form embedding within page layouts.
Design System Implementation
Implement a component-based design system using UI Patterns. Designers create pattern templates while content editors assemble pages using approved components, ensuring brand consistency.
Tips
- Create UI Patterns with meaningful categories to organize components in the editor sidebar for easier discovery by content editors.
- Use the 'designer: 1' additional setting in patterns to restrict advanced patterns to users with the 'access pagedesigner designer patterns' permission.
- Leverage the event system to implement custom validation or transformation logic without modifying core code.
- The loading screen content can be customized to match your site's branding through the settings form.
- For better performance on complex pages, use the DOM exclusion settings to prevent non-content elements from being processed by the editor.
- Always test Pagedesigner functionality after Drupal core or module updates, as GrapesJS integration can be sensitive to JavaScript library changes.
- Use the pagedesigner_debug module during development to catch structural issues early.
- Pattern styling options defined in pattern.yml are only available to users with 'edit pagedesigner styles' permission.
Dependencies
Related Projects
Core integration - UI Patterns define the available components in Pagedesigner. Patterns with 'pagedesigner: 1' in additional settings appear in the editor.
Provides WYSIWYG text editing for HTML and rich text traits within the Pagedesigner editor.
Core Drupal media integration for handling images, videos, documents, and other media assets.
Enables embedding webforms as Pagedesigner components via the pagedesigner_webform submodule.
Provides enhanced link autocomplete functionality via the pagedesigner_link submodule.
Enables embedding external videos (YouTube, Vimeo) via the pagedesigner_embed submodule.
SEO analysis integration via the pagedesigner_yoast submodule.
Workflow integration via the pagedesigner_frontendpublishing submodule.
Hierarchical page management integration via the pagedesigner_pagetree submodule.
Required for REST API communication between the frontend editor and Drupal backend.
Admin Pages
| Title | Path | Description |
|---|---|---|
| Pagedesigner | /admin/config/pagedesigner |
Main configuration landing page for Pagedesigner module settings. |
| Pagedesigner Settings | /admin/config/pagedesigner/settings |
Configure global settings for the Pagedesigner module including editor configuration, trait settings, and performance options. |
| Pagedesigner Locks Management | /admin/config/pagedesigner/locks |
View and manage active content locks. When a user is editing content in Pagedesigner, a lock is created to prevent conflicts. Administrators can view all active locks and forcibly remove them if necessary. |
| Pagedesigner Type | /admin/structure/pagedesigner_type |
Manage Pagedesigner element types (bundles). These types define the different kinds of building blocks available in the page builder. |
| Pagedesigner Entities List | /admin/content/pagedesigner_elements |
Administrative listing of all Pagedesigner elements in the system. Useful for debugging and content management. |
| Edit with Pagedesigner | /node/{node}/pagedesigner |
Visual editing interface for node content using the drag-and-drop Pagedesigner. This page loads the GrapesJS editor with all available patterns and allows real-time content editing. |
Permissions
| Permission | Description |
|---|---|
|
Allow access to the administration form to configure Pagedesigner Element entities. Restricted access permission. |
|
The role is allowed to create and edit elements using the pagedesigner. This implies View unpublished Pagedesigner Element entities permission. |
|
The role is allowed to see unpublished versions of the pagedesigner content. |
|
The role is allowed to change the style of patterns, enabling CSS customization in the editor. |
|
The role is allowed to access special patterns flagged for designers/administrators (e.g., navigational items, HTML includes, or similar advanced components). |
|
Users with this permission will be able to administer Pagedesigner settings. Restricted access permission. |
|
Users with this permission will be able to administer Pagedesigner locks, including viewing and forcibly removing locks held by other users. |
|
Dynamic permissions generated for each UI Pattern. Controls which patterns a user can add to pages. |
Hooks
| Hook | Description |
|---|---|
hook_pagedesigner_css_statement_alter |
Alter a CSS statement rendered for individual elements. Called for each element's CSS output. |
hook_pagedesigner_css_rendered_alter |
Alter the final CSS output rendered by the Renderer service. Called for each responsive breakpoint (large, medium, small). |
hook_pagedesigner_access |
Control pagedesigner edit access for specific entities. Return AccessResult::forbidden() to deny access. |
Drush Commands
| Command | Description |
|---|---|
|
Check Pagedesigner element structure for inconsistencies and errors. Reports issues without making changes. |
|
Interactively check and correct Pagedesigner element structure issues. Prompts for confirmation before applying corrections. |
Troubleshooting
The content locking mechanism is active. Wait for the other user to finish, or if the lock is stale, navigate to /admin/config/pagedesigner/locks to forcibly remove the lock (requires 'administer pagedesigner locks' permission).
Ensure your UI Pattern definitions include 'pagedesigner: 1' in the additional settings section of your pattern.yml file. Also verify the pattern has a valid type defined and the user has the 'use pattern [pattern_id]' permission.
Enable the pagedesigner_debug submodule and run 'drush pagedesigner_debug:check' to identify issues, then 'drush pagedesigner_debug:correct' to fix them interactively.
Check browser console for REST API errors. Verify REST resources are enabled at /admin/config/services/rest. Ensure the user has 'edit pagedesigner element entities' permission and the required REST authentication is configured.
Use the performance settings to exclude unnecessary DOM elements from the canvas. Check if there are too many patterns loaded. Consider the 'exclude_dom_elements_before' and 'exclude_dom_elements_after' settings.
Ensure the Pagedesigner field is set as translatable on the content type. Container elements should automatically create translations when the parent entity is translated.
Security Notes
- The 'administer pagedesigner element entities' permission should only be granted to trusted administrators as it provides full control over all Pagedesigner content.
- Content locking helps prevent data loss but is not a security feature - it uses time-based expiration (180 seconds) and can be forcibly overridden.
- REST API endpoints require appropriate authentication and permissions. Review REST resource configuration to ensure proper access control.
- HTML content traits can execute JavaScript if the text format allows - use appropriate text format restrictions.
- Dynamic pattern permissions are generated for all UI Patterns - review granted permissions after adding new patterns to the system.