---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/reference/reference-des-elements'
title: 'Référence des éléments | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:31:46+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'DXPR Builder fournit 22 éléments de contenu et 6 éléments de mise en page. Cette page répertorie le nom machine de chaque élément et les champs de sa fenêtre de réglages ; pour la mise en page, elle répertorie aussi la Colonne dans chaque ligne. Les blocs et les vues Drupal, que le builder propose aussi comme éléments, ne sont pas couverts.'
tags:
  - 'Elements and CSS'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Référence des éléments'
      description: 'DXPR Builder fournit 22 éléments de contenu et 6 éléments de mise en page. Cette page répertorie le nom machine de chaque élément et les champs de sa fenêtre de réglages ; pour la mise en page, elle répertorie aussi la Colonne dans chaque ligne. Les blocs et les vues Drupal, que le builder propose aussi comme éléments, ne sont pas couverts.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:31:46+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/reference/reference-des-elements'
      articleSection: 'Éléments et CSS'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/reference/reference-des-elements'
      description: 'DXPR Builder fournit 22 éléments de contenu et 6 éléments de mise en page. Cette page répertorie le nom machine de chaque élément et les champs de sa fenêtre de réglages ; pour la mise en page, elle répertorie aussi la Colonne dans chaque ligne. Les blocs et les vues Drupal, que le builder propose aussi comme éléments, ne sont pas couverts.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Référence](/fr/hc/documentation/learn-dxpr-builder/reference) /[Éléments et CSS](/fr/hc/documentation/learn-dxpr-builder/reference/elements-and-css) # Référence des éléments.

 Apprendre DXPR BuilderRéférenceÉléments et CSS

   ## Dans ce guide

DXPR Builder fournit 22 éléments de contenu et 6 éléments de mise en page. Cette page répertorie le nom machine de chaque élément et les champs de sa fenêtre de réglages ; pour la mise en page, elle répertorie aussi la Colonne dans chaque ligne. Les blocs et les vues Drupal, que le builder propose aussi comme éléments, ne sont pas couverts.

## Comment lire cette page

Le premier tableau de chaque élément répertorie les champs de son panneau **General**. Un champ d’un autre panneau se trouve dans un tableau séparé nommé d’après ce panneau. Label est le libellé du champ tel que la fenêtre l’affiche, dans l’orthographe américaine de l’interface. Parameter est le `param_name` dans la définition de l’élément. Options se lit `value` (Label).

Deux champs General apparaissent sur chaque élément et ne sont pas répétés dans les tableaux :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| HTML ID | `hash` | text | empty; the field shows the generated ID as a placeholder | A letter first, then letters, numbers, hyphens and underscores | ID personnalisé pour l’élément. |
| HTML classes | `el_class` | multi-select | empty; new sections get `py-5` | Bootstrap 5 utility classes and the classes that enabled themes declare; **Edit as text** accepts any class | Classes CSS supplémentaires pour l’élément. |

Chaque élément a aussi les panneaux **Style** et **Hover style**, documentés sur la page [Onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style). Tous les éléments sauf Column et les panneaux dans Tabs, Collapse panel et Carousel ont aussi le panneau **Animation**, documenté sur la page [Onglet Animation](/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation).

La colonne Control nomme ce que la fenêtre affiche. Chaque contrôle vient d’un `type` de paramètre dans la définition de l’élément :

| Control | Code `type` |
|---|---|
| text | `textfield` |
| number | `numericfield` |
| link | `link` |
| radio | `dropdown` with fewer than 7 options |
| select | `dropdown` with 7 or more options |
| toggle | `checkbox` with one option |
| checkboxes | `checkbox` with several options |
| slider | `dxb_slider` |
| colour | `colorpicker` |
| icon, image, images, video, datetime | The `type` of the same name |
| ckeditor | `textarea` |
| ace | `html` |
| social | `social_links` |

Un basculeur activé stocke la valeur de sa cellule Allowed values ; un basculeur désactivé stocke `no` ou une valeur vide. Les cases à cocher stockent les valeurs cochées comme liste séparée par des virgules. Une option listée comme vide est stockée comme chaîne vide ; dans la fenêtre, son bouton radio a la clé `dxpr-default`.

Les champs image et images proposent aussi un choix de style d’image : le style `optimize` du site en premier quand il existe, puis **Original image (No resizing)** et les autres styles d’images. Certains champs restent masqués jusqu’à ce qu’un autre champ ait une valeur correspondante ; la colonne Description nomme cette dépendance.

