5 kreative Divi Blurb-Modul-Designs

Veröffentlicht: 2018-10-22

In diesem Beitrag werden wir eine der beliebtesten Funktionen von Divi erkunden, das Blurb-Modul. Obwohl es von Anfang an einfach zu sein scheint, verfügt es über viele anpassbare Funktionen, die Ihre Website-Elemente zum Leben erwecken können. Im Allgemeinen wird das Blurb-Modul für Dienste, Vorteile, Kontaktinformationen usw. verwendet, aber mit Divi sind die Möglichkeiten endlos.

Lassen Sie uns etwas Spaß haben!

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die 5 Klappenmodul-Stile, die ich in diesem Tutorial erstellen werde.

5 kreative Divi Blurb-Modul-Designs

Abonnieren Sie unseren Youtube-Kanal

Einstieg

Um zu beginnen, müssen Sie eine neue Seite erstellen. Navigieren Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen. Geben Sie dann Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Sobald der Visual Builder auf der Seite geladen ist, können Sie mit dem Entwerfen beginnen.

Dieses Tutorial wurde entwickelt, um es Ihnen leicht zu machen, jedes dieser Designs im Klappenstil einzeln zu erstellen. Mit anderen Worten, Sie müssen nicht mit dem ersten beginnen.

1. Pop-Out-Blurbs mit Feature-Listen

In diesem ersten Beispiel werden wir ein wenig Spaß daran haben, Klappen außerhalb der Reihe zu erweitern, um einen Pop-Out-Effekt zu erzielen. Dann können wir die angrenzenden Spalten verwenden, um ein paar Klappentexte mit linksbündig ausgerichteten Symbolen hinzuzufügen, die als hervorgehobene Listenelemente dienen.

Erstellen Sie zunächst einen neuen Abschnitt und eine Zeile mit einer vierspaltigen Struktur.

Fahren Sie dann fort und aktualisieren Sie die Zeileneinstellungen wie folgt:

Hintergrundfarbe: #2e3858
Machen Sie diese Zeile in voller Breite: JA
Benutzerdefinierte Dachrinnenbreite verwenden: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA
Benutzerdefinierter Rand: 5vw oben, 5vw unten
Benutzerdefiniertes Padding: 0px oben, 0px unten

Einstellungen speichern.

Fügen Sie dann in der ersten Spalte Ihr erstes Klappenmodul hinzu.

Nehmen Sie den letzten Satz im Inhaltsfeld heraus, um die Textmenge etwas zu kürzen. Wählen Sie dann ein Symbol anstelle eines Bildes und wählen Sie ein Symbol (jeder wird es tun).

Aktualisieren Sie dann Folgendes:

Hintergrundfarbe: #df4570
Symbolfarbe: #ffffff
Textausrichtung: Mitte
Titelschriftart: Encode Sans Semi Condensed
Titelschriftart: TT
Abstand der Titelbuchstaben: 2px
Benutzerdefinierter Rand (Desktop): -5vw oben, -5vw unten
Benutzerdefinierter Rand (Tablet): 0 Pixel oben, 0 Pixel unten
Benutzerdefinierte Polsterung: 5vw oben, 5vw unten, 3vw links, 3vw rechts
Box Shadow: siehe Screenshot
Stärke der Box-Schattenunschärfe: 80px

Kopieren Sie das gerade erstellte Modul mit der Rechtsklick-Menüoption oder den Tastenkombinationen cmd+c und cmd+v und fügen Sie es in Spalte 3 ein. Aktualisieren Sie dann die neuen Klappenmoduleinstellungen mit einer anderen hellen (aber komplementären) Hintergrundfarbe:

Hintergrundfarbe: #24c4a3

Jetzt ist es an der Zeit, die Klappentexte der Listenelemente neben den soeben erstellten Klapptexten hinzuzufügen.

Fügen Sie dazu in Spalte 2 einen neuen Klappentext hinzu. Nehmen Sie dann den Scheintext im Inhaltsfeld heraus, sodass nur der Titeltext übrig bleibt. Fügen Sie dann wie zuvor ein Symbol hinzu, um Ihr Bild zu ersetzen. Aktualisieren Sie dann die Designeinstellungen wie folgt:

Symbolfarbe: #df4570
Bild-/Symbolplatzierung: Links
Titelschriftart: Encode Sans Semi Condensed
Benutzerdefinierte Polsterung: 20 Pixel oben, 20 Pixel unten, 3 vw links, 3 vw rechts

