Verwenden der neuen Höhen- und Breitenoptionen von Divi zum Erstellen eines responsiven Designs

Obwohl sie normalerweise nicht das Erste sind, was Besuchern Ihrer Website auffallen, tragen die CSS-Eigenschaften Breite und Höhe dazu bei, dass Ihre Website zusammenhält und gut aussieht. Und jetzt, mit den neuen ziehbaren Größenoptionen von Divi, können Sie buchstäblich die Breite, maximale Breite, minimale Höhe, Höhe und maximale Höhe jedes Elements im Builder selbst steuern. Dies gibt Ihnen die Freiheit, Websites zu erstellen, die auf verschiedenen Bildschirmgrößen sehr reaktionsschnell sind.

Das hört sich alles großartig an, aber wie lässt sich das praktisch in eine schöne Website übersetzen? Genau darüber werden wir in diesem Beitrag sprechen. Wir erklären zunächst den Unterschied zwischen allen Höhen- und Breiteneigenschaften, die in den Divi-Einstellungen verfügbar sind, und verwenden sie dann in verschiedenen Szenarien, damit sich unsere Seitendesigns genau so verhalten, wie wir es möchten.

Lasst uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Den Unterschied zwischen Eigenschaften verstehen

Bevor Sie Breite und maximale Breite in unseren täglichen Designprozessen verwenden, ist es wichtig zu verstehen, was sie tun. So lautet die theoretische Erklärung:

Breite – Die tatsächliche Breite eines Designelements. Wenn dieser 100 % beträgt, ist er so breit, wie der Behälter es zulässt. Die Breite wird normalerweise mit % ausgedrückt. Je geringer der Prozentsatz für die Breite, desto schmaler wird das Gestaltungselement.

Max. Breite – Die maximale Breite hat Macht über die Breite. Wenn die Breite eines Moduls auf 100 % eingestellt ist, wird dieser Wert beibehalten, solange er unter dem Wert für die maximale Breite bleibt. Sobald der Wert für die maximale Breite erreicht ist, wird dieser nicht überschritten.

Aber wie lässt sich das in Responsive Design umsetzen? Um den Unterschied zu erklären, erstellen wir einen visuellen Vergleich, indem wir den Visual Builder auf einer brandneuen Seite aktivieren. Wir fügen einen Abschnitt mit einer einspaltigen Zeile hinzu. Fügen Sie dann ein Textmodul mit etwas Inhalt, einer Hintergrundfarbe und einigen benutzerdefinierten Auffüllungen ein.

Breite ändern

Wenn Sie die Breite des Textmoduls auf 80 % ändern, wird das Textmodul kleiner. Eine Möglichkeit, das Modul nach Belieben auszurichten, wird ebenfalls angezeigt.

Ändern der maximalen Breite

Wenn Sie die maximale Breite ändern, wird der zugewiesene Wert erst angewendet, wenn die tatsächliche Breite den maximalen Breitenwert überschreitet. Lassen Sie uns das ganz schnell demonstrieren:

Nicht überschritten

Übertroffen

Neben Breite und maximaler Breite finden Sie in den Größeneinstellungen jedes Elements auch die minimale Höhe, die Höhe und die maximale Höhe. Das können Sie theoretisch aus diesen Begriffen verstehen:

Min Height – Die minimale Höhe, die Sie einem Element zuweisen möchten. Wenn dieser Wert größer als die Höheneingabe ist, dominiert die minimale Höheneingabe.

Höhe – Dies definiert die tatsächliche Höhe, die Sie dem Element zuweisen möchten.

Max. Höhe – Dieser Wert wird zur neuen Höhe, sobald die Höhe den der Höhe zugewiesenen Wert überschreitet.

Ändern der Mindesthöhe

Wenn Sie die Mindesthöhe eines Elements ändern, wird dieser Wert zur Norm. Beim Testen sehen Sie automatisch, wie sich die Höhe des Textmoduls in Echtzeit ändert.

Ändern der Höhe

Wenn Sie eine Mindesthöhe und eine Höhe kombinieren, müssen Sie sicherstellen, dass die Höhe größer als die Mindesthöhe ist. Wenn nicht, wird die Höhe ignoriert. In den beiden folgenden GIFs können Sie den Unterschied in Echtzeit sehen.

Überschreitet nicht

Überschreitet

Ändern der maximalen Höhe

Die maximale Höhe übernimmt, wenn sie die Mindesthöhe überschreitet, aber kleiner als die Höhe ist. Wenn Sie beispielsweise der Mindesthöhe einen höheren Wert zuweisen als der Höchsthöhe, würde die Mindesthöhe dominieren.

