So richten Sie Abschnitte, Zeilen, Spalten und Module in DIVI Builder vertikal und horizontal aus

Beim Erstellen einer Site mit Divi kann die Option zum vertikalen Ausrichten von Inhalten eine wertvolle Ergänzung Ihres Design-Toolkits sein. Je nach Layout muss der Inhalt möglicherweise auf verschiedene Weise vertikal ausgerichtet werden (zentriert, unten, oben). Am häufigsten muss Ihr Material vertikal ausgerichtet werden. Es fügt Ihrem Inhalt einen schönen Hauch von symmetrischen Abständen hinzu, was sehr nützlich ist, wenn Sie mehrere Spaltenlayouts verwenden. Darüber hinaus bleibt vertikal zentrierter Inhalt über die Browserbreite zentriert, sodass keine benutzerdefinierten Auffüllungen oder Ränder erforderlich sind, um eine ähnliche Reaktionsfähigkeit zu erzielen.

In dieser Lektion zeige ich Ihnen, wie Sie Inhalte in einer beliebigen Spalte mit ein paar einfachen CSS-Zeilen vertikal ausrichten. Zu Demonstrationszwecken verwende ich mehrere vorgefertigte Layouts von Divi. Sie müssen sich keine Sorgen machen, wenn Sie mit CSS nicht vertraut sind. In Sekundenschnelle können Sie dies auf Ihr Design anwenden.

• Den Unterschied zwischen Flex und Divi . verstehen
• Ist dies erforderlich?
• Fügen Sie Ihrer Seite das vorkonfigurierte Layout hinzu.
• Methode 1: Vertikales Ausrichten von Inhalten mit Flex und Auto Margin
• Den Inhalt unten ausrichten
• Vertikale Inhaltsausrichtung für die Spalten Ihrer Zeile
• Methode 2: Vertikales Ausrichten von Inhalten mithilfe der Spaltenflexrichtung
• Was ist mit Layouts mit nur einer Spalte?
• Abschließende Gedanken zur vertikalen und horizontalen Ausrichtung von DIVI

Den Unterschied zwischen Flex und Divi . verstehen

Das CSS-Attribut Flex (oder Flexbox) ist nur ein Mittel, um Elemente in horizontalen und vertikalen Stapeln anzuordnen (wie eine Tabelle). Im Gegensatz zu typischen Tabellen können Sie mit der Flex-Funktion jedoch Boxen erstellen, die sich der Größe des darin enthaltenen Inhalts anpassen.

Divi verwendet das Flex-Attribut, wenn Sie „Spaltenhöhen ausgleichen“ als Zeileneinstellung auswählen. Einfach ausgedrückt stellt dies sicher, dass sich die Größe aller Ihrer Spalten an die Größe der Spalte mit den meisten Informationen anpasst. Da „Spaltenhöhen angleichen“ den Flex für den Zeilencontainer auslöst, können Sie ihn nutzen, indem Sie CSS zu Ihren Spalten hinzufügen, um den Inhalt jeder Spalte (oder Box) zu ändern.

Wenn Sie hinzufügen „margin: auto“ auf jede Spalte in einer Zeile, für die Ex - amp le, den Inhalt dieser Spalte (ob es sich um ein oder mehrere Module) werden vertikal zentriert.

Alle Ihre Spalten (und ihr Inhalt) werden vertikal zentriert, wenn Sie „align-items: center;“ hinzufügen. zu deiner Reihe.

Natürlich hat die Flex-Eigenschaft viele weitere Anwendungen im Webdesign und fortgeschritteneres CSS, die Sie in Ihrem Design verwenden können. Allerdings wollte ich die Dinge für dieses Tutorial einfach halten.

Ist dies erforderlich?

Im technischen Sinne nein. Sie können benutzerdefinierte Abstände verwenden, um Ihre Inhalte/Module vertikal innerhalb einer Spalte zu positionieren (Abstand und Rand). Für ex amp le, können Sie Divi des Abstandsoptionen verwenden , um das Modul (s) Zentrum vertikal innerhalb der Warteschlange einer Spalte gleich oberen und unteren Polsterung zu verleihen. Sie können den Inhalt auch unten ausrichten, indem Sie einer Spalte den oberen Abstand hinzufügen. Wenn Sie Ihrer Seite mehr Inhalt hinzufügen, müssen Sie möglicherweise den Abstand ändern. Darüber hinaus kann es problematisch sein, diese Ausrichtung über mehrere Browsergrößen hinweg beizubehalten.

