So erstellen Sie gleiche Spaltenhöhen mit Flexbox in Divi 5

Das Erstellen von sauberen, professionellen Layouts ist ein Eckpfeiler effektiver Webdesign, und gleiche Spaltenhöhen tragen zu einem ausgewogenen Layout bei. Egal, ob Sie Produkte, Dienstleistungen oder Portfolio -Elemente anzeigen, Spalten, die das Benutzererlebnis perfekt steigern. In Divi 4 waren gleiche Säulen möglich, aber Divi 5 bringt viel mehr auf den Tisch.

In Divi 5 verbessert die Integration seines Flexbox -Layout -Systems den Prozess und bietet eine einfachere und flexiblere Möglichkeit, gleiche Spaltenhöhen zu erstellen. Dieser Beitrag führt Sie durch die Erstellung sauberer, ausgewogener Layouts. Lass uns eintauchen!

Gleiche Säulenhöhen in Divi 4

In Divi 4 war das Erreichen von Säulen mit gleichen Höhen unkompliziert, aber begrenzt. Ein Umschalter aktivierte alle Spalten innerhalb einer Zeile so, dass sie mit der Höhe der höchsten Spalte übereinstimmt. Diese Funktion war ein Lebensretter für die Aufrechterhaltung der visuellen Konsistenz, hatte jedoch Einschränkungen, die häufig eine Problemumgehung erforderten.

Der Effekt der gleichen Höhe in Divi 4 wurde auf die Säulenbehälter angewendet, was bedeutet, dass Hintergrundfarben, Bilder oder Ränder auf die Spaltenebene eingestellt werden mussten. Dieser Ansatz erstreckte sich nicht auf die Module in den Spalten, was zu unangenehmen Lücken führen könnte. Beispielsweise würde eine Schaltfläche unter einem kurzen Textmodul in einer Spalte einen unangenehmen Speicherplatz darunter lassen, während eine Schaltfläche unter einem längeren Textmodul in einer anderen Spalte ihn füllte, wodurch ein unausgeglichenes Aussehen erzeugt wurde.

Wenn Designer mehr Kontrolle wollten, z. B. vertikal ausrichten des Modulinhalts oder Anpassung des Abstands, waren häufig benutzerdefinierte CSS erforderlich. Dies stellte eine Herausforderung dar, insbesondere für Anfänger, da sie in Divis benutzerdefinierte CSS -Felder eintauchen mussten, um polierte Ergebnisse zu erzielen. Wenn Sie beispielsweise die Schaltflächen am unteren Rand der Spalte in Divi 4 ausrichten möchten, müssen Sie CSS verwenden, um dies zu erreichen.

Wie Flexbox in Divi 5 gleiche Spalten angibt

Flexbox ist nahtlos in Divi 5 integriert, wodurch gleichmäßige Spaltenhöhen erreicht werden können. Im Gegensatz zur Umkippungsoption von Divi 4 nutzt Divi 5 die Flexbox, um integrierte Steuerelemente bereitzustellen, die das Design-Webseiten erleichtern.

Mit Flexbox können Sie die Spalten automatisch auf die höchste strecken und gleichzeitig genaue Ausrichtungsoptionen für beide Spalten und deren Inhalt anbieten. Dadurch wird für Anfänger und Fachleute gleichermaßen die Notwendigkeit von benutzerdefiniertem CSS für jeden Divi -Benutzer möglich. Mit dem Flexbox -Layout -System von Divi 5 können Designer professionelle, professionelle Designs problemlos erstellen.

So erstellen Sie gleiche Spaltenhöhen in Divi 5 gleiche Spaltenhöhen

Das Erstellen von Spalten mit gleicher Höhe in Divi 5 ist dank der Flexbox -Integration ein Kinderspiel. In den folgenden Schritten zeigen wir, wie Sie Dinge einrichten und sicherstellen, dass alles perfekt aussieht.

Schritt 1: Erstellen Sie Ihr Design

