Die Möglichkeit, die vertikal auszurichten Inhalt beim Erstellen einer Website mit Divi kann eine praktische Ergänzung zu Ihrem Design-Tool sein. Manchmal erfordert eine bestimmte Bestimmung, dass die Inhalt wird auf unterschiedliche Weise vertikal ausgerichtet (zentriert, unten, oben). Das häufigste Bedürfnis besteht darin, sich zu zentrieren Inhalt vertikal.

Es bietet einen köstlichen Hauch von symmetrischem Abstand, der sich als nützlich erweist, wenn Sie mehrere Spaltenlayouts für Ihre Inhalte verwenden. Darüber hinaus bleibt vertikal zentrierter Inhalt bei unterschiedlichen Browserbreiten zentriert, sodass Sie keine benutzerdefinierten Auffüllungen oder Ränder mehr anwenden müssen, um eine ähnliche Reaktionsfähigkeit zu erzielen.

In diesem Tutorial zeige ich Ihnen, wie Sie jeder Spalte ein paar kleine CSS-Snippets hinzufügen, um den Inhalt vertikal auszurichten. Ich werde einige der vorgefertigten Layouts von verwenden Divi für Beispiele, wie man das macht. Wenn Sie nicht viel über CSS wissen, brauchen Sie sich keine Sorgen zu machen. Es wird ganz einfach sein, es in Sekundenschnelle auf Ihre eigenen Layouts anzuwenden.

Flex und Divi verstehen

Die Eigenschaft css Flex (oder Flexbox) ist einfach eine Möglichkeit, Elemente in horizontalen und / oder vertikalen Stapeln zu positionieren (ähnlich wie bei einer Tabelle). Im Gegensatz zu herkömmlichen Tabellen können Sie mit der Eigenschaft flex Felder erstellen, die an die Größe des darin enthaltenen Inhalts angepasst werden.

Divi verwendet die Flex-Eigenschaft immer dann, wenn Sie „Spaltenhöhen ausgleichen“ als Zeilenparameter auswählen. Dadurch wird lediglich sichergestellt, dass die Größe Ihrer Spalten an die Größe der Spalte mit dem meisten Inhalt angepasst wird. Und da „Spaltenhöhen ausgleichen“ Flexibilität für den Zeilencontainer ermöglicht, können Sie diese ganz einfach nutzen, indem Sie CSS zu Ihren Spalten hinzufügen, um den Inhalt jeder Spalte (oder jedes Bereichs) anzupassen.

Wenn Sie beispielsweise einer Spalte in einer Zeile "margin: auto" hinzufügen, wird der Inhalt dieser Spalte (unabhängig davon, ob es sich um ein oder mehrere Module handelt) vertikal zentriert.

Wenn Sie Ihrer Zeile "align-items: center" hinzufügen, werden alle Ihre Spalten (und deren Inhalt) vertikal zentriert.

Natürlich gibt es viele andere Verwendungsmöglichkeiten für die Flex-Eigenschaft im Webdesign sowie erweitertes CSS, das Sie auf Ihr Thema anwenden können. Aber für dieses Tutorial wollte ich es einfach halten.

Ist das wirklich nötig?

Technisch gesehen nein. Sie können Ihre Inhalte / Module mithilfe eines benutzerdefinierten Abstands (Abstand und Rand) vertikal in einer Spalte ausrichten. Sie können beispielsweise die Abstandsoptionen von Divi verwenden, um eine Spalte zu erhalten, die der oberen und unteren Polsterung entspricht, um die Module vertikal in der Spalte zu zentrieren. Sie können einer Spalte auch nur den oberen Abstand hinzufügen, um den unteren Inhalt auszurichten. Möglicherweise müssen Sie jedoch den Abstand anpassen, wenn Sie Ihre Seite mit mehr Inhalt aktualisieren. Darüber hinaus kann es schwierig sein, diese Ausrichtung über verschiedene Browserbreiten hinweg aufrechtzuerhalten.

Wenn Sie also nach einer Lösung suchen, um Inhalte vertikal auszurichten, ohne über benutzerdefinierte Abstände nachdenken zu müssen, werden Sie dies nützlich finden.

Fangen wir an!

Laden Sie das vordefinierte Layout auf Ihre Seite

Zu Beginn verwende ich das Layout aus dem Portfolio der Interior Design Company. Erstellen Sie eine neue Seite, um dieses Layout auf Ihre Seite zu bringen. Dann geben Sie Ihrer Seite einen Titel. Klicken Sie auf "Divi Builder verwenden" und dann auf "Visual Builder verwenden". Wählen Sie dann die Option "Grundlayout auswählen". Wählen Sie dann das Layout-Kit der Interior Design Company aus dem Einblendfenster "Aus Bibliothek laden". Wählen Sie abschließend die Seite Portfolio aus der Liste der Layouts aus und klicken Sie auf "Dieses Layout verwenden".

template divi theme wordpress.png

Sobald das Layout auf Ihrer Seite geladen ist, können Sie loslegen.

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

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

harmoniere die Höhe der columns.png

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

marginauto;

