So werden Sie kreativ mit Ihrem Blurb-Symbolhintergrund in Divi

Blurb-Module gehören zu den vielseitigsten Elementen, die Sie in Divi finden können. In diesem Beitrag zeigen wir Ihnen, wie Sie mit dem Hintergrund des Klappensymbols noch einen Schritt weiter gehen und kreativ werden. Wir werden eine Kombination aus Klappenmodulen, Textmodulen und Call-to-Action-Modulen verwenden. Diese einzigartigen Designs sind perfekt für Serviceseiten und Produktkategorieseiten. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf die Ergebnisse aller drei Beispiele für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Laden Sie die Hintergrundbeispiele für das Blurb-Symbol KOSTENLOS herunter

Um die kostenlosen Hintergrundbeispiele für Klappensymbole in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Allgemeine Schritte

Neuen Abschnitt hinzufügen

Hintergrund

Um diese kreativen Hintergrunddesigns für Klappentexte neu zu erstellen, öffnen Sie eine neue Seite oder fügen Sie einer vorhandenen Seite einen neuen Abschnitt hinzu. Bevor Sie eine Zeile hinzufügen, fügen Sie Ihrem Abschnitt eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f7f7f7

Abstand

Fügen Sie dem Abschnitt auch benutzerdefinierte obere und untere Polsterung hinzu.

• Polsterung oben und unten: 120px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Passen Sie die Größe der Zeile an, bevor Sie Module hinzufügen.

• Breite: 100%
• Maximale Breite: 100%

Abstand

Passen Sie dann die Polsterung in den Abstandseinstellungen an.

• Obere Polsterung: 8vw
• Untere Polsterung: 15vw
• Linke und rechte Polsterung: 12vw

Spalte 1

Nachdem Sie die Zeileneinstellungen geändert haben, nehmen Sie einige Änderungen an der ersten Spalte vor.

Hintergrund

Fügen Sie zunächst einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß #ffffff

Grenze

Fügen Sie dann einen Randradius hinzu.

• Abgerundete Ecken: 2vw alle vier Ecken

Box Schatten

Schließlich fügen Sie einen Box-Shadow hinzu.

• Box-Shadow: Erste Option
• Stärke der Box-Schattenunschärfe: 47px

Zeile zweimal klonen

Es bleibt noch ein letzter Schritt, bevor wir mit dem Hinzufügen von Modulen beginnen. Klonen Sie die Zeile zweimal.

Beispiel 1 neu erstellen

Blurb-Modul zu Spalte 1 hinzufügen

Standardinhalt löschen

Nachdem wir unsere Zeilen und Spalten eingerichtet haben, können wir damit beginnen, Module zu Spalte 1 der ersten Zeile hinzuzufügen. Fügen Sie zunächst ein Klappenmodul hinzu und löschen Sie den gesamten Standardtitel und den Haupttext.

Symbol auswählen

Wählen Sie dann ein Symbol anstelle eines Bildes.

• Symbol: Link

Hintergrund

Fügen Sie dem Klappenmodul eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: Schwarz #000000

Symboleinstellungen

Ändern Sie dann die Symboleinstellungen.

• Symbolfarbe: Gelb #edf000
• Symbolplatzierung: Oben
• Schriftgröße des Symbols:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telefon: 13vw

Größe

Fahren Sie fort, indem Sie die Größe des Moduls anpassen.

• Inhaltsbreite: 100%
• Breite:
  • Desktop: 11vw
  • Tablet: 19vw
  • Telefon: 22vw

Abstand

Fügen Sie auch einige Abstandswerte hinzu.

• Obere Marge: -5vw
• Unterer Rand: 0vw
• Linker Rand: -1vw
• Obere Polsterung und untere Polsterung: 4vw

Grenze

Um dem Symbol eine einzigartige Form zu geben, fügen Sie jeder Ecke außer der unteren linken Ecke einen Randradius hinzu.

• Abgerundete Ecken: 50vw, 0vw in der unteren linken Ecke.

Box Schatten

Fügen Sie schließlich einen Boxschatten hinzu.

• Box-Shadow: Erste Option
• Stärke der Box-Schattenunschärfe: 50px

Benutzerdefinierte CSS

Das Symbol hat standardmäßig einen unteren Rand. Um dies zu beseitigen, fügen wir dem benutzerdefinierten CSS-Feld des Klappenbilds eine einzelne Zeile CSS-Code hinzu.

• Blurb-Bild: Rand-unten: 0px;

margin-bottom: 0px;

Textmodul zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Fügen Sie unter dem Symbol ein Textmodul mit H3-Inhalten Ihrer Wahl hinzu.