Öffnen Sie den visuellen Baumeister auf einer neuen oder vorhandenen Seite. Klicken Sie auf das Schwarz + -Symbol, um eine neue Zeile hinzuzufügen .

Wenn das Dialogfeld "Neue Abschnitt" angezeigt wird, wählen Sie das dreispaltige Layout unter gleichen Spalten .

Fügen Sie in der ersten Spalte ein Gruppenmodul hinzu.

Fügen Sie als nächstes ein Symbolmodul in das Gruppenmodul in der ersten Spalte hinzu.

Wählen Sie das Symbol für das Inhalt in der Registerkarte Inhalt aus.

Stellen Sie die Symbolfarbe auf der Registerkarte "Entwurf auf #2ea3f2" fest und die Symbolgröße auf 36px.

Fügen Sie als nächstes ein Überschriftenmodul unter dem Symbolmodul hinzu. Stellen Sie sicher, dass Sie die Überschrift zum Gruppenmodul hinzufügen, indem Sie auf das Schwarz + -Symbol anstelle des grauen Klickens klicken.

Geben Sie Webdesign als Titel auf der Registerkarte Inhalt ein.

Wählen Sie auf der Registerkarte "Entwurf H5 als Überschriftenpegel , Inter als Überschrift und mittel als Keulenschriftgewicht . Stellen Sie den Kopfschriftenstil in Großbuchstaben , die Ausrichtung der Überschrift Text nach links , die Textfarbe der Überschrift auf #000000 , und halten Sie die Textgröße der Überschrift an der Standardgröße von 16px .

Fügen Sie als nächstes ein Textmodul unter der Überschrift im Gruppenmodul hinzu. Sie können die Einstellungen so lassen.

Wir werden ein Schaltflächenmodul für das endgültige Modul in der Spalte hinzufügen. Anstatt es dem Gruppenmodul hinzuzufügen, fügen wir es jedoch darunter hinzu. Auf diese Weise können wir gleiche Spaltenhöhen erstellen, die Schaltfläche jedoch nach unten ausrichten, wodurch das Design kohärsiver wird.

Klicken Sie auf die Registerkarte Design und weisen Sie dem Schaltflächenmodul die gewünschten Stileinstellungen zu. Überprüfen Sie Ihre Schaltfläche, um sicherzustellen, dass es sich außerhalb des Gruppenmoduls befindet, indem Sie sich die Ebenenansicht im linken Menü ansehen. Nach Abschluss sollte die Schaltfläche wie der Screenshot unten aussehen-links mit einem blauen Hintergrund und einem weißen Text ausgerichtet.

Schritt 2: Spalten duplizieren

Sobald die erste Spalte mit Inhalten gefüllt ist, kopieren wir den Inhalt aus der ersten Spalte in die zweite und dritte Spalten und nehmen einige Änderungen vor. Sie können die zweite und dritte Spalten löschen und die ersten duplizieren oder das Gruppenmodul und die Schaltfläche in die zweite und dritte Spalten kopieren und einfügen.

Ändern Sie als nächstes den Übergangstitel in der 2. Spalte in Codierung und den Übergangstitel in der 3. Spalte zum Marketing . Wir werden auch einen Teil des Inhalts im Textmodul in der 2. Spalte löschen, damit wir demonstrieren können, wie Divi 5 die Flexbox mit unterschiedlichen Inhaltslängen verarbeitet. Wie Sie sehen können, sind die Spalten ungleichmäßig.

Bevor wir mit dem nächsten Schritt übergehen, klicken Sie in die erste Spalte und fügen Sie allen Seiten unserer Spalte 25px Abstand hinzu.

Wir werden auch einen 15px -Grenzradius und eine 1px -Randbreite mit #666666 als Farbe hinzufügen.

