Springe zum Hauptinhalt

So konfigurieren Sie Zeilen in Divi Builder

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Zeilen sind die verschiedenen Spaltenlayouts, die innerhalb von Abschnitten platziert werden können. Genau wie die Module verfügen die Zeilen über verschiedene Parameter, auf die Sie zugreifen können, indem Sie auf das Parametersymbol oben links in der Zeile klicken. In diesem Tutorial werden wir einige der Funktionen erläutern und erläutern, wie sie zum Erstellen sehr einzigartiger Layouts verwendet werden können. Insbesondere Zeileneinstellungen können verwendet werden, um die Vielfalt der mit Divi Builder erstellten Layouts erheblich zu erhöhen, da sie die Struktur erstellen, in der Ihre Module gehostet werden.

Zeilenmodul divi builder.png

einstellungsparameter line divi.png

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

Hintergrundvideos können auf Linien angewendet werden. Wenn Sie Hintergrundvideos anwenden möchten, müssen Sie MP4- und WEBM-Videos herunterladen und die Videos hier herunterladen.

Web-Hintergrundvideo

Hintergrundvideos können auf Linien angewendet werden. Wenn Sie Hintergrundvideos anwenden möchten, müssen Sie MP4- und WEBM-Videos herunterladen und die Videos hier herunterladen.

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. Bei Verwendung der WireFrame-Ansicht in Visual Builder werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

seciton Design divi builder.png

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 der Rinne regelt den Abstand zwischen den Säulen. Es gibt 4 Rinnengrößen ab 0. Wenn Sie die Rinnenbreite auf 1 setzen, entstehen keine Lücken zwischen den Säulen. In Kombination mit der Option "Vollbreite" können dadurch Effekte erzeugt werden, die dem Portfolio-Vollbildmodul ähneln.

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Vorauswahlspalte divi.png

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.

vor

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Beispieldesign divi.jpg

Dann habe ich die Größe der "Dachrinne" auf "1" reduziert, um den Abstand zwischen den Spalten in der Zeile zu entfernen.

Leerzeichen zwischen Spalten entfernen divi.jpg

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.
Änderung der filling.jpg

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!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie2
tweet1
Registrieren3