Verschachtelte Zeilen gegen Spezialschnitte in Divi 5 (und warum wir sie abwerten)

Divi ist seit langem ein Kraftpaket zum Aufbau wunderschöner Websites. Spezialschnitte erweiterten die Layout -Funktionen von Divi seit Jahren, indem sie komplexe, verschachtelte Säulenstrukturen ermöglichen, die reguläre Abschnitte nicht verarbeiten konnten. Dieser Ansatz kam jedoch mit seiner Komplexität und Einschränkungen, die tief mit Divis alten Shortcode -Framework verbunden waren.

Jetzt wird Divi 5 mit verschachtelten Zeilen geliefert - einer nativen Funktion, mit der Sie Zeilen in Spalten in regelmäßigen Abschnitten platzieren können. Diese Funktion beseitigt frühere Einschränkungen und vereint das Layoutgebäude unter einem einzigen, flexiblen Abschnittstyp. Mit verschachtelten Zeilen können Sie die gleichen komplexen, asymmetrischen Layouts erstellen, die Spezialschnitte erlauben, jedoch intuitiver.

In diesem Beitrag werden wir den Abzug von Spezialabschnitten und darüber diskutieren, wie verschachtelte Reihen und das neu gestaltete Layout -System von Divi 5 eine bessere Möglichkeit bieten, komplexe Layouts zu erstellen. Divis Zukunft ist hier und es ist einfacher, flexibler und für unbegrenzte Kreativität gebaut.

Abonnieren Sie unseren YouTube -Kanal

Divi 5 ist heute auf neuen Websites verwendet.

Eine Retrospektive von Spezialabschnitten

In Divi (2014) wurden Spezialschnitte eingeführt, um die Einschränkungen regulärer Abschnitte anzugehen. Sie ermöglichten komplexere Säulenstrukturen, einschließlich Seitenleisten und asymmetrischen Layouts, die bei regulären Abschnitten unmöglich waren.

Das Shortcode-basierte Framework von Divi begrenzte die Komplexität des Layouts grundlegend durch Einschränkung der Nisttiefe und Einführung von Leistungs Engpässen. Komplexe verschachtelte Layouts waren schwer zu bauen und neigten anfällig für Probleme, sodass sie erst in Spezialabschnitten möglich waren.

Sie haben jedoch zusätzliche Komplexität eingeführt, da Spezialabschnitte ihre eigene Sache waren (beachten Sie die zusätzlichen Spalten- und CSS -Optionen für diese Abschnitte). Diese waren nicht schlecht, aber sie verhalten sich definitiv anders als normale Abschnitte, Zeilen und Spalten.

Spezialabschnitte wurden zusätzliche Felder für Polsterung und CSS -Klassen/ID hinzugefügt, die mit den restlichen Builder -Optionen notwendig waren.

Spezialabschnitte ermöglichten pseudo-bedingten Spaltenstrukturen, indem die Shortcode-Regeln beendet werden und das erstellten, was in regulären Abschnitten nicht möglich war.

Wäre es nicht schön, wenn reguläre Abschnitte mächtig genug wären, um das zu tun, was Sie von ihnen brauchen?

Verschachtelte Reihen und eine bessere Möglichkeit, Seiten zu bauen

Mit Divi 5 lassen verschachtelte Zeilen offiziell die Reihen (und ihre Säulen) in andere Zeilen und Säulen. Dies bedeutet, dass Sie tief verschachtelte Layouts mit unbegrenzten Spalten und Zeilen ineinander erstellen können. Es beseitigt die Notwendigkeit von Spezialabschnitten.

Diese neue Funktion hat Spalten auch Größenoptionen hinzugefügt, dh es gibt eine konsistente Möglichkeit, alle Containerelemente zu Größe und zu stylen.

So erstellen Sie leicht einen Spezialbereich mit verschachtelten Zeilen nach

Das Scooter -Miet -Layout -Paket (insbesondere der Heldenabschnitt der Homepage) verwendet einen Spezialbereich, um wichtige Elemente zu positionieren. Anstatt jedoch einen Spezialbereich mit den einzigartigen Einstellungen zu verwenden, werden wir verschachtelte Zeilen verwenden, um einen ähnlichen Effekt zu erzielen.

Hinweis: Divi 5 hat derzeit Spezialabschnitte, aber sie werden schließlich veraltet sein (aber sie werden weiterhin funktionieren und auf Seiten, auf denen sie derzeit existieren, doppelt sein).

Fügen Sie Ihrer Seite einen Standardabschnitt hinzu und legen Sie die Hintergrundfarbe auf Schwarz fest (wenn Sie das Layout in Ihre Seite importiert haben, können Sie das Dot-Kreis-Bild als Hintergrundbild mit einer oberen Mitte-Position und der tatsächlichen Größe verwenden).

