Die drei Geräte-Ansichten
Oben in der Mitte der Builder-Leiste sitzen drei Symbole: Monitor, Tablet und Handy. Klick auf eines davon, um das Canvas in der jeweiligen Ansicht zu sehen. Der Desktop rechnet mit 1280 px Breite, das Tablet mit 768 px, das Handy mit 390 px – also die typischen echten Gerätebreiten. So erkennst du sofort, ob auf dem Handy etwas zu eng wird oder ein Bild schlecht sitzt.
Praktisch: Beim Öffnen wählt der Builder die Ansicht selbst passend zu deinem Bildschirm. Am Laptop startest du in der Desktop-Ansicht, am Handy in der Handy-Ansicht. Danach schaltest du frei um, so oft du willst.
Was von allein passiert
Für ein sauberes Mobil-Layout musst du erst mal gar nichts tun. Der Builder passt vieles automatisch an:
- Mehrspaltige Zeilen stapeln sich auf dem Handy untereinander – aus drei Spalten nebeneinander werden drei Blöcke übereinander.
- Galerien und Raster reduzieren ihre Spalten je Bildschirm: Desktop die volle Spaltenzahl, Tablet höchstens drei, Handy höchstens zwei.
- Überschriften, Innenabstände und Schriftgrößen schrumpfen auf kleineren Geräten mit.
Wichtig zu wissen: Diese Anpassung steckt fest im Aufbau jedes Moduls und greift auch auf der veröffentlichten Seite, nicht nur in der Vorschau. Du musst dafür keinen Schalter umlegen.
Eigene Werte pro Gerät festlegen
Manchmal reicht die Automatik nicht – etwa wenn ein Titel auf dem Handy kleiner sein soll oder eine Sektion dort weniger Innenabstand braucht. Dafür klickst du zuerst das Element an (Sektion, Zeile, Spalte oder Modul) und gehst im rechten Panel auf den Reiter Design. Ganz oben im Design-Bereich steht eine kleine Geräte-Auswahl: Desktop, Tablet, Handy.
Im Seiteninhalt trägt jedes Abstandsfeld eine Auto-Pille: Automatische Abstände sind auf Tablet und Handy schon passend kleiner, ein eigener Wert gilt für das gewählte Gerät (mehr dazu unter „Builder: Module & Elemente“ → Abstände). In Kopf- und Fußzeile sitzt bei den Abständen (Innen- und Außenabstand) neben der Beschriftung ein Ketten-Symbol. Ist es aktiv (verknüpft), ändert eine Eingabe alle Seiten gleichzeitig – praktisch, wenn rundum derselbe Abstand soll. Ein Klick auf die Kette trennt die Seiten wieder, dann stellst du Oben, Rechts, Unten und Links einzeln ein.
Sie entscheidet, für welche Ansicht deine nächste Änderung gilt:
- Nichts ausgewählt (Standard, darunter steht „Gilt für alle Geräte“): Der Wert gilt auf Desktop, Tablet und Handy. Nur Geräte, die für dieses Element einen eigenen Wert haben, behalten ihn – sie tragen einen kleinen Punkt am Geräte-Knopf.
- Desktop angeklickt: Die Änderung gilt nur am Computer. Tablet und Handy bleiben genau so, wie sie sind.
- Tablet oder Handy angeklickt: Die Änderung gilt nur auf diesem Gerät – darunter steht „Änderungen nur für Handy“. Das gilt für alles: Schriftgröße, Abstände, Ausrichtung, Farben, Breite, Rahmen und so weiter, auch für die Ausrichtungs-Knöpfe und A− / A+ der Textleiste, den Breiten- und Abstands-Griff im Canvas und die Design-Felder im Inhalt-Reiter.
Schaltest du oben in der Kopfleiste die Ansicht auf Tablet oder Handy, ist dieses Gerät gleich mitgewählt – was du in der Handy-Ansicht änderst, gilt nur am Handy. Zurück auf Desktop gilt wieder alles für alle Geräte.
Hat ein anderes Gerät eine eigene Ausrichtung, steht sie direkt unter dem Feld „Ausrichtung“, etwa „Am Handy: Mitte“. Mit „Überall übernehmen“ gilt diese Ausrichtung auf allen Geräten.
Willst du mehrere Ansichten gleichzeitig anpassen, hältst du beim Klick Cmd bzw. Strg gedrückt und wählst z. B. Tablet und Handy zusammen. Klickst du das einzige aktive Gerät noch einmal an, springst du zurück auf „alle Geräte“. Der Text unter den Buttons zeigt dir immer, was gerade gilt – etwa „Änderungen nur für Handy“.
Du musst also nicht jedes Feld dreimal setzen: Ohne Auswahl stellst du den Wert für alle Geräte ein und änderst danach nur, was auf einem Gerät wirklich anders sein soll. Bestehende Websites sehen dabei unverändert aus. Das gilt für jedes Design-Feld: Hintergrund, Textfarbe, Ausrichtung, Innen- und Außenabstände, Schrift, Breite, Rahmen und mehr.
Elemente auf einem Gerät ausblenden
Du willst ein großes Hero-Bild nur am Desktop zeigen, auf dem Handy aber weglassen? Wähl das Element an, geh auf den Reiter Erweitert und such den Block „Sichtbarkeit – auf Gerät ausblenden“. Dort tippst du auf Desktop, Tablet oder Handy: Rot bedeutet „auf diesem Gerät ausgeblendet“. Das funktioniert auf jeder Ebene – ganze Sektion, einzelne Zeile, Spalte oder ein einzelnes Modul. Darunter gibt es zusätzlich „Ganz ausblenden (alle Geräte)“, wenn etwas erst mal komplett verschwinden soll.
Im Editor bleibt ein ausgeblendetes Element sichtbar (blass, mit dem Etikett „Ausgeblendet“), damit du es weiter bearbeiten kannst. Du wählst es an und verschiebst es per Drag&Drop am Greifer wie jedes andere – im Canvas und im Ebenen-Baum, die Ausblende-Einstellung wandert mit. In der Kopfzeile holst du Elemente, die auf dem gewählten Gerät ausgeblendet sind, über das Augen-Symbol im Reiter „Header“ (Ausgeblendetes zeigen) hervor und ziehst sie dann an ihren Platz. Auf der veröffentlichten Seite und in der Vorschau (für die dort gewählte Ansicht) ist es auf diesem Gerät wirklich weg.
Vorschau und Bildausschnitt
Über den Button Vorschau (Auge-Symbol, oben rechts) schaltest du das Bearbeiten-Werkzeug weg und siehst die Seite pur. In der Desktop-Ansicht füllt sie den ganzen Bereich, in der Tablet- und Handy-Ansicht bleibt der Geräterahmen stehen – so beurteilst du das Mobil-Ergebnis realistisch. Ein Tipp für Bilder: Bei Modulen mit Fotos gibt es das Feld Bildausschnitt. Damit legst du fest, welcher Teil des Bildes sichtbar bleibt, wenn es auf schmalen Handy-Screens beschnitten wird – gerade bei Querformat-Fotos wichtig, damit nicht der falsche Bildteil übrig bleibt. Hat ein Element ein Hintergrundbild, stellst du unter Design → Hintergrund & Farben mit Abdunkeln die Stärke einer Farbebene über dem Bild ein und mit Farbe der Ebene ihre Farbe: Leer bleibt sie schwarz und dunkelt ab, mit Weiß oder einer anderen hellen Farbe legst du einen hellen Schleier über das Foto – etwa für dunklen Text darauf.
Inhalt gilt für alle Geräte
Im Reiter Inhalt gibt es keine Geräte-Auswahl: Texte, Bilder, Listen und die Einstellungen dort (etwa Größen, Höhen oder Spaltenzahlen eines Moduls) gelten immer für Desktop, Tablet und Handy zugleich. Ist im Design-Reiter ein Gerät gewählt, gelten die Design-Felder im Inhalt-Reiter (Ausrichtung, Schrift, Farben) nur für dieses Gerät – eine Zeile oben sagt es dir. Werte je Gerät stellst du sonst im Reiter Design ein.
Häufige Fragen
Muss ich für jedes Gerät ein eigenes Layout bauen?
Nein. Der Builder macht das Wesentliche automatisch: Spalten stapeln sich auf dem Handy, Galerien reduzieren ihre Spalten, Schriften und Abstände werden kleiner. Du greifst nur dort ein, wo du es genau anders willst – über die Geräte-Auswahl im Design-Tab.
Ich habe im Handy-Modus eine Schriftgröße geändert – warum sieht der Desktop jetzt anders aus?
Das sollte nicht passieren, solange oben im Design-Tab wirklich nur „Handy“ aktiv war. Prüf den Hinweistext unter den Geräte-Buttons: Steht dort „Änderungen nur für Handy“, gilt deine Änderung nur fürs Handy. Steht dort „Gilt für alle Geräte“, war kein Gerät ausgewählt und die Änderung gilt überall. Klick dann gezielt „Handy“ an und setz den Wert dort neu – Desktop und Tablet behalten ihren Wert.
Warum sieht meine veröffentlichte Seite auf dem Handy anders aus als die Handy-Vorschau?
Die automatischen Anpassungen (Stapeln, Spalten reduzieren, kleinere Schrift) greifen live genauso wie in der Vorschau – das passt zusammen. Deine manuellen Werte pro Gerät ebenfalls. Wenn trotzdem etwas abweicht, liegt es meist an einem sehr breiten Inhalt (z. B. eine feste Bildbreite oder eingebetteter Fremd-Code). Schau dir das Element in der Handy-Ansicht an und setz dort bei Bedarf eine kleinere Breite.
Kann ich ein Element nur auf dem Handy verstecken?
Ja. Element auswählen, Reiter „Erweitert“, Block „Sichtbarkeit – auf Gerät ausblenden“, dann auf „Handy“ tippen (wird rot). Es verschwindet auf der veröffentlichten Seite nur auf dem Handy, Desktop und Tablet bleiben unberührt. Das geht für Sektionen, Zeilen, Spalten und einzelne Module.
Welche Breiten verwendet die Geräte-Vorschau?
Desktop rechnet mit 1280 px, Tablet mit 768 px, Handy mit 390 px. Das sind gängige echte Gerätebreiten, damit die Vorschau ehrlich zeigt, wie es später aussieht. Das Canvas zoomt sich automatisch passend in den Bildschirm.
Auf dem Handy wird mein Bild komisch beschnitten – was tun?
Nutz beim betroffenen Bildmodul das Feld „Bildausschnitt“. Damit bestimmst du, welcher Bildbereich beim Beschneiden auf schmalen Screens sichtbar bleibt. Bei Querformat-Fotos, die hochkant angezeigt werden, ist das der schnellste Weg, den wichtigen Bildteil im Fokus zu halten.
Öffnet der Builder immer in der Desktop-Ansicht?
Nein, er wählt beim Öffnen die Ansicht passend zu deinem Bildschirm: am Laptop Desktop, am Tablet Tablet, am Handy Handy. Danach kannst du oben in der Leiste jederzeit frei zwischen den drei Ansichten umschalten.