--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/migration/from-layout-builder' title: 'Ihr Layout für Telefone optimieren | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:35:19+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ihre Seiten passen sich von allein an Telefone und Tablets an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt Ihnen, wie Sie die Kontrolle übernehmen. Sie legen ein Spaltenlayout pro Bildschirmgröße fest, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verkleinert dann das Fenster, um zu zeigen, wie es verschwindet. tags: - 'Verhuizen vanaf een andere builder' 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: 'Ihr Layout für Telefone optimieren' description: |- Ihre Seiten passen sich von allein an Telefone und Tablets an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt Ihnen, wie Sie die Kontrolle übernehmen. Sie legen ein Spaltenlayout pro Bildschirmgröße fest, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verkleinert dann das Fenster, um zu zeigen, wie es verschwindet. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:35:19+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/migration/from-layout-builder' articleSection: 'Verhuizen vanaf een andere builder' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/migration/from-layout-builder' description: |- Ihre Seiten passen sich von allein an Telefone und Tablets an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt Ihnen, wie Sie die Kontrolle übernehmen. Sie legen ein Spaltenlayout pro Bildschirmgröße fest, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verkleinert dann das Fenster, um zu zeigen, wie es verschwindet. 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) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Verhuizen vanaf een andere builder](/hc/documentation/learn-dxpr-builder/migration) # Ihr Layout für Telefone optimieren. Learn DXPR BuilderStart hereVerhuizen vanaf een andere builder ## In this guide Related guides - [Elemente auf Hover reagieren lassen](/de/hc/documentation/learn-dxpr-builder/migration/from-paragraphs) - [Ein Element finden und hinzufügen](/de/hc/documentation/learn-dxpr-builder/editing/element-picker) Ihre Seiten passen sich von allein an Telefone und Tablets an: Spalten sitzen auf breiten Bildschirmen nebeneinander und stapeln sich auf kleinen. Diese Seite zeigt Ihnen, wie Sie die Kontrolle übernehmen. Sie legen ein Spaltenlayout pro Bildschirmgröße fest, spiegeln die Reihenfolge auf breiten Bildschirmen und zeigen Elemente nur auf manchen Geräten. Das Beispiel macht aus einer Zeile mit vier Spalten zwei mal zwei auf Tablets. Das Video verbirgt ein Foto auf Telefonen und verkleinert dann das Fenster, um zu zeigen, wie es verschwindet. ## Bevor Sie beginnen - Eine Zeile mit vier gleichen Spalten auf der Seite; siehe [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns). ## Ein Layout pro Bildschirmgröße wählen 1. Fahren Sie über die Zeile und klicken Sie auf das Grid-Icon in ihrer Kontrollleiste. Der Layoutdialog öffnet sich mit einem Panel **Medium devices (≥ 768px)**. 2. Klicken Sie auf **Add screen size**. Ein zweites Panel öffnet sich, eingestellt auf **Extra small (< 576px)**. 3. Wählen Sie im Dropdown dieses Panels **Small devices (≥ 576px)**. 4. Klicken Sie auf **Custom Layout**, geben Sie `1/2 + 1/2 + 1/2 + 1/2` ein und klicken Sie auf **Save**. 5. Klicken Sie auf **Save** in der Symbolleiste. Vier Hälften behalten alle vier Spalten und legen je zwei auf eine Zeile. Die Kachel mit zwei gleichen Spalten würde die Zeile auf jeder Bildschirmgröße auf zwei Spalten reduzieren. ## Was Sie sehen Auf einem Desktop sitzen die vier Spalten weiter in einer Zeile. Verkleinern Sie das Browserfenster unter 768 Pixel, und sie umbrechen zwei mal zwei. Unter 576 Pixeln stapeln sie sich, eine pro Zeile, in der Reihenfolge des Editors. Ein Layout gilt ab seiner Bildschirmgröße aufwärts, bis eine größere Bildschirmgröße ein eigenes Layout hat. Jede neue Zeile startet mit einem Layout für **Medium devices (≥ 768px)**, sodass sich ihre Spalten auf Telefonen und kleinen Tablets stapeln. **Remove screen size** in einem Panel löscht dieses Layout wieder. ## Die Reihenfolge auf breiten Bildschirmen spiegeln Öffnen Sie das **More**-Menü der Zeile, wählen Sie **Settings** und schalten Sie **Mirror row** ein. Ab 768 Pixeln erscheinen die Spalten in umgekehrter Reihenfolge; auf kleineren Bildschirmen stapeln sie sich in Editor-Reihenfolge. Nutzen Sie es für abwechselnde Zeilen aus Bild und Text. Legen Sie das Bild im Editor zuerst an, sodass Telefone es über dem Text zeigen, und spiegeln Sie jede zweite Zeile, sodass Desktops das Bild rechts zeigen. ## Ein Element pro Bildschirmgröße zeigen oder verbergen 1. Öffnen Sie das **More**-Menü des Elements und wählen Sie **Settings**. 2. Wählen Sie unter **HTML classes** einen Chip aus der Gruppe **Responsive Visibility**, zum Beispiel **Hidden on extra small devices, phones (<576px)**. 3. Klicken Sie auf **Save**. Jeder Chip **Hidden on** verbirgt das Element auf nur einer Bildschirmgröße. Jeder Chip **Visible on** zeigt es auf genau dieser Größe und verbirgt es überall sonst. ## Bildschirmgrößen | Bezeichnung im Layoutdialog | Bildschirmbreite | |---|---| | **Extra small (< 576px)** | Telefone hochkant | | **Small devices (≥ 576px)** | Große Telefone, kleine Tablets | | **Medium devices (≥ 768px)** | Tablets | | **Large devices (≥ 992px)** | Laptops | | **Extra large (≥ 1200px)** | Desktops | | **Extra extra large (≥ 1400px)** | Große Desktops | Ein Element **Positioned layers** hat einen eigenen Schalter **Responsive**, standardmäßig aus. Schalten Sie ihn ein, um Canvas-Höhe und Text mit der Fensterbreite zu skalieren, sodass die Komposition ihre Proportionen behält. ## Wenn Sie die Änderung nicht sehen - **Spalten stapeln sich weiter auf einem Tablet.** Die Zeile hat kein Layout für diese Bildschirmgröße, sodass sich die Spalten unter 768 Pixeln stapeln. Öffnen Sie das Grid-Icon der Zeile, klicken Sie auf **Add screen size** und wählen Sie **Small devices (≥ 576px)**. - **Ein Element verschwand auf jeder Bildschirmgröße.** Es trägt zwei Chips **Visible on**, und jeder verbirgt es, wo der andere es zeigt. Behalten Sie einen, oder nutzen Sie Chips **Hidden on**, einen pro zu verbergender Größe. - **Mirror row tut nichts auf einem Telefon.** **Mirror row** wirkt ab 768 Pixeln aufwärts. Um die Reihenfolge auf Telefonen zu ändern, verschieben Sie stattdessen die Spalten im Editor. ## Wie geht es weiter? - [Zeilen und Spalten](/de/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): Die Zeilen bauen, die Sie hier responsiv machen. - [Eine Seite auf Smartphone oder Tablet bearbeiten](/de/hc/documentation/learn-dxpr-builder/editing/mobile-editing): Seiten auf kleinem Bildschirm prüfen und richten. - [Einen Abschnitt in voller Breite anzeigen](/de/hc/documentation/learn-dxpr-builder/design/full-width-layouts): Entscheiden, wie breit Ihr Inhalt ist.