Wie man sich vertikal mit dem Flexbox -Layout -System von Divi 5 ausrichtet

Das Erstellen visuell ausgewogener und reaktionsschnelles Layouts ist für das moderne Webdesign von wesentlicher Bedeutung, und das neue Flexbox -Layout -System von Divi 5 macht es einfacher als je zuvor, vertikale Ausrichtung zu erreichen. Mit dieser leistungsstarken neuen Funktion können Divi -Benutzer flexible, dynamische Layouts entwerfen und die vollständige Kontrolle über die vertikale Positionierung bieten. Unabhängig davon, ob der Text in einem Abschnitt ausgerichtet ist, Inhalte in Multi-Säulen-Zeilen ausbalanciert oder reaktionsschnelle Designs erstellt werden, divi 5 vereinfacht den Prozess mit intuitiven Steuerungen, die direkt in den visuellen Bauuntern genommen werden.

In diesem Beitrag führen wir Sie durch die Schritte, um die vertikale Ausrichtung zu beherrschen, echte Beispiele anzugeben und Tipps zum Erstellen reaktionsschneller, polierter Layouts zu geben. Lassen Sie uns untersuchen, wie das FlexBox -Layout -System von Divi 5 Ihren Ansatz in die vertikale Ausrichtung verändern kann.

Das Flexbox -Layout -System von Divi 5 verstehen

Flexbox oder flexibles Box -Layout ist ein CSS -Layoutmodell, mit dem die Anordnung von Elementen in einem Behälter vereinfacht wird. Damit ist es ideal für die horizontale und vertikale Ausrichtung. Im Gegensatz zu herkömmlichen Methoden wie Floats oder Margen bietet Flexbox einen einfachen Ansatz zum Organisieren von Inhalten. Es ermöglicht es Elementen, ihre Größe, Reihenfolge und Ausrichtung dynamisch anhand der Dimensionen des Containers und des Ansichtsfensters anzupassen und sicherzustellen, dass die Layouts über alle Bildschirmgrößen konsistent und reagieren.

Mit Flexbox können Sie den Inhalt mühelos zentrieren, Platz gleichmäßig verteilen oder Elemente in einer bestimmten Reihenfolge stapeln. Diese Flexibilität macht es für Webdesigner zu einem Muss, und Divi 5 nutzt die Macht, dass Benutzer ausgefeilte Layouts erstellen können, ohne fortgeschrittene Kenntnisse über CSS zu benötigen.

Wie Divi 5 Flexbox integriert

Divi 5 hat kürzlich sein Flexbox -Layout -System eingeführt. Dieses System integriert Flexbox direkt in den visuellen Builder und ermöglicht es den Benutzern, den Abschnitt, die Zeile, die Spalte und die Modulanordnung mit intuitiven Einstellungen zu steuern.

Zu den wichtigsten Funktionen gehören eine Vielzahl neuer Zeilenvorlagen, von einzelnen Spalten bis zu Multi-Reis-Abschnitten, sodass es einfacher denn je erleichtert, Layouts in Divi zu erstellen.

Mit den Flexbox -Steuerelementen von Divi 5 können Sie die Richtung Ihrer Layouts steuern, horizontale und vertikale Lücken einstellen, den Inhalt auf Start, Mitte oder Beenden rechtfertigen, ein Verpackung aktivieren und vieles mehr.

Die neue Feature der Divi 5 -Funktionsstruktur von Divi 5 bietet Ihnen mehr Kontrolle darüber, wie sich Spalten auf kleineren Geräten verhalten. Sie können die Anzahl der Spalten leicht ändern oder neu ordnen, sodass Designs auf jeder Bildschirmgröße großartig aussehen.

Divi 5 bewegt sich von Spezial- und Fullwidth -Abschnitten weg, da Zeilen jetzt ineinander verschachtelt werden können, um komplexe, reaktionsschnelle Designs zu erstellen, ohne sich auf veraltete Abschnittstypen zu verlassen. Diese Fortschritte machen das Flexbox -Layout -System von Divi 5 zu einem leistungsstarken Werkzeug zum Aufbau moderner, anpassungsfähiger Layouts direkt im Bauunternehmer.

Einrichten der vertikalen Ausrichtung in Divi 5

Das Flexbox -Layout -System von Divi 5 ist nahtlos in den visuellen Bauunternehmer integriert, sodass Benutzer flexible und reaktionsschnelle Designs erstellen können. Öffnen Sie zu Beginn den visuellen Bauunternehmer auf einer neuen oder vorhandenen Seite und fügen Sie einen Abschnitt und eine Zeile hinzu. Wir haben ein ganzes Layout erstellt, damit wir die Schritte durchgehen können, um die Elemente in verschiedenen Szenarien vertikal auszurichten.