Duplizieren Sie den Klappentext zweimal, sodass Sie insgesamt drei Listenklappen in der Spalte erhalten. Verwenden Sie dann die Multiselect-Funktion von Divi, um alle drei Klappentexte auszuwählen und sie dann zu kopieren und in Spalte 4 einzufügen.

Sie können auch Multiselect verwenden, um alle drei Klappen in Spalte 4 auszuwählen und die Elementeinstellungen massenhaft zu bearbeiten, um die Symbolfarbe aller drei in #24c4a3 zu ändern.

Das ist es! Das Erstellen von Pop-out-Klapptexten ist eine unterhaltsame Möglichkeit, Ihre Klappentexte hervorzuheben, und angrenzende Listen-Klapptexte an der Seite bieten Ihnen einige zusätzliche Optionen für kreativere Designs.

Hier ist das Endergebnis.

2. Werbetext mit benutzerdefiniertem Hintergrundbild.

Dieser Klappentext eignet sich hervorragend zum Präsentieren von Inhalten und Werbeangeboten wie einem kostenlosen Buch. Die Grundidee besteht darin, den Klappeninhalt links vom Modul zu positionieren, um Platz für das benutzerdefinierte Hintergrundbild zu schaffen. Lasst uns anfangen.

Fügen Sie zunächst einen regulären Abschnitt mit einer zweispaltigen Zeilenstruktur hinzu. Fügen Sie in der linken Spalte ein neues Klappenmodul hinzu.

Aktualisieren Sie den Titeltext und entfernen Sie den letzten Satz des Scheininhalts, um die Textmenge zu reduzieren. Aktualisieren Sie dann Ihr Bild mit einem Buchbild (oder einem Bild Ihres Produkts). Ein Symbol für ein Buch oder etwas wird auch funktionieren.

Ich verwende die Bild-Assets aus dem Travel Blog Layout Pack, also zögern Sie nicht, mit dem Design zu beginnen, indem Sie diese Bilder aufnehmen.

TIPP: Sie können diesem Modul auch eine Modul-Link-URL hinzufügen, um das gesamte Modul anklickbar zu machen, da es als Werbung dienen kann.

Als nächstes fügen Sie dem Modul ein Hintergrundbild hinzu. Stellen Sie sicher, dass das Hintergrundbild ein Header-ähnliches Bild mit dem Fokus des Bildes auf der rechten Seite ist, damit Sie Ihren Inhalt links vom Bild hinzufügen können, damit der Hintergrund vom Text ablenkt.

Fügen Sie dann einen Hintergrundverlauf hinzu, der als teilweise Überlagerung dient, die sich hinter dem Inhalt befindet und das Hintergrundbild überlagert, um den Text lesbarer zu machen. Um den Hintergrundverlauf hinzuzufügen, aktualisieren Sie Folgendes:

Hintergrundfarbe links: rgba(255,255,255,0.8)
Hintergrundfarbe rechts: rgba(255,255,255,0)
Verlaufsrichtung: 90deg
Startposition: 40%
Endposition: 70%
Farbverlauf über dem Hintergrundbild platzieren: JA

Aktualisieren Sie dann Folgendes:

Image Box Shadow: siehe Screenshot
Titelschrift: Noto Serif
Titeltextgröße: 26px
Körperschriftart: Noto Sans
Körpertextgröße: 16px
Bildbreite: 150px
Inhaltsbreite (Desktop): 60%
Inhaltsbreite: (Smartphone): 80%
Benutzerdefinierte Polsterung: 2vw unten, 2vw links, 2vw rechts

Die wichtigste Gestaltungstechnik besteht darin, sowohl dem Bild als auch dem Inhalt eine benutzerdefinierte Breite zu geben, damit der Inhalt später links positioniert werden kann.

Jetzt müssen wir oben im Klappentext einen Kastenschatten hinzufügen, um den Eindruck zu erwecken, dass sich das Buchbild über das Modul erstreckt, um einen schönen Überlappungseffekt zu erzielen. Aktualisieren Sie dazu Folgendes:

Boxschatten: Siehe Screenshot
Horizontale Position des Kastenschattens: 0px
Vertikale Position des Kastenschattens: 50px
Schattenfarbe: #ffffff

Der letzte Schritt beinhaltet ein kurzes Snippet von benutzerdefiniertem CSS, das benötigt wird, um den Klappentext an der linken Seite des Moduls auszurichten. Wechseln Sie dazu zur Registerkarte Erweitert und fügen Sie das folgende benutzerdefinierte CSS im Eingabefeld Blurb-Inhalt hinzu: 

margin-left: 0;

Sehen Sie sich jetzt das Ergebnis an!

TIPP: Vergessen Sie nicht die verfügbaren Hover-Optionen. Versuchen Sie, dem Buchbild einen Rahmen beim Schweben zu geben, um die Dinge zum Leben zu erwecken!

3. Kreisblurb-Stil mit Hintergrundverlauf

Dieser einfache Klappentext verwendet Hintergrundverläufe, um als Kreishintergrund für Ihren Klappeninhalt zu dienen. Dies ist eine unterhaltsame Alternative, um Ihr gesamtes Klappenmodul mit benutzerdefiniertem CSS in einen Kreis zu verwandeln.

Fügen Sie zunächst einen neuen regulären Abschnitt mit einer dreispaltigen Zeilenstruktur hinzu.

Fügen Sie dann in der linken Spalte ein Klappenmodul hinzu.

Nehmen Sie dann den letzten Satz des Inhalts heraus, um die Textmenge zu verringern. Es ist wichtig für dieses Design, die Textmenge etwas klein zu halten, da Sie es in einen Kreis einfügen.

Fügen Sie dann einen Hintergrundverlauf hinzu, um den Kreishintergrund wie folgt zu erstellen:

Hintergrundfarbe links: #fa7f28
Hintergrundfarbe rechts: rgba(255,255,255,0)
Verlaufstyp: radial
Startposition: 60%
Endposition: 0%
Farbverlauf über dem Hintergrundbild platzieren: JA

Aktualisieren Sie dann die restlichen Designeinstellungen wie folgt:

Textausrichtung: Mitte
Titelschriftart: Oswald
Titelschriftart: TT
Titel-Buchstaben-Abstand: 1px
Körperschriftart: Roboter
Schriftgewicht des Körpers: Leicht
Körpertextgröße: 16px
Breite (Tablette): 80%
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung (Desktop): 20 % oben, 25 % unten, 20 % links, 20 % rechts
Benutzerdefinierte Polsterung (Smartphone): 20 % oben, 25 % unten, 10 % links, 10 % rechts

Der Schlüssel hier besteht darin, die benutzerdefinierte Auffüllung richtig anzupassen, damit der Hintergrundkreis mit dem Inhalt in der Mitte ausgerichtet ist. Möglicherweise müssen Sie diese Einstellungen abhängig von der Menge an Inhalten anpassen, die Sie haben.

Jetzt können Sie das Modul kopieren und in die restlichen Spalten einfügen.

Aktualisieren Sie dann die Zeileneinstellungen, sodass sie eine benutzerdefinierte Breite von 80 % und eine Bundstegbreite von 1 haben.

Um das Design zu vervollständigen, können Sie Ihrem Abschnitt wie folgt ein Hintergrundbild und einen Farbverlauf hinzufügen:

Hintergrundbild hinzufügen
Hintergrundfarbe links: rgba(2,0,76,0.51)
Hintergrundfarbe rechts: rgba(2,0,76,0,84)
Farbverlauf über dem Hintergrundbild platzieren: JA

Das ist es! Schauen Sie sich das endgültige Design an!

Für zusätzlichen Platz können Sie die Größe des Klappensymbols jederzeit auf etwa 50 Pixel verringern, um zu verhindern, dass die Kreise bei geringeren Browserbreiten kollidieren. Wenn Sie Anpassungen vornehmen, vergessen Sie nicht, die Multiselect-Funktion von Divi zu nutzen, um Massenbearbeitungen an allen Modulen gleichzeitig vorzunehmen.

Bonus-Tipp: Das gesamte Blurb-Modul mit benutzerdefiniertem CSS zu einem Kreis machen

Wenn Sie das gesamte Modul in einen Kreis verwandeln möchten (anstatt den Hintergrundverlauf zu verwenden), ersetzen Sie den Verlauf durch eine normale Hintergrundfarbe und fügen Sie dieses benutzerdefinierte CSS unter der Registerkarte Erweitert der Einstellungen des Klappenmoduls hinzu:

Im Feld Hauptelement: 

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

Im Feld Blurb-Inhalt: 

margin: auto;

