So richten Sie Inhalte in Divi . vertikal aus

Die Möglichkeit, Inhalte beim Erstellen einer Site mit Divi vertikal auszurichten, kann eine praktische Ergänzung Ihres Design-Tool-Gürtels sein. Manchmal erfordert ein bestimmtes Layout, dass Inhalte auf unterschiedliche Weise vertikal ausgerichtet werden (zentriert, unten, oben). Die häufigste Anforderung besteht darin, dass Ihre Inhalte vertikal zentriert sind. Es bietet einen angenehmen Hauch von symmetrischem Abstand, der sich bei der Verwendung mehrerer Spaltenlayouts für Ihre Inhalte als sehr praktisch erweist. Darüber hinaus bleiben vertikal zentrierte Inhalte auf verschiedenen Browserbreiten zentriert, was das Anwenden von benutzerdefinierten Auffüllungen oder Rändern erleichtert, um eine ähnliche Reaktionsfähigkeit zu erzielen.

In diesem Tutorial zeige ich Ihnen, wie Sie jeder Spalte ein paar kleine CSS-Schnipsel hinzufügen können, um den Inhalt vertikal auszurichten. Ich werde einige der vorgefertigten Layouts von Divi als Beispiele dafür verwenden. Wenn Sie nicht viel über CSS wissen, müssen Sie sich keine Sorgen machen. Dies ist einfach genug, um es in Sekunden auf Ihre eigenen Layouts anzuwenden.

Flex und Divi . verstehen

Die CSS-Eigenschaft Flex (oder Flexbox) ist einfach eine Möglichkeit zum Positionieren von Elementen in horizontalen und/oder vertikalen Stapeln (wie eine Tabelle). Im Gegensatz zu herkömmlichen Tabellen können Sie mit der Flex-Eigenschaft jedoch Boxen erstellen, die sich an die Größe des darin enthaltenen Inhalts anpassen oder "flexen".

Divi verwendet die Flex-Eigenschaft immer dann, wenn Sie "Spaltenhöhen ausgleichen" als Zeileneinstellung auswählen. Dadurch wird einfach sichergestellt, dass sich die Größe Ihrer Spalten alle an die Größe der Spalte mit dem meisten Inhalt anpasst. Und da „Spaltenhöhen angleichen“ die Flexibilität für den Zeilencontainer aktiviert, können Sie dies problemlos nutzen, indem Sie Ihren Spalten CSS hinzufügen, um den Inhalt jeder Spalte (oder Box) anzupassen.

Wenn Sie beispielsweise einer beliebigen Spalte in einer Zeile „margin: auto“ hinzufügen, wird der Inhalt dieser Spalte (ob ein oder mehrere Module) vertikal zentriert.

Auch wenn Sie „align-items:center;“ hinzufügen zu Ihrer Zeile werden alle Ihre Spalten (und deren Inhalt) vertikal zentriert.

Natürlich gibt es im Webdesign noch viel mehr Verwendungsmöglichkeiten für die Flex-Eigenschaft, zusammen mit fortgeschrittenerem CSS, das Sie auf Ihr Design anwenden können. Aber für dieses Tutorial wollte ich die Dinge einfach halten.

Ist das wirklich notwendig?

Technisch nein. Sie können Ihre Inhalte/Module innerhalb einer Spalte mit benutzerdefinierten Abständen (Abstand und Rand) vertikal ausrichten. Sie können beispielsweise die Abstandsoptionen von Divi verwenden, um einer Spalte den gleichen oberen und unteren Abstand zu geben, um die Module innerhalb der Spalte vertikal zu zentrieren. Oder Sie können einer Spalte nur obere Abstände hinzufügen, damit der Inhalt unten ausgerichtet wird. Möglicherweise müssen Sie jedoch den Abstand anpassen, wenn Sie Ihre Seite mit mehr Inhalten aktualisieren. Außerdem kann es schwierig sein, diese Ausrichtung bei verschiedenen Browserbreiten beizubehalten.

