Haltepunkte (auch Bildschirmgrößen genannt) sind Pixelbereiche, die der Breite verschiedener Geräte wie Desktop, Tablet und Handy entsprechen. Wenn die Breite eines Geräts innerhalb eines vordefinierten Pixelbereichs für Breakpoints liegt, wird das Layout der Website angepasst, sodass Inhalt und Design für diese Gerätegröße und Ausrichtung optimiert sind. Wenn ich beispielsweise eine Website auf einem Desktop-Computer betrachte, kann ich das gesamte Seitenmenü anzeigen, aber wenn ich die Website auf meinem Mobilgerät betrachte, sehe ich stattdessen ein Hamburger-Menü
Tipp
Nimm die von der Duda Academy Bildschirmgrößen für responsives Design In diesem Kurs erfährst du mehr über Bildschirmgrößen, die Manipulation des Layouts und die Reihenfolge, in der Elemente auf Tablet- und Mobilversionen deiner Website angezeigt werden.
Im Folgenden sind die im Editor angebotenen Breakpoints aufgeführt:
-
Desktop (1025px-1399px). Dies ist der Standard-Breakpoint.
-
Breiter Desktop (1400px und höher). Dies ist nur im Flex-Modus im Classic Editor verfügbar.
-
Tablett (768 x 1024 Pixel)
-
Mobil (767px und darunter). Wir empfehlen immer, die Änderungen an mobilen Breakpoints auf einem Mobilgerät zu überprüfen, anstatt die Größe eines Desktop-Bildschirms zu ändern
-
Mobile Landschaft (468px-767px). Dies ist nur im Flex-Modus im Classic Editor verfügbar.
Wenn du machst Entwurf, Grundriss oder Inhalt Änderungen am Standard-Desktop-Haltepunkt, die Änderungen werden automatisch auf die anderen Breakpoints angewendet. Wenn Sie Inhalte ändern, z. B. ein Widget hinzufügen, Text bearbeiten oder einen Abschnitt hinzufügen oder löschen, gilt die Änderung automatisch für alle anderen Breakpoints, unabhängig davon, an welchem Breakpoint die Änderung vorgenommen wurde. Wenn Sie beispielsweise dem Tablet-Haltepunkt ein Widget hinzufügen, wird das Widget auch an allen anderen Haltepunkten hinzugefügt
Wenn Sie jedoch Änderungen an der vornehmen Position oder Größe Wenn sich ein Element an bestimmten Breakpoints befindet, gelten die Änderungen nicht für andere Breakpoints. Wenn Sie beispielsweise die Größe eines Elements am mobilen Breakpoint ändern, gilt die Änderung nur für die Breakpoints Mobile und Mobile Landscape und nicht für andere Breakpoints
Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Um Ihre aktuelle Editor-Version zu identifizieren, sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
Es gibt bestimmte Zeiten, in denen Sie einen Breakpoint überschreiben müssen. Beispielsweise befindet sich am Haupt-Breakpoint ein Bild rechts neben einem Absatz, aber auf Mobilgeräten muss das Bild oben und der Absatz darunter sein
Die folgenden Änderungen können Sie an einem Element vornehmen und den Haupt-Breakpoint überschreiben:
-
Ausrichtung
-
Stellung
-
Größe
-
Abstand
Sobald Sie einen Breakpoint überschrieben haben, können Sie die Änderung nicht rückgängig machen, indem Sie den Stil im Haupt-Breakpoint desselben Objekts ändern.
Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Um Ihre aktuelle Editor-Version zu identifizieren, sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
Sie können bestimmte Elemente an bestimmten Haltepunkten im Ebenenbedienfeld oder im schwebenden Menü des Elements ausblenden. Sie können beispielsweise ein Bild auf Mobilgeräten ausblenden, ohne dass sich dies auf andere Breakpoints auswirkt
Anmerkung
Wenn Sie ein Element ausblenden, das andere verschachtelte Elemente enthält, werden alle verschachtelten Elemente auch an diesem Breakpoint ausgeblendet. Wenn Sie beispielsweise eine flexible Spalte ausblenden, werden auch die Widgets in dieser flexiblen Spalte ausgeblendet
Um ein Element an einem bestimmten Breakpoint auszublenden:
-
Wechseln Sie zu dem Breakpoint, an dem Sie das Element ausblenden möchten, indem Sie in der oberen Navigationsleiste auf die Ansicht klicken.
-
Klicken Sie auf das Element, das Sie ausblenden möchten.
-
Klicken Sie auf das Symbol mit den drei horizontalen Punkten (
) im schwebenden Menü und wählen Sie An diesem Haltepunkt ausblenden aus. Oder klicken Sie im Ebenenbedienfeld aufAn diesem Haltepunkt ausblendenneben dem Element.
Anmerkung
Diese Informationen sind spezifisch für den Classic Editor und nicht relevant für Editor 2.0 (früher bekannt als All-Flex Editor). Um Ihre aktuelle Editor-Version zu identifizieren sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
Fast alles im Editor, mit Ausnahme der Kopf- und Fußzeile, kann pro Gerät bearbeitet werden, indem der Inhalt für dieses Gerät spezifisch angepasst wird.
So bearbeiten Sie Inhalte pro Gerät:
-
Kopieren Sie den Inhalt, den Sie gerätespezifisch haben möchten. Klicken Sie mit der rechten Maustaste auf das Widgetkopieren, dann klicken Sieeinfügen.
-
Klicken Sie mit der rechten Maustaste auf eines der Widgets und wählen SieAuf dem Gerät versteckenund wählen Sie dann das Gerät aus, auf dem das Widget ausgeblendet werden soll. Setzen Sie beispielsweise eine Schaltfläche aufAuf dem Desktop ausblendenentfernt die Schaltfläche vom Desktop, zeigt sie jedoch auf den Websites für Tablets und Mobilgeräte an.
-
Klicken Sie auf den Originalinhalt und wählen SieAuf dem Gerät versteckenund blenden Sie dann den Inhalt auf den Geräten aus, auf denen Sie diesen Inhalt nicht ändern möchten. Zum Beispiel, wenn Sie Ihre Kopierschaltfläche auf setzenAuf dem Desktop ausblenden, würden Sie die ursprüngliche Schaltfläche auf setzenAuf dem Tablet versteckenundAuf dem Handy verstecken. Auf diese Weise haben Sie zwei verschiedene Schaltflächen; eine wird auf Ihrem Desktop und eine andere auf Ihrem Tablet und Handy angezeigt.
-
Wenn Sie möchten, dass der Inhalt auf allen drei Geräten unterschiedlich ist, können Sie ihn erneut kopieren (sodass Sie insgesamt drei Kopien desselben Inhalts haben) und auf jedem Gerät eine andere Schaltfläche anzeigen lassen.
-
Sie haben jetzt zwei (oder drei) identische, aber unterschiedliche Inhalte, die jeweils auf einem anderen Gerät angezeigt werden. Alle weiteren Änderungen, die an diesem Inhalt vorgenommen werden, wirken sich nur auf das Gerät aus, auf dem er angezeigt werden soll.
Versteckte Inhalte werden möglicherweise immer noch im Code der Live-Site angezeigt (nach der Veröffentlichung/erneuten Veröffentlichung). Dies wird erwartet und ist auf die verwendete Technologie zurückzuführen. Wenn Sie ein Widget, einen Abschnitt oder einen beliebigen Inhalt im Editor auf einem bestimmten Gerät ausblenden, blenden wir ihn 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 sich ein Betrachter den Inhalt ansieht. Dies kann manchmal zu einem Problem führen, bei dem ein Audit-Tool, das die Website scannt, diesen versteckten Inhalt identifiziert, obwohl Sie dachten, er sei von der Seite entfernt worden.
Responsive Websites funktionieren auf Desktop, Tablet und Handy. Aus diesem Grund können Sie mit unserem responsiven Editor während der Bearbeitung eine Vorschau der Website in jeder dieser Ansichten anzeigen. Auf diese Weise können Sie überprüfen, wie Ihre Website auf verschiedenen Geräten aussieht, bevor Sie sie veröffentlichen, und so sicherstellen, dass Ihre Kunden unabhängig davon, mit welchem Gerät sie die Website aufrufen, ein positives Erlebnis haben.
Um die Geräteansicht zu wechseln, klicken Sie auf eine der Geräteschaltflächen in der oberen Navigationsleiste:
Die verschiedenen Geräteansichten sind keine separaten Versionen Ihrer Website. Wenn Sie ein Element in einer Ansicht löschen (z. B. auf einem Mobilgerät), wird dieses Element von der gesamten Website (Desktop, Tablet und Handy) entfernt. Anstatt es zu löschen, klicken Sie mit der rechten Maustaste auf das Element und wählen Sie, ob ein Element auf einem bestimmten Gerät ausgeblendet werden soll.
Gerätevorschauen geben nicht immer genau das wieder, was Sie auf einem tatsächlichen Gerät sehen. Funktionen wie Schriftarten, Größe des Gerätefensters, Benutzeroberfläche und Browserverhalten können dazu führen, dass diese Vorschauen in unterschiedlichem Maße ungenau sind. Die genaueste Version der Website finden Sie auf einem echten Gerät
Anmerkung
Diese Informationen sind spezifisch für den Classic Editor und nicht relevant für Editor 2.0 (früher bekannt als All-Flex Editor). Um Ihre aktuelle Editor-Version zu identifizieren sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
einem Gerät vorgenommene Änderungen werden auf allen Geräten angezeigt. Wenn beispielsweise eine Zeile in der Tablet-Ansicht Ihrer Website gelöscht wird, fehlt die Zeile auch in den Desktop- und Mobilansichten Ihrer Website. Das 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. Dazu kannst du unsere Funktionen zur gerätespezifischen Bearbeitung verwenden und deinen Besuchern Inhalte anbieten, die für das Gerät geeignet sind, von dem aus sie auf deine Website zugreifen.
Wenn Sie Änderungen an einem bestimmten Gerät vornehmen, müssen Sie häufig zwischen den Ansichten wechseln. Weitere Informationen finden Sie unterAnsichten wechseln.
Viele Einstellungen geben an, auf welche Geräte sie sich auswirken. Beispielsweise kann in einer Einstellung die Meldung „Änderung wirkt sich auf Desktop und Tablet“ aus, zusammen mit einem Symbol, das die Geräte darstellt, angezeigt werden.
Es gibt mehrere Änderungen im Editor, die geändert werden können, ohne dass dies Auswirkungen auf das Handy hat. Dabei handelt es sich
-
Abstand (Ränder und Abstand)
-
Positionierung
-
Breite
-
Höhe
-
Seite/Seitenhintergrund
-
Schriftgröße (es wirkt sich nicht auf Text aus, der zuvor auf dem Handy bearbeitet wurde)
-
Änderungen an der Kopf- und Fußzeile in der Tablet-Ansicht wirken sich nicht auf die Desktop- und Mobilansicht aus
Jede weitere Bearbeitung, die Sie in der Ansicht „Jedes Gerät“ vornehmen, wirkt sich auf andere Geräte aus.
Während einige Widgets auf allen Geräten einwandfrei funktionieren, gibt es einige drastische Unterschiede zwischen den Geräten, sodass für jedes Gerät unterschiedliche Funktionen oder Designeinstellungen erforderlich sind.
Unten finden Sie eine Liste von Widgets mit Designvorschlägen und Hinweisen zum Anpassen bestimmter Widgets auf bestimmten Geräten.
Bilder im Hintergrund
Aufgrund der drastischen Unterschiede in den Seitenverhältnissen zwischen den Geräten ist es wichtig, bei der Gestaltung von Bildern auf Ihrer Website besondere Sorgfalt walten zu lassen. Beispielsweise sieht ein ganzseitiger Hintergrund in einer Reihe auf einem Desktop-Gerät vielleicht toll aus, auf einem Mobilgerät jedoch schrecklich. Dies könnte daran liegen, dass Desktop-Geräte eher für Bilder mit größerer Breite geeignet sind, während Mobilgeräte genau das Gegenteil sind. In den Einstellungen für das Website-Design kannst du für jedes Gerät einen anderen Seitenhintergrund festlegen. Es wird empfohlen, ein breites Hintergrundbild für den Desktop und ein schmales für Mobilgeräte oder Tablets zu verwenden.
Slider-Widget
Wie beim Hintergrundbild sehen die Bilder, die Sie für die Desktop-Version des Slider-Widgets ausgewählt haben, für Tablet oder Desktop möglicherweise nicht so gut aus. Es wird empfohlen, entweder:
-
Passen Sie die Rahmengröße so an, dass der Slider auf das Handy passt, oder
-
Verstecken Sie den Slider auf dem Desktop und erstellen Sie stattdessen eine Version speziell für Mobilgeräte.
Bild- und Icon-Widget
Die Größe des Bild-Widgets wird in der mobilen Version nicht automatisch angepasst. Es ist wichtig, dass Sie auf Ihren Mobilgeräten überprüfen, auf denen das Bild-Widget verwendet wird, um die erforderlichen Anpassungen vorzunehmen.
Hover-Effekte auf dem Handy oder Tablet
Im Vergleich zu Desktop-Geräten haben Tablet- und Mobilgeräte überhaupt keinen Hover-Effekt. Jedes Hover-Layout oder jede Hover-Option ist auf Tablets/Mobilgeräten deaktiviert
Karten-Widget
Das Karten-Widget verfügt über gerätespezifische Optionen, mit denen festgelegt wird, wann es als Schaltfläche oder Karte angezeigt wird.
Kontaktformular-Widget
Kontaktformulare werden auf Mobilgeräten immer mit einer Eingabe pro Zeile angezeigt.
vcita-Widget
Das vcita Online-Scheduling Widget bietet die Option, nur eine Schaltfläche auf dem Gerät Ihrer Wahl anzuzeigen.
Anmerkung
Diese Informationen sind spezifisch für den Classic Editor und nicht relevant für Editor 2.0 (früher bekannt als All-Flex Editor). Um Ihre aktuelle Editor-Version zu identifizieren sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
AufgrundApples Veröffentlichung für iPads (iPadOS), iPads zeigen dieselbe Ansicht wie der Desktop an. Sie können jedoch zum responsiven Desktop-Tablet-Layout wechseln, um sicherzustellen, dass alle Anpassungen auf Live-Websites sichtbar sind
responsive Layout zeigt auf größeren Desktops die obere Navigationsüberschrift an und wechselt automatisch zur Hamburger-Menüüberschrift, wenn die Bildschirmgröße 1024 Pixel und darunter beträgt. Das kleine Bildschirmlayout kann bei Bedarf angepasst werden
Anmerkung
-
Auf den meisten Websites ist diese Funktion automatisch aktiviert und der unten angegebene Schalter ist nicht verfügbar.
-
Bei Websites, auf denen dies nicht aktiviert wurde, wird die Option zum Ausschalten entfernt, sobald es aktiviert ist.
-
Die mobile Ansicht einer im klassischen Editor erstellten Website, einschließlich des Headers, wird durch das verwendete Gerät bestimmt, nicht durch die Größe eines Browserfensters. Wenn Sie die Größe Ihres Desktop-Browsers ändern, um einen mobilen Viewport zu simulieren, wird daher nicht genau wiedergegeben, wie die Website oder der Header auf tatsächlichen Mobilgeräten aussieht. Um die tatsächliche mobile Darstellung der Website, einschließlich des Headers, zu sehen, empfiehlt es sich, sie direkt auf einem Mobilgerät anzusehen
So verwendest du responsives Seitenlayout:
-
Klicken Sie Layout der Seite.
-
Klicken Sie unter Desktop aufResponsives Layoutumschalten. Sie haben die folgenden Optionen:
-
Wählen Sie ein Seitenlayout für über 1024 Pixel.
-
Wählen Sie ein Seitenlayout für 1024px und darunter.
-
Nachdem du zu responsiven Seitenlayouts gewechselt hast, kannst du in der oberen Navigationsleiste zwischen den Ansichten „Großer Desktop“ (über 1024 Pixel), „Kleiner Desktop/Tablet“ (1024 Pixel und darunter) und „Mobil“ wechseln.Ansichten wechseln.
Im Folgenden finden Sie zusätzliche Informationen zum responsiven Tablet:
-
Das CSS ist für die Breakpoints Large Desktop und Small Desktop/Tablet identisch, und Sie werden kein Tablet-CSS sehen.
-
Die Übergänge sind reibungsloser und basieren nicht auf Benutzeragenten.
-
Wenn du versteckte Elemente auf deiner Website hast, stelle sicher, dass sie sichtbar sind, bevor du das Responsive Layout aktivierst. Um das Problem zu beheben, schalte das Responsive Layout aus und blende alle versteckten Elemente ein. Anschließend können Sie das Responsive Layout aktivieren und alle versteckten Elemente wieder ausblenden
-
Bei der Personalisierung wird kein Tablet-Gerät mehr angezeigt. Die Auswahl des Desktops wirkt sich auch auf die Tablet-Ansichten
-
Beachten Sie, dass bei den folgenden Tablet-Anpassungen automatisch das Desktop-Layout angezeigt wird, sodass sie nicht angepasst werden müssen:
-
Layouts der Fotogalerie
-
Regeln für die Tablet-Personalisierung
-
Animationen
-