## Éléments de contenu

### [Ajouter un élément de texte](/fr/hc/documentation/learn-dxpr-builder/elements/text)

Texte riche modifié dans CKEditor. Nom machine : `az_text`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder heading and paragraph | HTML | Le contenu textuel. |

### [Ajouter une image](/fr/hc/documentation/apprendre-dxpr-builder/elements/image)

Une seule image, optionnellement enveloppée dans un lien. Nom machine : `az_image`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Image | `image` | image | empty | Image from the media browser | L’image à afficher. |
| Image width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Un nombre seul compte comme pixels. |
| Image height | `height` | text | empty | CSS length, for example `100px` | Un nombre seul compte comme pixels. |
| Image link | `link` | link | empty | URL or internal path | Enveloppe l’image dans un lien. |
| Image link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Où le lien s’ouvre. Affiché quand `link` est défini. |

Champs dans le panneau **SEO** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Texte alternatif de l’image. |
| Title attribute | `title` | text | empty | Any text | Attribut de titre de l’image. |

### [Ajouter un carrousel d’images](/fr/hc/documentation/apprendre-dxpr-builder/elements/carrousel-d-images)

Diaporama Bootstrap de plusieurs images. Nom machine : `az_images_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | empty | Images from the media browser | Une diapositive par image. |
| Interval | `interval` | slider | 5000 | 0 to 10000, step 1 | Temps entre les diapositives en millisecondes. À 0, les diapositives n’avancent pas d’elles-mêmes. |
| Hide | `hide` | checkboxes | none ticked | `pagination_control` (Hide pagination control), `prev_next_buttons` (Hide prev/next buttons) | Masque les indicateurs, les flèches ou les deux. |

Champs dans le panneau **SEO** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Texte alternatif des images. |
| Title attribute | `title` | text | empty | Any text | Attribut de titre des images. |

### [Ajouter une vidéo](/fr/hc/documentation/apprendre-dxpr-builder/elements/video)

Intègre une vidéo YouTube ou Vimeo. Nom machine : `az_video`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video link | `link` | text | empty | YouTube or Vimeo URL | La vidéo à intégrer. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Un nombre seul compte comme pixels. |
| Image | `image` | image | empty | Image from the media browser | Image de couverture ; le lecteur se charge quand le visiteur clique dessus. |
| Themed play button | `play` | toggle | off | `yes` when on | Affiche le bouton de lecture du thème sur la vidéo. |

### [Ajouter une vidéo locale](/fr/hc/documentation/apprendre-dxpr-builder/elements/video-locale)

Lit un fichier vidéo auto-hébergé dans un lecteur HTML5. Nom machine : `az_video_local`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Video | `video` | video | empty | MP4, WEBM, OGG or OGV file, up to the site’s upload size limit | Le fichier vidéo. |
| Start playing automatically | `autoplay` | toggle | off | `autoplay` when on | Démarre la lecture au chargement de la page. La lecture automatique rend toujours la vidéo muette. |
| Muted | `muted` | toggle | off | `muted` when on | Rend la vidéo muette. Affiché pendant que `autoplay` est désactivé. |
| Controls | `controls` | toggle | off | `controls` when on | Affiche les contrôles du lecteur. |
| Loop | `loop` | toggle | off | `loop` when on | Recommence la vidéo quand elle se termine. |
| Video width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Largeur du lecteur. |
| Image | `image` | image | empty | Image from the media browser | Image d’affiche montrée avant la lecture. |

### [Ajouter un élément HTML](/fr/hc/documentation/apprendre-dxpr-builder/elements/html)

HTML brut modifié dans un éditeur de code. Nom machine : `az_html`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Raw HTML | `content` | ace | Placeholder message "Click the edit button to change this HTML" | HTML | Le contenu HTML. |

### [Ajouter un jumbotron](/fr/hc/documentation/apprendre-dxpr-builder/elements/jumbotron)

Grande bannière avec un titre et un texte d’accroche ; d’autres éléments peuvent y être déposés. Nom machine : `az_jumbotron`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Titre de la bannière. |
| Lead | `lead` | text | empty | Any text | Sous-titre affiché sous le titre. |
| Type | `type` | select | `bg-light` (Light) | `bg-light` (Light), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `none` (Default) | Classes de couleur de fond et de texte. |
| Padding | `padding` | radio | `p-5` (Large) | `p-5` (Large), `p-4` (Medium), `p-3` (Small) | Taille de la marge intérieure. |

### [Ajouter un bouton](/fr/hc/documentation/apprendre-dxpr-builder/elements/bouton)

Un bouton Bootstrap qui renvoie à une URL. Nom machine : `az_button`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | Click to add text | Any text | Texte sur le bouton. |
| Link | `link` | link | empty | URL or internal path | Lien du bouton. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Où le lien s’ouvre. Affiché quand `link` est défini. |
| Type | `type` | select | `primary` (Primary) | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `link`, `light`, `dark`; each label is the value with a capital letter | Style de bouton Bootstrap. |
| Block button | `block` | toggle | off | `btn-block` when on | Bouton pleine largeur. |
| Outline style | `outlined` | toggle | off | `outline` when on | Rend `btn-outline-*` au lieu de `btn-*`. |
| Size | `size` | radio | empty (Normal) | empty (Normal), `btn-lg` (Large), `btn-sm` (Small) | Taille du bouton. |

### [Ajouter un lien](/fr/hc/documentation/apprendre-dxpr-builder/elements/lien)

Conteneur qui enveloppe les éléments à l’intérieur dans un seul lien. Nom machine : `az_link`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Link | `link` | link | empty | URL or internal path | Lien du contenu. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Où le lien s’ouvre. Affiché quand `link` est défini. |

Champs dans le panneau **SEO** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title attribute | `title` | text | empty | Any text | Attribut de titre du lien. |
| Tell search engines not to follow | `nofollow` | toggle | off | `nofollow` when on | Ajoute `rel="nofollow"` au lien. |

### [Ajouter une alerte](/fr/hc/documentation/apprendre-dxpr-builder/elements/alerte)

Un message d’alerte Bootstrap. Nom machine : `az_alert`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Message | `content` | ckeditor | Placeholder text | HTML | Le message. |
| Type | `type` | radio | `alert-success` (Success) | `alert-success` (Success), `alert-info` (Info), `alert-warning` (Warning), `alert-danger` (Danger) | Couleur de l’alerte. |

### [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte)

Un conteneur carte Bootstrap avec un en-tête et un titre optionnels. Nom machine : `az_card`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Header | `header` | text | empty | Any text | Texte d’en-tête de la carte. |
| Title | `title` | text | empty | Any text | Titre de la carte. |
| Type | `type` | select | empty (Default) | empty (Default), `text-white bg-primary` (Primary), `text-white bg-secondary` (Secondary), `text-white bg-success` (Success), `text-white bg-info` (Info), `text-white bg-warning` (Warning), `text-white bg-danger` (Danger), `text-white bg-dark` (Dark), `bg-light` (Light) | Classes de couleur de la carte. |

### [Élément panneau](/fr/hc/documentation/apprendre-dxpr-builder/elements/panneau)

Un conteneur panneau avec une barre de titre. Nom machine : `az_panel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Title | `title` | text | empty | Any text | Titre du panneau. |
| Type | `type` | select | `panel-dxpr` (DXPR) | `panel-dxpr` (DXPR), `panel-default` (Default), `panel-primary` (Primary), `panel-success` (Success), `panel-info` (Info), `panel-warning` (Warning), `panel-danger` (Danger) | Style du panneau. |

