Mastering Drupal: A Hands-On Tour of the Experience Builder with Lionel Enkaoua (Part 1)

Explore the cutting edge of Drupal site building in this hands-on walkthrough of the **Drupal Experience Builder (XB)**! In this first of a two-part series, Lionel Enkaoua—Drupal Architect at Linnovate and key contributor to the Experience Builder initiative—guides Drupal Forge's Darren Oh through XB's powerful visual interface. See how drag-and-drop layouts, reusable components, flexible slotting, and even custom React components come together to create beautiful, responsive pages without writing code. This session includes live testing, insight into bug fixes, and previews of what’s to come. (Spoiler: Part 2 is on the way!)

Whether you're a Drupal pro or new to visual page building, this is a must-watch deep dive into the future of Drupal theming and content creation.

Chapters:
00:00 Introduction & goals of the walkthrough
00:48 Why Experience Builder is a game changer
01:18 Overview of the demo page and project background
02:25 Using recipes, default content, and YAML exports
03:05 Understanding SDC components and slot structures
04:31 Live editing with hero components and slots
06:04 Duplicating and modifying components
07:53 Responsive preview and breakpoints
08:38 Interactions between sidebar and viewport
09:02 Containers, props, and layout constraints
10:52 Column settings and dynamic content management
11:52 Testimonial component structure
12:30 Adding new components from the library
13:25 Creating and editing new pages
14:29 Troubleshooting invisible components
15:23 Layout manipulation with flex and spacing
17:28 Exploring annotation and custom component creation
18:24 Building custom React components inside the UI
20:13 Adding props and previewing custom components
21:46 Live component preview and issues
22:59 CLI support for importing/exporting components
23:52 Saving custom components to reuse
24:18 Creating and reusing design patterns
26:22 Global regions and reusable page elements
28:16 Theme settings and region configuration issues
29:54 Making header/menu components globally reusable
30:23 Final thoughts and shoutouts

Credits:
Darren Oh,   / daoh  
Lionel Enkaoua,   / lionel-enkaoua  
Infrastructure, tooling, and AI provider by [https://devpanel.com/](https://devpanel.com/)

#Drupal #DrupalCMS #DrupalAI #DrupalExperienceBuilder #VisualSiteBuilder #OpenSourceWebDesign #DrupalUX #SDCComponents #DevPanel #DrupalForge #Linnovate #DrupalXB