Vertikale Ausrichtung auf einem Abschnitt

Navigieren Sie in den Einstellungen des Abschnitts zur Registerkarte Design und suchen Sie die Layoutoptionen , in denen Sie die FlexBox -Steuerelemente finden.

Stellen Sie sicher, dass Flex im Layoutstil ausgewählt wird. Dies stellt sicher, dass Flexbox für den Abschnitt aktiviert ist.

Standardmäßig wird Start (Flex-Start) unter Justify-Inhalten ausgewählt. Dies richtet alle Elemente zu Beginn des Containers aus. In diesem Beispiel können Sie, wenn Sie die Elemente vertikal zentrieren möchten, sie an der Mitte , dem Raum oder dem Raum gleichmäßig ausrichten. Da wir eine einzelne Reihe mit einer verschachtelten Zeile enthalten, konzentrieren sich alle Designelemente in unserem Abschnitt vertikal mit jeder oben genannten Option.

Vertikale Ausrichtung in einer Reihe

Sie können den Inhalt auch vertikal auf der Zeilenebene ausrichten. In diesem Beispiel werden wir jedoch ausgerichtete Elemente verwenden, anstatt Inhalte zu rechtfertigen, um die Module in der Zeile vertikal auszurichten. Suchen Sie in der Registerkarte "Entwurf für die Zeile die Layouteinstellungen ". Stellen Sie sicher, dass Sie Flex aktivieren und die Einstellungen für die Ausrichtung der Elemente finden. Standardmäßig wird Start ausgewählt, und dies richtet alle Module in der Zeile an der Oberseite des Containers aus.

Es gibt einige Optionen, je nachdem, wie Sie die Elemente ausrichten möchten. Wählen Sie die Mitte, wenn Sie möchten, dass die Artikel in der Reihe vertikal zentrieren. Bei der Auswahl des Endes richten sich alle Elemente am unteren Rand der Zeile aus. Durch Stretch füllen alle Gegenstände die Höhe der Reihe.

Vertikale Ausrichtung auf Multi-Reihen-Abschnitten

In diesem Szenario haben wir drei Zeilen in einem Abschnitt, darunter eine einspaltige Reihe und zwei dreispaltige Reihen. Wir werden die Justify -Inhaltseinstellungen verwenden, um alle Inhalte in den Zeilen vertikal auszurichten.

Wenn ein Abschnitt Spalten als Layout -Richtung verwendet, richtet sich der Inhalt des Rechts seine Zeilen vertikal aus. Der Start wird standardmäßig ausgewählt. Es richtet alle Reihen an der Spitze des Abschnitts. Die Zeilen werden zusammen gepackt und von der oberen Kante beginnen. Die Mitte richtet alle Zeilen im Abschnitt vertikal aus. Die Zeilen werden von der unteren Kante ab dem unteren Rand zusammengepackt. Wenn Sie das Ende wählen, richten sich alle Zeilen am Ende des Abschnitts an. Die Zeilen packen zusammen und beginnen von der unteren Kante.

Der Raum zwischen den Zeilen gleichmäßig entlang der Hauptachse (vertikal). Die erste Zeile wird gegen die Oberseite des Abschnitts, die letzte Reihe gegen den Boden, und alle dazwischen liegenden Zeilen enthält eine gleiche Menge an Platz, die sie trennen. Der Platz um den Raum verteilt die Zeilen mit gleichem Platz um jeden Gegenstand.

Der Raum zwischen benachbarten Zeilen wird der Raum an den Enden der Reihen doppelt sein (der Raum zwischen der ersten Reihe und der Oberseite des Abschnitts und dem Raum zwischen der letzten Reihe und dem unteren Abschnitt). Schließlich ähnelt der Raum gleichmäßig dem Raum, aber er stellt sicher, dass der Raum zwischen jeder Reihe gleich ist und der Raum am Anfang und am Ende des Abschnitts auch gleich diesem Abstand ist.

Vertikale Ausrichtung in Modulgruppen

Das FlexBox -System von Divi 5 vereinfacht auch die vertikale Ausrichtung innerhalb von Modulgruppen, insbesondere bei Verwendung von Funktionen wie dem Loop Builder für dynamische Inhalte. Betrachten Sie eine Modulgruppe, in der Blog -Beiträge mit einem Bild, einem Posttitel, einem Postauszug und einer Schaltfläche angezeigt werden. Ohne ordnungsgemäße Ausrichtung können Elemente wie Tasten über Säulen hinweg falsch ausgerichtet erscheinen. In früheren Divi -Versionen erforderte dies gleiche Spaltenhöhen und benutzerdefinierte CSS. Divi 5 optimiert diesen Prozess mit Flexbox.