Hintergrund

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie einen Verlaufshintergrund hinzu.

• Hintergrund: Farbverlauf
• Farbe eins: Transparent
• Farbe 2: Gelb #edf000
• Steigungsrichtung: 180 Grad
• Start- und Endposition: 74 %

Titeltext

Dann formatieren Sie den H3-Text.

• Überschriftsebene des Titeltexts: H3
• H3-Schrift: Josefin Sans
• H3-Ausrichtung: Mitte
• H3 Schriftfarbe: Schwarz #oooooo
• H3-Textgröße:
  • Desktop: 2.4vw
  • Tablet: 3.4vw
  • Telefon: 4.8vw
• H3-Buchstabenabstand: 0em

Größe

Passen Sie in den Größeneinstellungen die Breite für Tablet und Telefon an.

• Breite:
  • Tablette: 50%
  • Telefon: 60%

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und die Randwerte anpassen.

• Linker und rechter Rand: 5vw
• Obere Polsterung: 1vw

Verwandeln

Drehen Sie schließlich das Modul mit den Transformationsoptionen.

• Transformieren Übersetzen:
  • x-Achse: -20vw
  • y-Achse: 13vw
• Transform Rotate: Erste Option, 280 Grad

Call-to-Action-Modul zu Spalte 1 hinzufügen

Entfernen Sie den Standardtitelinhalt, fügen Sie Schaltflächen und Textinhalte hinzu

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Call-to-Action-Modul. Fügen Sie Inhalte Ihrer Wahl hinzu und entfernen Sie die Titelkopie.

Link hinzufügen

Fügen Sie der Schaltfläche einen relevanten Link hinzu.

Hintergrund

Stellen Sie sicher, dass der Hintergrund keine Farbe hat.

Hauptteil

Gehen Sie dann zur Registerkarte Design und ändern Sie die Einstellungen für den Textkörper.

• Textkörper: Crimson Text
• Ausrichtung des Textkörpers: Links
• Körpertextfarbe: Dunkelgrau #666666
• Textgröße:
  • Desktop: 1.2vw
  • Tablet: 2.6vw
  • Telefon: 3.1vw
• Körperlinienhöhe: 1.8em

Taste

Ändern Sie auch die Schaltflächenstile.

• Schaltflächentextgröße:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Schaltflächentextfarbe: Sehr Dunkelgrau #3f3f3f
• Farbe der Knopfleiste: Sehr Dunkelgrau #3f3f3f
• Knopfschrift: Josefin Sans
• Schaltflächenrand: 3vw
• Knopfpolsterung oben und unten: 1vw
• Tastenpolsterung links und rechts: 3vw

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie links und rechts auffüllen.

• Linke und rechte Polsterung: 7vw

Spalte 2 löschen und Spalte 1 klonen

Passen Sie die Einstellungen in Spalte 2 an

Gehen Sie nun zurück zu den Zeileneinstellungen und löschen Sie die zweite Spalte. Klonen Sie unmittelbar danach die erste Spalte. In den nächsten Schritten werden wir einige Einstellungen in der Duplikatspalte anpassen.

Blurb-Modul

Beginnen Sie damit, die Symbolfarbe des Klappenmoduls zu ändern.

• Symbolfarbe: Aqua #00ffd4

Textmodul

Ändern Sie als nächstes den Verlaufshintergrund und kopieren Sie das Textmodul.

• Hintergrundfarbe: Aqua #00ffd4
• Inhalt ändern

Beispiel 2 neu erstellen

Blurb-Modul zu Spalte 1 hinzufügen

Standardinhalt löschen

Auf zum zweiten Beispiel! Fügen Sie ein Klappenmodul zu Spalte 1 hinzu und löschen Sie alle Standardinhalte.

Symbol auswählen

Wählen Sie dann ein Symbol aus.

Hintergrund

Fügen Sie nun eine gelbe Hintergrundfarbe hinzu.

• Hintergrundfarbe: Gelb #edf000

Symbol

Fahren Sie fort, indem Sie die Symboleinstellungen auf der Registerkarte Design ändern.

• Symbolfarbe: Weiß #ffffff
• Symbolplatzierung: Oben
• Schriftgröße des Symbols:
  • Desktop: 3vw
  • Tablet: 11vw
  • Telefon: 12vw

Größe

Sobald die Farbe und der Hintergrund gestaltet sind, passen Sie die Größe des Moduls an.

• Inhaltsbreite: 100%

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Unterer Rand: 0vw
• Linker und rechter Rand: 3vw
• Obere und untere Polsterung: 2vw

Grenze

Fügen Sie als nächstes jeder Ecke einen Randradius hinzu.

