Möglicherweise fallen dir beim Erstellen einer Website im Studio Editor unerwünschte Lücken und horizontale Scroll-Leisten auf. Befolge die Schritte in diesem Artikel, um zu erfahren, was du in diesem...

Studio Editor: Fehlerbehebung bei Zwischenräumen und horizontalen Scroll-Leisten

<div data-component-type="text"><div>Möglicherweise fallen dir beim Erstellen einer Website im Studio Editor unerwünschte Lücken und horizontale Scroll-Leisten auf. Befolge die Schritte in diesem Artikel, um zu erfahren, was du in diesem Fall überprüfen solltest, und stelle sicher, dass sie auf keiner Bildschirmgröße erscheinen.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/12/769ce368-7430-4372-bcfd-950fd7249908/5a86d2b5-ef02-4ce9-990f-511a0b42bdd8.gif" alt="GIF, das eine Live-Website zeigt, über die horizontal gescrollt werden muss, um Inhalte anzuzeigen" /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-find-and-re-position-elements-in-the-layers-panel" level="3">Schritt 1 | Elemente im Ebenen-Panel suchen und neu positionieren</h2></div><div data-component-type="text"><div>Wenn sich ein Element außerhalb seiner Abschnittsgrenzen befindet, wird automatisch ein Zwischenraum erstellt, damit das Element vollständig sichtbar ist. Verwende das Ebenen-Panel, um eine Liste deiner Seitenelemente anzuzeigen, und klicke auf jedes einzelne Element, um es zu überprüfen und bei Bedarf neu zu positionieren.</div></div><div data-component-type="heading"><h2 id="" level="4">Um Elemente im Ebenen-Panel zu suchen und neu zu positionieren:</h2></div><div data-component-type="text"><ol>
  <li>Klicke auf der linken Seite des Studio Editors auf <strong>Ebenen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/ece55d35-dfe1-4398-843a-8780c233f651/854d4ae4-32d9-42d3-a094-93f1815b64d2.png" />.</li>  <li>Wähle ein Element aus, um es auf der Seite zu suchen.</li>  <li>Positioniere das Element mit den folgenden Tools neu:
    <ul>
      <li>Per Drag-and-Drop an die richtige Stelle ziehen</li>      <li>Mit den Ziehpunkten das Element verkleinern</li>      <li>Im Inspektor-Panel <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" /> <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-das-inspektor-panel-verwenden" target="blank">die Ränder anpassen oder die Größe des Elements ändern</a></li>    </ul>  </li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/d3b99413-d84c-49dc-a09a-95d86b598236/61d0dd63-327a-4c51-bfe8-ac5dfca1a41a.png" alt="Ein Bild wird im Ebenen-Panel ausgewählt. Der Cursor bewegt sich im Inspektor-Panel über das Feld für die Breite." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-check-the-page-edges" level="3">Schritt 2 | Die Seitenränder überprüfen</h2></div><div data-component-type="text"><div>Während ein Element innerhalb eines Abschnitts positioniert werden kann, können seine Kanten dennoch die Grenzen der Seite überschreiten und eine weiße Lücke und/oder eine horizontale Scroll-Leiste erzeugen. Das passiert häufig bei Textelementen.</div></div><div data-component-type="text"><div>Klicke auf jeden Abschnitt und fahre mit der Maus über alle Elemente in der Nähe der Seitenränder. Wenn einige davon überlaufen, kannst du sie nach Bedarf verschieben oder ihre Größe ändern.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/0cd710af-7762-408b-b810-3d16e30506b6/994c9acd-3ac9-44c8-a54d-adc46eba0f5f.png" alt="Eine Studio-Editor-Website. Der Cursor fährt mit der Maus über ein Bild, das über den Seitenrand hinausgeht." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-3-change-the-overflow-content-setting-of-the-page" level="3">Schritt 3 | Die Einstellung für Überlauf-Content der Seite ändern</h2></div><div data-component-type="text"><div>Du kannst den Überlauf-Content einer Seite ausblenden, um zu verhindern, dass automatisch weiße Lücken und horizontale Scroll-Leisten auf der Seite angezeigt werden. Diese Einstellung „schneidet“ die Ränder der Seite ab, sodass alle überlaufenden Elemente (oder Teile von Elementen) abgeschnitten werden.</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Einstellung für Überlauf-Content zu ändern:</h2></div><div data-component-type="text"><ol>
  <li>Wähle deine Seite aus:
    <ol>
      <li>Wähle die entsprechende Seite aus.</li>      <li>Klicke auf der linken Seite des Studio Editors auf <strong>Ebenen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/ece55d35-dfe1-4398-843a-8780c233f651/854d4ae4-32d9-42d3-a094-93f1815b64d2.png" />.</li>      <li>Klicke auf <strong>Seite</strong>.</li>    </ol>  </li>  <li>Klicke oben rechts im Studio Editor auf den Pfeil Inspektor öffnen <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Klicke auf den Tab <strong>Design</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/f1f20b28-48de-4d4b-a7e6-44067e2e0e99/d74b19d0-ff88-4e30-94e4-c18cbd0574df.png" />.</li>  <li>Wähle aus dem Aufklappmenü <strong>Überlauf-Content</strong> die Option <strong>Ausblenden</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/b2cd9105-4e57-4e5c-870f-8cb84bb15a5b/0d364693-21da-40e8-8be5-3ccb18e3d8b1.png" alt="Das Inspektor-Panel einer Seite im Studio Editor Der Cursor fährt über die Option Ausblenden." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-4-check-the-sections-height" level="3">Schritt 4 | Die Höhe des Abschnitts überprüfen</h2></div><div data-component-type="text"><div>Die Höhe und/oder Mindesthöhe, die du für einen Abschnitt oder das CSS Grid festlegst, kann eine Lücke erzeugen. Wenn du das Verhalten „An Bildschirm anpassen” oder die vh-Maßeinheit (die relativ zur Viewport-Höhe ist) verwendest, kann die Lücke auf größeren Bildschirmen größer erscheinen.</div></div><div data-component-type="text"><div>Du kannst das Inspektor-Panel verwenden, um die Größe des CSS Grid und des Abschnitts zu überprüfen und bei Bedarf ihre Höhe und/oder Mindesthöhe zu ändern.</div></div><div data-component-type="heading"><h2 id="" level="4">Um die Höhe des Abschnitts zu überprüfen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle den entsprechenden Abschnitt aus.</li>  <li>Klicke oben rechts im Studio Editor auf den Pfeil Inspektor öffnen <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Klicke auf den Tab Design <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/9949e486-fec5-41a0-abe5-5e21fb4f293f/da4fc0da-8b55-4ac1-ba4f-959bb26c361f.png" />.</li>  <li>Überprüfe unter <strong>Größe</strong> die Einstellungen für <strong>Höhe</strong> und <strong>Mindesthöhe</strong> und passe diese an.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/e430f7c0-81df-46d2-b974-7f1dd4c1dfe6/2257ac71-f51f-4c7b-b3dd-efe5d40e7b86.png" alt="Das Inspektor-Panel eines Abschnitts im Studio Editor Der Cursor fährt über das Feld Höhe." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="troubleshooting" level="3">Fehlerbehebung</h2></div><div data-component-type="text"><div>Wenn du immer noch unerwünschte Lücken auf der Live-Website deines Kunden siehst, <a data-composite="true" href="https://support.wix.com/en/article/studio-editor-troubleshooting-unwanted-gaps-in-a-section" target="_blank">erfahre hier, was du sonst noch tun kannst, um diese zu entfernen</a> oder sieh dir diese Video-Anleitung an, um das Problem zu beheben.</div></div><div data-component-type="video"><div style="text-align:center"><span class="video-overlay" style="width:650px; height:375px">
  </span><iframe src="https://www.youtube.com/watch?v=v55nO7cf8p4" style="width:650px;height:375px;"></iframe></div></div>

