Alles, was Sie über die anpassbaren Haltepunkte von Divi 5 wissen müssen

Machen Sie sich bereit, die Art und Weise, wie Sie Websites erstellen, drastisch zu verbessern. Divi 5 verfügt über eine aufregende neue Funktion, anpassbare Haltepunkte, die Ihnen eine unglaubliche Kontrolle über die Reaktionsfähigkeit Ihrer Website erhalten. Mit den neuen anpassbaren Haltepunkten von Divi 5 können Sie ein nahtloses Erlebnis auf allen Geräten erstellen. Unabhängig davon, ob Sie ein massives Desktop-Display oder den kleinsten mobilen Bildschirm entwerfen, divi 5 hilft sicher, dass Ihre Website jedes Mal pixel-perfekt aussieht.

In diesem Beitrag werden wir alles abdecken, was Sie über diese neue Funktion wissen und Ihnen zeigen, wie Sie sie verwenden können!

Schauen Sie sich das folgende Video an, um die neue Funktion in Aktion anzuzeigen.

Laden Sie Divi 5 mit anpassbaren Haltepunkten herunter

Mit anpassbaren Haltepunkten können Sie jetzt die Reaktion der Website für die Vernetzung verschiedener Bildschirmgrößen besser abstellen. Egal, ob Sie ultra-weite Desktops oder breite mobile Bildschirme entwerfen, Divi 5 legt die Kontrolle in Ihre Hände.

Kann ich Divi 5 auf meiner Website bereits verwenden?

Sie können Divi 5 auf Ihrer Website verwenden, aber die Verfügbarkeit hängt von Ihrem spezifischen Anwendungsfall ab. Divi 5 befindet sich derzeit in der öffentlichen Alpha -Phase, was bedeutet, dass es immer noch aktiv entwickelt und verfeinert wird. Obwohl es für alle Produktionsumgebungen noch nicht empfohlen wird, gibt es bestimmte Szenarien, in denen Sie es ohne Probleme verwenden können.

Verwenden Sie Divi 5 auf lokalen und Staging -Websites

DIVI 5 ist derzeit für lokale und Staging -Umgebungen erhältlich, sodass Benutzer ihre neuen Funktionen sicher testen können, ohne sich auf ihre Live -Websites auszuwirken. Da Divi 5 noch in der öffentlichen Alpha -Phase liegt, stellt dieser Ansatz sicher, dass Benutzer mit den Verbesserungen von Divi 5 experimentieren, Fehler melden und Feedback geben und gleichzeitig die Stabilität ihrer Produktionsstandorte beibehalten können.

Sie können Divi 5 auf neuen Produktionswebsites sicher verwenden

Divi 5 ist stabil und bereit, brandneue Websites zu starten. Wenn Sie von vorne anfangen, können Sie seine schnelle Leistung, modulare Framework und zukunftssichere Technologie voll ausnutzen, ohne sich über Probleme mit Rückwärtskompatibilität zu sorgen. Eine gründliche Testphase ist jedoch für bestehende Standorte, die vor der Migration auf umfangreiche Integrationen von Drittanbietern beruhen, von wesentlicher Bedeutung. Zu diesem Zeitpunkt empfehlen wir immer noch nicht, vorhandene Websites in Divi 5 konvertieren.

Verständnis der anpassbaren Haltepunkte von Divi

Haltepunkte sind ein grundlegender Aspekt des reaktionsschnellen Designs. Sie fungieren als Schwellenwerte, an denen sich der Inhalt Ihrer Website neu organisiert, um eine optimale Benutzererfahrung zu gewährleisten, unabhängig davon, ob jemand auf einem Smartphone, einem Tablet oder einem Desktop surft.

Die Haltepunkte von Divi 5 wurden erheblich verbessert und bieten mehr Flexibilität und Kontrolle als frühere Versionen von Divi. Durch das Anpassen von bis zu sieben Haltepunkten können Sie die Reaktionsfähigkeit Ihrer Website fein abstellen, um eine breitere Palette von Geräten und Bildschirmgrößen aufzunehmen.

Was ist ein Haltepunkt?

Ein Haltepunkt ist eine bestimmte Bildschirmbreite, an der sich das Design Ihrer Website anpasst, um ein optimales Anzeigenerlebnis auf verschiedenen Geräten zu bieten. Haltepunkte helfen, sicherzustellen, dass Ihr Inhalt lesbar, visuell ansprechend und einfach zu navigieren ist, unabhängig von der Bildschirmgröße.

