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

Beim Erstellen einer Website mit Divi kann die Option zur vertikalen Inhaltsausrichtung eine wertvolle Ergänzung Ihres Design-Werkzeugkastens sein. Je nach Layout kann es erforderlich sein, Inhalte auf verschiedene Arten vertikal auszurichten (zentriert, unten, oben). Am häufigsten wird die vertikale Ausrichtung benötigt. Sie verleiht Ihren Inhalten eine ansprechende, symmetrische Anordnung, was insbesondere bei mehrspaltigen Layouts von Vorteil ist. Darüber hinaus bleibt vertikal zentrierter Inhalt über die gesamte Browserbreite zentriert, sodass keine benutzerdefinierten Abstände (Padding oder Margin) für eine vergleichbare Responsivität erforderlich sind.

In dieser Lektion zeige ich Ihnen, wie Sie Inhalte in beliebigen Spalten mithilfe weniger CSS-Zeilen vertikal ausrichten. Zur Veranschaulichung verwende ich einige vorgefertigte Layouts von Divi. Keine Sorge, falls Sie mit CSS noch nicht vertraut sind. Innerhalb weniger Sekunden können Sie dies in Ihrem Design anwenden.

• Den Unterschied zwischen Flex und Divi verstehen
• Ist das erforderlich?
• Fügen Sie das vorkonfigurierte Layout zu Ihrer Seite hinzu.
• Methode 1: Inhalte vertikal ausrichten mit Flexbox und automatischem Rand
• Ausrichtung des Inhalts am unteren Rand
• Vertikale Inhaltsausrichtung für die Spalten Ihrer Zeile
• Methode 2: Inhalte vertikal ausrichten mithilfe der Spaltenflexibilität
• Wie sieht es mit Layouts mit nur einer Spalte aus?
• Abschließende Gedanken zur vertikalen und horizontalen Ausrichtung von DIVI

Den Unterschied zwischen Flex und Divi verstehen

Das CSS-Attribut Flex (oder Flexbox) dient dazu, Elemente horizontal und vertikal anzuordnen (ähnlich einer Tabelle). Im Gegensatz zu herkömmlichen Tabellen ermöglicht Flex jedoch die Erstellung von Boxen, die sich flexibel an die Größe ihres Inhalts anpassen.

Divi verwendet das Flexbox-Attribut, wenn Sie in den Zeileneinstellungen „Spaltenhöhen angleichen“ auswählen. Dadurch wird sichergestellt, dass sich die Größe aller Spalten an die Größe der Spalte mit den meisten Informationen anpasst. Da „Spaltenhöhen angleichen“ die Flexbox-Eigenschaften des Zeilencontainers aktiviert, können Sie diese Funktion nutzen, indem Sie Ihren Spalten CSS hinzufügen, um den Inhalt jeder Spalte (bzw. jedes Containers) anzupassen.

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

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

Natürlich bietet die Flexbox-Eigenschaft viele weitere Anwendungsmöglichkeiten im Webdesign und im fortgeschrittenen CSS, die Sie in Ihrem Theme nutzen können. Für dieses Tutorial wollte ich es jedoch einfach halten.

Ist das erforderlich?

Technisch gesehen nein. Sie können benutzerdefinierte Abstände verwenden, um Ihre Inhalte/Module innerhalb einer Spalte vertikal zu positionieren (Padding und Margin).ampkönnen Sie mit den Abstandsoptionen von Divi die Module in der Warteschlange vertikal zentrieren, um einer Spalte oben und unten gleichmäßigen Abstand zu geben. Sie können den Inhalt auch unten ausrichten, indem Sie einer Spalte oben einen Abstand hinzufügen. Wenn Sie Ihrer Seite weitere Inhalte hinzufügen, müssen Sie möglicherweise die Abstände anpassen. Darüber hinaus kann es problematisch sein, diese Ausrichtung auf verschiedenen Browsergrößen beizubehalten.

Wenn Sie also nach einer Möglichkeit suchen, Informationen vertikal auszurichten, ohne sich Gedanken über bestimmte Abstände machen zu müssen, dann wird Ihnen dies meiner Meinung nach von Nutzen sein.

Lasst die Party beginnen!

Fügen Sie das vorkonfigurierte Layout zu Ihrer Seite hinzu.

Ich beginne mit dem Seitenlayout „Portfolio für Innenarchitekturbüros“. Erstellen Sie eine neue Seite, um dieses Layout zu verwenden. Geben Sie der Seite anschließend einen Namen. Wählen Sie im Dropdown-Menü „Divi Builder verwenden“ und dann „Visuellen Builder verwenden“. Wählen Sie anschließend im Dropdown-Menü „Vorgefertigtes Layout auswählen“. Wählen Sie dann im Fenster „Aus Bibliothek laden“ das Layoutpaket „Innenarchitekturbüro“ aus. Wählen Sie abschließend unter „Layouts“ die Portfolio-Seite aus und klicken Sie auf „Dieses Layout verwenden“

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

Methode 1: Inhalte vertikal ausrichten mit Flexbox und automatischem Rand

