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