Responsive Websites werden mit CSS -Medienabfragen entwickelt, mit denen verschiedene Stile angewendet werden können, wenn ein Bildschirm eine bestimmte Breite erreicht. Wenn die Bildschirmgröße eines Besuchers einen definierten Haltepunkt überschreitet, passt die Website automatisch das Layout, Schriftarten, Abstand oder andere Designelemente an, um die Benutzerfreundlichkeit aufrechtzuerhalten.

Mit der Einführung weiterer Haltepunkte in Divi 5 können Sie die Notwendigkeit von CSS -Medienabfragen einschränken, Breakpoints für andere Geräte zu definieren.

Wie viele Haltepunkte sollte ich verwenden?

Die Anzahl der Haltepunkte hängt von der Geräteverwendung Ihres Publikums ab. Benutzer zugreifen auf Websites auf verschiedenen Bildschirmgrößen, von kleinen Smartphones bis hin zu ultra-weiten Desktop-Bildschirmen. Traditionell haben Webdesigner drei Standard -Haltepunkte verwendet - Desktop, Tablet und Mobile -, aber Divi 5 erweitert diese Fähigkeit und ermöglicht bis zu 7 anpassbare Haltepunkte für eine größere Flexibilität.

Wird das Aktivieren von mehr Haltepunkten meine Website verlangsamen?

Nein, das Aktivieren von mehr Haltepunkten in Divi 5 verlangsamt Ihre Websites nicht. Im Gegensatz zu älteren Methoden zur Behandlung von Responsive Design ist das neue Framework von Divi 5 für die Leistung optimiert, um sicherzustellen, dass zusätzliche Haltepunkte Ihrer Website keine unnötige Last hinzufügen.

Werden Haltepunkte auf einer Website oder einer Seitenebene aktiviert?

Haltepunkte in Divi 5 sind auf Website-Ebene aktiviert und angewendet, nicht auf der Basis pro Seiten. Sobald Sie Breakpoints aktiviert und anpassen, wirken sie sich auf die gesamte Website aus und gewährleisten ein konsistentes, reaktionsschnelles Design auf allen Seiten. Jede Änderung, die Sie an Haltepunkten vornehmen, passt allgemein an, wie Ihre Website auf verschiedene Bildschirmgrößen reagiert, anstatt auf einzelne Seiten beschränkt zu sein.

Wie anpassbare Haltepunkte in Divi funktionieren

Das hochflexible und intuitive System von Divi 5 eignet sich perfekt für die Verwaltung von Haltepunkten und bietet Ihnen eine größere Kontrolle über das reaktionsschnelle Design Ihrer Website. Im Gegensatz zu früheren Versionen können Sie DIVI 5 bis zu 7 Haltepunkte anpassen und sicherstellen, dass Ihre Website auf jedem Gerät perfekt aussieht. Dieses System ist so konzipiert, dass er benutzerfreundlich ist und gleichzeitig erweiterte Optionen für diejenigen bietet, die sie benötigen.

Wo kann man Haltepunkte finden

In Divi 5 werden Breakpoints in Ihre Seiteneinstellungen integriert, wodurch sie einfach zu finden und anzupassen können. Sie können auf sie direkt im visuellen Bauunternehmer zugreifen und einen optimierten Workflow sicherstellen.

So aktivieren Sie Bruchpunkte

Öffnen Sie die Seite, die Sie bearbeiten und aktivieren möchten, indem Sie den visuellen Builder mit Divi auf Bearbeiten klicken.

Klicken Sie auf das Ellipsis -Menü (drei Punkte) in der Haupt -Taskleiste des Visual Builder.

In den Einstellungen finden Sie eine Reihe von Kippschalter, mit denen Sie bei Bedarf Haltepunkte aktivieren oder deaktivieren können.

Sobald Sie aktiviert sind, ist jeder Haltepunkt in der Taskleiste sichtbar, sodass Sie Änderungen in Ihrem Design vornehmen können, ohne auf Responsive Controls in einzelnen Zeilen oder Modulen zu klicken, um Einstellungen anzupassen.

Sollten Sie Standard -Haltepunkte oder Ihre eigenen verwenden?

Die Standard -Haltepunkte von Divi 5 sind so ausgelegt, dass sie die häufigsten Bildschirmgrößen, einschließlich Telefone, Tablets und Desktops, abdecken. Diese vordefinierten Haltepunkte sind für viele Designer mehr als ausreichend, da sie den meisten Benutzern und Geräten gerecht werden.

Es gibt jedoch Szenarien, in denen das Erstellen benutzerdefinierter Haltepunkte von Vorteil sein kann. Wenn Sie beispielsweise ultra-weite Monitore, faltbare Smartphones oder kleinere Tablets aufnehmen möchten, können benutzerdefinierte Haltepunkte Ihnen helfen, Ihr Design für diese Anwendungsfälle zu ändern.

Verwenden benutzerdefinierter Haltepunkte in Divi 5

Das Anpassen reaktionsschneller Breakpoints ist nützlich, um Design -Quirks oder Inhaltsanzeigeprobleme auf weniger häufigen Geräten oder Bildschirmauflösungen anzuzeigen. Sie können auch dazu beitragen, die Website der Website zu verbessern, indem sie nur die erforderlichen Stile für eine bestimmte Bildschirmgröße laden und die Ladezeiten der Seiten verringern.

Zum Glück macht es Divi 5 unglaublich einfach, diese reaktionsschnellen Haltepunkte mit ein paar Klicks anzupassen.

Setzen Sie mit den Einstellungen für Responsive -Geräte den Telefonzeitraum auf die gewünschte Breite und wiederholen Sie dann die Schritte für andere Geräte. Da wir die Site für kleinere Geräte zugänglich machen möchten, setzen wir die Nummer für Telefone auf 360px . Wenn Sie die gewünschten Pixel hinzugefügt haben, klicken Sie auf die Schaltfläche Speichern, um fortzufahren.

DIVI 5 lässt Sie wissen, dass Sie die Haltepunkte Ihrer Website anpassen. Klicken Sie auf die Schaltfläche Aktualisieren, um die Änderung zu bestätigen.

Wir werden die folgenden Haltepunkte für die verbleibenden Bildschirmgrößen hinzufügen:

Diese Haltepunkte decken eine Reihe von Geräten ab, um sicherzustellen, dass Ihre Website die meisten Bildschirmgrößen und Anwendungsfälle abdeckt:

• Telefon: 767px deckt die meisten Smartphone -Bildschirmgrößen ab, einschließlich älterer Modelle wie iPhone 8 oder Samsung G7.
• Telefon breit: 860px deckt die meisten Telefonbildschirme im Landschaftsmodus ab, einschließlich iPhone 14 Pro (und oben) und moderner Android -Geräte.
• Tablet: 980px ist gut für die meisten Tablet -Bildschirme im Porträtmodus, einschließlich aller iPads.
• Tablet breit: 1024px ist Standard für die Landschaftsansicht in den meisten iPads und Samsung -Tablets.
• Widescreen: 1280px ist für die meisten kleineren Laptops (Windows oder MacOS) eine gute Breite, einschließlich MacBook Air, MacBook Pro 13 "und vergleichbarer Windows -Geräte.
• Ultrawide: 2560px deckt größere Desktop-Bildschirme wie MacBook Pro 15- und 16-Zoll-Laptops, IMACs und Standard-Hochdefinitionsmonitore ab.

Anpassen Ihres reaktionsschnellen Designs in Voreinstellungen

Einer der leistungsstärksten Aspekte von Divi 5 ist, wie sich seine anpassbaren Haltepunkte nahtlos in Voreinstellungen integrieren. Auf diese Weise können Sie ein wirklich reaktionsschnelles Design auf Ihrer gesamten Website mit minimalem Aufwand erstellen. Ein perfektes Beispiel ist das Ändern der H1 -Voreinstellung einer Starter -Site, um sicherzustellen, dass alle H1s bei jeder Bildschirmgröße perfekt aussehen.

Klicken Sie zunächst im Abschnitt H1 an irgendwo im H1, um seine Einstellungen zu erziehen.

Klicken Sie als Nächstes auf das Feld der Überschrift Presets im Header des Moduls.

Eine Voreinstellung wird angezeigt. Suchen Sie die Voreinstellung mit einem blauen Check -Mark daneben.

Bewegen Sie sich über die aktive Voreinstellung, um seine Einstellungen zu enthüllen. Klicken Sie auf das Symbol für Einstellungen, um es zu bearbeiten.

Klicken Sie auf die Registerkarte "Entwurf" und stellen Sie dann die Heading -Textgröße an die gewünschte Größe ein.

Halten Sie die voreingestellten Einstellungen geöffnet und klicken Sie auf die nächste Bildschirmgröße in der Divi 5 -Taskleiste, um die Größe des Keulens anzupassen.

Wiederholen Sie die obigen Schritte, um die Übertragungen der Überschriften für die verbleibenden Bildschirmgrößen anzupassen. Wenn Sie dies abgeschlossen haben, klicken Sie auf die Schaltfläche Voreinstellung speichern .

Wenn Sie Breakpoints austauschen, werden die Größenänderungen in der Überschrift voreingestellt.

Reaktionsschnelle Bearbeitung in Divi 4 gegen Divi 5

