--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/calques-positionnes' title: 'Ajouter un conteneur de calques positionnés | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:33:05+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Utilisez les calques positionnés quand vous voulez faire se chevaucher des éléments ou les placer à un point exact, ce que lignes et colonnes ne peuvent pas faire. Vous obtenez un canevas sur lequel vous glissez chaque élément où vous voulez, comme un titre sur une photo. L’exemple superpose un titre blanc de journée portes ouvertes sur une image. Pour du contenu courant côte à côte, Ajouter une ligne reste plus simple à garder propre sur téléphone. tags: - Layout 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: 'Ajouter un conteneur de calques positionnés' description: |- Utilisez les calques positionnés quand vous voulez faire se chevaucher des éléments ou les placer à un point exact, ce que lignes et colonnes ne peuvent pas faire. Vous obtenez un canevas sur lequel vous glissez chaque élément où vous voulez, comme un titre sur une photo. L’exemple superpose un titre blanc de journée portes ouvertes sur une image. Pour du contenu courant côte à côte, Ajouter une ligne reste plus simple à garder propre sur téléphone. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:33: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/mise-en-page/calques-positionnes' articleSection: 'Mise en page' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/calques-positionnes' description: |- Utilisez les calques positionnés quand vous voulez faire se chevaucher des éléments ou les placer à un point exact, ce que lignes et colonnes ne peuvent pas faire. Vous obtenez un canevas sur lequel vous glissez chaque élément où vous voulez, comme un titre sur une photo. L’exemple superpose un titre blanc de journée portes ouvertes sur une image. Pour du contenu courant côte à côte, Ajouter une ligne reste plus simple à garder propre sur téléphone. 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) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Mise en page](/fr/hc/documentation/learn-dxpr-builder/layout/overview) # Ajouter un conteneur de calques positionnés. Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page ## Dans ce guide Guides associés - [Ajouter une section](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections) - [Ajouter une mise en page imbriquée](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-imbriquee) - [Animer les éléments au défilement, au survol ou au clic](/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation) Utilisez les calques positionnés quand vous voulez faire se chevaucher des éléments ou les placer à un point exact, ce que lignes et colonnes ne peuvent pas faire. Vous obtenez un canevas sur lequel vous glissez chaque élément où vous voulez, comme un titre sur une photo. L’exemple superpose un titre blanc de journée portes ouvertes sur une image. Pour du contenu courant côte à côte, [Ajouter une ligne](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/lignes-et-colonnes) reste plus simple à garder propre sur téléphone. ## Ajouter un conteneur de calques positionnés 1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle, ou sur le **+** au milieu d’une colonne vide, pour ouvrir le sélecteur d’éléments. 2. Dans l’onglet **Mise en page**, cliquez sur **Calques positionnés**. 3. Ses réglages s’ouvrent d’abord. Réglez **Height** pour que votre calque le plus haut tienne, puis cliquez sur **Save**. Un canevas vide apparaît. 4. Survolez le canevas et cliquez sur **+** dans sa barre de contrôle pour ajouter un élément, comme **Texte** ou une **Image**. Chaque élément ajouté devient un calque à positionner. ## Ce que vous voyez Le canevas garde la hauteur réglée, et chaque calque reste où vous l’avez placé, au-dessus ou sous les autres. Les visiteurs voient la composition comme dans l’éditeur. Les positions sont stockées comme une part du canevas, donc un calque garde sa place quand le canevas rétrécit. Le texte garde sa taille sauf si vous activez **Responsive**. ## Régler vos calques positionnés Ouvrez les réglages depuis **Plus** > **Paramètres** dans la barre de contrôle **Calques positionnés**. | Réglage | Rôle | Défaut | |---|---|---| | **Width** | Largeur du canevas, comme 100 % ou 600px | 100 % | | **Height** | Hauteur du canevas en pixels | 500 | | **Responsive** | Met à l’échelle la hauteur du canevas et le texte avec la largeur du canevas, pour que la composition garde ses proportions sur petits écrans | Désactivé | ## Positionner les calques - **Sélectionner** : cliquez sur un calque. Des poignées apparaissent sur ses coins et bords. - **Déplacer** : glissez le calque par son nom dans sa barre de contrôle, comme **Texte** ou **Image**. Les calques restent dans le canevas. - **Redimensionner** : glissez une poignée du calque sélectionné. - **Ajouter à un point** : double-cliquez sur une partie vide du canevas. Le sélecteur d’éléments s’ouvre, et le nouvel élément atterrit où vous avez cliqué. Le menu **Plus** de chaque calque a quatre éléments supplémentaires. **100% width** et **100% height** étirent le calque sur le canevas. **Bring forward** et **Send backward** le déplacent au-dessus ou sous les autres calques. ## Si rien ne s’affiche - **Un calque ne bouge pas quand vous le glissez.** Les calques ne bougent que par la poignée à leur nom dans la barre de contrôle. Survolez le calque et glissez cette poignée. - **Un calque se cache derrière un autre.** Il est plus bas dans la pile. Ouvrez le menu **Plus** du calque et choisissez **Bring forward**. - **Les calques se chevauchent ou débordent sur téléphone.** **Responsive** est désactivé, donc hauteur du canevas et texte gardent leur taille. Activez **Responsive** dans les réglages **Calques positionnés**. - **Calques positionnés manque dans le sélecteur à l’intérieur d’un canevas.** Un canevas ne peut pas contenir un autre canevas. Ajoutez plutôt le nouvel élément **Calques positionnés** à une colonne. - **Calques positionnés manque partout dans le sélecteur.** Votre profil d’utilisateur DXPR Builder l’exclut. Un administrateur coche **Layers** sous **Elements** dans votre profil à `/admin/dxpr_studio/dxpr_builder/profile`. ## Et ensuite ? - [Sections](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/sections) : donner à la zone autour du canevas un fond de couleur ou d’image. - [Ajouter une mise en page imbriquée](/fr/hc/documentation/apprendre-dxpr-builder/mise-en-page/mise-en-page-imbriquee) : combiner calques, lignes et colonnes dans des mises en page plus complexes. - [Onglet d’animation](/fr/hc/documentation/apprendre-dxpr-builder/design/onglet-animation) : faire apparaître chaque calque avec son propre effet d’entrée.