Wenn Sie also nach einer Lösung zum vertikalen Ausrichten von Inhalten suchen, ohne über benutzerdefinierte Abstände nachdenken zu müssen, wird dies meiner Meinung nach nützlich sein.

Lass uns anfangen!

Laden Sie das vorgefertigte Layout auf Ihre Seite

Zum Auftakt verwende ich das Portfolio-Seitenlayout der Interior Design Company. Um dieses Layout auf Ihrer Seite zu erhalten, erstellen Sie eine neue Seite. Geben Sie dann Ihrer Seite einen Titel. Klicken Sie auf „Divi Builder verwenden“ und dann auf „Visual Builder verwenden“. Wählen Sie dann die Option „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie dann das Interior Design Company Layout Pack im Popup Aus Bibliothek laden aus. Wählen Sie abschließend die Portfolio-Seite aus der Liste der Layouts aus und klicken Sie auf „Dieses Layout verwenden“.

Sobald das Layout auf Ihre Seite geladen wurde, können Sie loslegen.

Methode 1: So richten Sie Inhalte mit Flex und Auto Margin vertikal aus

Öffnen Sie die Zeileneinstellungen der zweiten Zeile auf der Seite (derjenigen direkt unter der Zeile mit dem Seitentitel). Öffnen Sie unter den Designeinstellungen die Optionsgruppe Größenanpassung und beachten Sie, dass "Spaltenhöhen ausgleichen" bereits aktiv ist. Dies bedeutet, dass der Zeile jetzt die Eigenschaft flex („display: flex;“) hinzugefügt wurde.

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

margin: auto;

Jetzt wurde der Inhalt der zweiten Spalte verschoben, um vertikal zentriert zu werden.

Den Inhalt unten ausrichten

Wenn Sie Ihren Inhalt am unteren Rand ausrichten möchten, damit alle Module am unteren Rand Ihrer Spalte gestapelt werden, können Sie den Randwert wie folgt anpassen:

margin: auto auto 0;

Vertikales Ausrichten von Inhalten für alle Spalten in Ihrer Zeile

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

align-items: center;

Wenn Sie möchten, dass der gesamte Inhalt Ihrer Spalten unten ausgerichtet ist, können Sie dieses Snippet hinzufügen:

align-items: flex-end;

Und vergessen Sie nicht, dass Sie Divis Extend Styles-Funktion nutzen können, indem Sie mit Ihrem CSS-Snippet mit der rechten Maustaste auf das Hauptelement klicken und auf "Hauptelement erweitern" klicken.

Erweitern Sie dann das Hauptelement css auf alle Zeilen der Seite (oder des Abschnitts), um den gesamten Inhalt jeder Spalte auf der Seite vertikal zu zentrieren.

Jetzt ist alles vertikal zentriert.

Sie haben jedoch vielleicht bemerkt, dass die weiße Hintergrundfarbe der Spalte nicht mehr die volle Höhe der Zeile umfasst. Dies liegt daran, dass wir der Spalte „margin: auto“ hinzugefügt haben. Um dies zu beheben, können Sie die Hintergrundfarbe der Zeile in Weiß ändern und den Zeilenabstand entfernen. Stattdessen zeige ich Ihnen eine Möglichkeit, den Inhalt Ihrer Spalte zu zentrieren, ohne den Rand zu ändern.

Methode 2: Vertikales Ausrichten von Inhalten mithilfe der Spaltenflexrichtung

Bei der ersten Methode nutzten wir die Vorteile der Flex-Eigenschaft, die der Zeile hinzugefügt wurde. Dadurch wurde jede unserer Säulen zu einer „Flexbox“, die durch einfaches Anpassen des Randes vertikal ausgerichtet werden kann.

Aber es gibt auch eine Möglichkeit, die Flex-Richtung zu verwenden, um den Inhalt unserer Spalte auszurichten, ohne den Effekt "Spaltenhöhe anpassen" zu verlieren, der unsere Spalten (und Spaltenhintergründe) gleich groß hält. Dazu fügen wir unserer Spalte einfach ein paar CSS-Zeilen hinzu, sodass alle Module innerhalb der Spalte vertikal gestapelt und dann zentriert werden.