• Abgerundete Ecken: 2vw alle vier Ecken

Box Schatten

Vervollständigen Sie das Design des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Box-Shadow: Erste Option

Boxschatten und Hintergrundfarbe von Spalte 1 entfernen

Öffnen Sie als nächstes die Einstellungen von Spalte 1 und entfernen Sie die Hintergrundfarbe und den Boxschatten.

Benutzerdefinierte CSS

Entfernen Sie den standardmäßigen unteren Rand, der auf das Klappensymbol angewendet wird, indem Sie eine einzelne Zeile CSS-Code zur Registerkarte "Erweitert" hinzufügen.

• Blurb-Bild: Rand-unten: 0px;

margin-bottom: 0px;

Call-to-Action-Modul zu Spalte 1 hinzufügen

Titelinhalt, Hauptinhalt und Schaltflächeninhalt hinzufügen

Fügen Sie unterhalb des Klappentext-Moduls ein Call-to-Action-Modul hinzu und fügen Sie Inhalte Ihrer Wahl ein.

Link hinzufügen

Fügen Sie der Schaltfläche als nächstes einen Link hinzu.

Hintergrund

Fahren Sie fort, indem Sie einen weißen Hintergrund hinzufügen.

• Hintergrundfarbe: Weiß #ffffff

Titeltext

Gestalten Sie auf der Registerkarte Design den H3-Titeltext.

• Titelüberschriftsebene: H3
• H3-Schrift: Josefin Sans
• H3 Schriftfarbe: Sehr Dunkelgrau #3f3f3f
• H3-Größe:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 6vw
• H3-Linienhöhe: 2.3em

Hauptteil

Dann formatieren Sie den Fließtext.

• Textkörper: Crimson Text
• Ausrichtung des Textkörpers: Links
• Körpertextfarbe: Dunkelgrau #666666
• Textgröße:
  • Desktop: 1.1vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Körperlinienhöhe: 1.8em

Taste

Gehen Sie zu den Schaltflächeneinstellungen und gestalten Sie die Schaltfläche wie folgt:

• Schaltflächentextgröße:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Schaltflächentextfarbe: Sehr Dunkelgrau #3f3f3f
• Knopfschrift: Josefin Sans
• Breite des Knopfrahmens: 2-x
• Farbe der Knopfleiste: Sehr Dunkelgrau #3f3f3f
• Button oben und untenMargin: 3vw
• Knopfpolsterung oben und unten: 1vw
• Tastenpolsterung links und rechts: 3vw

Abstand

Passen Sie nun den Abstand an.

• Unterer Rand: -1vw
• Obere Polsterung: 6vw
• Linke und rechte Polsterung: 7vw

Grenze

Runden Sie dann die Ecken in den Rahmeneinstellungen ab.

• Abgerundete Ecken: 2vw

Box Schatten

Fügen Sie schließlich einen Boxschatten hinzu.

• Box-Shadow: Erste Option
• Stärke der Box-Schattenunschärfe: 50px

Spalte 2 löschen und Spalte 1 klonen

Passen Sie die Einstellungen in Spalte 2 an

Gehen Sie wie im vorherigen Beispiel zu den Zeileneinstellungen und löschen Sie die zweite Spalte. Duplizieren Sie die erste Spalte und passen Sie einige Einstellungen an.

Blurb-Modul

Ändern Sie den Hintergrund des Klappenmoduls von Gelb in Aqua.

• Hintergrundsymbolfarbe: Aqua #00ffd4

Call-to-Action-Modul

Ändern Sie auch den Inhalt und den Link des Call-to-Action-Moduls.

• Titelinhalt ändern
• Link ändern

Beispiel 3 neu erstellen

Blurb-Modul zu Spalte 1 hinzufügen

Standardinhalt löschen

Auf zum nächsten und letzten Beispiel! Fügen Sie Spalte 1 ein Klappenmodul hinzu und löschen Sie den Standardinhalt.

Symbol auswählen

Wählen Sie ein Symbol aus.

Hintergrund

Fügen Sie dem Modul einen leuchtend gelben Hintergrund hinzu.

• Hintergrundfarbe: Gelb #f7f426

Symbol

Machen Sie das Symbol schwarz und passen Sie seine Platzierung an

• Symbolfarbe: Schwarz #000000
• Symbolplatzierung: Links
• Schriftgröße des Symbols:
  • Desktop: 3vw
  • Tablet + Telefon: 8vw

Größe

Fahren Sie fort, indem Sie die Breite und Höhe des Moduls ändern.

• Inhaltsbreite: 100%
• Höhe: 23vw

Abstand

Passen Sie außerdem die Abstandseinstellungen an.