Ändern der maximalen Breite für Zeilen

Eine der Best Practices im Webdesign besteht darin, sich für eine bestimmte maximale Breite für Ihre gesamte Website zu entscheiden. Dies trägt dazu bei, dass alles auf verschiedenen Bildschirmgrößen reaktionsschnell aussieht. Es hilft Designern auch, genaue Drahtmodelle zu erstellen.

Ändern der globalen maximalen Breite

Sie wissen vielleicht oder auch nicht, dass Sie im Theme Customizer eine bestimmte maximale Standardbreite für Ihren Inhalt festlegen können, indem Sie zu den Allgemeinen Einstellungen gehen und zu den Layout-Einstellungen weitergehen. Wenn Sie die maximale Breite beibehalten, können Sie die Reaktionsfähigkeit verbessern.

Ändern Sie die maximale Breite insbesondere für eine Zeile

Mit dem neuen Draggable-Sizing-Update erhalten Sie auch die Möglichkeit, eine maximale Breite für Zeilen individuell zu definieren. Dies ist ideal für Ausnahmen, bei denen eine höhere maximale Breite sinnvoller ist.

Modulen die gleiche Höhe geben

Eine andere Technik, die Sie beachten sollten, konzentriert sich darauf, ähnlichen Elementen die gleiche Höhe zu geben. Dies ist ästhetisch ansprechend für das Auge und hilft Besuchern, leicht nach Inhalten zu suchen. Hierfür gibt es zwei gängige Ansätze:

Verwenden des Spalten-Equalizers

Die erste Methode gibt es schon lange bei Divi. Wenn Sie für jede der Spalten in Ihrer Zeile dieselbe Höhe erstellen möchten, können Sie den Spalten-Equalizer in den Größeneinstellungen Ihrer Zeile aktivieren. Wenn Sie Spaltenhintergrundfarben verwenden, werden Sie den Unterschied schnell bemerken.

Zuweisen der Höhe zu jedem Modul

Eine andere Möglichkeit besteht darin, den Modulen, die Sie hinzufügen, eine vordefinierte Höhe zuzuweisen.

Inhalte innerhalb eines Moduls ausrichten

Nachdem Sie allen Modulen eine Höhe zugewiesen haben, können Sie auch mit der Ausrichtung des Inhalts herumspielen. Dazu können Sie entweder benutzerdefiniertes Padding verwenden, um den Leerraum in einem Modul manuell zu bestimmen, oder ein paar Zeilen CSS-Code verwenden, um Inhalte automatisch auszurichten.

display: flex;
flex-wrap: wrap;
align-content: center;

Wählen Sie die Höhe oder Breite des Designelements und verwandeln Sie den Überlauf in Scroll

Eine weitere coole Sache, die Sie mit den neuen ziehbaren Größenoptionen machen können, ist das Umwandeln von Überlauf in Scrollen. Auf diese Weise können Sie auf einfache Weise Platz auf Ihren Seiten sparen und zusätzliche Interaktion hinzufügen. Dazu sind zwei Schritte erforderlich; eine Höhe für Ihr Element einstellen und den Überlauf in den Sichtbarkeitseinstellungen ändern. Beginnen Sie damit, die Höhe Ihres Elements zu ändern.

Gehen Sie dann zu den Sichtbarkeitseinstellungen Ihres Elements und ändern Sie den vertikalen Überlauf in Scrollen.

Erstellen eines Hero-Bereichs im Vollbildmodus über alle Bildschirmgrößen hinweg

Auf zum nächsten und letzten Tipp! Möchten Sie einen Heldenbereich im Vollbildmodus erstellen? Öffnen Sie den Heldenbereich auf Ihrer Seite, gehen Sie zu den Größeneinstellungen und ändern Sie die Höhe. Es ist wichtig, dass Sie dafür die Höhenansichtsfenstereinheit verwenden, um sicherzustellen, dass alles auf allen Bildschirmgrößen reagiert.

• Höhe: 100vh

Möchten Sie den Inhalt in Ihrem Vollbild-Heldenbereich zentral ausrichten? Fügen Sie auch die folgenden benutzerdefinierten CSS-Codezeilen zum Hauptelement Ihres Abschnitts hinzu:

display: flex;
flex-wrap: wrap;
align-content: center;

Abschließende Gedanken

In diesem Beitrag haben wir die neuen Optionen für Breite und Höhe besprochen, die mit Divis ziehbarem Größenupdate geliefert werden. Wir haben Ihnen gezeigt, wie sie funktionieren und wie Sie sie verwenden können, um ein responsives Seitendesign für jede Art von Website zu erstellen, die Sie erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.