This project is not covered by Drupal’s security advisory policy.
Build visually. Stay in Drupal.
Noah’s Page Builder brings drag-and-drop page design directly into Drupal. Create landing pages, arrange content and refine responsive layouts in a visual editor, using the content, media, Views and blocks your site already has.
Give content teams more control over everyday page design, help developers deliver layouts faster, and keep your website’s visual identity consistent. Start with the free, open-source module and extend your workflow with the Noah’s ecosystem.
Explore Noah’s | Documentation | Discover Noah’s Pro
More building. Less repetitive work.
- Design with immediate visual feedback. Add widgets, arrange rows and columns, and adjust content and styles while previewing your page.
- Use Drupal content in your designs. Bring Views, blocks, reusable custom blocks and Media images into your layouts.
- Make responsive design part of the workflow. Adjust desktop, tablet and mobile styling, with configurable container widths and breakpoints.
- Set your brand once. Define default colors, typography and custom fonts, then use global styles for recurring elements such as buttons and forms.
- Edit with more confidence. Undo and redo changes, navigate your layout structure, and duplicate or copy elements to speed up your work.
- Build beyond text and images. Add galleries, carousels, accordions, tabs, cards, videos, icons, countdowns and more.
- Keep room for custom development. Add custom CSS where needed, or extend the builder through Drupal widget and control plugins.
Watch Noah’s in action
See the editor and explore the visual building workflow:
Choose where you build
Enable Noah’s for selected content types, taxonomy vocabularies, custom block types and Drupal Commerce product types. Build individual pages or reusable blocks while keeping control over where the editor is available. Commerce features require Drupal Commerce.
For projects that need shared designs across many pages, Noah’s Pro adds visual templates and dynamic content tools.
More languages. Less repetitive work.
Reach more people without rebuilding your pages for every language. Noah’s lets you translate content while keeping your design consistent—or create a different layout for a language that needs its own approach.
Choose the translation workflow that suits your team:
- Translate manually, side by side. View the original text alongside its translation and edit your content in one place.
- Keep layouts connected. Let translated pages follow the main language’s structure while preserving their translated text.
- Adapt designs by language. Use an independent layout when a local audience needs different content or presentation.
- Get a head start with AI. With the optional Noah’s AI extension, translate individual texts, groups of items or an entire page directly in the editor. You can also fill translations with AI in the side-by-side translation form.
- Translate in bulk. Select multiple pages or Noah’s Pro templates, preview estimated AI usage, and generate translation drafts. Review and refine each draft before applying it.
AI helps you move faster; you stay in control of the wording. Review translations before saving or applying them.
AI features require Noah’s AI and a configured provider. Provider charges may apply.
Go further with Noah’s Pro
Design once. Reuse across your site. Noah’s Pro extends the free builder with tools for shared layouts, dynamic Drupal content and more advanced site building.
- Visual Theme Builder: create headers, footers, page layouts and entity templates.
- Template variations: choose designs using conditions such as paths, content types, roles and languages.
- Dynamic content and display designs: build around entity fields and Drupal view modes, including teaser and full-content presentations.
- Global widgets and saved sections: reuse designs and maintain shared elements from one place.
- Revision tools: revisit and restore earlier saved designs.
- More integrations: extend designs to user pages, custom routes, Drupal Commerce experiences and forms, with the corresponding modules installed.
Explore Noah’s Pro and support development →
A growing ecosystem, built around one visual workflow
Use the builder on its own, or add tools for the work your project needs:
- Noah’s Page Builder: the free foundation for visual page design.
- Noah’s Gallery: the included optional submodule for creating galleries.
- Noah’s Popups: design popups using the Noah’s editing workflow. Popups Pro adds advanced triggers, animations and analytics.
- Noah’s AI: optional tools for generating text, assisting with layouts and translating content. Requires a configured AI provider; provider charges may apply.
- Noah’s Mail: visually design reusable email templates for supported mail integrations.
Visit noahs-creator.com for extension availability, requirements and release information. Extensions are installed separately unless included as a submodule; their release schedules and requirements may differ.
Installation
Use Composer from your Drupal project root:
composer require drupal/noahs- Open Extend and enable Noahs Page Builder, accepting the required module dependencies.
- Install and set Noahs Builder Theme as the default theme under Appearance for the standard Noah’s setup. Composer downloads the theme dependency; you still need to enable it.
- Continue with the basic configuration below.
Choose a release compatible with your Drupal core version and check the requirements of any optional extensions before installing them.
Your first page: basic configuration
- Choose where Noah’s is available. Open Structure → Noahs, then Settings at
/admin/structure/noahs/settings. Select the content types, vocabularies, custom block types or product types you want to use. - Set the design foundations. Configure container widths, responsive breakpoints, fonts and default colors. Use the global style editor to establish consistent typography, buttons and forms.
- Set access. Grant the Administer Noahs permission to the trusted roles responsible for building pages.
- Open the editor. Create and save content of an enabled type, then select Edit With Noahs.
- Build and review. Add rows, columns and widgets, adjust the responsive views, save your design, and review the page on your site. Publish the content through your usual Drupal workflow.
For optional AI tools, enable Noah’s AI, configure your provider and API key, and review generated content before using it.
Free to use. Supported by people who build with it.
Noah’s Page Builder is free and open source. Maintaining it takes ongoing work: fixing bugs, improving the editor, documenting features and keeping pace with Drupal.
If Noah’s saves you time, purchasing Noah’s Pro helps fund that work. You get additional tools for your projects while supporting the continued development and maintenance of the free module.
You can also help by testing releases, reporting reproducible bugs, suggesting improvements, contributing code or sharing what you build.
Documentation, help and feedback
| Attachment | Size |
|---|---|
| Noahs page builder drupaal | 656.01 KB |
| Drupal page builder | 274.92 KB |
| Design in drupal with noahs | 141.8 KB |
| Features Noahs Page builder Drupal | 622.12 KB |
| noahs translations.png | 510.37 KB |
Project information
- Project categories: Content display, Content editing experience, Developer tools
- Ecosystem: Layout, UI Builder, Web Experience Toolkit
17 sites report using this module- Created by julian_esimaginacion on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