• Linker Rand: 3vw
• Rechter Rand: 25vw
• Obere Polsterung: 2vw
• Linke Polsterung: 1vw

Grenze

Fügen Sie auch einen Randradius hinzu.

• Abgerundete Ecken: 2vw an allen Ecken

Box Schatten

Fügen Sie dann einen Boxschatten hinzu.

• Box-Shadow: Erste Option

Verwandeln

Schließlich positionieren Sie das Modul mit benutzerdefinierten Transformationsübersetzungswerten neu.

• x-Achse: -6vw
• y-Achse: 1vw

Hintergrundfarbe und Boxschatten aus Spalte 1 entfernen

Gehen Sie zu den Einstellungen von Spalte 1 und entfernen Sie die Hintergrundfarbe und den Boxschatten.

Call-to-Action-Modul zu Spalte 1 hinzufügen

Titel, Hauptteil und Schaltflächeninhalt hinzufügen

Fügen Sie unter dem Klappentext-Modul ein Call-to-Action-Modul hinzu. Fügen Sie Inhalte Ihrer Wahl hinzu.

Link hinzufügen

Fügen Sie dann einen Link zur Schaltfläche hinzu.

Hintergrund

Um das Call-to-Action-Modul zu gestalten, fügen Sie zunächst eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: Schwarz #oooooo

Titeltext

Passen Sie als nächstes die H3-Texteinstellungen an.

• Titelüberschriftsebene: H3
• H3-Schrift: Josefin Sans
• H3 Schriftfarbe: Hellgelb #f7f426
• H3-Schriftgröße:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 6vw
• H3-Linienhöhe: 2.3em

Hauptteil

Ändern Sie auch die Textkörpereinstellungen.

• Textkörper: Crimson Text
• Ausrichtung des Textkörpers: Links
• Textkörperfarbe: Weiß #000000
• Textgröße:
  • Desktop: 1.2vw
  • Tablet: 2.2vw
  • Telefon: 3.1vw
• Körperlinienhöhe: 1.8em

Taste

Stylen Sie dann die Schaltfläche wie folgt.

• Schaltflächentextgröße:
  • Desktop: 1vw
  • Tablet: 2vw
  • Telefon: 3vw
• Schaltflächentextfarbe: Aqua #00ffd4
• Farbe der Knopfleiste: Aqua #00ffd4
• Knopfschrift: Josefin Sans
• Button oberer und unterer Rand: 3vw
• Knopfpolsterung oben und unten: 1vw
• Tastenpolsterung links und rechts: 3vw

Größe

Gehen Sie zu den Größeneinstellungen und nehmen Sie einige Änderungen vor.

• Breite: 90%
• Modulausrichtung: Mitte

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Obere Marge: -9vw
• Obere Polsterung: 5vw
• Linke und rechte Polsterung: 7vw

Grenze

Öffnen Sie als nächstes die Randeinstellungen und fügen Sie jeder Ecke einen Randradius hinzu.

• Abgerundete Ecken: 2vw

Box Schatten

Wir verwenden auch einen subtilen Boxschatten.

• Kastenschatten: Erste Option

Transformieren Übersetzen

Schließlich positionieren Sie das Call-to-Action-Modul neu, indem Sie die Übersetzungseinstellungen der Transformation ändern.

• y-Achse: -18vw

Spalte 2 löschen und Spalte 1 klonen

Passen Sie die Einstellungen in Spalte 2 an

Nachdem die erste Spalte fertig ist, löschen wir die zweite und duplizieren die erste. Danach passen wir einige der Inhalts- und Farbdetails an.

Blurb-Modul

Ändern Sie in den Einstellungen des Klappenmoduls den Hintergrund von Gelb in Aqua.

• Hintergrundsymbolfarbe: Aqua #00ffd4

Call-to-Action-Modul

Ändern Sie in den Einstellungen des Call-to-Action-Moduls den Titelinhalt, die Titelfarbe und die Schaltflächenfarbe. Vergessen Sie nicht, auch den Button-Link zu ändern und fertig!

• Titeltextfarbe: Aqua #00ffd4
• Inhalt
• Knopffarbe: #00ffd4

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Beispiel #3

Desktop

Handy, Mobiltelefon

Abschluss

Wie Sie in diesem Beitrag gesehen haben, können Klappensymbol-Hintergründe Ihre Klappendesigns viel interessanter machen. Durch die Verwendung von Klappenmodulen gepaart mit Call-to-Action und Textmodulen ergeben sich viele kreative Möglichkeiten. Diese Designstile eignen sich perfekt für Service-Vitrinen oder Produktbereiche. Was denken Sie? Sag es uns in den Kommentaren.