Der letzte Schritt zum Entwerfen unserer Zeile besteht darin, die Designattribute aus der 1. Spalte zu kopieren und in die verbleibenden Spalten einzufügen. Klicken Sie mit der rechten Maustaste auf die erste Spalte und wählen Sie Elementstile kopieren . Klicken Sie anschließend mit der rechten Maustaste auf die 2. Spalte und wählen Sie den Elementstil einfügen . Wiederholen Sie diese Aktion auch für die 3. Spalte.

Schritt 3: Konfigurieren Sie die Flexbox -Einstellungen für gleiche Höhen

Als nächstes müssen wir unsere Flexbox -Einstellungen für die Zeile konfigurieren. Divi 5 integriert die FlexBox -Steuerelemente in sein Layout -System und bewegt sich über die Ausgleich der Spaltenhöhen von Divi 4 hinaus. Navigieren Sie zur Registerkarte "Design" für die Zeile und stellen Sie sicher, dass Flex unter Layout ausgewählt wird.

Stellen Sie als Nächstes sicher, dass die Zeile unter Layout -Richtung ausgewählt wird, unter dem Justify -Inhalt starten und unter Ausstellungselementen ausgewählt wird. Dadurch wird Divi 5 angewiesen, die Säulenstruktur zu halten, alle Elemente innerhalb der Zeile links auszurichten und den verfügbaren Speicherplatz innerhalb des übergeordneten Containers zu füllen.

Klicken Sie anschließend auf die Einstellungen für die erste Spalte. Klicken Sie auf das Dropdown -Menü Layout, um die Einstellungen auf der Registerkarte Design anzuzeigen. Standardmäßig wird Flex unter Layout ausgewählt. Wählen Sie im Feld Layout -Richtung die Spalte aus. Wählen Sie unter dem Inhalt von Inhalten den Speicherplatz zwischen . Richten Sie alle Elemente auf den Start aus (links) und lassen Sie das Layout -Wraping auf keinem Wrap .

Wiederholen Sie die obigen Schritte für die 2. und 3. Spalten. Sie können auch die Funktionen kopieren/einfügen oder erweitern, um dieselben Einstellungen auf die verbleibenden Spalten der Zeile anzuwenden.

Alle Module innerhalb der Gruppe werden gestreckt, um den verfügbaren Platz zu füllen, und die Tasten außerhalb der Gruppe werden am Boden ausgerichtet.

Schritt 4: Reaktionsfähigkeit Test

Die anpassbaren Reaktionsbrandbezeichnungen von Divi 5 machen es einfach, sicherzustellen, dass Ihre gleichen Spaltenhöhen auf allen Geräten hervorragend aussehen. Verwenden Sie die Responsive View -Umschaltungen, um Ihr Layout im visuellen Bauunternehmer voranzutreiben. Standardmäßig gibt es drei Haltepunkte. Divi 5 verfügt jedoch über 7, was leicht aktiviert werden kann, indem Sie auf das Ellipsis -Menü in der Symbolleiste oben im visuellen Builder klicken. Aktivieren Sie die Breakpoints, die Sie möchten, und klicken Sie auf Speichern , um sie anzuwenden.

Klicken Sie hier, um Ihr Layout in der Tablet -Ansicht voranzutreiben. Wie Sie sehen können, hält Flexbox die Spalten nebeneinander gestapelt.

Sie können die Spaltenstruktur ändern, damit die Spalten auf kleineren Geräten vertikal stapeln können. Klicken Sie im Tablet -Haltepunkt auf die Registerkarte Inhalt für die Zeile . Klicken Sie auf die Spaltenstruktur ändern .

Wenn das Dialogfeld angezeigt wird, klicken Sie auf, um die einzelne Zeile unter den gleichen Spalten zu aktivieren. Dadurch wird die 3-Kolumn-Zeile in eine einzelne Spalte auf Tablet- und Mobilgeräten verändert, während die 3-Spal-Struktur auf Desktops erhalten bleibt.

Wenn Sie die Änderungen über alle Haltepunkte vorschauen, werden Sie sehen, wie Divi das Layout für kleine Bildschirme übergeht.