Wenn Sie also nach einer Möglichkeit suchen, Informationen vertikal auszurichten, ohne sich um bestimmte Abstände kümmern zu müssen, wird dies meiner Meinung nach von Vorteil sein.

Lasst uns diese Party beginnen!

Fügen Sie Ihrer Seite das vorkonfigurierte Layout hinzu.

Ich werde mit dem Seitenlayout des Portfolios des Interior Design Company beginnen. Erstellen Sie eine neue Seite, um dieses Layout auf Ihrer Seite zu haben. Geben Sie anschließend Ihrer Seite einen Namen. Wählen Sie „Divi Builder verwenden“ und dann „Visual Builder verwenden“ aus dem Dropdown-Menü. Wählen Sie dann „Choose a Premade Layout“ aus dem Dropdown-Menü. Wählen Sie dann das Interior Design Company Layout Pack im Fenster Load From Library aus. Wählen Sie schließlich bei der Auswahl von Layouts die Portfolio-Seite aus und klicken Sie auf „Dieses Layout verwenden“.

Sie können beginnen, nachdem das Layout auf Ihrer Seite geladen wurde.

Methode 1: Vertikales Ausrichten von Inhalten mit Flex und Auto Margin

Öffnen Sie die Zeileneinstellungen für die zweite Zeile (die direkt unter der Zeile mit dem Seitentitel). Öffnen Sie die Größenoptionsgruppe in den Designoptionen und beachten Sie, dass "Spaltenhöhen ausgleichen" bereits aktiv ist; Dies bedeutet, dass die flex-Eigenschaft („display: flex;“) der Zeile hinzugefügt wurde.

Wechseln Sie unter dem Eingabefeld Hauptelement von Spalte 2 zu den Einstellungen der Registerkarte Erweitert für dieselbe Zeile und fügen Sie das folgende CSS-Snippet hinzu.

Der Inhalt der zweiten Spalte wurde nun vertikal zentriert verschoben.

Den Inhalt unten ausrichten

Sie können den Randwert wie folgt ändern, um Ihren Inhalt unten auszurichten, sodass alle Module am unteren Rand Ihrer Spalte gestapelt werden:

Vertikale Inhaltsausrichtung für die Spalten Ihrer Zeile

Sie können den Inhalt aller Spalten in Ihrer Zeile vertikal zentrieren, indem Sie das folgende Snippet zum Hauptelement Ihrer Zeileneinstellungen hinzufügen, anstatt jeder Spalte einzeln „margin: auto“ hinzuzufügen.

Sie können dieses Snippet auch verwenden, wenn Sie möchten, dass alle Informationen in Ihren Spalten unten ausgerichtet sind:

Denken Sie daran, dass Sie die Funktion zum Erweitern von Stilen von Divi verwenden können, indem Sie mit der rechten Maustaste auf das Hauptelement mit Ihrem CSS-Snippet klicken und "Hauptelement erweitern" auswählen.

Um dann den gesamten Inhalt jeder Spalte auf der Seite vertikal zu zentrieren, wenden Sie das Hauptelement-CSS auf alle Zeilen der Seite (oder des Abschnitts) an.

Alles ist jetzt vertikal ausbalanciert.

Möglicherweise haben Sie jedoch festgestellt, dass die weiße Hintergrundfarbe der Spalte nicht mehr die gesamte Zeile bedeckt, da der Spalte „margin: auto“ hinzugefügt wurde. Sie können dies beheben, indem Sie die Hintergrundfarbe der Zeile in Weiß ändern und den Zeilenabstand entfernen. Stattdessen zeige ich Ihnen, wie Sie den Inhalt Ihrer Spalte zentrieren, ohne den Rand ändern zu müssen.

Methode 2: Vertikales Ausrichten von Inhalten mithilfe der Spaltenflexrichtung

