DialogBuilder

🔰 Introduction The DialogBuilder component is an interactive dialog interface that allows you to visually customize the appearance and behavior of website elements (sections, containers, components, etc.). Designed to be intuitive and accessible, it allows you to modify CSS properties without writing a single line of code.

🧩 Interface Structure

🔍 Overview The DialogBuilder interface is presented as a modal window including:

  • A title indicating the component being edited

  • A close button

  • A tab system to access different customization categories

  • A content area that changes according to the active tab

  • A breakpoint selector for responsive customization

🗂️ Tab System Each tab is represented by an explicit icon, facilitating navigation:

Icône
Nom
Description

⚙️

Config

General settings

↔️

Alignment

Horizontal / vertical alignment

🖼️

Background

Background: color, image, gradient

𝐀

Typography

Font, style, spacing

𝗛

Heading

Title styles (H1 to H6)

⧉

Border

Borders: style, color, radius

📏

Spacing

Margins and padding

📐

Breakpoint

Responsive behavior

🚀 Key Features

1️⃣ Responsive Customization (Breakpoints) A breakpoint selector allows targeting the following resolutions:

  • Global — all screen sizes

  • Small — 576px (smartphones)

  • Medium — 768px (portrait tablets)

  • Large — 992px (landscape tablets / small laptops)

  • XL — 1200px (standard computers)

  • XXL — 1400px (large screens)

2️⃣ Real-Time Modification Changes are immediately visible on the selected component. This allows rapid iterative design, without reloading.

3️⃣ Component Management The DialogBuilder allows you to:

  • Modify an existing component

  • Update header and footer

  • Customize shared elements between multiple pages

↔️ Alignment Control of internal

alignment:

  • Horizontal alignment: left / center / right

  • Vertical alignment: top / center / bottom

  • Distribution: space between / around

🖼️ BackgroundBackground

customization:

  • Background color

  • Image (URL or upload)

  • Linear / radial gradient

𝐀 TypographyTypography

management:

  • Font and size

  • Style: bold / italic / underlined

  • Text color

  • Letter spacing

𝗛 Heading Specific to titles (H1 to H6):

  • Size and weight

  • Alignment

  • Vertical spacing

⧉ BorderBorder

definition:

  • Style: solid, dotted, double...

  • Width

  • Color

  • Corner radius

📏 SpacingSpacing

control:

  • margin (exterior)

  • padding (interior)

  • Inter-element spacing

📐 Breakpoint

Responsive configuration:

  • Conditional visibility

  • Adaptive resizing

  • Screen-specific rules

🔄 System Interactions

🔁 Update Process With each modification:

  1. Changes are collected

  2. An API request is triggered

  3. The component is dynamically updated

  4. The interface synchronizes with the new state

✅ Supported Components

  • Standard page components

  • Headers / footers

  • Global or shared widgets

📚 Use Cases

🎯 Modify a button

  1. Select the button

  2. Open DialogBuilder

  3. Background tab → change color

  4. Border tab → round corners

  5. Typography tab → modify text

  6. Spacing tab → add padding

📱 Adapt a component for mobile

  1. Select the component

  2. Choose the Small (576px) breakpoint

  3. Modify size, alignment, spacing

  4. Test behavior by resizing the window

🧩 Customize a header

  1. Select the global header

  2. Open DialogBuilder

  3. Modify appearance via tabs

  4. Modifications will be automatically applied to all pages

✅ Conclusion The DialogBuilder is a powerful, flexible and no-code tool, ideal for both developers and non-technical users. It facilitates the creation of responsive, consistent and elegant layouts, while considerably reducing development time.

PreviousPage Template

Last updated