So erstellen Sie atemberaubende Rasterlayouts mit dem Videomodul von Divi (Teil 4)

Willkommen zum Beitrag 4 von 5 in unserer Miniserie So erstellen Sie atemberaubende Rasterlayouts mit dem Videomodul von Divi. In dieser Serie werden wir Ihnen zeigen, wie Sie mit dem Divi Visual Builder erstaunliche Raster-Layouts von Grund auf neu erstellen. Und wenn Sie befürchten, dass dies zu kompliziert ist, denken Sie noch einmal darüber nach! Alle diese Layouts können mit dem Visual Builder ohne zusätzlichen Code erstellt und gestaltet werden.

Ich hoffe, Sie genießen die Rasterlayouts bisher. Das heutige Layout ist Nummer 4 in der Serie und eines meiner Favoriten (und am schnellsten zu implementieren). Es ist nicht nur einfach (und macht Spaß), mit Divi zu bauen, sondern kann auch an das Farbschema Ihrer Website angepasst werden. Die Hintergrundverlaufsoptionen sind das Hauptmerkmal dieses Designs, die verwendet wurden, um die zwei Tonfarben zu erstellen, die durch eine diagonale Linie getrennt sind. Der Abstand ist auch zweckmäßig, damit die Videos gut wahrgenommen werden. Dieses Design fällt wohl aus dem Rahmen dessen, was wir normalerweise als „Gitter“ bezeichnen würden, aber ich denke, Sie werden das Potenzial erkennen.

Auf geht's. Ich werde Ihnen zeigen, wie einfach es ist, dieses Rasterdesign mit dem Videomodul und einigen benutzerdefinierten Hintergrundelementen zu erstellen.

So sieht das Endergebnis aus

Das Konzept & Inspiration

Ich war auf der Suche nach einem schönen und sauberen Layout, das kleine Mengen von Videos organisiert, die für Dinge wie Tutorials oder Kurse verwendet werden können. Dies kombiniert mit meinem impulsiven Eifer, mit Hintergrundverläufen herumzuspielen, kam ich zu diesem Ergebnis. Ich hoffe du magst es.

Lass uns anfangen.

Implementieren des Designs mit Divi

Abonnieren Sie unseren Youtube-Kanal

Fügen Sie zunächst einen regulären Abschnitt mit einer Struktur mit voller Breite (1-Spalte) hinzu.

Als nächstes fügen Sie der Spalte ein Textmodul hinzu . Dies dient als Titel oder Überschrift für den Abschnitt der Seite.

Aktualisieren Sie die Texteinstellungen wie folgt:

Inhaltsoptionen
Inhalt: [Text für Titel eingeben]

Designoptionen

Textfarbe: Hell
Textschriftart: Arimo
Schriftgröße des Textes: 56px
Text Buchstabenabstand: 1px
Textzeilenhöhe: 1em

Einstellungen speichern

Sie können noch nichts sehen, da Sie weißen Text auf weißem Hintergrund haben, aber das ist in Ordnung. Lassen Sie uns fortfahren und unseren Abschnittshintergrundverlauf hinzufügen. Gehen Sie zu den Abschnittseinstellungen und aktualisieren Sie im Abschnitt Inhalt die folgenden Optionen:

Hintergrund-Verlaufsfarben: #121212, #ffffff
Verlaufstyp: Linear
Verlaufsrichtung: 198deg
Startposition: 45%
Endposition: 45%

Aktualisieren Sie als Nächstes die Zeileneinstellungen für die gerade hinzugefügte Zeile wie folgt:

Designoptionen

Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 4
Spaltenhöhen ausgleichen: JA
Benutzerdefinierte Polsterung: 1 % oben, 5 % rechts, 5 % unten, 5 % links

Einstellungen speichern

Fügen Sie nun direkt unter der gerade erstellten Zeile eine weitere Zeile mit einer ⅔ ⅓ (2-spaltigen) Struktur hinzu.

Fügen Sie als Nächstes ein Videomodul zur linken Spalte hinzu.

Aktualisieren Sie die Videoeinstellungen wie folgt:

Inhaltsoptionen

Video MP4/URL: [Geben Sie die URL Ihres Videos ein]
Bild-Overlay-URL: [Overlay-Bild-URL eingeben]

Einstellungen speichern

Als nächstes duplizieren (oder kopieren) Sie das gerade erstellte Videomodul zweimal und ziehen (oder fügen Sie) die beiden duplizierten Videos ein, sodass sie in der rechten Spalte gestapelt werden.

