Springe zum Hauptinhalt

Wie man Elemente auf der gleichen Linie auf Divi ausrichtet

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Die Möglichkeit, Inhalte beim Erstellen einer Site mit Divi vertikal auszurichten, kann eine praktische Ergänzung Ihres Designtools sein. Manchmal erfordert ein bestimmtes Layout, dass der Inhalt auf unterschiedliche Weise vertikal ausgerichtet wird (zentriert, niedrig, hoch). Am häufigsten müssen Sie Ihre Inhalte vertikal zentrieren.

Es bietet einen schönen und praktischen symmetrischen Abstandsschlüssel, wenn Sie mehrere Spaltenlayouts für Ihren Inhalt verwenden. Darüber hinaus bleiben vertikal zentrierte Inhalte in unterschiedlichen Browserbreiten zentriert, sodass Sie keine benutzerdefinierten Füllungen oder Ränder für eine ähnliche Reaktionszeit anwenden müssen.

In diesem Tutorial zeige ich Ihnen, wie Sie jeder Spalte ein paar kleine CSS-Ausschnitte hinzufügen, um den Inhalt vertikal auszurichten. Ich werde einige der vordefinierten Divi-Layouts als Beispiele für das weitere Vorgehen verwenden. Wenn Sie nicht viel über CSS wissen, müssen Sie sich keine Sorgen machen. Das Anwenden auf eigene Layouts wird in Sekundenschnelle ziemlich einfach sein.

Flex und Divi verstehen

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

Divi verwendet die flex-Eigenschaft, wenn Sie "Spaltenhöhen ausgleichen" als Linienparameter auswählen. Dadurch wird lediglich sichergestellt, dass die Größe Ihrer Spalten der Größe der Spalte mit dem meisten Inhalt entspricht. Und da die Option Spaltenhöhen angleichen den Flex für den Zeilencontainer aktiviert, können Sie diesen problemlos nutzen, indem Sie Ihren Spalten CSS hinzufügen, um den Inhalt jeder Spalte (oder Zone) 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 der Flex-Eigenschaft im Webdesign sowie erweiterte CSS-Funktionen, die Sie auf Ihr Thema anwenden können. Aber für dieses Tutorial wollte ich die Dinge einfach halten.

Ist das wirklich nötig?

Technisch nein. Sie können Ihre Inhalte / Module in einer Spalte mit benutzerdefinierten Abständen (Füllung und Rand) vertikal ausrichten. Beispielsweise können Sie die Optionen für den Divi-Abstand verwenden, um eine Spalte mit gleichem Abstand zum oberen und unteren Rand zu versehen und die Module vertikal in der Spalte zu zentrieren. Sie können auch nur eine Füllung hinzufügen, die größer als eine Spalte ist, um den niedrigeren 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 bei verschiedenen Browserbreiten beizubehalten.

Wenn Sie also nach einer Lösung suchen, um den Inhalt vertikal auszurichten, ohne über die benutzerdefinierten Abstände nachdenken zu müssen, werden Sie dies hilfreich finden.

Fangen wir an!

Laden Sie das vordefinierte Layout auf Ihre Seite

Für den Anfang verwende ich das Layout der Portfolio-Aufstellung von Interior Design Company. Erstellen Sie eine neue Seite, um dieses Layout auf Ihrer Seite zu erhalten. 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 "Grundlayout auswählen". Wählen Sie dann das Interior Design Company-Layout-Kit im Popup-Fenster Aus Bibliothek laden aus. Wählen Sie abschließend die Portfolio-Seite in 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.

1-Methode: Vertikale Ausrichtung von Inhalten mit Flex und automatischem Rand

Öffnen Sie die Zeilenparameter der zweiten Zeile der Seite (diejenige direkt unter der Zeile mit dem Seitentitel). Öffnen Sie unter den Entwurfsparametern 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 auf der Registerkarte Erweitert für dieselbe Zeile und fügen Sie das folgende CSS-Snippet unter dem Eingabefeld des Hauptelements in der 2-Spalte hinzu.

Marge: Auto;