Dieses benutzerdefinierte CSS überschreibt das Padding-Set in den Einstellungen des Klappenmoduls, sodass Sie dieses Snippet möglicherweise entfernen müssen, wenn Sie die Kontrolle über diese Einstellungen zurückgewinnen möchten. Außerdem verwendet dieses CSS Flex, um den Inhalt des Klappentextes innerhalb des Kreises zu zentrieren. Dies wird sich als nützlich erweisen.

Es sieht ungefähr so ​​aus, wenn es auf alle drei Module angewendet wird.

4. Gerahmter Klappentext mit Rahmen und Box-Schatten

Eines meiner liebsten Divi-Design-Features, mit denen ich Spaß habe, sind Box-Schatten. Wir haben bereits früher eine kreative Verwendung für Kastenschatten in unserem Werbetext-Design gezeigt, in dem wir den Überlappungseffekt erstellt haben. Sie können Boxschatten aber auch als kreative Möglichkeit verwenden, um Ihren Inhalt mit unterbrochenen Rasterdesigns zu umrahmen. In diesem Design zeige ich Ihnen, wie Sie Ränder und Boxschatten auf einzigartige Weise kombinieren können.

Fügen Sie zunächst einen neuen regulären Abschnitt mit einer dreispaltigen Zeilenstruktur hinzu. Fügen Sie dann das Klappenmodul zur ersten Spalte hinzu.

Fügen Sie dem Klappentext ein Bild hinzu. Geben Sie dem Klappenbild dann einen Rahmen und einen Kastenschatten, indem Sie die Designeinstellungen wie folgt aktualisieren:

Breite des oberen Bildrands: 8px
Farbe des oberen Bildrands: #2f3854
Bildbreite linker Rand: 8px
Farbe des linken Rands des Bildes: #2f3854

Image Box Shadow: Siehe Screenshot
Horizontale Position des Boxschattens: -20px
Vertikale Position des Kastenschattens: -30px
Schattenfarbe: #f89da9

Aktualisieren Sie dann die Schriftart und Abstände von Titel und Textkörper wie folgt:

Titelschriftart: Yeseva One
Körperschriftart: Montserrat
Benutzerdefinierter Rand: 50 Pixel unten
Benutzerdefinierte Polsterung: 2vw Bottom

Geben Sie Ihrem Klappenmodul schließlich einen benutzerdefinierten Rahmen und einen Boxschatten, um das Rahmendesign wie folgt auszugleichen:

Breite des rechten Rands: 15px
Farbe des rechten Rands: #2f3854
Breite des unteren Rands: 15px
Farbe des unteren Rands: #2f3854

Image Box Shadow: Siehe Screenshot
Horizontale Position des Kastenschattens: 20px
Vertikale Position des Kastenschattens: 35px
Schattenfarbe: #dddddd

Kopieren Sie nun das Modul in Spalte 2 und 3 und fügen Sie es ein und aktualisieren Sie die Klappenbilder, um das Design abzuschließen.

Hier ist das Endergebnis.

5. Blurbs als geschwungene Liste gestalten

Dieses nächste Design ist eine unterhaltsame Möglichkeit, Listen mit Klappentexten zu erstellen. Mit einigen benutzerdefinierten Rändern können Sie Ihre Klappenlistenelemente so krümmen, dass sie Elemente auf Ihrer Seite umschließen. In diesem Beispiel krümme ich die Liste, um die rechte Seite eines großen Klappensymbols zu umbrechen. Und du kannst ein bisschen kreativ werden

Fügen Sie zunächst einen neuen regulären Abschnitt mit einer zweispaltigen Zeilenstruktur hinzu.

Bevor Sie Klappenmodule hinzufügen, geben Sie Ihrer Zeile eine benutzerdefinierte Breite und Bundstegbreite, indem Sie Ihre Zeileneinstellungen wie folgt aktualisieren:

Benutzerdefinierte Breite: 700px
Dachrinnenbreite: 2

Lassen Sie uns nun das große Klappensymbol erstellen, indem Sie das Klappenmodul in der linken Spalte hinzufügen. Nehmen Sie dann den Titeltext und den Inhalt heraus. Und dann wählen Sie das Glühbirnensymbol. Jetzt sollte nur noch das Symbol sichtbar sein. Aktualisieren Sie als Nächstes die Farbe und Größe des Symbols wie folgt:

Symbolfarbe: #96a6bd
Symbolschriftgröße (Desktop): 400px
Symbolschriftgröße (Smartphone): 200px

