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

Wenn Sie eine Website mit Divi erstellen, kann die Option zur vertikalen Ausrichtung von Inhalten eine wertvolle Ergänzung Ihres Design-Toolkits sein. Abhängig vom Layout muss der Inhalt möglicherweise auf unterschiedliche Weise vertikal ausgerichtet werden (zentriert, unten, oben). Der häufigste Bedarf besteht darin, dass Ihr Material vertikal ausgerichtet ist. Es verleiht Ihrem Inhalt einen schönen Hauch symmetrischer Abstände, was bei der Verwendung mehrerer Spaltenlayouts sehr nützlich ist. Darüber hinaus bleiben vertikal zentrierte Inhalte über die gesamte Browserbreite zentriert, sodass keine benutzerdefinierten Abstände oder Ränder erforderlich sind, um eine ähnliche Reaktionsfähigkeit zu erreichen.

In dieser Lektion zeige ich Ihnen, wie Sie mit ein paar einfachen CSS-Zeilen den Inhalt einer beliebigen Spalte 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 wenigen Sekunden können Sie dies auf Ihr 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 mit Flex und Auto-Rand ausrichten
• Den Inhalt unten ausrichten
• Vertikale Inhaltsausrichtung für die Spalten Ihrer Zeile
• Methode 2: Inhalte mithilfe der Spaltenflexionsrichtung vertikal ausrichten
• 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 lediglich ein Mittel, um Elemente in horizontalen und vertikalen Stapeln anzuordnen (ähnlich einer Tabelle). Im Gegensatz zu typischen Tabellen können Sie mit der Flex-Funktion jedoch Boxen erstellen, die sich an die Größe des darin enthaltenen Inhalts anpassen.

Divi verwendet das Flex-Attribut, wenn Sie „Spaltenhöhen ausgleichen“ als Zeileneinstellung wä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 ausgleichen“ die Flexibilität für den Zeilencontainer auslöst, können Sie diese nutzen, indem Sie Ihren Spalten CSS hinzufügen, um den Inhalt jeder Spalte (oder Box) zu ändern.

Wenn Sie beispielsweise „margin: auto“ zu einer Spalte in einer Zeile hinzufügen, wird der Inhalt dieser Spalte ( amp davon, 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;“ hinzufügen. zu deiner Reihe.

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

Ist das 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). amp können Sie die Abstandsoptionen von Divi verwenden, um die Module innerhalb der Warteschlange vertikal zu zentrieren, um einer Spalte den gleichen oberen und unteren Abstand zu geben. Sie können den Inhalt auch unten ausrichten, indem Sie einer Spalte einen oberen Abstand hinzufügen. Wenn Sie Ihrer Seite weiteren 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 aufrechtzuerhalten.

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

Lasst uns diese Party beginnen!

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

Ich beginne mit dem Seitenlayout des Interior Design Company-Portfolios. Erstellen Sie eine neue Seite, um dieses Layout auf Ihrer Seite zu haben. Geben Sie Ihrer Seite anschließend einen Namen. Wählen Sie „Divi Builder verwenden“ und dann „Visual Builder verwenden“ aus dem Dropdown-Menü. Wählen Sie dann „Ein vorgefertigtes Layout auswählen“ aus dem Dropdown-Menü. Wählen Sie dann das Interior Design Company Layout Pack aus dem Fenster „Aus Bibliothek laden“ aus. Wählen Sie abschließend aus der Auswahl der Layouts die Seite „Portfolio“ aus und klicken Sie auf „Dieses Layout verwenden“.

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

Methode 1: Inhalte vertikal mit Flex und Auto-Rand ausrichten

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

Gehen Sie im Eingabefeld „Spalte 2 Hauptelement“ 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.

01	Rand: automatisch;

Den Inhalt unten ausrichten

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

01	Rand: automatisch 0;

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 „margin: auto“ zu jeder Spalte einzeln hinzuzufügen.

01	align-items: center;

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

01	align-items: flex-end;

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 dann den gesamten Inhalt jeder Spalte auf der Seite vertikal zu zentrieren, wenden Sie das Hauptelement-CSS auf alle Zeilen auf der Seite (oder im Abschnitt) an.

Alles ist jetzt vertikal ausgeglichen.

Möglicherweise haben Sie jedoch bemerkt, dass die weiße Hintergrundfarbe der Spalte aufgrund des Zusatzes „margin: auto“ in der Spalte nicht mehr die gesamte Zeile abdeckt. Sie können Abhilfe schaffen, 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: Inhalte mithilfe der Spaltenflexionsrichtung vertikal ausrichten

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

Wir können jedoch die Flex-Richtung verwenden, um den Text unserer Spalte auszurichten, ohne auf den Effekt „Spaltenhöhe ausgleichen“ zu verzichten, der unsere Spalten (und Spaltenhintergründe) in der gleichen Größe 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.

Kehren wir zur Zeile des vorherigen amp zurück. Indem Sie mit der rechten Maustaste auf „Benutzerdefiniertes CSS“ klicken und „Benutzerdefinierte CSS-Stile zurücksetzen“ auswählen, können Sie eventuell vorhandenes benutzerdefiniertes CSS in den Zeileneinstellungen entfernen.

Wenden Sie dann im Hauptelement von Spalte 2 das folgende CSS an:

010203

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

Ä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 lege, bleibt der Inhalt zentriert.

Vertikal ausgerichtete Klappentexte mit unterschiedlichen Textmengen erstellen

Auch eine vertikal zentrierte Ausrichtung des Inhalts Ihrer Spalten kann bei Klappentexten hilfreich sein. Wie Sie vielleicht wissen, enthält nicht jeder Klappentext die gleiche Textmenge zur Beschreibung einer Funktion oder eines Dienstes. Wenn Sie diese Klappentexte vertikal zentrieren, kann dies dazu beitragen, dass Ihr Layout schön aussieht.

Für das Layout der Digital Payments-Startseite werde ich die Klappentexte für dieses amp vertikal ausrichten.

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

Jetzt muss ich in den Zeileneinstellungen „Spaltenhöhen ausgleichen“ festlegen.

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 zum Abschnitt „Hauptelement“ der Registerkarte „Erweitert“ unserer Zeileneinstellungen hinzufügen:

01	align-items: center;

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

01	align-items: flex-end;

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.

 Spalte 1 Hauptelement CSS:

01	Rand: Auto Auto 0;

 Spalte 3 Hauptelement CSS:

01	Rand: 0 automatisch automatisch;

Was ist mit Layouts mit nur einer Spalte?

Sie benötigen kein CSS-Snippet oder Flex, um Ihren einspaltigen Inhalt vertikal zu zentrieren. Alles, was Sie tun müssen, ist sicherzustellen, dass Ihr Text oben und unten (oder Module) den gleichen Abstand hat. Die meisten Verbraucher benötigen vertikal zentrierte Inhalte in Layouts mit vielen Spalten, weil sie möchten, dass das angrenzende Material korrekt ausgerichtet ist.

Abschließende Gedanken zur vertikalen und horizontalen Ausrichtung von DIVI

Auch wenn diese Lösung auf ein paar kleineren benutzerdefinierten CSS-Schnipseln basiert, kann sie meiner Meinung nach für Leute hilfreich sein, die nach einer schnellen Lösung für ein zeitaufwändiges Verfahren suchen. Teilen Sie uns gerne Ihre Meinung zu diesem Ansatz sowie amp dafür mit, wie Sie dadurch in der Vergangenheit Zeit und Mühe gespart haben.