Wie man eine Website für die Anzeige auf mobilen Geräten optimiert
Einrichten der Ansicht der Seite auf verschiedenen Geräten im sichtbaren Bereich
Der sichtbare Bereich ist eine Einstellung, die bestimmt, welche Blöcke auf bestimmten Gerätetypen angezeigt werden können und welche nicht. Sie können diesen Parameter im Einstellungsfenster 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 auf den Desktop ausgerichtet und erscheint nicht auf mobilen Geräten.
Kopieren Sie anschließend den Block und optimieren Sie ihn für die Anzeige auf mobilen Geräten, indem Sie die Einstellungen anpassen (was eine Änderung des Bildes, der Schriftart usw. beinhalten kann). Setzen Sie die Sichtbarkeit des Blocks auf "0-980px". Als Ergebnis erhalten Sie eine mobile Version des Blocks.
Diejenigen, die von einem PC aus auf Ihre Website zugreifen, sehen dann die Desktop-Version und die mobilen Nutzer die mobile Version.
Die Sichtbarkeit von Blöcken ist ein Parameter, den Sie im Einstellungsbereich eines jeden Blocks finden und anpassen können, um den Block auf Geräten mit einer bestimmten Bildschirmauflösung anzuzeigen oder nicht anzuzeigen. Einige Blöcke sehen zum Beispiel auf Tablets nicht gut aus, andere auf Mobiltelefonen.
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 Cover auf dem Handy beschnitten und sieht nicht sehr gut aus.
Um zu verhindern, dass er auf mobilen Geräten angezeigt wird, gehen Sie zum Einstellungsbereich des Cover-Blocks und setzen Sie die Sichtbarkeit des Blocks auf "> 980px". Jetzt wird er für mobile Nutzer nicht mehr sichtbar sein.
Kopieren Sie den Block.
Passen Sie den Block für die mobile Version an - ändern Sie die Ausrichtung von Foto und Text.
Da wir nun die Sichtbarkeit des Blocks auf "≤ 980px" gesetzt haben, wird er auf Geräten mit Bildschirmen, die breiter als 980px sind, nicht angezeigt.
Erledigt! Jetzt wird das Cover je nach Bildschirmbreite unterschiedlich angezeigt.
Beispiele für die Bildschirmbreite bei verschiedenen Geräten: