Wie man Elemente an verschiedenen Haltepunkten in Divi 5 neu ordnet

Responsive Design erfordert mehr als die Skalierungslayouts. Es erfordert auch die Steuerung, wie Inhalte über Geräte hinweg stapeln. Ein Design, das sich auf dem Desktop strukturiert anfühlt, kann eine verwirrende Reihenfolge auf Mobilgeräten sein, wobei Seitenleisten oder sekundäre Elemente wichtige Inhalte aus der Sicht drücken. Divi 5 befasst sich mit seinem neuen Flexbox -System, das vorgebaute Reaktionsspaltenstrukturen und präzise Bestellsteuerungen einführt.

In diesem Beitrag werden wir uns untersuchen, warum das Neubestehen von Elementen wichtig ist, wie die Flexbox -Tools von Divi 5 es einfach machen und die Schritte durchgehen, um die Layouts an verschiedenen Haltepunkten zu umstrukturieren.

Warum Sie Elemente neu ordnen möchten

Wenn sich ein Layout vom Desktop zum Handy verschiebt, spiegelt die Stapelauftrag nicht immer Ihre beabsichtigte Erfahrung wider. Ein ausgewogenes dreispaliges Desktop-Design kann in einen vertikalen Stapel zusammenbrechen, in dem die linke Spalte immer an erster Stelle steht und ein Anruf für Handlungen, Anmeldeformular oder Kontaktinformationen weit unten auf der Seite drückt, bei dem Benutzer es möglicherweise nie sehen.

Abonnieren Sie unseren YouTube -Kanal

Das FlexBox -System von Divi 5 behebt dies, indem Sie Elemente an jedem Haltepunkt visuell neu ordnen können. Sie können eine CTA direkt unter die Überschrift auf Mobilgeräten verschieben, Testimonials über eine Preistabelle bringen oder Kontaktinformationen kurz vor dem langen Inhalt hervorheben. Anstatt mit der Standardstapellogik des Browsers festzuhalten, entscheiden Sie für die Hierarchie. Dies stellt sicher, dass Ihr wichtigster Inhalt immer dort erscheint, wo er am wichtigsten ist.

Wie die Flexbox von Divi 5 das Neubestehen erleichtert

Divi 5 gibt Ihnen die direkte Kontrolle darüber, wie Elemente über Haltepunkte hinweg stapeln. Sie können vorgefertigte Flex-Säulenstrukturen verwenden, um Layouts einzurichten, die sich auf natürliche Weise anpassen, und dann die Spaltenstrukturen und Spaltenbestellungen bei jeder Bildschirmgröße fein abteilen.

Die Flexbox wirkt wie ein brillanter Container, der basierend auf Platz anpasst. Anstatt zufällig zu stapeln, steuern Sie die Reihenfolge auf jedem Gerät.

Divi 5 behandelt auch verschachtelte und komplexe Layouts gut. Sie können Zeilenstrukturen, Spaltengrößen und Modulreihenfolge an jedem Haltepunkt ändern, ohne Inhalte oder Codierung zu kopieren.

Es verwaltet auch automatisch die vertikale Ausrichtung und Positionierung, wodurch Ihre Inhalte zielgerichtet, vollständig reaktionsschnell und nicht zufällig angeordnet sind.

Eine Schritt-für-Schritt-Anleitung zur reaktionsschnellen Neuordnung in Divi 5

Schauen wir uns an, wie genau Sie Elemente in Divi 5 mit seinem neuen Flexbox -System neu ordnen können. Die folgenden Schritte führen Sie durch das Einrichten von Spaltenstrukturen und das Einstellen der Reihenfolge an verschiedenen Haltepunkten, sodass Ihre Layouts auf jedem Gerät klar und konsistent bleiben.

1. Richten Sie Ihre sieben benutzerdefinierten Haltepunkte ein

Divi 5 gibt Ihnen sieben Haltepunkte anstelle von drei. Sie können jeden Pixelwert ändern, sodass Ihre Website auf jedem Gerät richtig aussieht.

Klicken Sie in Ihrer Taskleiste auf das Ellipsis -Menü und finden Sie die Breakpoint -Toggle -Switches. Jedes verfügt über Standardbereiche, aber Sie können diese Zahlen ändern, um Ihr Publikum besser anzupassen.

