Bildschirmgrößen und Geräte – Duda Support

Haltepunkte (in Editor 2.0 als Bildschirmgrößen bezeichnet) sind Pixelbereiche, die der Breite verschiedener Geräte entsprechen, z. B. desktop, Tablets und Mobilgeräte. Wenn sich die Breite eines Geräts innerhalb eines vordefinierten Pixelbereichs für Haltepunkte befindet, wird das Layout der Website so angepasst, dass der Inhalt und das Design für die jeweilige Gerätegröße und -ausrichtung optimiert sind. Wenn ich beispielsweise eine Website auf einem desktop Computer ansehe, kann ich das gesamte Website-Menü anzeigen, aber wenn ich die Website auf meinem Mobilgerät ansehe, 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.
Breites desktop (1400 Pixel und mehr). Dies ist nur im Flex-Modus im klassischen Editor verfügbar.
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.
Mobiles Querformat (468px-767px). Dies ist nur im Flex-Modus im klassischen Editor verfügbar.

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.

Überschreibungen pro Bildschirmgröße (Flex-Modus und Editor 2.0)

Anmerkung

Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird .

Es gibt bestimmte Zeiten, in denen Sie einen Haltepunkt überschreiben müssen. Am Haupthaltepunkt befindet sich beispielsweise ein Bild rechts von einem Absatz, aber auf Mobilgeräten muss sich das Bild oben und der Absatz darunter befinden.

Im Folgenden finden Sie Änderungen, die Sie an einem Element vornehmen können und die den Haupthaltepunkt überschreiben:

Ausrichtung
Position
Größe
Abstände

Nachdem Sie einen Haltepunkt überschrieben haben, können Sie die Änderung nicht mehr rückgängig machen, indem Sie den Stil im Haupthaltepunkt für dasselbe Objekt ändern.

Ausblenden auf einer bestimmten Bildschirmgröße (Flex-Modus und Editor 2.0)

Anmerkung

Sie können bestimmte Elemente an bestimmten Haltepunkten über den Bereich „Ebenen“ oder das schwebende Menü des Elements ausblenden. So können Sie beispielsweise ein Bild auf mobilen Geräten ausblenden, ohne dass dies Auswirkungen auf andere Haltepunkte hat.

Hinweis

Wenn Sie ein Element ausblenden, das andere verschachtelte Elemente enthält, werden alle verschachtelten Elemente an diesem Haltepunkt ebenfalls ausgeblendet. Wenn Sie zum Beispiel eine Flex-Spalte ausblenden, werden auch die Widgets innerhalb dieser Flex-Spalte ausgeblendet.

Um ein Element an einem bestimmten Haltepunkt auszublenden:

Wechseln Sie zu dem Haltepunkt, an dem Sie das Element ausblenden möchten, indem Sie in der oberen Navigation auf die Ansicht klicken.
Klicken Sie auf das Element, das Sie ausblenden möchten.
Klicken Sie im schwebenden Menü auf das Symbol mit den drei horizontalen Punkten (), und wählen Sie An diesem Haltepunkt ausblenden aus. Oder klicken Sie im Ebenenbedienfeld an diesem Haltepunkt neben dem Element auf Ausblenden.

Auf einer bestimmten Bildschirmgröße ausblenden (klassischer Editor)

Anmerkung

Diese Informationen gelten speziell für den klassischen Editor und sind für Editor 2.0 (früher als All-Flex-Editor bezeichnet) nicht relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird .

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, der gerätespezifisch sein soll. 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.

Wechseln zwischen Geräteansichten

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.

Bearbeiten nach Gerät (klassischer Editor)

Anmerkung

Ä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.

Bearbeitungen, die sich nicht auf andere Geräte auswirken

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 andere Änderung, die Sie in der einzelnen Geräteansicht vornehmen, wirkt sich auf andere Geräte aus.

widget-spezifische Änderungen

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 Symbol- 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

Die vCita Online-Terminplanung widget bietet die Möglichkeit, nur eine Schaltfläche auf dem Gerät Ihrer Wahl anzuzeigen.

Responsives Tablet (Klassischer Editor)

Anmerkung

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 im Seitenbereich des Editors auf Design und dann auf Websitelayout.
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 sind, können Sie in der oberen Navigation die Ansicht wechseln, um „Großer desktop (über 1024 Pixel), „Kleiner desktop/Tablet“ (1024 Pixel und darunter) und „Mobil“ anzuzeigen. Weitere Informationen finden Sie unter Wechseln von Ansichten.

Wichtige Hinweise zu Responsive Tablet

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