Haltepunkte sind Pixelbereiche, die der Breite verschiedener Geräte entsprechen, wie z. B. Desktop, Tablet und Mobilgerät. Wenn die Breite eines Geräts innerhalb des vordefinierten Pixelbereichs eines Haltepunkts liegt, wird das Layout der Website so angepasst, dass der Inhalt und das Design für diese Größe und Ausrichtung des Geräts optimiert sind. Wenn ich zum Beispiel eine Website auf einem Desktop-Computer anschaue, kann ich das vollständige Menü der Website sehen, aber wenn ich die Website mit meinem mobilen Gerät aufrufe, sehe ich stattdessen ein Hamburger-Menü.
Im Folgenden sind die Haltepunkte aufgeführt, die im Editor angeboten werden:
-
desktop (1025px-1399px). Dies ist der Standardhaltepunkt.
-
Tablette (768px-1024px)
-
Mobil (767px und darunter). Es wird immer empfohlen, Änderungen an Haltepunkten auf Mobilgeräten auf einem Mobilgerät zu überprüfen, anstatt die Größe eines desktop Bildschirms zu ändern.
Wenn Sie Entwurfs-, Layout - oder Inhaltsänderungen am standardmäßigen desktop Haltepunkt vornehmen, werden die Änderungen automatisch auf die anderen Haltepunkte angewendet. Wenn Sie Inhalte ändern, z. B. einen widgethinzufügen, Text bearbeiten oder einen Abschnitt hinzufügen oder löschen, wird die Änderung automatisch auf alle anderen Haltepunkte angewendet, unabhängig davon, an welchem Haltepunkt die Änderung vorgenommen wurde. Wenn Sie z. B. einen widget zum Tablet-Haltepunkt hinzufügen, wird der widget auch allen anderen Haltepunkten hinzugefügt.
Wenn Sie jedoch Änderungen an der Position oder Größe eines Elements an bestimmten Haltepunkten vornehmen, werden die Änderungen nicht auf andere Haltepunkte angewendet. Wenn Sie z. B. die Größe eines Elements am Haltepunkt für Mobilgeräte ändern, gilt die Änderung nur für die Haltepunkte für Mobilgeräte und Landschaften für Mobilgeräte und nicht für andere Haltepunkte.
Mit Ausnahme der Kopf- und Fußzeile können nahezu alle Elemente im Editor gerätespezifisch bearbeitet werden.
So bearbeiten Sie Inhalte geräteabhängig:
-
Kopieren Sie den Inhalt, den Sie gerätespezifisch gestalten möchten. Klicken Sie mit der rechten Maustaste auf das widget, klicken Sie auf Kopieren und dann auf Einfügen.
-
Klicken Sie mit der rechten Maustaste auf eine der widget, wählen Sie Auf Gerät ausblenden und wählen Sie dann das Gerät aus, auf dem die widget ausgeblendet werden soll. Zum Beispiel entfernt Einstellungen a Schaltfläche to Hide on desktop die Schaltfläche aus dem desktop, zeigt die Schaltfläche jedoch auf der Tablet- und mobilen Website an.
-
Klicken Sie auf den ursprünglichen Inhalt und wählen Sie Auf Gerät ausblenden und blenden Sie dann den Inhalt auf dem/den Gerät(en) aus, auf dem/den Geräten, auf dem/den Sie diesen Inhalt nicht ändern möchten. Wenn Sie z. B. die Schaltfläche für Ihre Kopie auf "Auf desktopausblenden" setzen, legen Sie die ursprüngliche Schaltfläche auf "Auf Tablet ausblenden" und "Auf Mobilgerät ausblenden" fest. Auf diese Weise haben Sie zwei verschiedene Schaltflächen; Einer wird auf Ihrem desktop und ein anderer auf Ihrem Tablet und Handy angezeigt.
-
Wenn Sie auf allen drei Gerätetypen unterschiedliche Inhalte anzeigen möchten, können Sie den Inhalt erneut kopieren (sodass Sie drei Kopien desselben Inhalts haben) und für jedes Gerät einen eigenen Button erstellen.
-
Sie haben nun zwei (oder drei) identische und doch unterschiedliche Inhalte, die jeweils auf einem anderen Gerät angezeigt werden. Alle weiteren Änderungen an diesem Inhalt gelten nur für das Gerät, auf dem es gemäß Einstellungen angezeigt wird.
Versteckte Inhalte können weiterhin im Code der Live-Website angezeigt werden (nach der Veröffentlichung/erneuten Veröffentlichung). Dies ist zu erwarten und auf die verwendete Technologie zurückzuführen. Wenn Sie eine widget, einen Abschnitt oder einen Inhalt im Editor auf einem bestimmten Gerät ausblenden, blenden wir sie mithilfe von CSS-Medienabfragen aus. Das bedeutet, dass der HTML-Code (obwohl er auf der Website versteckt ist) immer noch auf der Webseite vorhanden ist, wenn ein Betrachter den Inhalt ansieht. Dies kann manchmal zu einem Problem führen, bei dem eine Audit- tool , die die Website scannt, diesen versteckten Inhalt identifiziert, obwohl Sie dachten, dass er von der Seite entfernt wurde.
Responsive Websites funktionieren auf Desktops, Tablets und Smartphones. Aus diesem Grund können Sie in unserem responsiven Editor beim Bearbeiten eine Vorschau der Website für diese Ansichten anzeigen lassen. So können Sie vor dem Veröffentlichen überprüfen, wie Ihre Website auf verschiedenen Geräten dargestellt wird, und sicherstellen, dass Ihre Website auf jedem Gerät gut aussieht.
Klicken Sie auf eines der Gerätesymbole in der oberen Navigationsleiste, um die Geräteansicht zu wechseln:
Bei den verschiedenen Geräteansichten handelt es sich nicht um verschiedenen Versionen Ihrer Website. Wenn Sie ein Element in einer Ansicht (z. B. für Mobilgeräte) löschen, wird das Element von der gesamten Website gelöscht (also für Desktops, Tablets und Mobilgeräte). Anstatt ein Element zu löschen, können Sie es mit der rechten Maustaste anklicken und auf einem bestimmten Gerät ausblenden.
Die Gerätevorschauen zeigen nicht immer genau das, was letztendlich tatsächlich auf einem Gerät zu sehen ist. Funktionen wie Schriftarten, die Größe des Gerätefensters, die Benutzeroberfläche und das Browser-Verhalten können zur Folge haben, dass diese Vorschauen mehr oder weniger ungenau sind. Wenn Sie ganz genau wissen möchten, wie Ihre Website auf einem bestimmten Bildschirm aussieht, testen Sie die Ansicht mit einem echten Gerät.
Änderungen, die an einem Gerät vorgenommen wurden, werden auf allen Geräten angezeigt. Wenn z.B. eine Zeile in der Tablet-Ansicht Ihrer Website gelöscht wird, fehlen die Zeilen auch in der desktop und mobilen Ansicht Ihrer Website. Dies liegt daran, dass Inhalte auf allen Geräten geteilt werden können. Möglicherweise möchten Sie jedoch unterscheiden, welche Inhalte auf welchen Geräten angezeigt werden. Sie können unsere Funktionen zum Bearbeiten nach Gerät verwenden, um dies zu erreichen und Ihren Besuchern Inhalte bereitzustellen, die für das Gerät geeignet sind, von dem aus sie auf Ihre Website zugreifen.
Wenn Sie Änderungen an einem bestimmten Gerät vornehmen, ist es oft erforderlich, die Ansicht zu wechseln. Weitere Informationen finden Sie unter Wechseln von Ansichten.
Viele Einstellungen geben an, welche Geräte sie betreffen. In den Einstellungen kann beispielsweise angegeben werden, dass sich die Änderung auf desktop und Tablet auswirkt, zusammen mit einem Symbol, das die Geräte darstellt.
Es gibt mehrere Bearbeitungsoptionen im Editor, die sich nicht auf Mobilgeräte auswirken. Dazu gehören:
-
Abstände (Außen- und Innenabstände)
-
Positionierung
-
Breite
-
Höhe
-
Website-/Seitenhintegrund
-
Schriftgröße (wirkt sich nicht auf Text aus, der zuvor für Mobilgeräte bearbeitet wurde)
-
Änderungen an der Kopf- und Fußzeile in der Tablet-Ansicht wirken sich nicht auf die desktop - und Mobilansicht aus
Jede zweite Änderung, die Sie in der Ansicht "Jedes Gerät" vornehmen, wirkt sich auf andere Geräte aus.
Zwar funktionieren einige Widgets auf allen Geräten einwandfrei, doch gibt es einige große Unterschiede zwischen den Geräten, sodass für jedes Gerät andere Features oder Designeinstellungen erforderlich sind.
Unten finden Sie eine Liste von Widgets mit Designvorschlägen und Hinweisen zur Anpassung bestimmter Widgets auf bestimmten Geräten.
Hintergrundbilder
Aufgrund der großen Unterschiede in den Seitenverhältnissen auf den verschiedenen Geräten ist es wichtig, besonders darauf zu achten, wie Sie die Bilder auf Ihrer Website gestalten. Beispielsweise kann ein ganzseitiger Hintergrund in einer Zeile auf einem Desktop-Gerät großartig aussehen, auf einem mobilen Gerät jedoch schrecklich. Das liegt daran, dass Desktop-Geräte besser für breitere Bilder geeignet sind. Auf Mobilgeräten ist jedoch das genaue Gegenteil der Fall. Sie können in den Website-Thema-Einstellungen für jedes Gerät einen anderen Seitenhintergrund einstellen. Es wird empfohlen, ein breites Hintergrundbild für den Desktop und ein schmales für Mobilgeräte oder Tablets zu verwenden.
Diashow-Widget
Wie beim Hintergrundbild sehen die Bilder, die Sie für die Desktop-Version des Diashow-Widget ausgewählt haben, möglicherweise auf Tablets oder Mobilgeräten nicht so gut aus. Sie können entweder:
-
Die Rahmengröße für die Diashow an Mobilgeräte anpassen oder
-
Die Diashow auf dem Desktop ausblenden und stattdessen eine Version speziell für Mobilgeräte erstellen.
Bilder und Icon- widget
Die Größe des Bild-Widgets wird in der mobilen Version nicht automatisch angepasst. Sie sollten auf Ihren Mobilgeräten überprüfen, wo das Bild-Widget angezeigt wird, um die notwendigen Anpassungen vornehmen zu können.
Hover-Effekte auf Mobilgeräten oder Tablets
Im Vergleich zu desktop Geräten haben Tablets und mobile Geräte überhaupt keinen Hover-Effekt. Jedes hover Layout oder jede Option ist auf Tablets/Mobilgeräten deaktiviert.
Karten-Widget
Das Karten-Widget verfügt über gerätespezifische Optionen, wann es als Schaltfläche oder Karte angezeigt wird.
Kontaktformular widget
Das Kontaktformular wird auf dem Handy immer eine Eingabe pro Zeile anzeigen.
vCita-Widget
Das vCita Online Scheduling-Widget verfügt über eine Option, bei der auf dem ausgewählten Gerät nur eine Schaltfläche angezeigt wird.
Aufgrund der Veröffentlichung von Apple für iPad (iPadOS) zeigen iPad die gleiche Ansicht wie desktopan. Sie können jedoch zum responsiven desktop-Tablet-Layout wechseln, um sicherzustellen, dass alle Anpassungen auf der Live-Website sichtbar sind.
Das responsive Layout zeigt auf größeren Desktops den Header mit der oberen Navigationsleiste an und wechselt automatisch zum Header mit dem Hamburger-Menü, wenn die Bildschirmgröße 1024 px und weniger beträgt. Das Layout für kleine Bildschirme kann, falls erforderlich, angepasst werden.
Hinweis
-
Bei den meisten Websites ist diese Funktion automatisch aktiviert und die unten angegebene Umschaltfunktion ist nicht verfügbar.
-
Bei Websites, bei denen dies nicht aktiviert wurde, wird die Option zum Deaktivieren entfernt, sobald die Option aktiviert ist.
-
Die mobile Ansicht einer mit dem klassischen Editor erstellten Website, einschließlich der Kopfzeile, wird durch das verwendete Gerät bestimmt, nicht durch die Größe eines Browserfensters. Wenn Sie also die Größe Ihres Desktop-Browsers ändern, um ein mobiles Ansichtsfenster zu simulieren, wird das Aussehen der Website oder der Kopfzeile auf den tatsächlichen mobilen Geräten nicht korrekt wiedergegeben. Um die echte mobile Darstellung der Website, einschließlich der Kopfzeile, zu sehen, ist es am besten, sie direkt auf einem mobilen Gerät anzuzeigen.
So verwenden Sie responsive Website-Layouts:
-
Klicken Sie auf Website-Layout.
-
Klicken Sie unter desktop auf den Schalter Responsives Layout. Sie haben folgende Möglichkeiten:
-
Wählen Sie ein Website-Layout für über 1024 px.
-
Wählen Sie ein Website-Layout für 1024 px und weniger.
-
Nachdem Sie zu responsiven Website-Layouts gewechselt haben, können Sie die Ansicht in der oberen Navigation wechseln, um Große desktop (über 1024 Pixel), Kleine desktop/ Tablet (1024 Pixel und darunter) und Mobilgeräte anzuzeigen. Weitere Informationen finden Sie unter Wechseln von Ansichten.
Im Folgenden finden Sie weitere Informationen zum responsiven Tablet:
-
Das CSS ist für die Haltepunkte „Großer Desktop“ und „Kleiner Desktop/Tablet“ gleich, und Sie werden kein Tablet-CSS sehen.
-
Die Übergänge sind fließender und basieren nicht auf Benutzer-Agents.
-
Wenn Sie ausgeblendete Elemente auf Ihrer Website haben, stellen Sie sicher, dass diese sichtbar sind, bevor Sie „Responsives Layout“ aktivieren. Um dies zu beheben, deaktivieren Sie „Responsives Layout“ und blenden Sie alle verborgenen Elemente wieder ein. Anschließend können Sie „Responsives Layout“ wieder aktivieren und alle ausgeblendeten Elemente wieder ausblenden.
-
Die Personalisierung zeigt kein Tablet-Gerät mehr an. Die Auswahl von „Desktop“ wirkt sich auch auf die Tablet-Ansichten aus.
-
Beachten Sie, dass die folgenden Tablet-Anpassungen automatisch das Desktop-Layout anzeigen und nicht weiter angepasst werden müssen:
-
Fotogalerie-Layouts
-
Tablet-Personalisierungsregeln
-
Animationen
-