Noah’s Page Builder Simplifies Front-End Design: Julian Chabrillon

Imagine being able to create a fully functional, visually appealing website for Drupal in just a few hours. Noah's Page Builder, created by Julian Chabrillon, is transforming the way developers approach page creation, offering an intuitive and efficient solution without the need for additional modules like Paragraphs. Julian, a seasoned full-stack developer at ES IMAGINACION, has a deep-rooted passion for Drupal, which he began using after experimenting with other CMS platforms. His hands-on experience with Drupal’s complexity and potential fueled his desire to simplify page-building for others.

What sets Noah’s apart is its real-time editing interface, allowing users to see design changes instantly while harnessing Drupal’s powerful features. In this interview with Kazima Abbas, a Sub-Editor of The Drop Times (TDT), Julian shares his inspiration behind Noah's Page Builder and how he developed the tool. With the help of his wife and work partner, Sofía García de Blas, he shaped its visual identity, creating a cohesive and user-friendly experience. We’ll dive into the unique features of the builder, from the wide variety of widgets to its ability to create general CSS configurations without complex coding.

Julian also sheds light on how Noah’s is making a significant impact in the Drupal community, especially with its free and paid versions, offering flexibility to users of all kinds. As he explains, 

“The biggest benefit is being able to create a front-end in just a few hours without having to create paragraphs or blocks,”

Let’s now dive into the interview!

TDT [1]: Can you tell us about your journey with Drupal? How did you get started, and what drew you to the Drupal community?

Julian Chabrillon: I started my professional career as a designer around 2012. As I was very curious about all that had to do with web development, I began experimenting with CMS platforms like Joomla and WordPress until I started using Drupal—and I loved it. It’s true that Drupal can be a bit tougher to learn at first compared to other CMSs, but once you get the hang of it, the possibilities are endless. Even with little programming experience, you can create anything from basic to advanced websites.

Views and Webforms were the modules that initially caught my attention, as no other CMS had something similar. Even nowadays, Drupal stands out for these two modules, among other amazing features.

If you compare Drupal 6 (where I started) with Drupal 10+, you will see the amazing work the community has done with this CMS.

TDT [2]: As a full-stack developer, what aspects of Drupal do you find most appealing and challenging?

Julian Chabrillon: I love how easy it is to create manageable sites, whether simple or complex.

You can quickly set up dynamic views, content types, categorized content, forms, blocks, and more in a very short time.

Another interesting aspect is working with custom modules. There are endless possibilities for all kinds of needs. Often, I need to automate my business or administrative tasks, and I always end up developing those tools for personal use in Drupal without spending a lot of time.

My most challenging time since working with this CMS was when it changed from the D7 to the D8 version because almost everything changed.

TDT [3]: Could you share a bit about your experience working at Es Imaginacion? What are some of the key projects you've worked on there, and how has your role evolved over time?

Julian Chabrillon: After working for different companies as a designer and Drupal developer, I decided to start my career as a freelancer in Spain. Shortly after, my wife Sofia decided to take the same path, and we began working together, offering development and marketing services to companies.

The projects that have helped us grow the most include building websites for businesses, creating marketing automation tools with APIs for different platforms, university websites, and admin- and user-friendly websites for mobile app integrations, among many others.

I’ve worked with different technologies throughout my career, but Drupal is the one I have always wanted to specialise in since working on projects with this CMS is what I enjoy the most.

TDT [4]: Noah's Page Builder is a unique tool in the Drupal ecosystem. What inspired you to create this module, and how did the development process begin?

Julian Chabrillon: Here’s the truth: designing in Drupal can be tedious. You need to dedicate a lot of time to developing the front end.

Paragraphs and Layout Builder are, in my opinion, the best options after Noah’s, but even with them, you still spend a lot of time creating simple things. Many clients ask for WordPress development because of its editors. So, I decided to try developing a module that would allow you to create pages with a builder or editor to speed up the front-end work in Drupal since I prefer developing and maintaining sites in Drupal over other CMSs.

Noah’s development began about two years ago, but I couldn’t dedicate many hours to it due to time and budget constraints. At the end of 2023, before my daughter was born, I started dedicating more time to it. During this time, long walks in the countryside with my dog Noah were essential for brainstorming and developing the tool—hence the name Noah’s.

TDT [5]: Who else was involved in the creation of Noah's Page Builder, and what roles did they play in its development?

Julian Chabrillon: I developed the tool on my own (it was a challenge I wanted to take on), and with the help of Sofia (my wife and work partner), we shaped its visual identity.

TDT [6]: The module is described as being similar to Elementor or DIVI in WordPress. What specific features or functionalities did you prioritize to make Noah's stand out in the Drupal space?

Julian Chabrillon: I tried to follow the dynamics of tools like Elementor and Divi, as they are powerful tools, which is why I used them as a reference. Noah’s is a bit simpler, although I’m working hard to make it more advanced.

For Noah’s, I prioritized the ease of adding sections, columns, and widgets and ensuring everything is responsive, all within a visual interface so that anyone, regardless of their programming or design knowledge, can easily create pages.

The ability to add elements from the Drupal interface (fields, blocks, views) to your designs or create templates for entities makes Noah’s even more useful.

TDT [7]: Could you clarify in what sense Noah's Page Builder is "free"? Specifically, does this refer to the absence of cost, the licensing terms, or both? Additionally, are there any limitations, conditions, or potential costs associated with using or modifying the module, especially in commercial projects?

Julian Chabrillon: There’s a free version and a paid version. The free version includes basic widgets and functionalities like the editor, integration with Drupal translations, cloning, etc. However, you can’t create templates for entities or design your header or footer, for example. Still, the design possibilities are quite extensive in the free version.