Sie sehen Telefon (unter 767px), Telefon breit (unter 860px), Tablet (unter 980px), Tablet breit (unter 1024px), Desktop (über 981px), Breitbildschirm (über 1280px) und Ultra breit (über 1440px).

Nachdem Sie sie eingeschaltet haben, erscheinen kleine Symbole in Ihrer Taskleiste. Klicken Sie auf ein beliebiges Symbol, um zu sehen, wie Ihre Website diese Bildschirmgröße sofort betrachtet.

Anstatt auf jedes Symbol zu klicken und in Ihren Tests begrenzt zu sein, können Sie die Kante Ihrer Leinwand greifen und es nach links oder rechts ziehen. Ihr Design schrumpft oder erweitert sich beim Ziehen und zeigt, wie sich Ihr Layout in verschiedenen Breiten ändert.

Ziehen Sie die Leinwand auf 300px und beobachten Sie, wie Ihr dreispaltiges Desktop-Layout in einen einzigen mobilen Stapel wird. Ziehen Sie es wieder auf 1200px und sehen Sie, wie sich Ihre Inhalte erneut ausbreiten. Sie müssen die Vorschauermodi nicht wechseln oder Ihr Browserfenster ändern.

2. Zugriff auf die Flex -Steuerelemente

Klicken Sie auf das Einstellungssymbol einer beliebigen Zeile, um das Einstellungsfeld auf der rechten Seite zu öffnen. Navigieren Sie zur Registerkarte "Design" oben in diesem Panel. Im Layout -Menü finden Sie alle Flexbox -Steuerelemente von Divi 5. Standardmäßig wird Flex im Layoutstil ausgewählt.

Wenn es nicht auf Ihr vorhandenes Layout angewendet wird, können Sie es mit einem Klick ändern.

Scrollen Sie nach unten, um das Feld Layout -Richtung zu finden. Dadurch wird die Reihenfolge und die Art und Weise bestimmt, in der die Spalten angezeigt werden (Seite für Seite oder darüber und untereinander).

Im Folgenden finden Sie die Optionen für Rechtfertigungsinhalte zur Kontrolle von Ausrichtung und Verteilung. In der Zwischenzeit werden die Optionen für die Ausrichtung der Elemente direkt unter den Positionierungsoptionen angezeigt.

3.. Fine-Tune-Layoutstruktur für jede Bildschirmgröße

Ihre Flexbox -Steuerelemente sind jetzt aktiv, aber Desktop -Layouts benötigen möglicherweise strukturelle Anpassungen für kleinere Bildschirme. Ein dreispaliges Layout könnte auf einem Desktop wunderschön funktionieren, aber überwältigend und auf einem Tablet überfüllt. Daher erfordert stattdessen ein 2 × 2-Gitter, noch mehr auf einem mobilen Gerät, in dem nur Platz für ein Netz ist.

Glücklicherweise können die Gerätesymbole oben rechts in Ihren Steuerelementen Ihr Layout auf verschiedenen Bildschirmen in der Vorschau einstellen und die Flexbox-Einstellungen für jeden Haltepunkt fein abteilen. Auf diese Weise können Sie das Design einstellen, damit es gut aussieht und auf jedem Gerät gut funktioniert.

Wechseln Sie zum Tablet -Haltepunkt und klicken Sie auf die Schaltfläche Spaltenstruktur ändern. Wählen Sie anstelle des aktuellen Setups ein 2 × 2 symmetrisches Layout. Dies macht die Aussicht sofort weniger überwältigend, indem sie weniger Karten in jeder Reihe anzeigen. Passen Sie die vertikalen und horizontalen Lücken nach Bedarf für ein ausgewogenes Aussehen an. Wählen Sie dann die CTA -Spalte aus, setzen Sie die Spaltenklasse auf die Vollbreite unter den Größeneinstellungen und wählen Sie "Wachstum zu füllen".

