Zeilen sind die verschiedenen Spaltenanordnungen, die innerhalb von Abschnitten platziert werden können. Wie Module haben Zeilen verschiedene Einstellungen, auf die Sie zugreifen können, indem Sie auf das Einstellungssymbol oben links in der Zeile klicken. In diesem Tutorial gehen wir einige der Funktionen durch und wie sie verwendet werden können, um einige sehr einzigartige Layouts zu erstellen. Insbesondere Linieneinstellungen können verwendet werden, um die Vielfalt der erstellten Layouts erheblich zu erhöhen Divi Builder, weil sie die Struktur erstellen, in der Ihre Module gehostet werden.
Inhaltseinstellungen
Hintergrundfarbe
Hintergrundbilder können auf eine ganze Zeile angewendet werden. Standardmäßig haben die Linien eine transparente Hintergrundfarbe.
Hintergrundbild
Hintergrundbilder können auf eine ganze Zeile angewendet werden.
MP4-Hintergrundvideo
Die angebotene vidéos Hintergründe können auf Linien angewendet werden. Wenn Sie Hintergrundvideos anwenden möchten, müssen Sie MP4- und WEBM-Videos hochladen und eingeben vidéos hier.
Web-Hintergrundvideo
Die angebotene vidéos Hintergründe können auf Linien angewendet werden. Wenn Sie Hintergrundvideos anwenden möchten, müssen Sie MP4- und WEBM-Videos herunterladen und die Videos hier eingeben.
Hintergrundvideobreite
Sobald Ihre Videos hochgeladen wurden, müssen Sie hier die Breite Ihres Videos eingeben. Sie muss der tatsächlichen Breite des Videos entsprechen, da sonst die Position des Hintergrunds falsch ist.
Höhe des Hintergrundvideos
Sobald Ihre Videos hochgeladen wurden, müssen Sie hier Ihre Videohöhe eingeben. Sie muss der tatsächlichen Höhe des Videos entsprechen, da sonst die Hintergrundposition falsch ist.
Videopause
Wenn Sie möchten, dass Videos beim Klicken angehalten werden, aktivieren Sie diese Option.
Hintergrundfarbe der Spalte
Für jede Spalte in einer Zeile können Sie eine eindeutige Hintergrundfarbe zuweisen.
Spaltenhintergrundbild
Für jede Spalte in einer Zeile können Sie ein eindeutiges Hintergrundbild zuweisen.
Admin-Label
Dadurch wird die Modulbezeichnung im Generator zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Benutzeroberfläche angezeigt Divi Baumeister.
Entwurfsparameter
Verwenden Sie den Parallaxeeffekt
Wenn Sie den Parallaxeeffekt für Ihr Linienhintergrundbild verwenden möchten, können Sie hier aktivieren und dann die gewünschte Parallaxenmethode auswählen.
Spaltenparallaxeneffekt
Hier können Sie auswählen, ob der Parallaxeeffekt für das Hintergrundbild einer bestimmten Spalte in Ihrer Zeile verwendet werden soll oder nicht.
Machen Sie diese Zeile in voller Breite
Wenn diese Option aktiviert ist, erstreckt sich die Linie über die gesamte Breite des Browserfensters (ähnlich einem Abschnitt mit voller Breite). Dies ist eine großartige Möglichkeit, um coole Spaltenlayouts in voller Breite zu erstellen.
Benutzerdefinierte Breite verwenden
Sie können einer Linie auch eine benutzerdefinierte Breite zuweisen. Wenn Sie beispielsweise dem Seitenvorschub Variationen hinzufügen und eine Zeile größer als die anderen machen möchten, können Sie hier einen benutzerdefinierten Breitenwert eingeben
Verwenden Sie die benutzerdefinierte Rinnenbreite
Die Breite des Bundstegs legt den Abstand zwischen den Säulen fest. Es gibt 4 Rinnengrößen, beginnend bei 0. Die Definition Wenn Sie die Bundstegbreite auf 1 einstellen, entstehen keine Lücken zwischen den Spalten. In Kombination mit der Option Volle Breite kann dies ähnliche Effekte wie im Portfolio-Vollbildmodul erzeugen.
Spaltenhöhen ausgleichen
Dies ist eine großartige Option, insbesondere wenn Sie Hintergrundfarben auf einzelne Spalten angewendet haben. Durch Aktivieren dieser Option werden alle Spalten in der Zeile gezwungen, denselben Höhenwert zu haben.
Benutzerdefinierte Polsterung
Wenn Sie die Füllung der Linie anpassen möchten, können Sie dies hier tun.
Benutzerdefinierte Marge
Wenn Sie den Rand der Linie anpassen möchten, können Sie dies hier tun.
Benutzerdefinierte Spaltenauffüllung
Wenn Sie den Abstand einer bestimmten Spalte in Ihrer Zeile anpassen möchten, können Sie dies hier tun.
Benutzerdefinierter Spaltenrand
Wenn Sie den Rand einer bestimmten Spalte in Ihrer Zeile anpassen möchten, können Sie dies hier tun.
Erweiterte Einstellungen
CSS-ID
Sie können der Zeile eine CSS-ID zuweisen, wenn Sie sie in Ihrem Stylesheet oder mit Ankerlinks als Ziel festlegen möchten.
CSS-Klasse
Sie können der Zeile eine CSS-Klasse zuweisen, wenn Sie sie in Ihrem Stylesheet als Ziel festlegen möchten.
CSS-Spalten-ID
Sie können einer bestimmten Spalte in Ihrer Zeile eine CSS-ID zuweisen, wenn Sie sie in Ihrem Stylesheet oder mit Ankerlinks als Ziel festlegen möchten.
CSS-Klassenspalte
Sie können einer bestimmten Spalte in Ihrer Zeile eine CSS-Klasse zuweisen, wenn Sie sie in Ihrem Stylesheet als Ziel festlegen möchten.
VORHER
CSS-Eintrag hier anwenden: vor der Hauptzeile div.
Hauptelement
CSS-Eintrag hier, um auf die Hauptzeile div anzuwenden.
Nach
CSS-Eintrag hier anwenden: nach der Hauptzeile div.
Vordere Spalte
Geben Sie hier CSS ein, um Folgendes anzuwenden: vor dem angegebenen Spaltendiv.
Hauptsäulenelement
Geben Sie hier CSS ein, um es auf die angegebene div-Spalte anzuwenden.
Spalte nach
CSS-Eintrag hier anwenden: Nach der Div-Spalte angegeben.
Sichtbarkeit
Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Leitungsmodul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.
Das Tutorial in die Praxis umsetzen
Nachdem wir alle Einstellungen durchlaufen haben, testen wir einige, um Ihnen zu zeigen, was möglich ist, wenn jede Einstellung kreativ verwendet wird. In diesem Beispiel werde ich die Einstellung für die Vollbildzeile als Einführung behandeln. Die Option zum Erstellen einer "Vollbild" -Zeile ist eine der vielseitigsten Optionen des Sets. Dadurch wird die Breite der Linie bis zum Rand des Browsers verlängert, ähnlich wie bei einem Vollbildabschnitt (oder einer Vollbreite). Im Gegensatz zu einem Abschnitt mit voller Breite können FullWidth-Zeilen jedoch Spaltenstrukturen haben und jedes Modul enthalten! Im folgenden Beispiel habe ich eine 4-Spalten-Zeile erstellt und jeder Spalte ein quadratisches Bild hinzugefügt. Als nächstes habe ich "Diese Linie in voller Breite machen" aktiviert, um die Linie bis zu den Rändern des Browserfensters zu verlängern.
Dann habe ich die Größe der "Dachrinne" auf "1" reduziert, um den Abstand zwischen den Spalten in der Zeile zu entfernen.
Schließlich entfernte ich die Füllung über und unter der Linie, indem ich die oberen und unteren Werte mit der Option "Benutzerdefinierte Füllung" auf "0" änderte.
Das Ergebnis ist eine vollständige Zeilentransformation, bei der unsere normale Zeile mit 4 Bildspalten in eine Beschnitt-Bildergalerie mit voller Breite umgewandelt wird, die im Vergleich zum grünen Abschnitt unten atemberaubend aussieht. Der gleiche Effekt kann auch mit benutzerdefinierten Spaltenhintergrundfarben und textbasierten Mods erstellt werden. Die Möglichkeiten sind grenzenlos!