Hast du Probleme mit Breakpoints im Website-Design deines Kunden? Der Studio Editor bietet dir Tools, um häufige Probleme mit der Reaktionsfähigkeit zu lösen – zum Beispiel überlappende, falsch platzi...

Studio Editor: Fehlerbehebung bei Problemen mit der Reaktionsfähigkeit

<div data-component-type="text"><div>Hast du Probleme mit Breakpoints im Website-Design deines Kunden? Der Studio Editor bietet dir Tools, um häufige Probleme mit der Reaktionsfähigkeit zu lösen – zum Beispiel überlappende, falsch platzierte oder falsch ausgerichtete Elemente auf verschiedenen Bildschirmgrößen. Mit den richtigen Anpassungen kannst du eine professionelle Website erstellen, die auf jedem Gerät gut aussieht.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="text-that-appears-too-small-in-certain-breakpoints" level="3">Text, der an bestimmten Breakpoints zu klein angezeigt wird</h2></div><div data-component-type="text"><div>Sieht dein Text zu klein aus, wenn du die Website deines Kunden auf kleineren Bildschirmen anzeigst? Mit einem <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-die-größe-deiner-elemente-festlegen#choosing-an-elements-responsive-behavior" target="">responsiven Verhalten</a>, das proportional skaliert, und der Max-min-Einstellung kannst du sicherstellen, dass dein Text auf jeder Bildschirmgröße gut aussieht.</div></div><div data-component-type="text"><div>Wähle den Text aus und öffne das Inspektor-Panel. Lege zunächst das <strong>Responsive Verhalten</strong> auf <strong>Proportional skalieren</strong> fest. Klicke dann unter <strong>Design</strong> auf <strong>Max-Min</strong>, um die minimale und maximale Schriftgröße festzulegen.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/30/530975bc-5753-422c-9825-06ab865b6de9/3c970bac-91cc-440f-8d65-f41a5a975619.png" alt="Screenshot des Studio Editors, der ein Textelement neben dem Inspektor-Panel zeigt. Der Bereiche für das responsive Verhalten ist hervorgehoben und die Max-min wird angeklickt." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Die Max-min-Einstellung wird automatisch nacheinander auf kleinere Breakpoints angewendet, sodass du ausschließlich am Desktop Änderungen an Breakpoints vornehmen musst.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="misplaced-elements-across-breakpoints" level="3">Elemente über Breakpoints hinweg falsch platziert</h2></div><div data-component-type="text"><div>Wenn die Position eines Website-Elements über verschiedene Bildschirmgrößen hinweg unerwartet verschoben wird, liegt dies wahrscheinlich an den Einstellungen zum Andocken und zum Rand. Führe die folgenden Schritte aus, um das Problem zu beheben und sicherzustellen, dass deine Elemente in ihrer vorgesehenen Position bleiben.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Andocken des Elements überprüfen</h4><div class="collapsible-content"><div>Wähle das entsprechende Element aus und überprüfe im Inspektor-Panel seine Andock-Punkte (z. B. oben, links usw.). Wenn das Element nicht an der gewünschten Position andockt (z. B. das Element ist oben angedockt, du möchtest es aber unten haben), kann es sein, dass das Element verschoben wird, wenn sich die Bildschirmgröße ändert.</div><div><br /></div><div>Die Andock-Position wird durch die gepunkteten Linien am Element und die Andock-Punkte im Inspektor-Panel (unter <strong>Position</strong>) angezeigt. Du kannst im Inspektor auf die Andock-Punkte klicken, um sie auszuwählen oder zu entfernen.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/30/be12a864-e0d3-4ded-aaa5-fb1d282fa3f6/ef22f094-cc54-4c34-aadb-12486b77fa26.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Die Ränder des Elements anpassen</h4><div class="collapsible-content"><div>Ränder definieren den Abstand zwischen dem Element und seinen angedockten Seiten. Wenn sich die Bildschirmgröße ändert, kann es sein, dass die Ränder das Element in verschiedene Richtungen „drücken“.</div><div><br /></div><div>Wenn zum Beispiel ein Element mit einem Rand von 60 % oben angedockt wird, wird es automatisch nach oben verschoben, wenn der Abschnitt schrumpft (um den festgelegten Randwert beizubehalten). Versuche, die Ränder zu verkleinern, und teste das Ergebnis.</div><div><br /></div><div>Wenn du die Ränder in Prozent festlegst, passen sie sich dynamisch an die Bildschirmgröße an. Das kann aber auch zu unerwarteten Verschiebungen führen. Für eine einheitlichere Positionierung kannst du zu einer Einheit mit fester Größe wechseln (z. B. Pixel).</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">(Abschnitt für festes Verhalten) Ränder von Elementen zu Pixel ändern</h4><div class="collapsible-content"><div>Wenn du das <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-die-größe-deiner-elemente-festlegen#choosing-an-elements-responsive-behavior" target="">responsive Verhalten</a> deines Abschnitts als <strong>Fest</strong> definierst, musst du sicherstellen, dass die Ränder der untergeordneten Elemente ebenfalls pixelbasiert sind.</div><div><br /></div><div>Wenn du fließende Ränder verwendest, zum Beispiel in Prozent, werden die Ränder je nach Bildschirmgröße vergrößert oder verkleinert. Das führt dazu, dass sich das Element verschiebt. Wenn du zu Rändern mit Pixelangaben wechselst, behält das Element immer den gleichen Abstand zu den Seiten bei, anstatt ihn je nach Seitenbreite zu berechnen.</div></div></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Mehrere Elemente werden verschoben</div><div class="info-content"><div>Wenn sich alle Elemente im selben Parent-Container befinden (z. B. Abschnitt, Zelle usw.) kannst du sie <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-elemente-stapeln-stacking" target="">stapeln</a>, um gleichbleibende Abstände und Ausrichtung zu gewährleisten.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="misaligned-elements-across-breakpoints" level="3">Falsch ausgerichtete Elemente über Breakpoints hinweg</h2></div><div data-component-type="text"><div>Wenn Elemente in deinem Abschnitt falsch ausgerichtet sind oder ihr Layout nicht mehr stimmt, sobald sich die Bildschirmgröße ändert, liegt dies oft an nicht-einheitlichen Andock- oder Randeinstellungen.</div></div><div data-component-type="text"><div>Befolge diese Schritte, um das Problem zu finden und zu beheben. So kannst du sicherstellen, dass deine Elemente auf allen Bildschirmgrößen korrekt ausgerichtet werden.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Sicherstellen, dass die Elemente auf derselben Seite angedockt sind</h4><div class="collapsible-content"><div>Wenn Elemente sich widersprechende Andock-Einstellungen haben, werden sie möglicherweise nicht richtig ausgerichtet, sobald sich die Bildschirmgröße ändert.</div><div><br /></div><div>Überprüfe, ob Elemente im selben Abschnitt unterschiedliche Andock-Einstellungen haben. Zum Beispiel kann ein Element oben und ein anderes unten angedockt sein. Wir empfehlen, alle verwandten Elemente auf derselben Seite des übergeordneten Containers anzudocken (z. B. oben, unten).</div><div><br /></div><div>Die Andock-Position wird durch die gepunkteten Linien am Element und die Andock-Punkte im Inspektor-Panel (unter <strong>Position</strong>) angezeigt. Du kannst im Inspektor auf die Andock-Punkte klicken, um sie auszuwählen oder zu entfernen.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/30/be12a864-e0d3-4ded-aaa5-fb1d282fa3f6/ef22f094-cc54-4c34-aadb-12486b77fa26.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Randeinheiten standardisieren</h4><div class="collapsible-content"><div>Ränder definieren den Abstand zwischen einem Element und seiner angedockten Seite. Wenn du verschiedene Einheiten (z. B. Prozent vs. Pixel) für Ränder verwendest, können Elemente falsch ausgerichtet werden, sobald sich die Bildschirmgröße ändert.</div><div><br /></div><div>Öffne das Inspektor-Panel und scrolle nach unten zu <strong>Position</strong>, um die aktuellen Ränder des Elements zu überprüfen. Um zu einer anderen Randeinheit zu wechseln, wähle den entsprechenden Rand aus und klicke dann auf die aktuelle Einheit (z. B. px, %).</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/30/4188bfcf-a4bd-4b72-af2b-6d37b68cf6f1/3eddbb77-f931-40af-bf01-337f4295769b.png" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Beziehungen zwischen Elementen überprüfen</h4><div class="collapsible-content"><div>Überprüfe zunächst <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-das-ebenen-panel-verwenden" target="">das Ebenen-Panel</a>, um sicherzustellen, dass sich die Elemente im selben Parent-Container befinden (z. B. Abschnitt, Zelle usw.). Wenn dies der Fall ist, aber keine Beziehung zwischen ihnen definiert ist, agieren die Elemente unabhängig voneinander und überschneiden sich möglicherweise.</div><div><br /></div><div>Das Problem kann behoben werden, indem du die <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-elemente-stapeln-stacking" target="">Elemente vertikal oder horizontal stapelst</a>. Der Stapel gewährleistet eine einheitliche Ausrichtung über alle Bildschirmgrößen hinweg.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="overlapping-elements-across-breakpoints" level="3">Überlappende Elemente über Breakpoints hinweg</h2></div><div data-component-type="text"><div>Wenn du Elemente anordnest, können sie im Editor genau den richtigen Abstand haben, sich aber überschneiden, wenn du die Live-Website in verschiedenen Viewports überprüfst. Überlappungen treten in der Regel aufgrund der Positionierung oder des responsiven Verhaltens von Elementen auf.</div></div><div data-component-type="text"><div>Wenn sich Website-Elemente auf verschiedenen Bildschirmgrößen überschneiden, befolge diese Schritte, um das Problem zu identifizieren und zu beheben.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Positionierung und Andocken von Elementen überprüfen</h4><div class="collapsible-content"><div>Wenn Elemente unabhängig voneinander innerhalb desselben übergeordneten Containers positioniert werden, können sie sich überschneiden, sobald sich die Bildschirmgröße ändert. Überprüfe die Andock-Einstellungen und die Positionierung, um sicherzustellen, dass alles einheitlich ist.</div><div><br /></div><div>Klicke jedes Element an (z. B. Titel, Textabschnitt, Button) und prüfe, wie es im Inspektor-Panel angedockt ist. Achte auf Unterschiede beim Andocken und bei den Rändern der Elemente (z. B. Prozentsätze und Pixel gemischt).</div><div><br /></div><div>Wenn ein Element einen prozentualen Rand und ein anderes einen festen Pixelrand hat, verschieben sich ihre Positionen unterschiedlich, sobald sich die Größe des übergeordneten Containers ändert.</div><div><br /></div><div><img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/12/30/be12a864-e0d3-4ded-aaa5-fb1d282fa3f6/ef22f094-cc54-4c34-aadb-12486b77fa26.png" alt="Unbestimmt" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Das responsive Verhalten von Elementen anpassen</h4><div class="collapsible-content"><div>Es kann auch zu Überlappungen kommen, wenn sich Elemente bei einer Änderung der Bildschirmgröße unterschiedlich verhalten. Zum Beispiel kann ein Element proportional skaliert werden, ein anderes kann umgebrochen werden und ein drittes kann fest bleiben.</div><div><br /></div><div>Wähle jedes Element aus und überprüfe sein <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-die-größe-deiner-elemente-festlegen#choosing-an-elements-responsive-behavior" target="">responsives Verhalten</a> im Inspektor-Panel. Suche nach Elementen mit unterschiedlichem Verhalten, da diese die Überschneidung verursachen können.<br /> <br /> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/11/07/ae8c091e-84e4-4f29-a47a-d93456bdc9d4/c3f40206-07bf-496d-94e3-f97d3ad61db6.gif" /></div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Beziehungen zwischen Elementen überprüfen</h4><div class="collapsible-content"><div>Überprüfe zunächst <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-das-ebenen-panel-verwenden" target="">das Ebenen-Panel</a>, um sicherzustellen, dass sich die Elemente im selben Parent-Container befinden (z. B. Abschnitt, Zelle usw.). Wenn dies der Fall ist, aber keine Beziehung zwischen ihnen definiert ist, agieren die Elemente unabhängig voneinander und überschneiden sich möglicherweise.</div><div><br /></div><div>Das Problem kann behoben werden, indem du die <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-elemente-stapeln-stacking" target="">Elemente vertikal oder horizontal stapelst</a>. Der Stapel gewährleistet eine einheitliche Abstände zwischen den Elementen.</div></div></div></div>