### [Ajouter un bloc de citation](/fr/hc/documentation/apprendre-dxpr-builder/elements/bloc-de-citation)

Une citation avec une source optionnelle. Nom machine : `az_blockquote`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Text | `content` | ckeditor | Placeholder text | HTML | Le texte cité. |
| Cite | `cite` | text | empty | Any text | Source affichée sous la citation. |
| Reverse | `reverse` | toggle | off | `blockquote-reverse` when on | Aligne la citation à la fin de la ligne (`text-end`). |

### [Ajouter un élément de liens sociaux](/fr/hc/documentation/apprendre-dxpr-builder/elements/liens-sociaux)

Une ligne ou une colonne d’icônes de réseaux sociaux qui renvoient à des pages de profil. Nom machine : `st_social`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Social links | `st_social_links` | social | Facebook and YouTube rows | One row per icon: a brand and the profile URL | Les icônes et leurs liens. |
| Layout | `st_type` | radio | `inline` (Inline) | `inline` (Inline), `stacked` (Stacked) | Disposition des icônes. |
| Style | `st_style` | radio | empty (None) | empty (None), `rounded` (Rounded), `circle` (Circle), `square` (Square) | Forme du fond des icônes. |
| Size | `st_size` | radio | `lg` (Large) | `lg` (Large), empty (Small), `2x`, `3x`, `4x`, `5x`; the last four labels match their values | Taille des icônes. |
| CSS3 hover effects | `st_css3_hover_effects` | radio | empty (None) | empty (None), `disc` (Disc), `pulse` (Pulse) | Effet de survol. Un effet rend l’icône de style cercle. |