Ihre Tablet -Version zeigt jetzt zwei Karten gleichzeitig, sodass das einheitliche Erscheinungsbild aufweist. Die Call-to-Action-Taste befindet sich gut in der Reihe unten, wodurch sie auffällt, ähnlich wie bei Ihrem Desktop-Layout. Dieses Update hilft dabei, ein saubereres, einladenderes Erlebnis zu erstellen, das das überfüllte Gefühl von zu vielen zusammengetriebenen Optionen vermeidet.

Verwenden Sie für Mobilgeräte die Option der Spaltenstruktur ändern, um zu einer Einspaltstruktur zu wechseln. Stellen Sie in den FlexBox -Steuerelementen die Layout -Richtung auf Spalten umgekehrt ein. Passen Sie die Lücke an das an, was für Ihren Inhalt am besten aussieht.

4. Spalten über Haltepunkte hinweg nachordnen

Die Verwendung von Bestellwerten ist eine großartige Möglichkeit, um die Reihenfolge der Kinderelemente (häufig Spalten) in verschiedenen Bildschirmgrößen manuell zu entscheiden. Auf der Registerkarte "Bestellung" in den Zeileneinstellungen gibt jeder Spalte eine Nummer, die dem Browser "diese Spalte in Position 1, diese in Position 2 anzeigen" und so weiter mitteilt. Niedrigere Zahlen erscheinen zuerst und höhere Zahlen erscheinen zuletzt. Einfach das.

Sie können sogar Reihenfolge „0“ oder negative Zahlen wie „-1“ verwenden, um bestimmte Inhalte zu erzwingen, zuerst zu erscheinen, unabhängig von anderen Werten.

Jeder Haltepunkt unterstützt sein eigenes Bestellsystem und bietet Ihnen die vollständige Kontrolle über die Elementpositionierung über Geräte hinweg.

Schauen wir uns ein praktisches Beispiel an: Wählen Sie auf dem Desktop Spalte 1 aus und setzen Sie seine Reihenfolge auf 1. Wählen Sie Spalte 2 aus und stellen Sie die Reihenfolge auf „2“ ein und tun Sie dasselbe für den Rest der Spalte (en). Ihr Desktop -Layout fließt natürlich von links nach rechts und endet mit einem Aufruf zum Handeln.

Anpassen der Bestellung auf Tablets und Handys

Wechseln Sie nun mit dem Gerätumschalter zum Tablet -Haltepunkt. Und ändern Sie die Spaltenbestellungen:

Setzen Sie Spalte 6 (Call-to-Action) auf "3", sodass es in der mittleren Reihe angezeigt wird. Hinterlassen Sie die Spalten 1 und 2 wie es sind Spalte 3 als 4 und der Rest wie gewünscht. Tablet-Benutzer sehen Ihre Anrufe unmittelbar nach dem Wertversprechen, gefolgt von den unterstützenden Details.

Wechseln Sie dann mit dem Geräteschalter zu Mobilgeräten. Ändern Sie die Bestellung der CTA -Spalte in „3“ und lassen Sie die erste Bestellung der beiden Spalten so wie es ist. Machen Sie den Rest der Ordnung der Spalte ähnlich der Tablet -Anordnung.

Die zugrunde liegende Quellreihenfolge Ihres Inhalts bleibt gleich, aber die CTA bewegt sich von der letzten Position zum dritten, ohne das Desktop -Layout zu beeinflussen. Auf diese Weise können Sie steuern, wie Abschnitte an verschiedenen Haltepunkten angezeigt werden, ohne Ihren Inhalt zu duplizieren oder umstrukturieren.

Kontrollieren Sie, wie alles mit Divi 5 stapelt

Das neue Flexbox -System von Divi 5 bietet Ihnen eine genaue Kontrolle darüber, wie Inhaltsstapel über Geräte hinweg streifen. Mit sieben anpassbaren Haltepunkten und Live -Leinwand -Skalierung können Sie die Layouts in Echtzeit zu einer beliebigen Bildschirmgröße einstellen und anpassen.

Anstatt sich auf die Standard -Stapelreihenfolge des Browsers zu verlassen, entscheiden Sie genau, wo sich Seitenleisten, CTAs und wichtige Inhalte auszeichnen. Mit Flexbox können Sie die Hierarchie und Klarheit auf jedem Gerät ohne zusätzliche Problemumgehungen oder Code beibehalten.