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

Willkommen zum Beitrag 3 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.

Willkommen zu Teil 3 der Reihe! Ich habe das Gefühl, dieser hier wird Sie ein wenig überraschen. Heute zeige ich Ihnen, wie Sie halbtransparente Hintergrundfarben und Farbverläufe verwenden, um mehrere Randfarbenvariationen zu erstellen. Am Ende zeige ich dir, wie du mit wenigen Klicks das Farbschema komplett ändern kannst. Dieses Layout besteht aus einer Kombination von zwei 1/4 1/2 1/4 Spaltenstrukturreihen und einer 1/4 1/4 1/4 1/4 Spaltenstrukturreihe.

Ich werde das Videomodul verwenden, um die Videos hinzuzufügen, und das Klappenmodul, um als Titel- und Beschreibungsabschnitt in der Mitte des Rasters zu dienen. Wie alle Layouts dieser Serie ist auch dieses mit Divi einfach zu implementieren.

So sieht das Endergebnis aus

Das Konzept & Inspiration

Tatsächlich stammt die ursprüngliche Layout-Idee von der beliebten Website giphy.com, da sie ein größeres Gif in der mittleren Spalte zeigt, das von kleineren Gifs umgeben ist. Ich dachte, diese Idee würde gut für ein Videoraster-Layout funktionieren, da Sie so ein größeres Video mit den anderen umgebenden Videos anzeigen können. Der Mauerwerksstil der umgebenden Giphy-Bilder war mir jedoch egal, daher habe ich mich für diesen Beitrag für den Ansatz mit geraden Spalten entschieden, um alles symmetrischer zu gestalten.

Neben dem Layout wollte ich die halbtransparenten Hintergrundfunktionen von Divi noch ein wenig mehr erkunden, um etwas Einzigartiges zu schaffen.

Lass uns anfangen.

Implementieren des Designs mit Divi

Fügen Sie zunächst einen regulären Abschnitt mit einer 1/4 1/2 1/4 (2-Spalten)-Struktur hinzu.

Fügen Sie als Nächstes ein Videomodul zur ersten 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]

Einstellungen speichern

Fügen Sie dann ein Teilermodul direkt unter dem Videomodul hinzu.

In den Teilereinstellungen unter , stellen Sie die Höhe des Teilers auf 20 ein.

Da wir jetzt viele Videos hinzufügen werden, finde ich es einfacher, das gerade erstellte Videomodul zu duplizieren und an die richtigen Stellen zu ziehen. Dann kann ich zurückgehen und die Video-URL und die Titelbilder später ändern.

Lassen Sie uns zunächst das soeben erstellte Videomodul duplizieren und unter das Trennmodul in der ersten Spalte ziehen.

Danach können Sie die ersten Spaltenelemente (das Video, den Teiler und das Video) weiter duplizieren und in die ganz rechte Spalte ziehen. Dann können Sie eines der Videomodule duplizieren und in die mittlere Spalte ziehen. Sobald Sie alle Videoinhalte aktualisiert haben, sollten Sie etwas haben, das wie folgt aussieht…

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

Inhaltsoptionen

Hintergrundfarbe: #333333

Designoptionen:

Benutzerdefiniertes Padding: 0px oben, 0px unten

Einstellungen speichern

Bearbeiten Sie nun Ihre Zeileneinstellungen mit den folgenden Updates:

Inhaltsoptionen:

Hintergrundfarben: rgba (255,255,255,0.58) und #b684e8
Verlaufsrichtung: 360deg
Spalte 1 Hintergrundfarbe: rgba(0,0,0,0.69)
Spalte 2 Hintergrundfarbe: rgba(255,255,255,0.45)
Spalte 1 Hintergrundfarbe: rgba(0,0,0,0.85)

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: 20 Pixel oben, 20 Pixel rechts, 20 Pixel unten, 20 Pixel links
Benutzerdefinierter Abstand von Spalte 2: 20 Pixel oben, 20 Pixel rechts, 20 Pixel unten, 20 Pixel links
Spalte 3 Benutzerdefinierter Abstand: 20 Pixel oben, 20 Pixel rechts, 20 Pixel unten, 20 Pixel links

Einstellungen speichern

Jetzt ist es an der Zeit, die zweite Reihe hinzuzufügen. Fahren Sie fort und fügen Sie eine weitere 1/4 1/2 1/4 (3-spaltige) Strukturreihe unter der ersten hinzu.