Fügen Sie in der rechten Spalte ein neues Klappenmodul hinzu. Dies ist der erste von insgesamt fünf Klappentexten, die unsere Liste bilden werden. Öffnen Sie dann die Moduleinstellungen und entfernen Sie den Inhalt, sodass nur der Titeltext übrig bleibt. Wählen Sie dann das rechte Pfeilsymbol für den Klappentext.

Als nächstes aktualisieren Sie die Designeinstellungen wie folgt:

Hintergrundfarbe: #bb7860
Symbolfarbe: #ffffff
Bild-/Symbolplatzierung: Links
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 30px
Titelschriftart: Raleway
Titeltextfarbe: #ffffff
Titeltextgröße: 20px
Höhe der Titelzeile: 1,5 em
Benutzerdefinierte Marge: 5% unten
Benutzerdefinierte Polsterung: 3 % oben, 10 % links, 2 % rechts

Duplizieren Sie das Modul viermal, bis Sie insgesamt fünf Klappentexte in der rechten Spalte gestapelt erhalten.

Geben Sie dann dem zweiten Klappentext eine neue Farbe, benutzerdefinierte Ränder, um ihn nach rechts zu verschieben, und kreative abgerundete Ecken wie folgt:

Hintergrundfarbe: #393e56
Benutzerdefinierter Rand (Desktop): 10 % links, -10 % rechts
Benutzerdefinierter Rand (Tablet): 0 % links, 0 % rechts
Abgerundete Ecken: 50px oben rechts, 50px unten links

Bevor Sie dieses Modul verlassen, kopieren Sie die abgerundeten Ecken, indem Sie mit der rechten Maustaste auf die Option in den Klappeneinstellungen klicken.

Speichern Sie dann die Klappeneinstellungen und klicken Sie mit der rechten Maustaste auf das erste (obere) Modul, das Sie erstellt haben, und fügen Sie die abgerundeten Ecken ein, um das Modul zu stylen.

Lassen Sie uns nun die letzten drei Module mit den richtigen Farben, Abständen und abgerundeten Eckendesigns aktualisieren.

Aktualisieren Sie für den dritten Klappentext in der Spalte Folgendes:

Hintergrundfarbe: #96a6bd
Benutzerdefinierter Rand (Desktop): 20 % links, -20 % rechts
Benutzerdefinierter Rand (Tablet): 0 % links, 0 % rechts
Abgerundete Ecken: 50px oben rechts, 50px unten rechts

Aktualisieren Sie für den vierten Klappentext Folgendes:

Hintergrundfarbe: #393e56
Benutzerdefinierter Rand (Desktop): 10 % links, -10 % rechts
Benutzerdefinierter Rand (Tablet): 0 % links, 0 % rechts
Abgerundete Ecken: 50 Pixel oben links, 50 Pixel unten rechts

Kopieren Sie für den fünften Klappentext einfach die abgerundeten Ecken im vierten Klappentext und fügen Sie sie ein.

Das ist es! Schauen wir uns das endgültige Design an.

Weitere Inspirationen zum Blurb-Stil

Wenn Sie daran interessiert sind, weitere lustige Klappenmodul-Designs zu erkunden, sehen Sie sich die folgenden Links an:

  • Sie können asymmetrisch geschwungene Hintergründe für Klappentexte verwenden.
  • Mit Abschnittsteilern können Sie Ihre Klappenmodule mit kreativen Designs einrahmen.
  • Sie können Ihre eigene Hintergrundbildform erstellen, um ein geometrisches Rasterlayout zu erstellen.
  • Erfahren Sie, wie Sie Klappensymbole kombinieren, um ein zentriertes Grafikelement für Ihren Abschnitt im Beitrag auf einseitigen Boxschatten zu erstellen.
  • Und vergessen Sie nicht, unsere kostenlosen vorgefertigten Divi-Layouts zu erkunden, die im Divi Builder verfügbar sind, um noch inspirierendere Klappenstile zu erhalten

Nun, ich hoffe, diese Beispiele haben Sie dazu inspiriert, zu sehen, was mit dem Divi Blurb-Modul möglich ist! Der Himmel ist hier die Grenze. Dieses Modul ist äußerst beliebt und wird wahrscheinlich auf fast jeder von Ihnen erstellten Site verwendet. Manchmal kann nur das Ändern der Farben und Schriftarten diesen ein ganz neues Aussehen verleihen. Nehmen Sie diese Ideen also gerne auf und machen Sie sie zu Ihren eigenen!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!