--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/modification/selecteur-d-elements' title: 'Trouver et ajouter un élément | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:43:05+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Chaque élément que vous ajoutez vient du sélecteur d’éléments, une boîte de dialogue à cinq onglets : mise en page, contenu, blocs Drupal, vues Drupal et vos modèles enregistrés. Vous apprenez ici ce que contient chaque onglet et comment trouver vite un élément. L’exemple visite chaque onglet et ajoute un bouton depuis l’onglet Contenu. tags: - 'Edit a page' 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: 'Trouver et ajouter un élément' description: |- Chaque élément que vous ajoutez vient du sélecteur d’éléments, une boîte de dialogue à cinq onglets : mise en page, contenu, blocs Drupal, vues Drupal et vos modèles enregistrés. Vous apprenez ici ce que contient chaque onglet et comment trouver vite un élément. L’exemple visite chaque onglet et ajoute un bouton depuis l’onglet Contenu. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:43:05+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/modification/selecteur-d-elements' articleSection: 'Modifier une page' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/modification/selecteur-d-elements' description: |- Chaque élément que vous ajoutez vient du sélecteur d’éléments, une boîte de dialogue à cinq onglets : mise en page, contenu, blocs Drupal, vues Drupal et vos modèles enregistrés. Vous apprenez ici ce que contient chaque onglet et comment trouver vite un élément. L’exemple visite chaque onglet et ajoute un bouton depuis l’onglet Contenu. 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) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Modifier une page](/fr/hc/documentation/learn-dxpr-builder/editing) # Trouver et ajouter un élément. Apprendre DXPR BuilderCréer des pagesModifier une page ## Dans ce guide Guides associés - [Faire glisser les éléments en place](/fr/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) - [Modifier le texte sur la page](/fr/hc/documentation/apprendre-dxpr-builder/modification/modification-du-texte-en-place) Chaque élément que vous ajoutez vient du sélecteur d’éléments, une boîte de dialogue à cinq onglets : mise en page, contenu, blocs Drupal, vues Drupal et vos modèles enregistrés. Vous apprenez ici ce que contient chaque onglet et comment trouver vite un élément. L’exemple visite chaque onglet et ajoute un bouton depuis l’onglet **Contenu**. ## Ouvrir le sélecteur 1. Cliquez sur **Ajouter des éléments** dans la zone de contenu vide puis, dans l’onglet **Mise en page**, choisissez **Section**. 2. Cliquez sur **+** sur la section : le sélecteur s’ouvre de nouveau. Ce que vous choisissez va dans cette section, en haut. ## Parcourir les cinq onglets 1. Cliquez sur **Mise en page** : Section, Row, Tabs, Collapse panel, Carousel et Positioned layers. 2. Cliquez sur **Contenu** : éléments de texte, médias et éléments interactifs, avec un champ **Search**. 3. Cliquez sur **Drupal Blocks** : les blocs de votre site, avec **Filter by category** et un champ de recherche. 4. Cliquez sur **Drupal Views** : chaque affichage de vos vues activées, avec **Filter by tag** et un champ de recherche. 5. Cliquez sur **Saved templates** : vos modèles privés et globaux, avec **Filter by user**, **Filter by type** et un champ de recherche. Chaque onglet sauf **Mise en page** a un champ **Search** : saisissez une partie d’un nom pour filtrer cet onglet. ## Ajouter un élément 1. De retour dans l’onglet **Contenu**, choisissez **Bouton** : sa boîte de dialogue de paramètres s’ouvre aussitôt. 2. Saisissez **Title**, définissez **Link**, laissez **Type** sur Primary puis cliquez sur **Enregistrer**. 3. Cliquez sur **Enregistrer** dans la barre d’outils. ## Éléments de contenu | Élément | Fonction | |---|---| | Alerte | Message d’alerte Bootstrap | | Bloc de citation | Citation stylisée | | Bouton | Bouton stylisé avec lien | | Carte | Carte avec en-tête, titre et contenu | | Compteur circulaire | Animation de progression circulaire | | Compte à rebours | Compte à rebours de date et d’heure | | Compteur de nombres | Nombre compté animé | | HTML | Code HTML brut | | Icône | Icône issue d’une bibliothèque d’icônes | | Image | Image unique avec lien et texte alternatif | | Carrousel d’images | Galerie d’images rotative | | Jumbotron | Grande bannière avec titre et phrase d’accroche | | Lien | Lien stylisé | | Carte Google Maps | Intégration Google Maps | | Marquee | Bandeau d’images défilant | | Panneau | Panneau bordé avec titre | | Barre de progression | Indicateur de progression animé | | Séparateur | Ligne horizontale | | Texte | Texte riche avec modification en ligne | | Vidéo locale | Fichier vidéo auto-hébergé | | Vidéo | Vidéo intégrée (YouTube, Vimeo) | | Liens sociaux | Liens d’icônes de réseaux sociaux | ## Ce que vous voyez La plupart des éléments ouvrent leur boîte de dialogue de paramètres dès que vous les choisissez. Carte, Séparateur et Panneau arrivent directement sur la page, tout comme Section, Row, Tabs et Collapse panel. Carousel et Positioned layers ouvrent d’abord leurs paramètres. Le nouvel élément se place en haut de la section ou de la colonne cliquée ; faites-le glisser plus bas s’il va plus loin. ## Si l’élément ne s’affiche pas - **Un élément manque dans un onglet.** Votre profil d’utilisateur le masque. Un administrateur le coche sous **Elements** dans le profil sur **DXPR Studio** > **DXPR Builder** > **User Profiles**(`/admin/dxpr_studio/dxpr_builder/profile`). Le profil nomme différemment certains éléments : **Separator** pour Divider, **Counter** pour Number counter, **Countdown** pour Countdown timer et **Blockquote** pour Block quote. - **Un nouveau bloc ou affichage de vue manque.**À moins que la case **Check/Uncheck all Blocks**ou **Check/Uncheck all Views** du profil soit cochée, les profils d’utilisateur n’ajoutent pas eux-mêmes les nouveaux blocs et affichages. Un administrateur la coche sous **Blocks** ou **Views** dans le même profil. - **L’onglet Drupal Blocks est manquant.** Le constructeur ne liste les blocs que lorsque le module **Block Content** de Drupal est activé. Activez-le dans **Extend**(`/admin/modules`). - **Saved templates est vide.** Rien n’a encore été enregistré. Choisissez **Save as template** dans le menu **Plus** d’un élément ; voir [Modèles d’utilisateur](/fr/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates). ## Et ensuite ? - [Faire glisser les éléments en place](/fr/hc/documentation/learn-dxpr-builder/editing/drag-and-drop) : déplacez le nouvel élément où il va. - [Modifier le texte sur la page](/fr/hc/documentation/apprendre-dxpr-builder/modification/modification-du-texte-en-place) : saisissez et mettez en forme du texte sans boîte de dialogue. - [Éléments](/hc/documentation/learn-dxpr-builder/elements) : ce que fait chaque élément et comment le configurer.