Wenn ein Bild abgeschnitten wirkt, nachdem du es im Studio Editor hinzugefügt hast, kann dies daran liegen, dass das Seitenverhältnis des Bildes nicht mit den Einstellungen des Begrenzungsrahmens über...

Studio Editor: Fehlerbehebung bei abgeschnittenen Bildern

<div data-component-type="text"><div>Wenn ein Bild abgeschnitten wirkt, nachdem du es im Studio Editor hinzugefügt hast, kann dies daran liegen, dass das Seitenverhältnis des Bildes nicht mit den Einstellungen des Begrenzungsrahmens übereinstimmt.</div></div><div data-component-type="text"><div>Im Screenshot unten wirkt zum Beispiel das mittlere Bild abgeschnitten, da es ein anderes Bildverhältnis hat als der Begrenzungsrahmen.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/61539db4-ebdd-40e2-92b0-598fc49150bf/6b9e190f-6d3c-4c01-ad20-5792bb8459ff.png" alt="Screenshot von Bildern auf einer Studio-Editor-Website, der ein abgeschnittenes Bild hat." /></div></div><div data-component-type="text"><div>Führe die folgenden Schritte aus, um das Problem zu beheben, oder sieh dir <a data-composite="true" href="https://www.wix.com/studio/academy/tutorials/fix-images-that-appear-cropped" target="">dieses Video</a> an.</div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-1-reset-the-image-to-match-the-bounding-box" level="3">Schritt 1 | Das Bild zurücksetzen, damit es mit dem Begrenzungsrahmen übereinstimmt</h2></div><div data-component-type="text"><div>Wenn du ein Bild hochlädst, wird es möglicherweise zugeschnitten, weil das Seitenverhältnis des Bildes nicht mit dem Verhältnis des Begrenzungsrahmens übereinstimmt. Du kannst das Bild zurücksetzen, um den Begrenzungsrahmen an das ursprüngliche Seitenverhältnis des hochgeladenen Bildes anzupassen, sodass es nicht abgeschnitten wird.</div></div><div data-component-type="heading"><h2 id="" level="4">Um das Bild zurückzusetzen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Bild aus.</li>  <li>Klicke auf das Symbol für <strong>Einstellungen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/27/8c589ead-740d-4ae2-8d2f-0eb82fd72f7a/ca0c2857-85c5-4aeb-84bd-ce2ecef32d83.png" />.</li>  <li>Klicke auf <strong>Bild zurücksetzen</strong>.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/2883d13d-0115-42b5-b354-cb02cace50f0/33b4d687-fc20-4f50-81ae-9cda4808c9e2.png" alt="Ein Bild im Studio Editor wird auf sein ursprüngliches Seitenverhältnis zurückgesetzt." /></div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title">Tipp:</div><div class="info-content"><div>Du kannst auch verschiedene <strong>Anzeigemodus-</strong>Optionen im Einstellungen-Panel ausprobieren, um zu sehen, welche am besten zu deinem Bild passt.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="step-2-adjust-the-focal-point-of-the-image" level="3">Schritt 2 | Den Fokuspunkt des Bildes anpassen</h2></div><div data-component-type="text"><div>Nachdem du das Bild zurückgesetzt hast, ändere die Größe. Wenn du möchtest, dass die Bildgröße mit anderen Bildern übereinstimmt, aber die Größenänderungsoption einen Teil des Bildes abschneidet, lege den Fokuspunkt fest, um sicherzustellen, dass der wichtigste Teil des Bildes sichtbar bleibt.</div></div><div data-component-type="heading"><h2 id="" level="4">Um den Fokuspunkt des Bildes anzupassen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Bild aus.</li>  <li>Klicke auf das Symbol für <strong>Fokuspunkt</strong> <img data-composite="true" src="https://lh4.googleusercontent.com/1X5I2toRoKmhzbB1RLXOJRWnkKyQerf9eIGsUufAaT0-7paYwywZC16cLlxY1wB60ZIKoRc5AmDmXm8jBZNIkoQQScE-2kaMPTatxAI6Y_FbMNGqJ-fpvEcTwU3L1Qv5hNLHPCsD" />.</li>  <li>Wähle den Bereich des Bildes, der immer sichtbar sein soll, wenn sich die Größe ändert.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/dbdd0977-6e64-4329-80e4-1c22f49dd22c/d44c48b8-e4bd-4390-8996-e3dca909a6ac.png" alt="Screenshot, der zeigt, wie der Fokuspunkt eines Bildes im Studio Editor geändert wird." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">Häufig gestellte Fragen (FAQs)</h2></div><div data-component-type="text"><div>Klicke unten auf eine Frage, um mehr zu erfahren.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Kann ich Bilder mit unterschiedlichen Seitenverhältnissen im selben Abschnitt verwenden?</h4><div class="collapsible-content"><div>Ja, aber für ein einheitliches Design musst du möglicherweise die Fokuspunkte oder die Höhe des Begrenzungsrahmens anpassen, damit sie einheitlich bleiben.</div><div><br /></div><div>Wenn du möchtest, dass alle Bilder dieselbe Größe haben, lege die Höhe aller Begrenzungsrahmen auf denselben Wert fest.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Was kann ich tun, wenn mein Bild nach dem Zurücksetzen und Anpassen des Fokuspunkts immer noch falsch aussieht?</h4><div class="collapsible-content"><div>Überprüfe die hochgeladene Bilddatei. Wenn die Datei selbst abgeschnitten ist oder ein unerwünschtes Seitenverhältnis hat, musst du sie möglicherweise extern bearbeiten und erneut hochladen.</div></div></div></div>

