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

Willkommen zum Beitrag 2 von 5 in unserer Miniserie Wie man mit dem Videomodul von Divi atemberaubende Raster-Layouts erstellt . 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.

Wir haben es zu Teil 2 der Serie geschafft! Und ich muss sagen, dass es mir wirklich Spaß macht, diese Layouts zu bauen. Heute zeige ich Ihnen, wie Sie ein Rasterlayout für Ihre Videos erstellen, das einem Funktionsabschnitt einer Produktseite oder einer Zielseite ähnelt. Dieses Layout besteht aus einer Folge von 1/2 1/2 Spaltenreihen, wobei jede Reihe ein Video und die entsprechende Beschreibung in jeder der beiden Spalten enthält. Dann wechselt der nächste Abschnitt die Reihenfolge des Videos und der Beschreibung von links nach rechts und dann von rechts nach links. Da sich jede der Zeilen über die gesamte Breite der Seite erstreckt und jede der Spalten die gleiche vertikale Höhe behält, sieht das Layout auf allen Bildschirmgrößen umwerfend aus.

Ich werde das Videomodul verwenden, um die Videos hinzuzufügen, und das Klappentextmodul, das als Titel- und Beschreibungsbereich neben dem Video dient. Wie alle Layouts dieser Serie ist auch dieses mit Divi überraschend einfach zu implementieren.

So sieht das Endergebnis aus

Das Konzept & Inspiration

Dieses Konzept ist keineswegs neu. Ich wurde tatsächlich inspiriert, dieses Layout zu erstellen, weil es mit den Benutzern vertraut ist. Viele Websites verwenden ein ähnliches Layout, um Funktionen für ihre Produkte oder Dienstleistungen zu präsentieren. Es ermöglicht größere Inhaltsbereiche, die meiner Meinung nach großen negativen Raum für den Text und auffällige Bilder für das Video schaffen.

Dies wäre perfekt für ein Unternehmen, das Video verwendet, um Produktfunktionen zu bewerben, aber auch viele andere Verwendungen hat. Ich hoffe, Sie nutzen dieses Design für Ihr nächstes Projekt.

Lass uns anfangen.

Implementieren des Designs mit Divi

Abonnieren Sie unseren Youtube-Kanal