Champs dans le panneau **Icon colors** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `st_theme_color` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Source de la couleur des icônes. |
| Color | `st_color` | colour | none | Any colour | Couleur personnalisée des icônes. Affiché quand `st_theme_color` vaut `custom`. |
| Background color | `st_theme_bgcolor` | radio | `custom` (Custom) | `brand` (Brand color), `custom` (Custom), `inherit` (Inherit) | Source de la couleur de fond des icônes. |
| Background color | `st_bgcolor` | colour | none | Any colour | Couleur de fond personnalisée. Affiché quand `st_theme_bgcolor` vaut `custom`. |

### [Ajouter un compteur de nombres](/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-de-nombres)

Un nombre qui compte d’une valeur de départ à une valeur d’arrivée. Nom machine : `az_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Start | `start` | number | 0 | Number | Nombre de départ du compte. |
| End | `end` | number | 100 | Number | Nombre d’arrivée du compte. |
| Font size | `fontsize` | slider | 30 | 0 to 200, step 1 | Taille de police du nombre en pixels. |
| Speed | `speed` | slider | 2000 | 0 to 10000, step 1 | Temps en millisecondes pour terminer le compte. |
| Thousands separator | `seperator` | radio | empty (None) | empty (None), `,` (Comma), `.` (Dot), a space (Space) | Sépare les milliers dans le nombre final. Le code orthographie le paramètre ainsi. |
| Prefix | `prefix` | text | empty | Any text | Caractères avant le nombre, par exemple `$`. |
| Suffix | `postfix` | text | empty | Any text | Caractères après le nombre, par exemple `%`. |

### [Ajouter un compteur circulaire](/fr/hc/documentation/apprendre-dxpr-builder/elements/compteur-circulaire)

Indicateur de progression circulaire avec texte optionnel, ligne d’info et icône au centre. Nom machine : `az_circle_counter`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Foreground color | `fgcolor` | colour | `#333333` | Any colour | Couleur de l’arc de progression. |
| Background color | `bgcolor` | colour | `#999999` | Any colour | Couleur de la piste derrière l’arc. |
| Fill color | `fill` | colour | none | Any colour | Couleur de remplissage dans le cercle. |
| Percent | `percent` | slider | 50 | 0 to 100, step 1 | Valeur de progression. |
| Dimension | `dimension` | slider | 250 | 100 to 500, step 1 | Diamètre du cercle en pixels. |
| Foreground width | `width` | slider | 10 | 1 to 100, step 1 | Épaisseur du trait de l’arc. |
| Animation | `animation` | toggle | on | `yes` when on | Anime l’arc. |
| Animation duration | `duration` | slider | 1500 | 0 to 5000, step 1 | En millisecondes. Affiché quand `animation` est activé. |
| Animation delay | `delay` | slider | 0 | 0 to 5000, step 1 | En millisecondes. Affiché quand `animation` est activé. |
| Animation in-viewport | `in_viewport` | toggle | on | `yes` when on | Démarre l’animation quand l’élément défile à l’écran. Affiché quand `animation` est activé. |

Champs dans le panneau **Circle content**. Chaque champ après **Show progress** n’est affiché que quand celui-ci est désactivé :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Show progress | `show_progress` | toggle | off | `yes` when on | Affiche le pourcentage au lieu de votre propre texte et icône. |
| Text | `text` | text | empty | Any text | Texte au centre. |
| Font size | `fontsize` | slider | 16 | 0 to 100, step 1 | Taille du texte au centre en pixels. |
| Text color | `text_color` | colour | none | Any colour | Couleur du texte au centre. |
| Info | `info` | text | empty | Any text | Ligne d’info secondaire. |
| Info font size | `info_fontsize` | slider | 14 | 0 to 100, step 1 | Taille de la ligne d’info en pixels. |
| Info color | `info_color` | colour | none | Any colour | Couleur de la ligne d’info. |
| Icon | `icon` | icon | empty | Icon from the sets your builder profile allows | Icône au centre. |
| Icon size | `icon_size` | slider | 16 | 0 to 100, step 1 | Taille de police de l’icône en pixels. |
| Icon color | `icon_color` | colour | none | Any colour | Couleur de l’icône. |