Wenn du unerwünschte Zwischenräume in einem Abschnitt deiner Live-Website siehst, liegt dies oft an der Art und Weise, wie das responsive Verhalten für deinen Abschnitt und seine Elemente eingestellt ...

Studio Editor: Fehlerbehebung bei unerwünschten Zwischenräumen in einem Abschnitt

<div data-component-type="text"><div>Wenn du unerwünschte Zwischenräume in einem Abschnitt deiner Live-Website siehst, liegt dies oft an der Art und Weise, wie das responsive Verhalten für deinen Abschnitt und seine Elemente eingestellt ist. Wenn ein Abschnitt und seine Elemente widersprüchliche responsive Einstellungen haben, können Zwischenräume auftreten, wenn sich die Bildschirmgröße ändert.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/2b469efd-30bd-4c64-b60e-fc1b8b03cff0/2657bf82-df7d-460d-bf08-f80cdb089438.png" alt="Screenshot, der einen unerwünschten Zwischenraum im Studio Editor zeigt." /></div></div><div data-component-type="text"><div>Im Beispiel oben ist das responsive Verhalten des Formulars auf <strong>relative Breite</strong> eingestellt, das heißt die Breite wird basierend auf der Größe des übergeordneten Containers (z. B. eine Rasterzelle) angepasst, die Höhe bleibt jedoch fixiert. Der Abschnitt ist allerdings auf <strong>proportionales Skalieren</strong> eingestellt, sodass sich sowohl die Breite als auch die Höhe proportional anpassen, wenn sich die Bildschirmgröße ändert. Dies führt auf größeren Bildschirmen zu einem großen Zwischenraum, da der Abschnitt höher wird, das Formular jedoch nicht.</div></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Erfahre mehr über die verschiedenen <a data-composite="true" href="https://support.wix.com/de/article/studio-editor-die-größe-deiner-elemente-festlegen#choosing-an-elements-responsive-behavior" target="">responsiven Verhaltensweisen</a>.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="removing-the-gap" level="3">Die Lücke entfernen</h2></div><div data-component-type="text"><div>Zuerst musst du das responsive Verhalten des Elements und des Abschnitts überprüfen, damit du siehst, ob sie ausgerichtet sind. Wenn das responsive Verhalten nicht aufeinander abgestimmt ist, ändere es wie unten beschrieben.</div></div><div data-component-type="heading"><h2 id="" level="4">Um den Zwischenraum zu entfernen:</h2></div><div data-component-type="text"><ol>
  <li>Wähle das Element im Abschnitt aus.</li>  <li>Klicke oben rechts im Editor auf das Symbol für <strong>Inspektor öffnen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Wähle aus dem Dropdown-Menü <strong>Responsives Verhalten</strong> die Option <strong>Relative Breite</strong> aus.</li>  <li>Wähle den entsprechenden Abschnitt aus.</li>  <li>Klicke oben rechts im Editor auf das Symbol für <strong>Inspektor öffnen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li>  <li>Wähle aus dem Dropdown-Menü <strong>Responsives Verhalten</strong> die Option <strong>Feste Höhe</strong> aus.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Nachdem du das responsive Verhalten angepasst hast, teste dein Design, um sicherzustellen, dass auf größeren Bildschirmen keine Zwischenräume angezeigt werden, indem du die Größe der Arbeitsfläche änderst.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="video-tutorial" level="3">Videoanleitung</h2></div><div data-component-type="text"><div>Sieh dir ein Tutorial zur Lösung dieses Problems an.</div></div><div data-component-type="video"><div style="text-align:center"><span class="video-overlay" style="width:650px; height:375px">
  </span><iframe src="https://www.youtube.com/watch?v=v55nO7cf8p4" style="width:650px;height:375px;"></iframe></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Klicke unten auf eine Frage, um mehr zu erfahren.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Was bedeutet eigentlich das responsive Verhalten „Feste Höhe“?</h4><div class="collapsible-content"><div>Feste Höhe bedeutet, dass der Abschnitt unabhängig von der Bildschirmgröße immer gleich hoch bleibt.</div><div><br /></div><div>Die Einstellung der festen Höhe hat tatsächlich eine Mindesthöhe. Wenn du einen Abschnitt auf „feste Höhe“ festlegst, wird er nicht auf weniger als diese Höhe verkleinert. Der Abschnitt kann jedoch größer werden, wenn ein Element höher wird.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Kann ich für den Abschnitt die Option „Proportional skalieren“ verwenden?</h4><div class="collapsible-content"><div>Ja, aber denk daran, dass „proportionales Skalieren“ sowohl die Breite als auch die Höhe des Abschnitts ändert. Wenn die Elemente darin nicht proportional skaliert werden, können Zwischenräume entstehen. Verwende „Feste Höhe“, um dieses Problem zu vermeiden.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Wie kann ich meine Website auf verschiedenen Bildschirmgrößen testen?</h4><div class="collapsible-content"><div>Ändere im Editor die Größe der Arbeitsfläche, um verschiedene Bildschirmbreiten zu simulieren. Sieh dir deine Website nach der Veröffentlichung auf Geräten mit verschiedenen Bildschirmgrößen an oder verwende die Entwicklertools deines Browsers, um die Responsivität zu testen.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Was ist, wenn ich einen Abschnitt mit mehreren Elementen habe?</h4><div class="collapsible-content"><div>Wenn es mehrere Elemente in dem Abschnitt gibt, überprüfe das responsive Verhalten jedes einzelnen Elements. Widersprüchliche Einstellungen (z. B. ein Element hat eine fixierte Breite und ein anderes eine relative Breite) können zu Layout-Problemen führen. Passe das responsive Verhalten aller Elemente an, um Zwischenräume zu vermeiden.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Verhindern Raster Zwischenräume?</h4><div class="collapsible-content"><div>Raster können helfen, strukturiertere Layouts zu schaffen und Zwischenräume zu vermeiden. Indem du Elemente in einem Raster platzierst, kannst du ihre Größe und Ausrichtung genauer definieren, um sicherzustellen, dass sie sich gut an den Abschnitt anpassen.</div></div></div></div>