Divi war schon immer führend im reaktionsschnellen Design, aber Divi 5 bringt es auf ein ganz neues Niveau. Während Divi 4 eine solide Grundlage für die Erstellung von reaktionsschnellen Websites bildete, bringt Divi 5 Funktionen mit, die reaktionsschnell bearbeiten, intuitiver, flexibler und mächtiger als je zuvor. Hier ist ein genauerer Blick darauf, wie sich Divi 5 um die Fähigkeiten von Divi 4 verbessert.

Müheloser Übergang zwischen Haltepunkten

In Divi 4 ist das Umschalten zwischen den Haltepunkten ziemlich einfach, beinhaltet jedoch mehr Zeit und ist nicht so glatt wie der Übergang, den Sie in Divi 5 finden können.

Divi 5 verbessert diesen Workflow mit einer glatteren, intuitiveren Schnittstelle. Jetzt können Sie sofort zwischen den Haltepunkten wechseln und Ihr Design ohne Verzögerung vorantreiben. Mit dieser neuen Version von Divi können Sie Designänderungen im laufenden Fliegen vornehmen, basierend auf welcher Breakpoint Sie sehen. Es gibt keinen Umschalten zwischen Modi oder konstantem Umschalten mehr. Diese nahtlose Erfahrung spart Zeit und sorgt für ein zusammenhängenderes und poliertes Design in jedem Haltepunkt.

Von 3 bis 7 Haltepunkten

Divi 4 unterstützt 3 verschiedene Haltepunkte; Diese können auch in Divi 5 gefunden werden.

• Desktop: 981px und höher
• Tablet: <980px
• Mobil: <767px

Während diese Haltepunkte die Grundlagen abdecken, werden sie manchmal zu kurz, wenn sie die Vielfalt der Geräte und Bildschirmgrößen, die von modernen Publikum verwendet werden, entsprechen. Designer benötigen möglicherweise manchmal CSS-Medienabfragen, um unterschiedliche Bildschirmgrößen abzuzielen, insbesondere für ultra-weite Monitore oder kleinere mobile Geräte.

Divi 5 hat diese Einschränkung angesprochen, indem die Anzahl der Haltepunkte auf 7 anpassbare Optionen erweitert wird, wodurch es einfacher ist, eine größere Anzahl von Geräten abzuzielen.

• Telefon: <767px
• Telefon breit: < 860px
• Tablet: <980px
• Tablet breit: < 1024px
• Desktop: > 981px
• Breitbild: > 1280px
• Ultra breit: > 1440px

Diese erhöhte Flexibilität ermöglicht es Ihnen, Ihr Design für ein breiteres Angebot an Geräten zu optimieren und sicherzustellen, dass Ihre Website auf alles, von kompakten Smartphones bis zu großen hochauflösenden Monitoren, perfekt aussieht. Zum Beispiel können Sie jetzt einen dedizierten Tablet-Haltepunkt im Landschaftsmodus erstellen oder Ihre Website für ultra-weite Bildschirme optimieren, die in professionellen Einstellungen verwendet werden.

Leinwand skalieren für die vollständige Kontrolle

Eines der aufregendsten neuen Funktionen von Divi 5 ist Canvas Scaling, die den Designer eine beispiellose Kontrolle darüber gibt, wie ihre Website bei verschiedenen Vorsätzen erscheint.

So sieht die Skalierung von Canvas in Divi 4 aus:

Die Canvas Rescaling -Funktion von Divi 5 macht die gesamte Erfahrung noch intuitiver. Mit nur wenigen Klicks können Sie die Design -Leinwand so skalieren, dass sie bestimmte Bildschirmauflösungen entsprechen und genau zeigen, wie Ihre Website auf verschiedenen Geräten angezeigt wird. Diese Funktion ist nützlich, um kleinere mobile Bildschirme oder ultra-weite Desktop-Monitore zu testen, um sicherzustellen, dass Ihr Design einwandfrei ist-das Board.

Divi 5 ist für immer in Ihrer Divi Lifetime -Mitgliedschaft enthalten

Die anpassbaren Haltepunkte von Divi 5 befähigen Designer, reaktionsschnelle Websites mit größerer Präzision zu erstellen. Unabhängig davon, ob Sie ein vorhandenes Layout verfeinern oder eine Website von Grund auf neu erstellen, bieten diese neuen Tools die Flexibilität, Pixel-perfekte Erlebnisse für jede Bildschirmgröße zu erstellen.

Einer der besten Teile von Divi 5 ist, dass es für immer in Ihrer Divi -Mitgliedschaft enthalten sein wird (ohne zusätzliche Kosten). Wenn Sie heute auf eine Divi Lifetime-Mitgliedschaft upgraden, erhalten Sie für eine einmalige Gebühr Zugang (und Aktualisierungen) auf Divi 5 und profitieren für die kommenden Jahre von diesem sich entwickelnden Produkt.