Um sich einen Vorsprung beim Einrichten der Optionen für die Zeileneinstellungen zu verschaffen, verwenden Sie die Rechtsklick-Funktion, um den Stil der ersten Zeile zu kopieren und in die zweite Zeile einzufügen.

Jetzt müssen Sie für Ihre Zeileneinstellungen nur die Inhaltsoptionen wie folgt aktualisieren:

Hintergrundverlauf: keiner (löschen Sie den überschriebenen Farbverlauf)
Spalte 1 Hintergrundfarbe: rgba(0,0,0,0.69)
Spalte 2 Hintergrundfarbe: rgba(0,0,0,0.0) – dies entspricht keiner oder transparent
Spalte 3 Hintergrundfarbe: rgba(0,0,0,0.35)

Nachdem Ihre Zeileneinstellungen abgeschlossen sind, duplizieren und ziehen Sie ein Videomodul (oder kopieren und einfügen) in die erste (ganz links) und auch in die dritte Zeile (ganz rechts). Aktualisieren Sie dann den Videoinhalt.

Fügen Sie für die mittlere Spalte ein Klappenmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:

Inhaltsoptionen

Titel: [Titel der Seite oder des Videos eingeben]
Inhalt: [Geben Sie den Inhalt oder die Beschreibung des Videos oder der Seite ein]

Designoptionen

Textfarbe: Hell
Textausrichtung: Mitte
Header-Schriftart: PT Sans
Header-Schriftgröße: 52px
Kopfzeilenabstand: 1px
Körperschriftart: PT Sans
Schriftgröße des Körpers: 20px

Jetzt ist es endlich Zeit für die letzte Reihe. Natürlich können Sie bei Bedarf weitere hinzufügen.

Fahren Sie fort und fügen Sie eine 1/4 1/4 1/4 1/4 (4-Spalten)-Strukturreihe unter der vorherigen Reihe hinzu.

Kopieren Sie wie zuvor das Design der vorherigen Zeile und fügen Sie es in die aktuelle Zeile ein, um einen kleinen Vorsprung beim Design zu erhalten.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

Inhaltsoptionen

Spalte 1 Hintergrundfarbe: rgba(0,0,0,0.34)
Spalte 2 Hintergrundfarbe: rgba(0,0,0,0.69)
Spalte 3 Hintergrundfarbe: rgba(0,0,0,0.34)
Spalte 4 Hintergrundfarbe: rgba(0,0,0,0.69)

Designoptionen

Spalte 4 Benutzerdefinierter Abstand: 20px 20px 20px 20px

Einstellungen speichern

Als nächstes duplizieren oder kopieren Sie ein Videomodul in jede der vier Spalten. Nachdem Sie alle Ihre Videoinhalte aktualisiert haben, sind Sie fertig!

Sehen Sie sich Ihr neues Rasterlayout an…

Erstellen der Light-Version

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

Aktualisieren Sie die Abschnittseinstellungen wie folgt:

Inhaltsoptionen:

Hintergrundfarbe: rgba(0,0,0,0.12)

Aktualisieren Sie alle Zeileneinstellungen wie folgt:

Gehen Sie grundsätzlich zu jeder der drei Zeileneinstellungen zurück und klicken Sie überall dort, wo eine Hintergrundfarbe verwendet wird, einfach auf die weiße Farbpalettenoption. Dadurch werden alle dunklen halbtransparenten dunklen Hintergründe in halbtransparente helle Hintergründe umgewandelt.

Aktualisieren Sie die Blurb-Moduleinstellungen wie folgt:

Designoptionen

Textfarbe: Dunkel

Das wird es tun! Schauen Sie sich die Light-Version an.

Einfaches Ändern des Designs mit Abschnittshintergrundoptionen

Da das Raster mit halbtransparenten Hintergründen aufgebaut ist, können Sie die Hintergrundfarbe, den Farbverlauf oder das Bild des Abschnitts ganz einfach ändern, um Ihrer Site ein frisches Aussehen zu verleihen, das perfekt zu Ihrer Site passt.

Sehen Sie sich an, welchen Unterschied es machen kann, wenn Sie den Abschnittseinstellungen ein Hintergrundbild hinzufügen.

Eine andere Möglichkeit, Ihre Website anzupassen, besteht darin, die Farben des Hintergrundverlaufs anzupassen, den wir in der ersten Zeile hinzugefügt haben.

Kommt auf …

Der nächste Beitrag in dieser Reihe wird ein ganz anderes Gefühl sein. Bei diesem geht es darum, die Dinge sauber und einfach zu halten. Und ein paar Tricks mit Hintergrundverlauf.

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

Genießen!