### [Ajouter une barre de progression](/fr/hc/documentation/apprendre-dxpr-builder/elements/barre-de-progression)

Barre de progression Bootstrap horizontale avec un libellé. Nom machine : `az_progress_bar`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Label | `label` | text | Click to add text | Any text | Texte dans la barre. |
| Progress | `width` | slider | 50 | 0 to 100, step 1 | Progression en pourcentage. |
| Bar height | `height` | slider | 45 | 0 to 100, step 1 | Hauteur de la barre en pixels. |
| Back color | `bgcolor` | colour | `#e9ecef` | Any colour | Couleur de la piste derrière la barre. |
| Front color | `fcolor` | colour | `#284ed9` | Any colour | Couleur de la barre. |
| Grow animation | `grow_animation` | toggle | off | `yes` when on | Anime la barre de 0 à sa valeur. |
| Stripes | `options` | checkboxes | none ticked | `progress-bar-striped` (Add striped pattern to bar), `progress-bar-animated` (Animate stripes (requires striped pattern)) | Motif rayé et rayures animées. |

### [Ajouter un compte à rebours](/fr/hc/documentation/learn-dxpr-builder/elements/countdown-timer)

Compte à rebours vers une date, une heure ou la fin d’un intervalle répété. Nom machine : `az_countdown`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Countdown style | `countdown_style` | radio | `plain` (Plain) | `plain` (Plain), `style1` (Grid), `style6` (3D flip), `style9` (Disc), `style10` (Airport style), `style12` (Transparent) | Style visuel. |
| Date / Time Limitations | `counter_scope` | radio | `date` (Specify date only) | `date` (Specify date only), `date_time` (Specify date and time), `repeating` (Specify time only (repeating every day)), `resetting` (Resetting counter (set interval up to 24 hours)) | Ce vers quoi le minuteur compte. |
| Date | `date` | datetime | empty | Date in `d.m.Y` format | Date cible. Affiché quand `counter_scope` vaut `date`. |
| Date / Time | `date_time` | datetime | empty | Date in `d.m.Y` format plus hour (`H`) | Date et heure cibles. Affiché quand `counter_scope` vaut `date_time`. |
| Time | `time` | datetime | empty | Hour (`H`) | Heure cible de chaque jour. Affiché quand `counter_scope` vaut `repeating`. |
| Reset in hours | `reset_hours` | slider | 0 | 0 to 24, step 1 | Heures dans l’intervalle. Affiché quand `counter_scope` vaut `resetting`. |
| Reset in minutes | `reset_minutes` | slider | 0 | 0 to 60, step 1 | Minutes dans l’intervalle. Affiché quand `counter_scope` vaut `resetting`. |
| Reset in seconds | `reset_seconds` | slider | 0 | 0 to 60, step 1 | Secondes dans l’intervalle. Affiché quand `counter_scope` vaut `resetting`. |
| Page referrer | `referrer` | link | empty | URL or internal path | Page ouverte à l’expiration du compte à rebours. Affiché quand `counter_scope` vaut `repeating` ou `resetting`. |
| Automatic restart | `restart` | toggle | off | `yes` when on | Redémarre l’intervalle quand il se termine. Affiché quand `counter_scope` vaut `resetting`. |
| Display options | `display` | checkboxes | all five ticked | `years` (Show remaining years), `days` (Show remaining days), `hours` (Show remaining hours), `minutes` (Show remaining minutes), `seconds` (Show remaining seconds) | Unités à afficher. |

### [Élément Marquee](/fr/hc/documentation/learn-dxpr-builder/elements/marquee)

Bande horizontale d’images qui défile sans s’arrêter. Nom machine : `az_marquee`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Images | `images` | images | Three copies of the DXPR logo | Images from the media browser | Les images du bandeau. |
| Speed | `speed` | slider | 3 | 1 to 5, step 1 | Vitesse de défilement ; 1 est le plus lent, 5 le plus rapide. |
| Height | `height` | slider | 50 | 10 to 200, step 1 | Hauteur des images en pixels. |
| Image layout | `image_layout` | radio | `fh` (Fixed height images) | `fh` (Fixed height images), `fw` (Fixed width images) | Si les images partagent une hauteur ou une largeur. |
| Image width | `width` | slider | 400 | 50 to 500, step 1 | Largeur des images en pixels. Affiché quand `image_layout` vaut `fw`. |
| Gray scale | `grayscale` | toggle | off | `apply` when on | Affiche les images en niveaux de gris. |
| Fade edges | `fade_edges` | toggle | off | `apply` when on | Estompe le bandeau aux deux bords. |