Aktualisieren Sie den Inhalt der Videos, um die richtigen URLs und Titelbilder einzuschließen.

Fahren Sie fort und fügen Sie ein Blurb-Modul unter den beiden Videomodulen in der rechten Spalte hinzu. Dies kann als Beschreibung der Videos in diesem Raster dienen.

Aktualisieren Sie die Blurb-Einstellungen wie folgt:

Inhaltsoptionen

Titel: [Titel eingeben]
Inhalt: [Inhalt oder Beschreibung eingeben]

Designoptionen

Textfarbe: Hell

Einstellungen speichern

Bearbeiten Sie nun die Zeileneinstellungen für die Zeile mit den soeben erstellten Videos wie folgt:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: #4999c1, #121212
Verlaufstyp: Linear
Verlaufsrichtung: 198deg
Startposition: 45%
Endposition: 45%

Designoptionen

Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 4
Spaltenhöhen ausgleichen: JA
Benutzerdefinierte Polsterung: 5 % oben, 5 % rechts, 5 % unten, 5 % links

Groß! Sie haben den ersten Abschnitt abgeschlossen. Wir sind fast fertig. Sehen Sie sich den bisherigen Fortschritt an.

Um den nächsten Abschnitt zu erstellen, duplizieren Sie den gesamten Abschnitt, den Sie gerade erstellt haben, indem Sie auf die Schaltfläche Abschnitt duplizieren klicken.

Aktualisieren Sie die neuen Abschnittseinstellungen wie folgt:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: #ffffff, #121212 (diese Farben sind in der entgegengesetzten Reihenfolge des ersten Abschnitts)

Aktualisieren Sie als Nächstes die Textmoduleinstellungen im duplizierten Abschnitt wie folgt:

Designoptionen

Text Textfarbe: #333333

Einstellungen speichern

Um diesen Abschnitt abzuschließen, aktualisieren Sie die Zeileneinstellungen, die Ihre Videos enthalten, wie folgt:

Inhaltsoptionen

Hintergrund-Verlaufsfarben: #121212, #4999c1 (grundsätzlich ändern Sie die Reihenfolge der Farben, sodass sie in der entgegengesetzten Reihenfolge des ersten Abschnitts sind)

Einstellungen speichern

Schauen wir uns nun das Ergebnis an, nachdem wir den zweiten Abschnitt hinzugefügt haben…

Wenn Sie es noch nicht bemerkt haben, können Sie problemlos weitere Abschnitte hinzufügen, da wir diese beiden Abschnitte bereits erstellt haben. Lassen Sie uns zur Sicherheit noch einen weiteren Abschnitt erstellen. Da unsere Abschnittshintergrundfarbe unten schwarz ist, möchten wir den nächsten Abschnitt mit einer schwarzen Hintergrundfarbe oben beginnen. Das bedeutet, dass wir den ersten Abschnitt oben duplizieren und an den unteren Rand der Seite unter den zweiten Abschnitt ziehen müssen. Dadurch bleibt die Kontinuität des Designs auf der gesamten Seite erhalten.

So sieht es aus, nachdem der dritte Abschnitt hinzugefügt wurde:

Das ist es! Alles beendet.

Reaktionsfähig?

Dieses Layout sieht auf dem Handy ohne Änderungen sogar noch besser aus. Hör zu!

Weitere Anpassung

Nachdem Sie dieses Rasterlayout mit mehreren Abschnitten erstellt haben, können Sie wahrscheinlich bereits feststellen, wie einfach es wäre, die Farben an das Thema Ihres nächsten Projekts anzupassen. Sie müssen lediglich die Hintergrundfarben des Farbverlaufs für die Abschnitte und Zeilen ändern.

Wenn Sie das Design weiter optimieren möchten, schlage ich vor, den Verlaufsfarben Halbtransparenz hinzuzufügen, um den Hintergrund dahinter freizulegen. Oder versuchen Sie, eine der Verlaufsfarben ganz loszuwerden und sehen Sie, wie sie aussieht. Hier sind ein paar Beispiele dafür, was das Ändern nur einer Verlaufsfarbe bewirken kann…

Sie können dem Raster in der linken Spalte auch ein Video-Slider-Modul hinzufügen.

Kommt auf …

Als nächstes kommt unser letztes Videoraster-Layout in der Serie. Dieser gibt Ihnen die Möglichkeit, die Dinge mit subtilen Rahmenelementen schön und sauber zu halten oder Farben auf einzigartige Weise zu verwenden, um jedes Video hervorzuheben.

Bis dahin freue ich mich von euch in den Kommentaren zu hören.

Genießen!