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 600.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]

Die Zeilen sind die verschiedenen Spaltenlayouts, die innerhalb der Abschnitte platziert werden können. Wie bei Modulen können Sie auf verschiedene Parameter zugreifen, indem Sie auf das Einstellungssymbol oben links in der Zeile klicken. In diesem Tutorial werden einige der Funktionen besprochen und erläutert, wie sie verwendet werden können, um sehr einzigartige Layouts zu erstellen. Insbesondere die Linieneinstellungen können verwendet werden, um die Vielfalt der mit Divi Builder erstellten Layouts erheblich zu erhöhen, da sie die Struktur erzeugen, 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 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 ein Hintergrundvideo anwenden möchten, müssen Sie ein MP4- und WEBM-Video herunterladen und die Videos hier herunterladen.

Web-Hintergrundvideo

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

Breite des Hintergrundvideos

Sobald deine Videos hochgeladen wurden, musst du hier die Breite deines Videos eingeben. Sie muss der tatsächlichen Breite des Videos entsprechen, da sonst die Position des Hintergrunds falsch ist.

Höhe des Hintergrundvideos

Sobald deine Videos hochgeladen wurden, musst du hier die Höhe deines Videos 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.

Spaltenhintergrundfarbe

Für jede Spalte in einer Zeile können Sie eine einzelne Hintergrundfarbe zuweisen.

Hintergrundbild der Spalte

Für jede Spalte in einer Zeile können Sie ein einzelnes 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 Divi Builder-Benutzeroberfläche angezeigt.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

seciton Design divi builder.png

Entwurfsparameter

Verwenden Sie den Parallax-Effekt

Wenn Sie einen Parallaxeneffekt für Ihr Linienhintergrundbild verwenden möchten, können Sie diesen hier aktivieren und anschließend die gewünschte Parallaxenmethode auswählen.

Spaltenparallaxeneffekt

Hier können Sie wählen, ob Sie den Parallaxeneffekt für das Hintergrundbild einer bestimmten Spalte in Ihrer Zeile verwenden möchten 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 wie bei einem Abschnitt mit voller Breite). Dies ist eine großartige Möglichkeit, schöne Spaltenlayouts mit voller Breite zu erstellen.

Benutzerdefinierte Breite verwenden

Sie können einer Linie auch eine benutzerdefinierte Breite zuweisen. Wenn Sie zum Beispiel eine Variation zum Seitenvorschub hinzufügen und eine Linie zum Rest zoomen möchten, können Sie hier einen benutzerdefinierten Wert für die Breite eingeben

Verwenden Sie die benutzerdefinierte Rinnenbreite

Die Breite der Rinne passt den Abstand zwischen den Säulen an. Es gibt 4-Rinnengrößen, beginnend mit 0. Wenn Sie die Breite der Dachrinne in 1 einstellen, wird kein Abstand zwischen den Spalten erzeugt. In Kombination mit der Option "Volle Breite" können hierdurch ähnliche Effekte wie mit dem Modul "Portfolio-Vollbild" erzielt werden.

Spaltenhöhen ausgleichen

Dies ist eine großartige Option, insbesondere dann, wenn Sie einzelnen Spalten Hintergrundfarben zugewiesen haben. Wenn Sie diese Option aktivieren, müssen alle Spalten in der Zeile denselben Höhenwert 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 die Füllung 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.

Vorauswahlspalte divi.png

Erweiterte Einstellungen

CSS-ID

Sie können der Zeile eine CSS-ID zuweisen, wenn Sie sie in Ihrem Stylesheet oder mit Ankerverknüpfungen ausrichten möchten.

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]

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 Ankerverknüpfungen 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Das Tutorial in die Praxis umsetzen

Nachdem wir alle Parameter überprüft haben, testen wir einige davon, um zu zeigen, was möglich ist, wenn jeder Parameter kreativ verwendet wird. In diesem Beispiel werde ich mich zunächst der Einstellung Vollbildzeile nähern. Die Option zum Erstellen einer Vollbildzeile ist eine der vielseitigsten Optionen im Set. Dadurch wird die Breite der Linie bis zum Rand des Browsers verlängert, wie bei einem Vollbildbereich (oder FullWidth). Im Gegensatz zu einem Abschnitt mit voller Breite können die Zeilen mit voller Breite jedoch Spaltenstrukturen aufweisen und jedes Modul enthalten! Im folgenden Beispiel habe ich eine Zeile in 4-Spalten erstellt und jeder Spalte ein quadratisches Bild hinzugefügt. Dann habe ich "Diese Linie in voller Breite überspringen" aktiviert, um die Linie bis zu den Rändern des Browserfensters zu verlängern.

Beispieldesign divi.jpg

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]

Dann habe ich die Größe "Gutter" auf "1" reduziert, um den Abstand zwischen den Spalten 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 einer Option "Benutzerdefinierte Füllung" auf "0" änderte.
Änderung der filling.jpg

Das Ergebnis ist eine vollständige Transformation der Zeile, die unsere normale Zeile mit 4-Bildspalten in eine Bildergalerie mit voller Breite und vollem Anschnitt umwandelt, die im Vergleich zum grünen Bereich unten erstaunlich aussieht. Derselbe Effekt kann auch mit benutzerdefinierten Spaltenhintergrundfarben und textbasierten Modulen erstellt werden. Die Möglichkeiten sind endlos!

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