Champs dans le panneau **SEO** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Alt attribute | `alt` | text | empty | Any text | Texte alternatif des images. |
| Title attribute | `title` | text | empty | Any text | Attribut de titre des images. |

### [Ajouter une carte](/fr/hc/documentation/learn-dxpr-builder/elements/map)

Carte Google intégrée pour une adresse. Nom machine : `az_map`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Address | `address` | text | empty | Street address | Lieu à afficher. |
| Map width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Un nombre seul compte comme pixels. |
| Map height | `height` | text | `400px` | CSS length, for example `100px` | Un nombre seul compte comme pixels. |

### [Ajouter une icône](/fr/hc/documentation/apprendre-dxpr-builder/elements/icone)

Icône unique, optionnellement liée. Nom machine : `az_icon`. Le module fournit 14 jeux d’icônes. Les thèmes et les modules peuvent en ajouter, et un profil de builder peut limiter les jeux que voient ses utilisateurs.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Icon | `icon` | icon | `bi bi-heart` | Icon from the sets your builder profile allows | L’icône. |
| Size | `size` | radio | `fa-lg` (Large) | `normal` (Normal), `fa-lg` (Large), `fa-2x` (Extra Large (2x)), `fa-3x` (Very Large (3x)), `fa-4x` (Huge (4x)), `fa-5x` (Gigantic (5x)) | Taille de l’icône. |
| Link | `link` | link | empty | URL or internal path | Lien de l’icône. |
| Link target | `link_target` | radio | `_self` (Same window) | `_self` (Same window), `_blank` (New window) | Où le lien s’ouvre. Affiché quand `link` est défini. |

Champs dans le panneau **Icon utilities** :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Style | `st_style` | radio | empty (None) | empty (None), `stbe-util-icon-rounded` (Rounded), `stbe-util-icon-circle` (Circle), `stbe-util-icon-square` (Square) | Forme du fond. |
| Icon animation | `animation` | radio | empty (No) | empty (No), `fa-spin` (Spin), `fa-pulse` (Pulse) | Animation de l’icône. |
| Icon orientation | `orientation` | radio | empty (Normal) | empty (Normal), `fa-rotate-90` (Rotate 90), `fa-rotate-180` (Rotate 180), `fa-rotate-270` (Rotate 270), `fa-flip-horizontal` (Flip horizontal), `fa-flip-vertical` (Flip vertical) | Rotation ou retournement. |

### [Ajouter un séparateur](/fr/hc/documentation/apprendre-dxpr-builder/elements/separateur)

Filet horizontal. Nom machine : `az_separator`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Color | `bgcolor` | colour | none | Any colour | Couleur du filet. |
| Thickness | `thickness` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom thickness) | S’il faut remplacer l’épaisseur du thème. |
| Thickness | `custom_thickness` | slider | 3 | 0 to 20, step 1 | Épaisseur du filet en pixels. Affiché quand `thickness` vaut `custom`. |
| Length | `width` | radio | `auto` (Theme default) | `auto` (Theme default), `custom` (Custom width) | S’il faut remplacer la longueur du thème. |
| Width | `custom_width` | slider | 100 | 0 to 500, step 10 | Longueur du filet en pixels ; 0 rend toute la largeur. Affiché quand `width` vaut `custom`. |
| Align | `align` | radio | `left` (Left) | `left` (Left), `center` (Center), `right` (Right) | Alignement horizontal. Affiché quand `width` vaut `custom`. |

## Éléments de mise en page

### [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections)

Conteneur de plus haut niveau pour les lignes, avec options pleine largeur, pleine hauteur et effet de fond. Nom machine : `az_section`. Les nouvelles sections reçoivent la classe `py-5` dans **HTML classes**.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Full width | `fluid` | toggle | off | `yes` when on | Utilise un conteneur pleine largeur (`container-fluid`). |
| 100% height | `fullheight` | toggle | off | `yes` when on | La section remplit la hauteur de la fenêtre. |
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centre le contenu verticalement. |