Stellen Sie die Breite und die maximale Breite des Abschnitts auf 100%ein.

Stellen Sie sicher, dass die Zeile innerhalb des Abschnitts eine zweispaltige Struktur und einen 3/5 + 2/5 Split enthält. Stellen Sie auch die Breite und die maximale Breite der Reihe auf 100%ein.

Wenn Sie andere neue Funktionen verwenden möchten, fügen Sie nur eine einzelne Spalte mit zwei Modulgruppen hinzu. Sie verwenden Größenoptionen für die Gruppen, anstatt sich auf die Standardspaltenstrukturen von Divi zu verlassen.

In der linken Spalte wird die kompliziertere Seite (in Bezug auf Module) untergebracht, und in der rechten Spalte wird das große Bild untergebracht.

Wir werden alle unsere Module hinzufügen, um ein Gefühl für das Layout zu erhalten. Dies enthält zuerst ein Übergang oder ein Textmodul, dann eine verschachtelte Zeile (zwei Spalten gleicher Breite), ein Bildmodul in der linken Spalte und ein Textmodul und ein Schaltflächenmodul in der rechten Spalte. Zurück in die übergeordnete Zeile in der rechten Spalte fügen Sie ein Bildmodul hinzu.

Wir werden nur den Abstand/die Größe auf dem Desktop replizieren, um zu veranschaulichen, wie wir den Spezialbereich mit verschachtelten Zeilen nachbilden können. Fügen Sie den Inhalt und die Bilder hinzu (importieren Sie das Layout wieder in einer Seite auf Ihrer Website). Sie können auch den Text und die Farbstile so ändern, wie Sie es für richtig halten. Das Hauptbild in der rechten Spalte sollte als Hintergrundbild und das Bildmodul mit dem Akzentbild angewendet werden, das wir später erhalten werden.

Fügen Sie für die linke Spalte der Zeile direkt unter dem Abschnitt ~ 10% links hinzu, um sie von der linken Seite abzugeben (dies bedeutet, dass Sie für jeden Haltepunkt die Größe ändern müssen).

Öffnen Sie nun die Einstellungen der rechten Spalte direkt unter der übergeordneten Zeile. Verwenden Sie ein Spaltenhintergrundbild.

Das Bildmodul in dieser Spalte sollte einen Filter> Mischung> Overlay darauf einstellen. In Advanced> Position ist das Bild absolut positioniert und nach links verankert.

Und das ist fast für die Erholung des Spezialitätenabschnitts (auf dem Desktop). Da wir die voreingestellte Spaltenstruktur (3/5 + 2/5 Spalten) verwendet haben, hat Divi eine Standardgröße und Positionierung an verschiedenen Haltepunkten, die angesprochen werden müssen. Sie können dies vermeiden, indem Sie eine einzelne übergeordnete Spalte verwenden, aber Modulgruppen, um den Inhalt der linken und rechten Seite dieses Abschnitts zu halten.

Aber zumindest zu diesem Zeitpunkt wissen Sie, dass es möglich ist, Zeilen zu nisten und Spezialabschnitte nachzubilden.

In eine neue Zukunft eintreten

Divi 5 ist nahe an einer Beta -Veröffentlichung, aber wir haben bereits erhebliche Anstrengungen unternommen, um das Designsystem von Divi zu überarbeiten.

• Flexbox -Layouts (in Kürze) : bietet mehr Kontrolle über Ausrichtung und Verteilung des Raums innerhalb von Zeilen.
• Verschachtelte Zeilen : Endlose Verschachtelung von Zeilen- und Säulenstrukturen, um mit dem nativen Zeilensystem für float-basierte Zeilen ein wenig Komplexität zu erzeugen.
• Erweiterte Spaltengröße : Fehlende Größensteuerungen für Spaltenbreiten und Höhen hinzugefügt.
• Modulgruppen : Ermöglicht die Gruppierung von Modulen für das einfachere Management und das Styling.
• Designvariablen : Definieren und wiederverwenden globale Variablen (Farben, Schriftarten, Abstand, Bilder, Text) über alle Elemente und Felder hinweg.
• Relative Farben mit HSL (in Kürze) : Dynamisch, brandkonsistente Farbkontrolle basierend auf Farbton, Sättigung und Leichtigkeit.

Diese Merkmale sind Teil der Neuerfindung von Divi und entscheidend für das Comeback. Wir beweisen, dass sich die Stiftung, die wir in den letzten zwei Jahren gebaut haben, es wert war. Wir können Funktionen aufbauen, die auf D4 nicht möglich waren, und wir machen jeweils innerhalb weniger Wochen.

Divi 5 ist heute auf neuen Websites verwendet.

Laden Sie Divi 5Learn mehr über Divi 5 herunter