Wenn du die Größe eines Abschnitts oder Containers im Studio Editor nicht ändern kannst, liegt dies oft an den Randeinstellungen der darin enthaltenen Elemente. Ränder fügen zusätzlichen Platz um Elem...

Studio Editor: Fehlerbehebung bei Abschnitten und Containern, deren Größe sich nicht ändern lässt

<div data-component-type="text"><div>Wenn du die Größe eines Abschnitts oder Containers im Studio Editor nicht ändern kannst, liegt dies oft an den Randeinstellungen der darin enthaltenen Elemente. Ränder fügen zusätzlichen Platz um Elemente herum hinzu, was dazu führen kann, dass du die Größe des Abschnitts oder Containers nicht anpassen kannst.</div></div><div data-component-type="text"><div>Wenn du versuchst, die Größe durch Ziehen der Ränder zu ändern, und das Element zurückspringt oder sich nicht anpassen lässt, sind wahrscheinlich die Ränder das Problem.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/1067fc1f-d99e-48a8-9c00-3bdcdb150f18/3e683c98-f996-49d2-93ea-50431df6f229.gif" alt="GIF, das einen Abschnitt zeigt, dessen Größe aufgrund eines Randes an einem der darin enthaltenen Elemente nicht geändert werden kann." /></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="removing-margins-from-elements" level="3">Ränder von Elementen entfernen</h2></div><div data-component-type="text"><div>Entferne die Ränder von Elementen, die das Problem verursachen könnten.</div></div><div data-component-type="text"><div>Im Screenshot unten ist der untere Rand eines der Bilder im Abschnitt auf 30 % eingestellt, was verhindert, dass die Größe des Abschnitts geändert wird.</div></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/9432a2ad-f01d-4a3d-ae53-370c37e15e62/2025/01/07/86b278ed-7353-4dcf-a21c-60c02c9e842c/ba837fe2-5875-4970-8177-30219d9057e3.png" alt="Screenshot, der ein Element mit einem Rand von 30 % zeigt, der verhindert, dass die Größe des Abschnitts geändert wird" /></div></div><div data-component-type="heading"><h2 id="" level="4">Um Ränder von Elementen zu entfernen:</h2></div><div data-component-type="text"><ol>
  <li>Öffne den entsprechenden Abschnitt oder Container im Editor.</li>  <li>Klicke darin auf ein Element.</li>  <li>Klicke oben rechts im Editor auf das Symbol für <strong>Inspektor öffnen</strong> <img data-composite="true" src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/06/14/2dd40586-1f79-4376-aee0-387212a246bb/dfed4075-2e24-4ad8-a7c4-8857038d5f16.png" />.</li></ol></div><div data-component-type="image"><div class="img-container" style="text-align:center"><img src="https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png" alt="Screenshot, der zeigt, wie das Inspektor-Panel im Studio Editor geöffnet wird." /></div></div><div data-component-type="text"><ol>
  <li>Suche unter <strong>Position</strong> nach Rändern, die auf die Elemente angewendet wurden. Wenn ein Rand darüber oder darunter nicht notwendig ist, setze ihn auf 0 oder passe ihn auf den gewünschten Wert an.</li>  <li>Wiederhole die Schritte 1-4 für jedes Element innerhalb des Abschnitts oder Containers.</li></ol></div><div data-component-type="informative"><div class="info-container" info-color="green"><div class="info-title"></div><div class="info-content"><div>Klicke auf <strong>Vorschau,</strong> um deine Änderungen anzuzeigen.</div></div></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="video-tutorial" level="3">Videoanleitung</h2></div><div data-component-type="text"><div>Sieh dir das Video unten an, um zu erfahren, wie dieses Problem behoben wird.</div></div><div data-component-type="video"><div style="text-align:center"><span class="video-overlay" style="width:650px; height:375px">
  </span><iframe src="https://www.youtube.com/watch?v=F9JG6d6MgkI" style="width:650px;height:375px;"></iframe></div></div><div data-component-type="line"><hr line-style="thin" /></div><div data-component-type="heading"><h2 id="faqs" level="3">FAQs</h2></div><div data-component-type="text"><div>Klicke unten auf eine Frage, um mehr zu erfahren.</div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Warum kann ich die Größe meines Abschnitts oder Containers nicht ändern, nachdem ich die Ränder entfernt habe?</h4><div class="collapsible-content"><div>Wenn das Problem weiterhin besteht, überprüfe im Inspektor-Panel, ob es andere Einschränkungen wie Abstand oder Mindesthöhe gibt, und passe diese Einstellungen nach Bedarf an.</div></div></div></div><div data-component-type="collapsible"><div><h4 class="collapsible-title">Was ist der Unterschied zwischen Rändern und Abstand?</h4><div class="collapsible-content"><div>Ränder sind der Abstand außerhalb eines Elements, während Abstand der Abstand innerhalb eines Elements zwischen Inhalt und Rand ist. Beides kann sich darauf auswirken, ob du die Größe von Abschnitten oder Containern ändern kannst.</div></div></div></div>

Troubleshooting issues in the Studio Editor