Um Elemente auszurichten, klicken Sie in die erste Spalte der Modulgruppe, navigieren Sie zur Registerkarte Entwurf und suchen Sie die Flex -Einstellungen. Setzen Sie den Inhalt auf den Raum zwischen . Dies verteilt die Module gleichmäßig in der Spalte und richtet die More -Schaltflächen ohne benutzerdefinierte CSS perfekt über alle Spalten aus. Dieser Ansatz gewährleistet konsequente, professionelle Layouts für dynamische Inhalte wie Blog -Netze oder Produktlisten.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Tipps zur reaktionsschnellen vertikalen Ausrichtung

Das Flexbox -Layout -System von Divi 5 macht den vertikal ausgerichteten Inhalt einfacher, aber es gibt einige Tipps zu berücksichtigen. Divi 5 bietet robuste Werkzeuge für reaktionsschnelles Design und ermöglicht es Ihnen, die vertikale Ausrichtung auf allen Geräten gut abzustimmen. Unabhängig davon, ob Sie Inhalte in einen Heldenabschnitt in die Multi-Säulen-Layout ausgerichtet sind, können Sie die folgenden Tipps von Divi 5 nutzen, um konsequente, professionelle Layouts aufrechtzuerhalten.

Verwenden Sie die anpassbaren Reaktionsgrüßpunkte von Divi 5

Mit dem FlexBox -System von Divi 5 können Sie die Bestellung und Ausrichtung des Moduls für verschiedene Bildschirmgrößen anpassen und sicherstellen, dass sich Ihre Layouts an alle Bildschirmgrößen anpassen. Im visuellen Bauunternehmer können Sie sieben anpassbare Responsive Breakpoints verwenden, um zu steuern, wie Layouts über Geräte auftreten.

Um die vertikale Ausrichtung zu optimieren, können Sie Spaltenstrukturen auf Tablet- und Mobilgeräten einstellen. Dies stellt sicher, dass Ihre Layouts bei jeder Bildschirmgröße perfekt aussehen. Sie möchten beispielsweise zwei Spalten auf einem Tablet und nur einen auf mobilen Geräten.

Mit dem FlexBox -Layout -System von Divi 5 können Sie außerdem die Reihenfolge Ihrer Spalten auf mobilen Geräten ändern, wodurch die mobilen Benutzer zuerst in einem Abschnitt oder einer Zeile angezeigt werden.

Verwenden Sie die Entwurfsvariablen von Divi 5

Die Entwurfsvariablen von Divi 5 eignen sich perfekt für die Aufrechterhaltung des konsistenten Abstands und zur Ausrichtung über reaktionsschnelle Ansichten. Mit Designvariablen können Sie wiederverwendbare Werte für Eigenschaften wie Polsterung, Ränder und Schriftgrößen definieren, um eine Gleichmäßigkeit in Ihren Layouts zu gewährleisten. Für die vertikale Ausrichtung können Sie eine Variable für vertikale Polsterung erstellen, um den Abstand innerhalb von Zeilen oder Abschnitten zu standardisieren. Legen Sie beispielsweise eine Entwurfsvariable mit dem Namen vertikaler Polsterung auf 30px im Variablen -Manager von Divi fest.

Um die Variable auf eine Zeile anzuwenden, navigieren Sie zur Registerkarte "Design", klicken Sie auf das Dropdown -Menü ab dem Abstand und klicken Sie auf das Symbol Dynamic Inhalts, um sie zu verwenden.

Flexbox erleichtert die vertikale Ausrichtung

Das Flexbox -Layout -System von Divi 5 erleichtert die vertikale Ausrichtung und bietet eine flexible und reaktionsschnelle Lösung zum Erstellen polierter Layouts. Durch die Integration von Flexbox in den visuellen Builder können Benutzer die Ausrichtung von Abschnitten, Zeilen, Spalten und Modulgruppen mit Präzision steuern, ohne dass CSS erweitert werden muss. Seine Funktionen gewährleisten konsistente, professionelle Designs auf allen Geräten. Unabhängig davon, ob Sie Inhalte zentrieren, dynamische Modulgruppen ausrichten oder Multi-Reihen-Layouts erstellen, divi 5 vereinfacht den Prozess bei der Bereitstellung von Ergebnissen.

Laden Sie das neueste Divi 5 Alpha herunter und experimentieren Sie mit dem Flexbox -Layout -System in einem neuen Projekt.