Durch die Automatisierung der Höhenausrichtung können sich Designer eher auf Kreativität als auf technische Korrekturen konzentrieren, wodurch es einfacher ist, professionelle Websites in einem Bruchteil der Zeit zu bauen. Das FlexBox -Layout -System von Divi 5 unterstützt auch eine bessere Inhaltsorganisation durch Modulgruppen und macht es einfacher als je zuvor.

Häufige Anwendungsfälle

Das Flexbox -System von Divi 5 macht das Erstellen von gleichen Spaltenhöhen vielseitig und effektiv für verschiedene Anwendungsfälle. Im Folgenden finden Sie einige gängige Möglichkeiten, bei denen das Flexbox -System von Divi 5 folgt:

1. Produktlisten

In E-Commerce-Layouts variieren Produktkarten aufgrund von Titeln oder Beschreibungen häufig in der Inhaltslänge. Mit der Flexbox von Divi 5 können Sie ein Netz von Produktkarten erstellen, in dem jede Spalte die gleiche Höhe beibehält und ein sauberes und professionelles Erscheinungsbild gewährleistet. Ein Produkt mit einer kurzen Beschreibung entspricht beispielsweise perfekt zu einer mit einer längeren Beschreibung. Mit dem FlexBox -System von Divi 5 können Sie unangenehme Lücken vermeiden und ein zusammenhängendes Erlebnis schaffen, das das Vertrauen und das Engagement der Benutzer fördert.

2. Abschnitte

Service- oder Feature -Abschnitte passt gut zum Divi -Flexbox -System. Flexbox in Divi 5 stellt sicher, dass alle Module innerhalb einer Zeile gleiche Spaltenhöhen aufweisen und ein ausgewogenes und poliertes Aussehen erzeugen. Unabhängig davon, ob das Anzeigen von Team -BIOs, Diensten oder Feature -Highlights, ausgeglichene Spalten Ihre Webseiten einfach zu scannen und die Benutzererfahrung zu verbessern.

3. Portfolio -Gitter

Ein Portfolio -Netz ist der perfekte Anwendungskoffer für Flexbox, insbesondere für Freiberufler, die ihre Arbeit anzeigen. Flexbox stellt sicher, dass Galerieelemente wie Bilder selbst mit unterschiedlichen Seitenverhältnissen gleichmäßig ausgerichtet sind. Sie können ein Gruppenmodul verwenden, ihm ein Hintergrundbild zuweisen und den Abstand entsprechend einstellen. Dies schafft ein ordentliches, professionelles Netz, das Ihre Arbeit konsequent zeigt und es ideal für Fotografen, Designer oder Agenturen, die potenzielle Kunden beeindrucken möchten.

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!

Machen Sie sich noch heute mit der Flexbox -Funktion von Divi 5 vertraut

Das Flexbox -Layout -System von Divi 5 markiert einen signifikanten Sprung nach vorne aus der Art und Weise, wie Divi 4 die Spaltenhöhe ausgleichen, und transformiert, wie Divi -Benutzer gleiche Spalten erstellen. Divi 5 stützte sich auf eine starre, Hintergrundabhängige Methode, die häufig benutzerdefinierte CSS für die Verfeinerung erforderte. Das Ergebnis ist ein effizienteres System, das den Bedarf an benutzerdefinierten CSS -Problemumgehungen beseitigt und DIVI -Benutzern ermöglicht, polierte professionelle Layouts problemlos aufzubauen.

Sind Sie bereit, Ihre Divi -Websites zu erhöhen? Tauchen Sie in die Flexbox -Einstellungen von Divi 5 ein und experimentieren Sie mit den kreativen Möglichkeiten, die sie freischalten. Teilen Sie Ihre Kommentare unten mit oder verbinden Sie sich mit uns in unseren Social -Media -Kanälen, um Ihre Gedanken über unsere neue Flexbox -Funktion zu teilen.