Kehren wir zu unserer Zeile im vorherigen Beispiel zurück. Öffnen Sie die Zeileneinstellungen und entfernen Sie alle benutzerdefinierten CSS, die Sie möglicherweise darin haben, indem Sie mit der rechten Maustaste auf Benutzerdefiniertes CSS klicken und auf "Benutzerdefinierte CSS-Stile zurücksetzen" klicken.

Fügen Sie dann das folgende CSS unter Column 2 Main Element hinzu:

display: flex;
flex-direction: column;
justify-content: center;

Oder wenn ich den Inhalt unten ausrichten wollte, ändere einfach „justify-content: center“ in „justify-content: flex-end“.

Das Tolle an diesem Setup ist, dass der Inhalt zentriert bleibt, wenn ich meinen Inhalt vertikal zentriert habe und die Zeile auf die volle Breite mache.

Erstellen von Blurbs mit verschiedenen Textmengen, die vertikal ausgerichtet sind

Das vertikale Zentrieren Ihres Spalteninhalts kann auch für Klappentexte nützlich sein. Wie Sie wissen, enthält nicht jeder Klappentext die genaue Textmenge, die zur Beschreibung der Funktion oder des Dienstes verwendet wird. Wenn Sie diese Klappentexte vertikal zentriert machen, können Sie ein schönes Design für Ihr Layout erstellen.

In diesem Beispiel richte ich die Klappentexte im Layout der Digital Payments-Startseite vertikal aus.

Ich werde zuerst den Klappentexten einige unterschiedliche Mengen an Fließtext hinzufügen, um eine realistischere Darstellung des Aussehens einer Site zu erhalten.

Jetzt muss ich zu den Zeileneinstellungen und "Spaltenhöhen ausgleichen" gehen.

Jetzt kann ich meine CSS-Snippets hinzufügen, um meine Inhalte auszurichten und das Design zu ändern.

Auf der Registerkarte Erweitert Ihrer Zeileneinstellungen können wir den Inhalt unserer Spalten vertikal zentrieren, indem wir unter Hauptelement Folgendes hinzufügen:

align-items: center;

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

align-items: flex-end;

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

Spalte 1 Hauptelement-CSS:

margin: auto auto 0;

Spalte 3 Hauptelement-CSS:

margin: 0 auto auto;

Was ist mit einspaltigen Layouts?

Technisch gesehen benötigen Sie kein CSS-Snippet oder Flex, um Ihren einspaltigen Inhalt vertikal zu zentrieren. Sie müssen lediglich sicherstellen, dass über und unter Ihren Inhalten (oder Modulen) gleiche Abstände vorhanden sind. Meistens benötigen Benutzer vertikal zentrierten Inhalt in Layouts mit mehreren Spalten, weil sie möchten, dass der angrenzende Inhalt perfekt ausgerichtet ist.

Viele Anwendungen

Es gibt viele nützliche Anwendungen, die Ihre Inhalte in Divi vertikal ausrichten. Dies wäre praktisch für Überschriften mit einem zweispaltigen Layout mit dem Überschriftentext in einer Spalte und Sie möchten sicherstellen, dass ein CTA (Schaltfläche) in der anderen Spalte vertikal zentriert ist. Es wäre auch hilfreich, Logos in einem sechsspaltigen Layout vertikal zu zentrieren (insbesondere wenn die Logos leicht unterschiedliche Abmessungen haben).

Abschließende Gedanken

Obwohl diese Methode auf ein paar kleinen Ausschnitten von benutzerdefiniertem CSS beruht, glaube ich, dass die Anwendung für diejenigen, die eine schnelle Lösung für einen manchmal umständlichen Prozess suchen, äußerst nützlich sein kann. Ich würde gerne von anderen Beispielen hören, bei denen dies nützlich sein könnte.

Fühlen Sie sich frei, Ihre Ideen und Kommentare unten zu teilen.

Danke schön!