Fügen Sie zunächst einen regulären Abschnitt mit einer 1/2 1/2 (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: [URL für Video eingeben]
Bild-Overlay-URL: [Laden Sie ein benutzerdefiniertes Bild für Ihr Video hoch oder generieren Sie eines automatisch aus dem Video]

Designoptionen

Farbe des Wiedergabesymbols: rgba(255,255,255,0,87)

Einstellungen speichern

Fügen Sie als Nächstes ein Blurb-Modul in der rechten Spalte direkt neben dem gerade erstellten Videomodul hinzu.

Aktualisieren Sie die Blurb-Einstellungen wie folgt:

Inhaltsoptionen:

Titel: [Titel des Videos eingeben]
Inhalt: [Videobeschreibung eingeben]
Link: [Sie können die Link-URL zu einer anderen Seite eingeben, wenn Sie möchten]
Symbol verwenden: JA
Symbol: [Symbol auswählen]

Designoptionen:

Symbolfarbe: #666666
Textfarbe: Hell
Textausrichtung: Mitte
Header-Schriftart: Roboto
Header-Schriftgröße: 52px
Kopfzeilenabstand: 1px
Körperschriftart: Open Sans
Schriftgröße des Körpers: 20px
Textkörperfarbe: #dddddd
Benutzerdefiniertes Auffüllen auf dem Desktop: 5 % oben (Sie müssen dies möglicherweise je nach Textmenge in Ihrer Beschreibung anpassen)
Benutzerdefinierte Polsterung auf Tablet und Smartphone: 20px oben, 20px unten

Erweiterte Optionen

Bild-/Symbolanimation: Von rechts nach links (diese Animation in Kombination mit dem Pfeilsymbol lenkt die Aufmerksamkeit auf das Video links.

Einstellungen speichern

Bevor wir fortfahren, fügen Sie Ihrem Abschnitt Ihr Hintergrundbild hinzu. Gehen Sie zu den Abschnittseinstellungen (blauer Bereich) und aktualisieren Sie Folgendes:

Inhaltsoptionen:

Hintergrundbild: [Geben Sie ein Hintergrundbild ein (meiner ist 2000 x 2200)]

Verwenden Sie den Parallax-Effekt: JA
Parallaxenmethode: Echte Parallaxe

Designoptionen:

Benutzerdefiniertes Padding: 0px oben, 0px unten

Einstellungen speichern
Bearbeiten Sie als Nächstes die Zeileneinstellungen mit den folgenden Updates:

Inhaltsoptionen

Spalte 2 Hintergrundfarbe: rgba(0,0,0,0.69)

Designoptionen

Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefiniertes Padding: 0px oben, 0px unten
Benutzerdefinierter Rand: 0px oben, 0px unten
Benutzerdefinierter Abstand von Spalte 1: 0 Pixel oben, 0 Pixel unten
Spalte 2 Benutzerdefinierte Auffüllung: 0 Pixel oben, 0 Pixel unten

Die Dinge beginnen sich jetzt zu entwickeln. Sie haben Ihr Hintergrundbild und Sie haben Ihre erste Zeile erstellt. Jetzt können Sie diese Zeile duplizieren. Klicken Sie im visuellen Builder in der Zeilenmenüleiste auf das Duplikatsymbol.

Ziehen Sie in der neuen Zeile, die Sie gerade dupliziert haben, das Videomodul in die rechte Spalte und das Klappenmodul in die linke Spalte.

Jetzt müssen Sie nur noch den Inhalt des Videomoduls aktualisieren, um die neue Video-URL und das neue Titelbild aufzunehmen. Für das Blurb-Modul müssen Sie die Kopfzeile und den Inhalt Ihres Videos aktualisieren. Und Sie müssen auch das Klappensymbol auf einen nach rechts zeigenden Pfeil einstellen (wenn Sie das gleiche Symbol wie ich verwendet haben) und die Bild- / Symbolanimation auf "von links nach rechts" umschalten.

Als nächstes müssen wir die duplizierten Zeileneinstellungen aktualisieren, um den Hintergrund der ersten Spalte festzulegen. Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie auf der Registerkarte Inhalt Folgendes:

Spalte 1 Hintergrundfarbe: rgba(0,0,0,0.69)
Spalte 2 Hintergrundfarbe: keine

Wir machen einige Fortschritte. Sehen wir uns nun an, wie unsere ersten beiden Reihen aussehen…

Wiederholen Sie für die nächsten beiden Zeilen den Duplizierungsvorgang und aktualisieren Sie den Inhalt. Denken Sie nur daran, dass das Hintergrundbild des Abschnitts umso länger werden muss, je mehr Zeilen Sie haben, um der Länge des Inhalts gerecht zu werden.

Für dieses Beispiel habe ich zwei weitere Zeilen hinzugefügt, sodass es insgesamt vier Zeilen sind. Sehen Sie sich das Endergebnis an.

Erstellen der Light-Version

Um das vorherige dunkle Videorasterdesign in eine helle Version zu ändern, müssen Sie nur einige der Designoptionen aktualisieren.

Für diese Bearbeitungen kann es etwas einfacher sein, die Drahtmodellansicht zu verwenden.

Aktualisieren Sie die Abschnittseinstellungen wie folgt:

Inhaltsoptionen

Hintergrundbild: [Geben Sie ein helles Hintergrundbild ein]

Aktualisieren Sie die Einstellungen für die erste Zeile wie folgt:

Inhaltsoptionen

Spalte 2 Hintergrundfarbe: rgba(255,255,255,0.68)

Aktualisieren Sie die Blurb-Moduleinstellungen der ersten Zeile wie folgt:

Designoptionen

Symbolfarbe: #333333
Textfarbe: Dunkel
Kopfzeilentextfarbe: #444444
Körperschriftart: Roboto
Körpertextfarbe: #666666

Aktualisieren Sie die Einstellungen für die zweite Reihe wie folgt:

Inhaltsoptionen

Spalte 1 Hintergrundfarbe: rgba(255,255,255,0.45)

Verwenden Sie die Rechtsklick-Optionen, um das Design des Klappenmoduls in der ersten Reihe zu kopieren und in das Klappenmodul in der zweiten Reihe einzufügen.

Das ist es! Sehen Sie sich das Endergebnis an.

Reaktionsfähig?

Dieser ist ein wenig knifflig, wenn es darum geht, wie er sich auf kleineren Bildschirmgrößen verhält. Da die Standardstapelreihenfolge die linke Spalte über der rechten Spalte platziert, ist das Ergebnis dieses Layouts etwas verwirrend. Wie Sie dieses Problem beheben können, erfahren Sie in meinem vorherigen Beitrag zum Ändern der Spaltenstapelreihenfolge von Divi.

Kommt auf …

Das nächste Raster wird Sie überraschen. Durch die halbtransparenten Hintergrundfarben und Farbverläufe lässt sich das Design ganz einfach an Ihre eigene Site anpassen. Sehen Sie sich die Vorschau an…

Ich hoffe die Serie gefällt euch bis jetzt. Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!