automatische Marge Divi.png

Nun wurde der Inhalt der zweiten Spalte so verschoben, dass er vertikal zentriert ist.

Richten Sie den unteren Inhalt aus

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

marginauto 0;

Marge dividi line.png

Vertikale Ausrichtung des Inhalts 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 dem Hauptelement Ihrer Zeileneinstellungen das folgende Snippet hinzufügen.

align-items: center;

Richten Sie divi.png-Elemente aus

Oder wenn Sie möchten, dass der gesamte Inhalt Ihrer Spalten unten ausgerichtet wird, können Sie diesen Auszug hinzufügen:

align-items: flex-end;

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

Erweitere Hauptelement.png

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

Erweitern Sie Stile auf divi.png

Jetzt ist alles vertikal zentriert.

Aussehen der Divi.png ändert sich

Möglicherweise haben Sie jedoch bemerkt, dass die Hintergrundfarbe der weißen Spalte nicht mehr die gesamte Höhe der Zeile abdeckt. Dies liegt daran, dass wir der Spalte "margin: auto" hinzugefügt haben. Um dieses Problem zu beheben, können Sie die Hintergrundfarbe der Linie in Weiß ändern und die Füllung aus der Linie entfernen. Stattdessen zeige ich Ihnen eine Möglichkeit, Ihren Spalteninhalt zu zentrieren, ohne den Rand zu ändern.

Methode 2: Richten Sie den Inhalt vertikal in Richtung der Spaltenflexion aus

Bei der ersten Methode haben wir die der Zeile hinzugefügte Flex-Eigenschaft genutzt. Dies machte jede unserer Spalten zu einer „flexiblen Box“, die durch einfaches Anpassen des Randes vertikal ausgerichtet werden konnte.

Es gibt aber auch eine Möglichkeit, unseren Spalteninhalt in Flex-Richtung auszurichten, ohne den Effekt „Spaltenhöhe ausgleichen“ zu verlieren, wodurch unsere Spalten (und Spaltenhintergründe) gleich groß bleiben. Dazu fügen wir unserer Spalte nur ein paar Zeilen CSS hinzu, sodass alle Module in der Spalte vertikal gestapelt und dann zentriert werden.

Kehren wir zu unserer Linie im vorherigen Beispiel zurück. Öffnen Sie die Zeileneinstellungen und entfernen Sie alle benutzerdefinierten CSS-Dateien, 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 der Spalte 2, Hauptelement, hinzu:

Anzeige: flex; Flex-Richtung: Säule; Rechtfertigungsinhalt: Mitte;

Lenkung Flex-column.png

Oder, wenn ich den Inhalt unten ausrichten wollte, ersetzen Sie einfach "Inhalt ausrichten: Mitte" durch "Inhalt ausrichten: Flex-End".

flex alignment end.png

Das Besondere an diesem Setup ist, dass der Inhalt zentriert bleibt, wenn mein Inhalt vertikal zentriert ist und die Zeilenbreite erreicht ist.

Aussehen der Boxen.png

Erstellen Sie Unschärfen (Zusammenfassung) mit unterschiedlich viel vertikal ausgerichtetem Text

Das vertikale Zentrieren des Spalteninhalts kann auch für Klappentexte nützlich sein. Wie Sie wissen, enthalten nicht alle Klappentexte genau die Textmenge, die für d verwendet wirdschreiben Funktion oder Dienst. Wenn Sie diese Klappentexte vertikal zentrieren, können Sie ein schönes Design für Ihr Layout erstellen.

In diesem Beispiel werde ich die Klappentexte vertikal am Layout der Homepage für digitale Zahlungen ausrichten.

Ich werde zuerst den Klappentexten unterschiedliche Mengen an Text hinzufügen, um eine realistischere Darstellung der Website zu erhalten.

blorbds.png Ausrichtung

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

harmonisieren columns.png

Jetzt kann ich meine CSS-Snippets hinzufügen, um meinen Inhalt anzupassen 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;

Ändern Sie die Inhaltsausrichtung divi.png

Oder ändern Sie es, indem Sie sie nach unten ausrichten.

align-items: flex-end;

Ausrichtung am unteren Divi.png

Sie können auch 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.

CSS-Hauptelement der 1-Spalte:

marginauto auto 0;

CSS-Hauptelement der 3-Spalte:

margin0 auto auto;

Passen Sie die Ausrichtung von abstracts divi.png an

Was ist mit einspaltigen Layouts?

Technisch gesehen benötigen Sie kein CSS oder Flex-Snippet, um Ihren Spalteninhalt vertikal zu zentrieren. Alles, was Sie tun müssen, ist sicherzustellen, dass Sie über und unter Ihren Inhalten (oder Modulen) den gleichen Abstand haben. In den meisten Fällen benötigen Benutzer vertikalen Inhalt, der sich auf Layouts mit mehreren Spalten konzentriert, da benachbarte Inhalte perfekt ausgerichtet werden sollen.

Das ist alles für dieses Tutorial, das Ihnen zeigt, wie Sie Elemente in Divi auf derselben Linie ausrichten.