So behebst du den Fehler „Bild liegt außerhalb der Gitternetzlinien“ in Wix
Hier ist ein ausführliches Tutorial, wie du das Problem mit Bildern außerhalb der Gitternetzlinien in Wix löst.
Wenn du im Wix-Editor arbeitest, siehst du oft vertikale gepunktete Linien. Diese markieren die sogenannten Gitternetzlinien (Gridlines). Alles, was sich innerhalb dieser Linien befindet, wird garantiert auf den meisten Browsern und Geräten (auch kleineren Laptops) korrekt angezeigt. Liegt ein Bild außerhalb, riskierst du, dass Besucher es nur teilweise sehen oder horizontal scrollen müssen.
Hier sind die drei besten Methoden, um diesen Fehler zu beheben.
Schritt 1: Gitternetzlinien sichtbar machen
Bevor du startest, stelle sicher, dass du die Linien überhaupt siehst:
- Öffne deinen Wix Editor.
- Gehe in der oberen Menüleiste auf Werkzeuge.
- Setze ein Häkchen bei Gitternetzlinien. Nun erscheinen die vertikalen Hilfslinien.
Methode 1: Das Bild manuell skalieren (Einfachste Lösung)
Wenn das Bild nur leicht über den Rand ragt, ist dies der schnellste Weg:
- Klicke auf das Bild, das die Warnung verursacht.
- Nutze die runden Anfasspunkte an den Ecken des Bildes.
- Ziehe das Bild kleiner, bis es sich vollständig innerhalb der beiden vertikalen gepunkteten Linien befindet.
- Sobald das Bild innerhalb des Rasters ist, verschwindet die Fehlermeldung normalerweise automatisch.
Methode 2: Streifen (Strips) verwenden (Beste Lösung für Design)
Möchtest du, dass ein Bild über die gesamte Bildschirmbreite geht, ohne dass Wix eine Fehlermeldung ausgibt? Dann darfst du das Bild nicht einfach so auf die Seite ziehen, sondern musst einen Streifen nutzen.
- Klicke links auf das „+“-Symbol (Hinzufügen).
- Wähle Streifen und ziehe einen leeren Streifen auf deine Seite.
- Klicke auf den Streifen und wähle Streifen-Hintergrund ändern.
- Wähle Bild und lade dein gewünschtes Foto hoch.
- Der Vorteil: Ein Streifen passt sich automatisch an jede Bildschirmbreite an („Full Width“). Da das Bild nun Teil des Streifens ist, gilt die „Außerhalb des Rasters“-Regel für den Hintergrund nicht mehr.
Methode 3: Spalten (Columns) innerhalb von Streifen nutzen
Wenn du ein Bild ganz am Rand platzieren möchtest, aber daneben noch Text stehen soll, helfen Spalten:
- Füge einen Streifen hinzu (wie in Methode 2).
- Klicke auf den Streifen und wähle im Menü Layout -> Spalte hinzufügen.
- Du hast nun zwei oder mehr Bereiche. Klicke auf eine Spalte und wähle Spalten-Hintergrund ändern, um dein Bild dort einzufügen.
- Innerhalb der Spalten kannst du die Ausrichtung (links, rechts, mittig) festlegen, sodass das Bild optisch am Rand liegt, technisch aber korrekt im System verankert ist.
Schritt 2: Die mobile Ansicht prüfen
Nachdem du das Bild im Desktop-Editor verschoben hast, ist es zwingend notwendig, die mobile Version zu prüfen:
- Klicke oben im Editor auf das Handy-Symbol.
- Prüfe, ob das Bild auch hier richtig skaliert wurde.
- Da der mobile Bildschirm viel schmaler ist, musst du hier oft die Größe separat anpassen. Keine Sorge: Änderungen an der Größe im mobilen Editor wirken sich nicht auf die Desktop-Version aus.
Profi-Tipp: Warum das Ganze?
Die Gitternetzlinien bei Wix haben eine Standardbreite von 980 Pixeln. Das ist der „Safe Area“-Bereich. Wenn du Elemente außerhalb platzierst, werden sie auf einem MacBook Air oder einem Tablet oft abgeschnitten. Nutze daher für Hintergründe immer Streifen und für wichtige Inhalte (Logos, Buttons, Texte) immer den Bereich innerhalb der Linien.
Hast du das Bild verschoben und die Warnung wird immer noch angezeigt? Drücke einmal Strg + S (Speichern) und lade den Editor neu – manchmal braucht Wix einen Moment, um die Warnanzeige zu aktualisieren.