--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/positioned-layers' title: 'Einen Positioned-Layers-Container hinzufügen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:34:14+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Nutzen Sie Positioned Layers, wenn Elemente sich überlappen oder an einer exakten Stelle sitzen sollen, was Zeilen und Spalten nicht können. Sie erhalten einen Canvas, auf dem Sie jedes Element hinziehen, wohin Sie wollen, etwa eine Überschrift über ein Foto. Das Beispiel legt eine weiße Tag-der-offenen-Tür-Überschrift über ein Bild. Für gewöhnliche Inhalte nebeneinander lassen sich Zeilen und Spalten auf Telefonen leichter ordentlich halten.' tags: - Lay-out image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Einen Positioned-Layers-Container hinzufügen' description: 'Nutzen Sie Positioned Layers, wenn Elemente sich überlappen oder an einer exakten Stelle sitzen sollen, was Zeilen und Spalten nicht können. Sie erhalten einen Canvas, auf dem Sie jedes Element hinziehen, wohin Sie wollen, etwa eine Überschrift über ein Foto. Das Beispiel legt eine weiße Tag-der-offenen-Tür-Überschrift über ein Bild. Für gewöhnliche Inhalte nebeneinander lassen sich Zeilen und Spalten auf Telefonen leichter ordentlich halten.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:34:14+0000' dateModified: '2026-10-24T09:09:48+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/de/hc/documentation/learn-dxpr-builder/layout/positioned-layers' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/layout/positioned-layers' description: 'Nutzen Sie Positioned Layers, wenn Elemente sich überlappen oder an einer exakten Stelle sitzen sollen, was Zeilen und Spalten nicht können. Sie erhalten einen Canvas, auf dem Sie jedes Element hinziehen, wohin Sie wollen, etwa eine Überschrift über ein Foto. Das Beispiel legt eine weiße Tag-der-offenen-Tür-Überschrift über ein Bild. Für gewöhnliche Inhalte nebeneinander lassen sich Zeilen und Spalten auf Telefonen leichter ordentlich halten.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Einen Positioned-Layers-Container hinzufügen. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [Einen Abschnitt hinzufügen](/de/hc/documentation/learn-dxpr-builder/layout/sections) - [KI-Texte prüfen und übernehmen](/de/hc/documentation/learn-dxpr-builder/layout/nesting) - [Elemente bei Scroll, Hover oder Klick animieren](/de/hc/documentation/learn-dxpr-builder/design/animation-tab) Nutzen Sie Positioned Layers, wenn Elemente sich überlappen oder an einer exakten Stelle sitzen sollen, was Zeilen und Spalten nicht können. Sie erhalten einen Canvas, auf dem Sie jedes Element hinziehen, wohin Sie wollen, etwa eine Überschrift über ein Foto. Das Beispiel legt eine weiße Tag-der-offenen-Tür-Überschrift über ein Bild. Für gewöhnliche Inhalte nebeneinander lassen sich [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) auf Telefonen leichter ordentlich halten. ## Einen Positioned-Layers-Container hinzufügen 1. Fahren Sie über die Spalte und klicken Sie auf **+** in ihrer Kontrollleiste, oder auf das **+** in der Mitte einer leeren Spalte, um den Element-Picker zu öffnen. 2. Klicken Sie im Tab **Layout** auf **Positioned layers**. 3. Seine Einstellungen öffnen sich zuerst. Stellen Sie **Height** so ein, dass Ihre höchste Ebene passt, und klicken Sie auf **Save**. Ein leerer Canvas erscheint. 4. Fahren Sie über den Canvas und klicken Sie auf **+** in seiner Kontrollleiste, um ein Element hinzuzufügen, etwa **Text** oder ein **Image**. Jedes hinzugefügte Element wird eine Ebene, die Sie positionieren können. ## Was Sie sehen Der Canvas behält die eingestellte Höhe, und jede Ebene sitzt, wo Sie sie platziert haben, über oder unter den anderen. Besucher sehen die Komposition wie im Editor. Positionen werden als Anteil des Canvas gespeichert, sodass eine Ebene ihren Platz behält, wenn der Canvas schmaler wird. Text behält seine Größe, außer Sie schalten **Responsive** ein. ## Ihre Positioned Layers einrichten Öffnen Sie die Einstellungen über **More** > **Settings** in der Kontrollleiste von **Positioned layers**. | Einstellung | Funktion | Standard | |---|---|---| | **Width** | Canvas-Breite, etwa 100 % oder 600px | 100% | | **Height** | Canvas-Höhe in Pixeln | 500 | | **Responsive** | Skaliert Canvas-Höhe und Text mit der Canvas-Breite, sodass die Komposition auf kleinen Bildschirmen ihre Proportionen behält | Off | ## Ebenen positionieren - **Select**: Klicken Sie auf eine Ebene. An ihren Ecken und Kanten erscheinen Anfasser. - **Move**: Ziehen Sie die Ebene an ihrem Namen in ihrer Kontrollleiste, etwa **Text** oder **Image**. Ebenen bleiben im Canvas. - **Resize**: Ziehen Sie an einem Anfasser der gewählten Ebene. - **Add at a spot**: Doppelklicken Sie auf eine leere Stelle des Canvas. Der Element-Picker öffnet sich, und das neue Element landet, wo Sie geklickt haben. Das **More**-Menü jeder Ebene hat vier zusätzliche Einträge. **100% width** und **100% height** strecken die Ebene über den Canvas. **Bring forward** und **Send backward** bewegen sie über oder unter die anderen Ebenen. ## Wenn Sie es nicht sehen - **Eine Ebene bewegt sich nicht, wenn Sie sie ziehen.** Ebenen bewegen sich nur an dem Anfasser mit ihrem Namen in der Kontrollleiste. Fahren Sie über die Ebene und ziehen Sie an diesem Anfasser. - **Eine Ebene versteckt sich hinter einer anderen.** Sie liegt tiefer im Stapel. Öffnen Sie das **More**-Menü der Ebene und wählen Sie **Bring forward**. - **Ebenen überlappen oder ragen auf Telefonen hinaus.** **Responsive** ist aus, sodass Canvas-Höhe und Text ihre Größe behalten. Schalten Sie **Responsive** in den Einstellungen von **Positioned layers** ein. - **Positioned layers fehlt im Picker in einem Canvas.** Ein Canvas kann keinen weiteren Canvas enthalten. Fügen Sie das neue **Positioned layers**-Element stattdessen in einer Spalte hinzu. - **Positioned layers fehlt überall im Picker.** Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt **Layers** unter **Elements** in Ihrem Profil unter `/admin/dxpr_studio/dxpr_builder/profile`. ## Wie geht es weiter? - [Sections](/de/hc/documentation/learn-dxpr-builder/layout/sections): Geben Sie dem Bereich um den Canvas eine Hintergrundfarbe oder ein Hintergrundbild. - [Verschachtelung](/de/hc/documentation/learn-dxpr-builder/layout/nesting): Ebenen mit Zeilen und Spalten in komplexeren Layouts kombinieren. - [Animations-Tab](/de/hc/documentation/learn-dxpr-builder/design/animation-tab): Jede Ebene mit eigenem Auftrittseffekt erscheinen lassen.