Pagedesigner
A drag-and-drop page builder for Drupal that enables visual content creation using UI Patterns.
pagedesigner
Install
composer require 'drupal/pagedesigner:^4.2'
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.
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.
Technical Details
Admin Pages 6
/admin/config/pagedesigner
Main configuration landing page for Pagedesigner module settings.
/admin/config/pagedesigner/settings
Configure global settings for the Pagedesigner module including editor configuration, trait settings, and performance options.
/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.
/admin/structure/pagedesigner_type
Manage Pagedesigner element types (bundles). These types define the different kinds of building blocks available in the page builder.
/admin/content/pagedesigner_elements
Administrative listing of all Pagedesigner elements in the system. Useful for debugging and content management.
/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 8
Hooks 3
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 2
drush pagedesigner_debug:check
Check Pagedesigner element structure for inconsistencies and errors. Reports issues without making changes.
drush pagedesigner_debug:correct
Interactively check and correct Pagedesigner element structure issues. Prompts for confirmation before applying corrections.
Troubleshooting 6
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 5
- 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.