automatische Marge Divi.png

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

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:

Marge: Auto 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 das folgende Snippet zum Hauptelement Ihrer Zeilenparameter hinzufügen.

align-Artikel: Zentrum;

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-Ende;

Und vergessen Sie nicht, dass Sie die Divi Extend Styles-Funktion 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 Linie abdeckt. Dies liegt daran, dass wir der Spalte "margin: auto" hinzugefügt haben. Um dieses Problem zu beheben, können Sie die Hintergrundfarbe der leeren Zeile ändern und die Füllung aus der Zeile entfernen. Stattdessen zeige ich Ihnen eine Möglichkeit, den Inhalt Ihrer Spalte zu zentrieren, ohne den Rand zu ändern.

2-Methode: Vertikale Ausrichtung von Inhalten in Spaltenflexrichtung

Bei der ersten Methode haben wir die Flex-Eigenschaft ausgenutzt, die der Linie hinzugefügt wurde. Dies hat jede unserer Spalten zu einer "flexiblen Box" gemacht, die durch einfaches Anpassen des Randes vertikal ausgerichtet werden kann.

Es gibt jedoch auch die Möglichkeit, den Inhalt unserer Spalte in Flex-Richtung auszurichten, ohne den Effekt "Spaltenhöhe angleichen" zu verlieren, wodurch unsere Spalten (und die Hintergründe der Spalten) gleich groß bleiben. Dazu fügen wir unserer Spalte einfach ein paar Zeilen CSS hinzu, sodass alle Module in der Spalte vertikal gestapelt und dann zentriert werden.

Kehren wir zu unserer Zeile im vorherigen Beispiel zurück. Öffnen Sie die Linieneinstellungen und löschen Sie alle benutzerdefinierten CSS-Dateien, indem Sie mit der rechten Maustaste auf benutzerdefiniertes CSS und dann auf "Benutzerdefinierte CSS-Stile zurücksetzen" klicken.

Fügen Sie dann das folgende CSS unter der Spalte 2, Hauptelement, hinzu:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Anzeige: Flex; Flex-Richtung: Spalte; Inhalt rechtfertigen: 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 Tolle an diesem Setup ist, dass wenn mein Inhalt vertikal zentriert ist und die Breite der Linie erreicht ist, der Inhalt zentriert bleibt.

Aussehen der Boxen.png

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

Das vertikale Zentrieren des Spalteninhalts kann auch bei Klappentexten hilfreich sein. Wie Sie wissen, enthalten nicht alle Klappentexte die genaue Textmenge, die zur Beschreibung der Funktion oder Dienstleistung verwendet wird. Wenn Sie diese Blurbs vertikal zentrieren, erhalten Sie ein schönes Design für Ihr Layout.

In diesem Beispiel werden die Unschärfen im Layout der Digital Payments-Homepage vertikal ausgerichtet.

Ich werde zunächst den Klappentexten eine andere Menge an Text hinzufügen, um eine realistischere Darstellung zu erhalten, wie eine Site aussehen könnte.

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-Artikel: Zentrum;

Ändern Sie die Inhaltsausrichtung divi.png

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

align-items: Flex-Ende;

Ausrichtung am unteren Divi.png

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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:

Marge: Auto Auto 0;

CSS-Hauptelement der 3-Spalte:

Marge: 0 Auto Auto;

Passen Sie die Ausrichtung von abstracts divi.png an

Was ist mit einspaltigen Layouts?

Technisch gesehen benötigen Sie kein CSS-Snippet oder -Flex, um Ihren Spalteninhalt vertikal zu zentrieren. Alles was Sie tun müssen, ist sicherzustellen, dass Sie über und unter Ihrem Inhalt (oder Ihren Modulen) den gleichen Abstand haben. In den meisten Fällen benötigen Benutzer vertikale Inhalte, die sich auf mehrspaltige Modelle konzentrieren, da der angrenzende Inhalt perfekt ausgerichtet werden soll.

In diesem Tutorial erfahren Sie, wie Sie Elemente in Divi auf derselben Linie ausrichten.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie2
tweet
Registrieren2