Champs dans le panneau **Background effects**. Tous sauf **Background effect** dépendent de sa valeur, comme la colonne Description le montre :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Background effect | `effect` | radio | empty (Simple image) | empty (Simple image), `fixed` (Fixed image), `parallax` (Parallax image), `gradient` (Gradient), `youtube` (YouTube video) | Effet de fond. |
| Parallax speed | `parallax_speed` | slider | 0 | 0 to 100, step 1 | Vitesse de défilement de la parallaxe. Affiché quand `effect` vaut `parallax`. |
| Parallax mode | `parallax_mode` | radio | `fixed` (Fixed) | `fixed` (Fixed), `scroll` (Local) | Attachement du fond de l’image. Affiché quand `effect` vaut `parallax`. |
| Disable on mobile | `parallax_mobile_disable` | toggle | off | `yes` when on | Désactive la parallaxe sur les écrans de moins de 481 px. Affiché quand `effect` vaut `parallax`. |
| Start color | `gradient_start_color` | colour | none | Any colour | Couleur de début du dégradé. Affiché quand `effect` vaut `gradient`. |
| End color | `gradient_end_color` | colour | none | Any colour | Couleur de fin du dégradé. Affiché quand `effect` vaut `gradient`. |
| Gradient direction | `gradient_direction` | slider | 180 | 1 to 360, step 1 | Angle du dégradé en degrés. Affiché quand `effect` vaut `gradient`. |
| Start position | `gradient_start` | slider | 0 | 0 to 100, step 1 | Position de la couleur de début en pour cent. Affiché quand `effect` vaut `gradient`. |
| End position | `gradient_end` | slider | 100 | 0 to 100, step 1 | Position de la couleur de fin en pour cent. Affiché quand `effect` vaut `gradient`. |
| Video options | `video_options` | checkboxes | none ticked | `disMobile` (Disable on mobile devices), `loop` (Loop), `audio` (Unmute (Not reliable when auto-playing due to recent browser policy updates)), `noCrop` (Disable cropping out player), `resizeSection` (Resize section to match video), `showControls` (Show controls) | Options de fond YouTube. Affiché quand `effect` vaut `youtube`. |
| YouTube video URL | `video_youtube` | text | empty | YouTube URL | Vidéo de fond YouTube. Affiché quand `effect` vaut `youtube`. |
| Start time in seconds | `video_start` | text | 0 | Seconds | Heure de début de la vidéo. Affiché quand `effect` vaut `youtube`. |
| Stop time in seconds | `video_stop` | text | 0 | Seconds | Heure de fin de la vidéo. Affiché quand `effect` vaut `youtube`. |

### [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes)

Ligne de grille Bootstrap qui contient des colonnes. Une nouvelle ligne commence avec deux colonnes de demi-largeur. Nom machine : `az_row`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Equal-height columns | `equal` | toggle | off | `yes` when on | Donne la même hauteur à toutes les colonnes. |
| Mirror row | `reverse_horizontal` | toggle | off | `yes` when on | Inverse l’ordre des colonnes sur les écrans de 768 px et plus. |

### [Colonne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes)

Une colonne dans une ligne. Les lignes créent leurs colonnes : Column n’est donc pas dans le sélecteur d’éléments. Nom machine : `az_column`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Vertical centering | `vertical_centering` | toggle | off | `yes` when on | Centre le contenu de la colonne verticalement. |

### [Ajouter un panneau d’onglets](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-d-onglets)

Conteneur à panneaux d’onglets commutables ; chaque onglet est ajouté avec le contrôle **Add tab**. Nom machine : `az_tabs`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab direction | `az_dirrection` | radio | empty (Default) | empty (Default), `tabs-left` (Left), `tabs-right` (Right) | Position de la barre d’onglets. Le code orthographie le paramètre ainsi. |
| Style | `tab_style` | radio | empty (Default) | empty (Default), `modern` (Modern), `accordion` (Accordion) | Style des onglets. |
| Mobile friendly | `responsive` | toggle | on | `yes` when on | Affiche les onglets comme un panneau repliable sur les petits écrans. |

Chaque onglet (`az_tab`) a ses propres réglages :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Tab title | `title` | text | Title | Any text | Libellé de l’onglet. |
| Tab description | `subtitle` | ckeditor | empty | HTML | Court sous-titre optionnel affiché sur l’onglet actif. |

### [Ajouter un panneau repliable](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/panneau-repliable)

Conteneur de panneaux repliables ; chaque panneau est ajouté avec le contrôle **Add toggle**. Nom machine : `az_accordion`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Collapse | `collapsed` | toggle | off | `yes` when on | Démarre avec chaque panneau fermé. Quand désactivé, le premier panneau démarre ouvert. |
| Expand icon | `expandicon` | radio | empty (None) | empty (None), `az-accordion--icon-plusminus` (+), `az-accordion--icon-arrow` (﹀) | Icône à côté du titre de chaque panneau. |

