Wie man eine Website für die Anzeige auf mobilen Geräten optimiert
Einstellen der Ansicht der Seite auf verschiedenen Geräten
Tilda passt die Website automatisch an die Darstellung auf Tablets, Smartphones, Netbooks, Laptops und Computern an.
Außerdem können Sie die Größe der Abstände zwischen den Blöcken für mobile Geräte ändern, die Sichtbarkeit der Blöcke auf verschiedenen Geräten anpassen, mit dem Zero Block Editor eine eigene adaptive Version erstellen oder die Adaptivität der Website ausschalten.
Wie man verschiedene Blockversionen für Computer und mobile Geräte erstellt
So ändern Sie die Werte der Auffüllungen für mobile Geräte
Ändern der Schriftgröße, des Zeilenabstands sowie des Randradius und der äußeren Abstände von Bildern für Cover für mobile Geräte
So bearbeiten Sie die mobile Version und sehen die Änderungen auf einen Blick
Wie Sie Ihre eigene Website-Version für mobile Geräte mit dem Zero Block Editor erstellen
Ausschalten der Website-Anpassung für verschiedene Bildschirme
Sichtbarkeit auf Geräten blockieren
Diese Einstellung legt fest, welche Blöcke auf bestimmten Gerätetypen angezeigt werden können und welche nicht. Sie können diese Funktion in den Einstellungen eines jeden Blocks anpassen.
Warum Sie es vielleicht brauchen und wie es funktioniert
Wenn ein Block auf dem Desktop gut aussieht, aber auf dem Handy nicht so gut, sollten Sie die Sichtbarkeit des Blocks auf 980px oder mehr einstellen. Auf diese Weise wird der Block desktoporientiert und erscheint nicht auf mobilen Geräten.
Dann müssen Sie diesen Block kopieren und für die Anzeige auf mobilen Geräten optimieren, indem Sie die Einstellungen anpassen (z. B. das Bild, die Schriftgröße usw.). Setzen Sie die Sichtbarkeit des Blocks auf "0-980px". Sie erhalten eine mobile Version des Blocks.
So sehen diejenigen, die von einem PC aus auf Ihre Website zugreifen, die Desktop-Version und die mobilen Nutzer die mobile Version.
Die Sichtbarkeit des Blocks (verschiedene Werte der Parameter) ist nützlich, damit Sie das Aussehen des Blocks für ein bestimmtes Gerät anpassen können, indem Sie die Auflösung auswählen, wenn Sie dies benötigen. Zum Beispiel, wenn einige Blöcke auf Tablets oder auf bestimmten Mobiltelefonen nicht gut aussehen.
Wenn ein Block auf dem Desktop gut aussieht, aber auf dem Handy nicht so gut, sollten Sie die Sichtbarkeit des Blocks auf 980px oder mehr einstellen. Auf diese Weise wird der Block desktoporientiert und erscheint nicht auf mobilen Geräten.
Dann müssen Sie diesen Block kopieren und für die Anzeige auf mobilen Geräten optimieren, indem Sie die Einstellungen anpassen (z. B. das Bild, die Schriftgröße usw.). Setzen Sie die Sichtbarkeit des Blocks auf "0-980px". Sie erhalten eine mobile Version des Blocks.
So sehen diejenigen, die von einem PC aus auf Ihre Website zugreifen, die Desktop-Version und die mobilen Nutzer die mobile Version.
Die Sichtbarkeit des Blocks (verschiedene Werte der Parameter) ist nützlich, damit Sie das Aussehen des Blocks für ein bestimmtes Gerät anpassen können, indem Sie die Auflösung auswählen, wenn Sie dies benötigen. Zum Beispiel, wenn einige Blöcke auf Tablets oder auf bestimmten Mobiltelefonen nicht gut aussehen.
Es ist nicht notwendig, die Einstellung für die Blocksichtbarkeit für alle Blöcke zu ändern. Sie können sie für die Blöcke anpassen, bei denen ein Foto nicht gut beschnitten ist, oder wenn der ausgewählte Block nicht für die mobile Version geeignet ist.
Beispiel
Wir haben ein Cover, das auf dem Desktop gut aussieht, mit dem Text auf der linken Seite und dem Hauptobjekt auf der rechten Seite. Jetzt müssen wir es so anpassen, dass es auch auf mobilen Geräten gut aussieht.
Wie wir sehen, wird das Foto auf einem Mobiltelefon beschnitten und sieht nicht sehr gut aus.
Setzen Sie die Sichtbarkeit des Blocks auf "> 980px". Jetzt wird er von mobilen Nutzern nicht mehr gesehen.
Kopieren Sie den Block.
Passen Sie den Block für die mobile Version an - ändern Sie die Ausrichtung von Foto und Text.
Setzen wir die Sichtbarkeit dieses Blocks auf "≤ 980px", wird er auf Geräten mit Bildschirmen breiter als 980px nicht angezeigt.
Erledigt! Jetzt wird das Cover auf verschiedenen Geräten je nach Bildschirmbreite unterschiedlich angezeigt.
Beispiele für die Bildschirmbreite bei verschiedenen Geräten:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Einstellen der Abstände für mobile Geräte
Öffnen Sie in einem beliebigen Block die Einstellungen, klicken Sie auf das Symbol neben der Option "Top padding" und "Bottom padding" und legen Sie die Abstände für das mobile Gerät fest.
Zusätzliche Einstellungen für mobile Geräte
In jedem Block können Sie auch die Schriftgröße und den Zeilenabstand für mobile Geräte ändern und für Bilder separat abgerundete Ecken festlegen.
Ändern der Schriftgröße und des Zeilenabstands für mobile Geräte
Klicken Sie dazu auf die Schaltfläche "Einstellungen" des Blocks und suchen Sie die Registerkarte "Typografie". In dieser Registerkarte klicken Sie auf das Computersymbol neben dem Feld. Daraufhin wird ein Feld eingeblendet, in dem Sie die Schriftgröße für die mobile Version angeben können.
Die gleiche Reihenfolge der Aktionen gilt für die Änderung des Zeilenabstands.
Die gleiche Reihenfolge der Aktionen gilt für die Änderung des Zeilenabstands.
Ändern des Radius des Bildrandes und des Abdeckungspolsters für mobile Geräte
Sie können in allen Blöcken der Kategorien "Cover" und "Bild" einen eigenen Wert für den Randradius oder die äußere Polsterung für Cover speziell für mobile Geräte festlegen.
Um den Radius oder die Polsterung zu ändern, klicken Sie auf die Schaltfläche "Einstellungen" und suchen Sie das entsprechende Feld. Klicken Sie auf das Computersymbol neben dem Feld und geben Sie den neuen Wert in das neue Feld ein.
Um den Radius oder die Polsterung zu ändern, klicken Sie auf die Schaltfläche "Einstellungen" und suchen Sie das entsprechende Feld. Klicken Sie auf das Computersymbol neben dem Feld und geben Sie den neuen Wert in das neue Feld ein.
Anzeige der mobilen Version von Blöcken im Editor
Diese Funktion ist nur im Testmodus verfügbar. Um darauf zuzugreifen, aktivieren Sie in Ihrem Profil das Kontrollkästchen "Beta-Tester werden und neue Funktionen ausprobieren, bevor sie veröffentlicht werden".
Um die mobile Version eines Blocks zu bearbeiten, schalten Sie die Anzeige im Editor auf die mobile Version um. Klicken Sie dazu im Menü oben auf das Telefonsymbol und wählen Sie die gewünschte Geräteausrichtung oder -größe aus.
Standardmäßig sind 4 Bildschirmgrößen verfügbar: 360px und 480px für ein Smartphone, 640px und 960px für ein Tablet.
Um eine andere Größe des mobilen Geräts auszuwählen, klicken Sie in der Liste auf "Geräte". Wählen Sie im Untermenü das gewünschte Gerät aus. Alle aktualisierten Mobilgeräte und Tablets sind bereits in die Liste aufgenommen worden.
Nachdem Sie den Anzeigemodus des Blocks im Editor umgestellt haben, klicken Sie auf die Schaltfläche "Einstellungen" des Blocks. Nun können Sie die mobile Version konfigurieren und die Änderungen werden sofort in der Vorschau angezeigt.
Einrichten der Adaptivität in Zero Block
Sie können die Anpassungsfähigkeit des Blocks für verschiedene Geräte anpassen, indem Sie ihn mit einer Option in den Blockeinstellungen in einen Zero Block umwandeln. Diese Option ist derzeit in den meisten Blöcken verfügbar.
Sobald der Block konvertiert ist, können Sie sein Aussehen manuell für fünf Versionen von Bildschirmbreiten anpassen. Weitere Informationen zum Einrichten der Anpassungsfähigkeit in Zero Block finden Sie in den Abschnitten "Zero Block: Wie man einen benutzerdefinierten Block erstellt" und "Zero Block: Responsive Design".
Ausschalten der Seitenanpassung
Wenn Sie die Anpassungsfähigkeit ausschalten, sieht die Seite auf mobilen Geräten genauso aus wie auf einem Computer. Aktivieren Sie dazu das Kontrollkästchen Mobile Ansicht deaktivieren in Seiteneinstellungen → Zusätzlich und veröffentlichen Sie die Seite erneut.
Die für mobile Geräte angepasste Version der Website befindet sich links, die Website mit ausgeschalteter Adaptivität rechts.