Wir haben die flex-Eigenschaft verwendet, die zuerst der Zeile hinzugefügt wurde. Dadurch wurde jede unserer Spalten zu einer „Flexbox“, die durch Veränderung des Randes vertikal ausgerichtet werden konnte.

Wir können jedoch die Flex-Richtung verwenden, um den Text unserer Spalte auszurichten, ohne den Effekt „Spaltenhöhe anpassen“ zu opfern, der unsere Spalten (und Spaltenhintergründe) gleich groß hält. Um dies zu erreichen, fügen wir unserer Warteschlange einige CSS-Zeilen hinzu, wodurch alle darin enthaltenen Module vertikal gestapelt und dann zentriert werden.

Lassen Sie uns die Rückkehr in den vorherigen ex amp le der Reihe. Indem Sie mit der rechten Maustaste auf benutzerdefiniertes CSS klicken und "Benutzerdefinierte CSS-Stile zurücksetzen" auswählen, können Sie alle benutzerdefinierten CSS-Dateien entfernen, die Sie möglicherweise in den Zeileneinstellungen haben.

Wenden Sie dann in Spalte 2 Hauptelement das folgende CSS an:

Ändern Sie „justify-content: center“ in „justify-content: flex-end“, um den Inhalt unten auszurichten.

Ich mag diese Konfiguration, denn wenn ich meinen Inhalt vertikal positioniere und die Zeile auf die volle Breite mache, bleibt der Inhalt zentriert.

Erstellen von vertikal ausgerichteten Blurbs mit verschiedenen Textmengen

Das vertikale Zentrieren des Inhalts Ihrer Spalten kann auch bei Klappentexten hilfreich sein. Wie Sie vielleicht wissen, enthält nicht jeder Klappentext die gleiche Menge an Text zur Beschreibung einer Funktion oder eines Dienstes. Wenn Sie diese Klappentexte vertikal zentriert machen, kann Ihr Layout schön aussehen.

Für die Digital - Zahlungen Homepage - Layout, werde ich vertikal die blurbs für diese ex ausrichten amp le.

Um eine realistischere Darstellung des Erscheinungsbilds einer Site zu erzielen, füge ich den Klappentexten zunächst unterschiedliche Mengen an Hauptinhalt hinzu.

Jetzt muss ich in den Zeileneinstellungen "Spaltenhöhen ausgleichen".

Jetzt kann ich meinen Text ausrichten und das Design mit CSS-Schnipseln anpassen.

Wir können den Inhalt unserer Spalten vertikal zentrieren, indem wir dem Abschnitt Hauptelement der Registerkarte Erweitert unserer Zeileneinstellungen Folgendes hinzufügen:

Bitte ändern Sie es wie folgt, um sie unten auszurichten.

Sie können auch die erste Spalte unten und die dritte Spalte oben ausrichten, indem Sie Ihre benutzerdefinierten CSS-Stile zurücksetzen und die folgenden benutzerdefinierten Ränder hinzufügen.

 Spalte 1 Hauptelement-CSS:

 Spalte 3 Hauptelement-CSS:

Was ist mit Layouts mit nur einer Spalte?

Sie benötigen kein CSS-Snippet oder Flex, um Ihren einspaltigen Inhalt vertikal zu zentrieren. Sie müssen lediglich sicherstellen, dass Ihr Text oben und unten (oder Module) gleiche Abstände hat. Die meisten Verbraucher benötigen vertikal zentrierten Inhalt auf Layouts mit vielen Spalten, weil sie möchten, dass das angrenzende Material richtig ausgerichtet wird.

Abschließende Gedanken zur vertikalen und horizontalen Ausrichtung von DIVI

Obwohl diese Lösung auf einigen kleinen Ausschnitten von benutzerdefiniertem CSS beruht, kann sie meiner Meinung nach für Leute hilfreich sein, die eine schnelle Heilung für ein zeitaufwändiges Verfahren suchen. Bitte zögern Sie nicht Ihre Meinung zu diesem Ansatz zu teilen, sowie ex amp les, wie es Ihnen Zeit und Mühe in der Vergangenheit gerettet hat.