Chaque panneau (`az_toggle`) a ses propres réglages :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Toggle title | `title` | text | Title | Any text | Titre du panneau. |

### [Ajouter un carrousel](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-carrousel)

Conteneur de diapositives ; chaque diapositive contient d’autres éléments et est ajoutée avec le contrôle **Add slide**. Les diapositives (`az_slide`) n’ont aucun champ propre. Nom machine : `az_carousel`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Frames per slide | `items` | slider | 1 | 1 to 10, step 1 | Diapositives affichées côte à côte. Les écrans plus étroits en montrent moins. |
| Disable auto-play | `autoplay` | toggle | off | `yes` when on | Empêche les diapositives d’avancer d’elles-mêmes. |
| Auto-play interval | `interval` | slider | 5000 | 1000 to 20000, step 100 | Temps entre les diapositives en millisecondes. |
| Stop on hover | `stoponhover` | toggle | off | `yes` when on | Met la lecture automatique en pause pendant que le pointeur est sur le carrousel. |

Champs dans le panneau **Dots**. Chaque champ après **Dots navigation** n’est affiché que quand celui-ci est activé :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Dots navigation | `pagination` | toggle | on | `yes` when on | Affiche un point par diapositive. |
| Dots orientation | `pagination_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Position des points. |
| Dot shape | `pagination_shape` | radio | `bar` (Bar) | `bar` (Bar), `circle` (Circle), `square` (Square), `triangle` (Triangle) | Forme des points. |
| Active dot transformation | `pagination_transform` | radio | empty (None) | empty (None), `growTaller` (Grow taller), `growWider` (Grow wider), `scaleUp` (Scale up) | Effet sur le point actif. |
| Dot color | `pagination_color` | colour | none | Any colour | Couleur des points. |
| Active dot color | `pagination_active_color` | colour | none | Any colour | Couleur du point actif. |

Champs dans le panneau **Next/Previous**. Chaque champ après **Next/Previous** n’est affiché que quand celui-ci est activé :

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Next/Previous | `navigation` | toggle | off | `yes` when on | Affiche les flèches suivante et précédente. |
| Orientation | `navigation_orientation` | radio | `outside` (Outside slider) | `outside` (Outside slider), `inside` (Inside slider) | Position des flèches. |
| Dot shape | `navigation_shape` | radio | empty (No background) | empty (No background), `circle` (Circle), `square` (Square), `bar` (Bar) | Forme du fond des flèches. La fenêtre l’intitule aussi **Dot shape**. |
| Icon color | `navigation_icon_color` | colour | none | Any colour | Couleur des icônes des flèches. |
| Icon hover color | `navigation_icon_hover_color` | colour | none | Any colour | Couleur des icônes des flèches au survol. |
| Background color | `navigation_background_color` | colour | none | Any colour | Couleur de fond des flèches. |
| Background hover color | `navigation_background_hover_color` | colour | none | Any colour | Couleur de fond des flèches au survol. |
| Outside navigation position | `navigation_position` | select | `adjacent` (Adjacent) | `adjacent` (Adjacent), `topCenter` (Top center), `topLeft` (Top left), `topRight` (Top right), `bottomCenter` (Bottom center), `bottomLeft` (Bottom left), `bottomRight` (Bottom right) | Position des flèches hors du curseur. |

### [Calques positionnés](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/calques-positionnes)

Canevas sur lequel les éléments enfants sont glissés et redimensionnés librement. Un élément de calques positionnés ne peut pas être imbriqué dans un autre. Nom machine : `az_layers`. Chaque enfant stocke sa place dans des paramètres masqués : `pos_left`, `pos_top`, `pos_width`, `pos_height` et `pos_zindex`.

| Label | Parameter | Control | Default | Allowed values | Description |
|---|---|---|---|---|---|
| Width | `width` | text | `100%` | CSS length, for example `100px` or `50%` | Largeur du canevas. Un nombre seul compte comme pixels. |
| Height | `height` | slider | 500 | 0 to 10000, step 1 | Hauteur du canevas en pixels. |
| Responsive | `responsive` | toggle | off | `yes` when on | Adapte la hauteur du canevas et les tailles de police à la largeur disponible. |

## Et ensuite ?

- [Éléments de contenu](/hc/documentation/learn-dxpr-builder/elements)
- [Aperçu de la mise en page](/hc/documentation/learn-dxpr-builder/layout/overview)
- [Réglages des éléments](/hc/documentation/learn-dxpr-builder/element-settings)