Öffnen Sie die Zeileneinstellungen für die zweite Zeile (die direkt unter der Zeile mit dem Seitentitel). Aktivieren Sie die Option „Größenanpassung“ in den Designoptionen. Beachten Sie, dass „Spaltenhöhen angleichen“ bereits aktiviert ist. Dies bedeutet, dass die Flexbox-Eigenschaft („display: flex;“) der Zeile hinzugefügt wurde.

Gehen Sie unter dem Eingabefeld „Hauptelement Spalte 2“ zu den Einstellungen auf der Registerkarte „Erweitert“ für dieselbe Zeile und fügen Sie den folgenden CSS-Codeausschnitt hinzu.

Der Inhalt der zweiten Spalte wurde nun vertikal zentriert.

Ausrichtung des Inhalts am unteren Rand

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 den folgenden Code-Schnipsel zum Hauptelement Ihrer Zeileneinstellungen hinzufügen, anstatt „margin: auto“ zu jeder Spalte einzeln hinzuzufügen.

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

Denken Sie daran, 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 „Hauptelement erweitern“ auswählen

Um den gesamten Inhalt jeder Spalte auf der Seite vertikal zu zentrieren, wenden Sie anschließend das CSS des Hauptelements auf alle Zeilen der Seite (oder des Abschnitts) an.

Alles ist nun vertikal ausgeglichen.

Möglicherweise ist Ihnen aufgefallen, dass die weiße Spaltenhintergrundfarbe aufgrund der Spaltenangabe „margin: auto“ nicht mehr die gesamte Zeile abdeckt. Sie könnten dies beheben, indem Sie die Zeilenhintergrundfarbe auf Weiß ändern und den Zeilenabstand entfernen. Ich zeige Ihnen jedoch, wie Sie den Inhalt Ihrer Spalte zentrieren, ohne den Spaltenrand ändern zu müssen.

Methode 2: Inhalte vertikal ausrichten mithilfe der Spaltenflexibilität

Wir haben zunächst die Flex-Eigenschaft der Zeile hinzugefügt. Dadurch wurde jede unserer Spalten zu einer „Flexbox“, die durch Ändern des Randes vertikal ausgerichtet werden konnte.

Wir können jedoch `flex-direction` verwenden, um den Text unserer Spalte auszurichten, ohne den Effekt „Spaltenhöhe angleichen“ zu beeinträchtigen, der dafür sorgt, dass unsere Spalten (und Spaltenhintergründe) die gleiche Größe haben. Dazu fügen wir unserer CSS-Warteschlange einige Zeilen hinzu, die bewirken, dass alle Module darin vertikal gestapelt und anschließend zentriert werden.

Kehren wir zur Zeile des vorherigenampzurück. Durch einen Rechtsklick auf „Benutzerdefiniertes CSS“ und die Auswahl von „Benutzerdefinierte CSS-Stile zurücksetzen“ können Sie alle benutzerdefinierten CSS-Anweisungen in den Zeileneinstellungen entfernen.

Wenden Sie anschließend im Hauptelement der zweiten Spalte folgenden CSS-Code an:

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

Mir gefällt diese Konfiguration, weil der Inhalt zentriert bleibt, wenn ich ihn vertikal positioniere und die Zeile auf volle Breite ausrichte.

Erstellung vertikal ausgerichteter Kurzbeschreibungen mit unterschiedlichen Textmengen

Die vertikale Zentrierung des Spalteninhalts kann auch bei kurzen Textabschnitten hilfreich sein. Wie Sie vielleicht wissen, benötigen nicht alle kurzen Textabschnitte die gleiche Länge, um eine Funktion oder Dienstleistung zu beschreiben. Durch die vertikale Zentrierung dieser kurzen Textabschnitte wirkt Ihr Layout ansprechender.

Für das Layout der Startseite für digitale Zahlungen werde ich die Kurzbeschreibungen in diesemampvertikal ausrichten.

Um eine realistischere Darstellung des Erscheinungsbilds einer Website zu erzeugen, werde ich zunächst den Kurzbeschreibungen unterschiedlich viel Text hinzufügen.

Nun muss ich in den Zeileneinstellungen die Option „Spaltenhöhen angleichen“ aktivieren.

Jetzt kann ich meinen Text ausrichten und das Design mithilfe von CSS-Snippets anpassen.

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

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

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

 CSS für das Hauptelement der Spalte 1:

 CSS für das Hauptelement der Spalte 3:

Wie sieht es mit Layouts mit nur einer Spalte aus?

Sie benötigen weder CSS-Code noch Flexbox, um einspaltige Inhalte vertikal zu zentrieren. Es genügt, sicherzustellen, dass Ihr Text oberhalb und unterhalb (bzw. zwischen den Modulen) den gleichen Abstand hat. Die meisten Nutzer wünschen sich vertikal zentrierte Inhalte in mehrspaltigen Layouts, damit die angrenzenden Elemente korrekt ausgerichtet sind.

Abschließende Gedanken zur vertikalen und horizontalen Ausrichtung von DIVI

Auch wenn diese Lösung nur wenige kleine CSS-Schnipsel erfordert, denke ich, dass sie für alle hilfreich sein kann, die eine schnelle Lösung für ein zeitaufwändiges Verfahren suchen. Teilen Sie mir gerne Ihre Meinung zu diesem Ansatz mit undampSie, wie er Ihnen in der Vergangenheit Zeit und Mühe erspart hat.