The paid version is an extension of the free module with more widgets and advanced features, like creating a header and footer, saving widgets/templates globally, and creating templates for entities. With the purchase of the product, you get a one-year license for updates, where I’ll add new features and adapt the code to new Drupal versions with no usage limitations.

Free Version: GNU GENERAL PUBLIC LICENSE v3
There is more information about the license of the pro version :)
Paid Version: https://noahs-creator.com/terms-conditions

TDT [8]: Can you elaborate on the decision to offer a free version with over 20 widgets? How does this align with your vision for the module and its user base?

Julian Chabrillon: I wanted to create a free version that helps users build pages easily, which I’ll keep improving by adding more features and widgets. To support the module's future and generate income for Es Imaginacion, I created the paid version.

This decision took a lot of thought. I wanted to create a business model that also helps those using Drupal to build websites as easily as possible.

TDT [9]: For developers looking to create new widgets within Noah's, how accessible is the process, and what support or documentation do you provide?

Julian Chabrillon: The first thing I recommend is to download Noah's theme at https://www.drupal.org/project/noahs_builder_theme. Here they can visualize the content generated by Noah’s or, if they prefer, they can also find detailed instructions on how to do it at https://noahs-creator.com/documentation.

Creating new widgets is very simple. At the moment, they can only be created from a template. To make it easier to understand how to create the configuration form, I took some inspiration from how easy it is to use Drupal’s Form API.

The documentation is still incomplete, but soon I’ll upload full documentation on how to create basic and advanced widgets (https://noahs-creator.com/documentation/create-new-widget).

However, if you don’t want to wait, you can check out a test on how to create your first widget at https://www.drupal.org/project/noahs_builder_theme. Here you’ll see it’s very straightforward.

TDT [10]: For those unfamiliar, could you explain the basic functionality of Noah's Page Builder? What are the primary benefits it offers to Drupal users?

Julian Chabrillon: The biggest benefit is being able to create a front end in just a few hours without having to create paragraphs or blocks. Instead, you can design and see changes in real-time through an intuitive interface, plus integrate Drupal’s functionalities.

With options to clone, save as global, or save as a template, you save a lot of time, and with the Token module included in the installation, you can do more with dynamic data.

There’s a pre-configuration where you can add default styles like fonts, colours, forms, buttons, etc.

It has its own media library for images and videos, uses Font Awesome’s icon library, and you can upload your SVGs.

I’m also working on adding the possibility to upload your icon fonts.

TDT [11]: The module is designed to allow users to create a front-end website quickly, even without extra modules like Paragraphs. What are some specific use cases where you see Noah's making a significant impact?

Julian Chabrillon: Noah’s could be very useful to make life easier for web developers and designers when creating and/or managing those kinds of websites that are very complicated on the backend but still need to offer a visual and user-friendly front end.

For example, nowadays if you have a website developed with Drupal you may need to spend quite a lot of time every time that you need to make design changes or create new pages. With Noah’s, you can create those pages in just a few minutes without having to go through configurations and deployments.

The tool is still new, and I’m currently working on several new projects implementing Noah’s to test the module as much as possible. I hope that this interview will encourage users to try out the module and hopefully not report too many bugs.

TDT [12]: How do you balance maintaining the free version of Noah's with developing and supporting the Pro version? What has the response been from the community so far?

Julian Chabrillon: Maintenance will be handled equally for both the free and paid versions. My goal is to develop new features to help Drupal users create sites that are smooth, visually appealing, and advanced.

As I mentioned earlier, since the tool is new, it’s not very visible to Drupal users yet, but thanks to some colleagues who use Drupal and have tested Noah’s, I’ve been able to fine-tune the code for both versions.

TDT [13]: Your website (https://noahs-creator.com/) showcases a site built entirely with Noah's Page Builder, without custom CSS or template overrides. How did you approach the design process for this, and what challenges did you encounter?

Julian Chabrillon: Noah’s site was built without a pre-existing design. I configured a basic set of styles and had the site ready in just a few hours.

It was challenging because as you build sites with Noah’s, you realize things are missing, not working, or could be done better.  I know this is a process that will never end, but I also consider it very necessary to keep on improving. As you know, there’s always room for improvement.

TDT [14]: How do you plan to integrate or leverage Drupal 11’s new capabilities in your own projects, particularly with tools like Noah's Page Builder?

Julian Chabrillon: I’m working on adapting the code for Drupal 11 and will be implementing all the new features into Noah’s as they become available.

In the future, I’d like Noah’s to be fully integrated with Drupal’s code and more flexible.

TDT [15]: The Drupal Starshot initiative was announced to make Drupal's powerful features more accessible. What are your thoughts on this initiative, and how do you think it will reshape the Drupal ecosystem?

Julian Chabrillon: In my opinion, this is something we’ve all been waiting for. It will be a huge leap for Drupal, helping it gain ground in the CMS world, both for advanced users and newcomers and I’m sure it will significantly expand the Drupal community.

One thing I liked is the new way to keep your website up to date; it’s fantastic.

TDT [16]: With Noah’s Page Builder aiming to simplify page creation in Drupal, do you see any alignment or synergy between your module and the goals of the Starshot initiative?

Julian Chabrillon: Absolutely. The idea behind Noah’s is to simplify the interface for users when developing or designing a website, combining both codes to get the most out of the site.

TDT [17]: Given that, Experience Builder (XB) is coming to ‘Drupal CMS’ how do you see the marketing of your product over the default capabilities that modern Drupal might provide in the very near future?

Julian Chabrillon: I recently saw the Static UI demo of XB, and it looks good. I hope to be at XB’s level by the time it’s ready.'

As for the commercialization of Noah’s PRO, it’s uncertain at the moment. I do think we’re heading in a similar direction, but these will be two different tools.