So gestalten Sie das Kommentarmodul von Divi in ​​einer Blog-Post-Vorlage

Das Entwerfen einer Blog-Post-Vorlage ist mit dem Divi-Theme-Builder ziemlich einfach. Aber es gibt eine Sache, die beim Entwerfen von Blog-Vorlagen übersehen wird, und das ist der Kommentarbereich. Glücklicherweise verfügt Divi über ein anpassbares Kommentarmodul, das leicht zu einer Blog-Post-Vorlage hinzugefügt werden kann. In diesem Beitrag zeigen wir Ihnen, wie Sie zwei benutzerdefinierte Designs für Kommentarbereiche erstellen, die Sie in jede Blog-Vorlage einfügen können. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Schauen wir uns an, wie die Kommentarlayout-Designs auf verschiedenen Bildschirmgrößen aussehen. Das erste Design ist ein minimalistischer Stil in Schwarz-Weiß und das zweite ist farbenfroher.

Desktop

Tablette

Telefon

Desktop

Tablette

Handy, Mobiltelefon

Laden Sie die Vorlagen für das Kommentarmodul KOSTENLOS herunter

Um die kostenlosen Vorlagen für das Kommentarmodul 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!

Lassen Sie uns das Design des Kommentarmoduls Nr. 1 neu erstellen

Hintergrunddesign erstellen

Der erste Schritt, um die Layout-Vorlage für Schwarz-Weiß-Kommentare neu zu erstellen, besteht darin, den Punkthintergrund zu gestalten. Eine für die Desktop-Ansicht und eine für reaktionsschnelle Bildschirme. Wenn Sie dies selbst erstellen möchten, benötigen Sie das Pattern Maker-Tool von Adobe Illustrator. Andernfalls können Sie ein ähnliches Muster aus dem Internet beziehen oder dasjenige verwenden, das in der herunterladbaren ZIP-Datei oben enthalten ist.

1. Erstellen Sie in Adobe Illustrator eine leere Zeichenfläche mit einer Höhe von 1920 px und einer Breite von 670 px.
2. Erstellen Sie einen schwarzen Kreis in einem weißen Quadrat mit Rändern, die etwa halb so groß sind wie der Kreis.
3. Wählen Sie beide Formen aus und erstellen Sie ein Muster, indem Sie auf Objekt> Muster> Erstellen klicken.
4. Wählen Sie im Musterersteller „Stein nach Spalte“ und speichern Sie ihn als Mustermuster.
5. Erstellen Sie eine Form in der Größe der Zeichenfläche und wenden Sie das Muster an.
6. Verkleinern Sie die Form für die responsiven Bildschirmgrößen auf die Hälfte ihrer Größe. Drücken Sie die Umschalttaste, um das Verhältnis der Kreise beizubehalten.
7. Kopieren Sie die gemusterte Form und fügen Sie sie neben die erste ein und jetzt haben Sie das gleiche Muster mit kleineren Kreisen.
8. Laden Sie beide separat herunter.

Öffnen Sie den Theme Builder und fügen Sie eine neue Vorlage hinzu

Jetzt ist es an der Zeit, den Theme Builder zu öffnen. Fügen Sie eine neue Vorlage hinzu.

Wählen Sie die Vorlage für alle Beiträge

Verwenden Sie die neue Vorlage für alle Beiträge.

Benutzerdefinierten Körper hinzufügen und von Grund auf neu erstellen

Zu guter Letzt beginnen Sie mit dem Erstellen des benutzerdefinierten Hauptteils der Vorlage.

Neuen Abschnitt hinzufügen

Hintergrund

Jetzt können wir mit dem Erstellen des Designs für das Kommentarlayout beginnen. Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie die Abschnittseinstellungen und laden Sie die Hintergrundbilder des Musters hoch. Fügen Sie auch eine Verlaufsüberlagerung hinzu.

• Hintergrund: Farbverlauf
• Farbe 1: Halbtransparentes Weiß rgba(255,255,255,0.96)
• Farbe 2: Weiß #ffffff
• Farbverlauf über dem Hintergrundbild platzieren: Ja
• Bild:
  • Desktop: Punktmuster Bild 1
  • Tablet und Telefon: Punktmuster Bild 2

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie nun eine neue Zeile mit zwei Spalten hinzu.

Größe

Passen Sie dann die Größe der Reihe an.

• Benutzerdefinierte Dachrinnenbreite: 2
• Breite: 80%
• Maximale Breite: 100%

Spalte 2 Einstellungen

Grenze

Fügen Sie in den Spalteneinstellungen der zweiten Spalte einen oberen Rahmen hinzu.

• Stil: Nur Top
• Breite: 3px
• Farbe: Schwarz #ffffff

Textmodul zu Spalte 1 hinzufügen

Inhalt

Fügen Sie der Spalte 1 den ersten Textbaustein mit H3-Inhalten Ihrer Wahl hinzu.

• Text: Absatz

Überschriftstext

Stylen Sie dann auf der Registerkarte Design den Überschriftentext.

• Überschriftsebene: H3
• Schriftart: GFS Didot
• Farbe: Schwarz #000000
• Größe:
  • Desktop: 5vw
  • Tablet: 9vw
  • Telefon: 13vw

Abstand

Passen Sie außerdem den Abstand an.

• Bodenpolsterung
  • Desktop: 3vw
  • Tablet und Telefon: 7vw

Testimonial-Modul zu Spalte 1 hinzufügen

Inhalt

Fügen Sie nun in Spalte 1 ein Testimonial-Modul mit Inhalten Ihrer Wahl hinzu. Laden Sie auch ein Bild hoch.

• Autor: Treuer Leser
• Berufsbezeichnung: Content Marketing Officer
• Firma: Tiger Media Company
• Text: Absatztext
• Bild: Porträtfoto

Hintergrund

Stellen Sie sicher, dass der Hintergrund transparent ist

• Hintergrundfarbe: Transparent

Elemente

Wählen Sie auf der Registerkarte Elemente aus, um das Angebotssymbol anzuzeigen.

• Angebotssymbol anzeigen: Ja

Zitat-Symbol

Dann formatieren Sie das Zitatsymbol wie folgt.

• Farbe: Schwarz #000000
• Hintergrund: Weiß #ffffff
• Schriftgröße des Symbols:
  • Desktop: 2vw
  • Tablet: 5vw
  • Telefon: 9vw

Bild

Ändern Sie als nächstes die Bildeinstellungen.

• Breite und Höhe:
  • Desktop: 110px
  • Tablet und Telefon: 90px
• Abgerundete Ecken: 90px
• Randfarbe: Transparent

Text

Ändern Sie auch die Textausrichtung.

• Ausrichtung: Mitte

Hauptteil

Dann formatieren Sie den Fließtext.

• Schriftart: Verdana
• Farbe schwarz
• Größe:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefon: 3vw

Autorentext

Fahren Sie fort, indem Sie den Autorentext gestalten.

• Schriftart: GFS Didot
• Gewicht: Fett
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 1.2vw
  • Tablet: 2.5vw
  • Telefon: 4vw
• Buchstabenabstand: 1px

Positionstext

Dann der Positionstext.

• Schriftart: GFS Didot
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Linienhöhe: 2em

Firmentext

Auch der Firmentext.

• Schriftart: GFS Didot
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefon: 3vw
• Linienhöhe: 2em

Größe

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

• Breite:
  • Desktop: 60%
  • Tablette: 65%
  • Telefon: 75%
• Modulausrichtung: Mitte

Abstand

Passen Sie außerdem den Abstand an.

• Obere Polsterung:
  • Desktop: 1.5vw
  • Tablet: 5vw
  • Telefon: 6vw

Grenze

Schließlich fügen Sie dem Modul einen oberen Rahmen hinzu.

• Rahmenstile: Nur oben
• Breite: 2px
• Farbe: Schwarz #ffffff

Kommentarmodul zu Spalte 2 hinzufügen

Elemente

Fahren Sie mit Spalte 2 fort und fügen Sie ein Kommentarmodul hinzu. Ändern Sie die Elementeinstellungen wie folgt.

• Autor Avatar anzeigen: Nein
• Antwort-Button anzeigen: Ja
• Kommentaranzahl anzeigen: Nein

Felder

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Feldeinstellungen.

• Textfarbe: Schwarz #oooooo
• Hintergrundfarbe: Blassgrau #f7f7f7
• Fokustextfarbe: Schwarz #oooooo
• Fokushintergrundfarbe: Blassgrau #f7f7f7
• Schriftart: GFS Didot
• Textgröße:
  • Desktop: 0.9vw
  • Tablet: 1.5vw
  • Telefon: 2.5vw
• Buchstabenabstand: 1px

Formulartiteltext

Ändern Sie als nächstes die Texteinstellungen für den Formulartitel.

• Schriftart: GFS Didot
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Schriftart: 3.5vw

Metatext

Fahren Sie fort, indem Sie den Metatext gestalten.

• Schriftart: GFS Didot
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 1.3vw
  • Tablet: 3vw
  • Telefon: 4vw

Kommentartext

Auch der Kommentartext.

• Schriftart: Verdana
• Farbe: Schwarz #ffffff
• Größe:
  • Desktop: 0.7vw
  • Tablet: 1.7vw
  • Telefon: 2.7vw
• Buchstabenabstand: 1px
• Linienhöhe: 1.8em

Taste

Fahren Sie fort und stylen Sie die Schaltflächen.

• Textgröße:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Textfarbe: Weiß #000000
• Hintergrund: Schwarz #ffffff
• Buchstabenabstand: 1px
• Schriftart: GFS Didot

Größe

Passen Sie dann die Größeneinstellungen des Moduls an.

• Breite: 90%
• Modulausrichtung: Mitte

Abstand

Endlich auch der Abstand.

• Obere Polsterung:
  • Desktop: 4vw
  • Tablet und Telefon: 8vw
• Linke und rechte Polsterung: 3vw

Lassen Sie uns das Design des Kommentarmoduls 2 neu erstellen

Hintergrunddesign erstellen

Der erste Schritt, um das Layout des Kommentarmoduls der bunten Kreise neu zu erstellen, besteht darin, ein Hintergrunddesign vorzubereiten. Sie können ein einfaches Kreisdesign in Ihrem bevorzugten Grafikeditor erstellen. Dies sind die Schritte, die Sie ausführen müssen, um das Hintergrundbild zu erstellen:

1. Erstellen Sie eine Leinwand mit einer Breite von 1800 Pixeln und einer Höhe von etwa 1800 Pixeln.
2. Fügen Sie zwei Kreise hinzu, einer größer als der andere.
3. Male die Kreise aus und füge etwas Transparenz hinzu.
4. Platzieren Sie die beiden Kreise etwas überlappt oben links auf der Leinwand.
5. Gruppieren Sie die Kreise als ein Objekt und duplizieren Sie sie.
6. Drehe die Kreise um und platziere sie diagonal nach unten und rechts von den ersten beiden.
7. Achten Sie darauf, oben und unten Platz zu lassen. Wenn es viele Kommentare gibt, wird das Bild wiederholt und vertikal gekachelt.

Das Hintergrunddesign, das wir für diese Kommentar-Layout-Vorlage erstellt haben, ist auch in dem gezippten Ordner verfügbar, den Sie zu Beginn des Tutorials herunterladen können.

Öffnen Sie den Theme Builder und fügen Sie eine neue Vorlage hinzu

Jetzt ist es an der Zeit, den Theme Builder zu öffnen. Fügen Sie eine neue Vorlage hinzu.

Wählen Sie die Vorlage für alle Beiträge

Wenden Sie die Vorlage auf alle Beiträge an.

Benutzerdefinierten Körper hinzufügen und von Grund auf neu erstellen

Und beginnen Sie mit der Erstellung des benutzerdefinierten Körpers der Vorlage.

Neuen Abschnitt hinzufügen

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und laden Sie das Hintergrundbild hoch. Fügen Sie auch eine Farbverlaufsüberlagerung hinzu.

Hintergrund

• Hintergrund: Farbverlauf
• Verlaufsfarbe 1: Transparentes Weiß rgba(255,255,255,0.55)
• Verlaufsfarbe 2: Transparentes Weiß rgba (255,255,255,0.55)
• Bild: Kreise Hintergrund

Abstand

Passen Sie außerdem den Abstand des Abschnitts an, bevor Sie eine Zeile hinzufügen.

• Polsterung oben und unten: 200px

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie nun eine Zeile mit drei Spalten hinzu.

Größe

Passen Sie vor dem Hinzufügen von Modulen die Größe der Zeile an.

• Benutzerdefinierte Dachrinnenbreite: 2
• Breite: 80%
• Maximale Breite: 100%

Spalte 2 Einstellungen

Hintergrund

Gestalten Sie nun die zweite Spalte, indem Sie einen blauen Hintergrund hinzufügen.

• Hintergrundfarbe: Blau #51a2ff

Grenze

Fahren Sie fort, indem Sie die Grenzen abrunden.

• Abgerundete Ecken: 1vw alle vier Ecken

Box Schatten

Schließlich fügen Sie auch einen Boxschatten hinzu.

• Schatten: Dritte Option
• Unschärfestärke: 80px
• Farbe: rgba(0,0,0,0.13)

Personenmodul zu Spalte 1 hinzufügen

Inhalt

Es ist Zeit, die Module hinzuzufügen. Beginnen Sie mit einem Personenmodul in Spalte 1 und fügen Sie den Inhalt hinzu.

• Name: Jenny McAbee
• Position: Regelmäßiger Mitarbeiter
• Hauptteil: Absatztext
• Bild: Porträtfoto

Hintergrund

Fügen Sie dem Modul einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß #000000

Bild

Gestalten Sie auf der Registerkarte Design den Bildrahmen wie folgt.

• Abgerundete Ecken: 0,5 vw oben links und oben rechts
• Rahmenstile: Unterer Rahmen
  • Breite: 5px
  • Farbe: Blau #51a2ff

Titeltext

Fahren Sie fort, indem Sie den Überschriftentext gestalten.

• Überschriftsebene: H4
• Schriftart: Alegreya Sans SC
• Stil: TT
• Farbe: #021859
• Größe:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefon: 5vw
• Buchstabenabstand: 1px
• Linienhöhe: 1,6em

Hauptteil

Dann auch der Fließtext.

• Schriftart: Lato
• Farbe: Blau #1a1f73
• Größe:
  • Desktop: 0.7vw
  • Tablet: 2vw
  • Telefon: 3vw
• Linienhöhe: 2em

Positionstext

Fahren Sie mit dem Positionstext fort.

• Schriftart: Lato
• Stil: Kursiv
• Farbe: #021859
• Größe:
  • Desktop: 0.8vw
  • Tablet: 3vw
  • Telefon: 3.5vw

Größe

Passen Sie dann die Größe an.

• Breite:
  • Desktop: 100 %
  • Tablette: 50%
  • Telefon: 70%
• Modulausrichtung: Mitte

Abstand

Auch der Abstand.

• Obere und untere Polsterung: 4vw

Grenze

Fügen Sie dann einige abgerundete Ecken hinzu.

• Abgerundete Ecken: o.5vw an allen vier Ecken
• Rahmenstile: 24 px alle vier Seiten
  • Farbe: Weiß #ffffff

Box Schatten

Fügen Sie schließlich einen Boxschatten hinzu.

• Schatten: Dritte Option
• Unschärfestärke: 80px
• Farbe: rgba(0,0,0,0.13)

Fügen Sie das Social Media Follow-Modul zu Spalte 1 hinzu

Netzwerke

Fügen Sie unterhalb des Personenmoduls ein Social Media Follow-Modul mit drei sozialen Netzwerken hinzu.

• Facebook
• Linkedin
• Twitter

Netzwerkeinstellungen

Weisen Sie jedem sozialen Netzwerk eine transparente Hintergrundfarbe zu. Sie müssen dies einzeln tun.

• Hintergrund: Transparent

Ausrichtung

Zentrieren Sie in den Hauptdesigneinstellungen die Ausrichtung des Moduls.

• Modulausrichtung: Mitte

Symbol

Zum Schluss färben Sie die Symbole blau.

• Farbe: Blau #51a2ff
• Größe:
  • Desktop: 1vw
  • Tablet und Telefon: 4vw

Textmodul zu Spalte 2 hinzufügen

Inhalt

Fahren Sie mit Spalte 2 fort. Fügen Sie einen Textbaustein mit H3-Inhalten Ihrer Wahl hinzu.

• Text: Hinterlasse uns einen Kommentar

Hintergrund

Fügen Sie einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß #ffffff

Überschriftstext

Wechseln Sie dann zur Registerkarte Design und gestalten Sie den Überschriftstext.

• Überschriftsebene: H3
• Schriftart: Alegreya Sans SC
• Gewicht: Fett
• Schriftstil: TT
• Farbe: Blau #021859
• Größe:
  • Desktop: 2vw
  • Tablet und Telefon: 5.5vw

Abstand

Passen Sie abschließend den Abstand an.

• Obere Polsterung:
  • Desktop: 3vw
  • Tablet: 2vw
  • Telefon: 6vw
• Bodenpolsterung
  • Desktop und Tablet: 3vw
• Linke und rechte Polsterung:
  • Desktop und Tablet: 1vw

Kommentarmodul zu Spalte 2 hinzufügen

Elemente

Fügen Sie nun das Kommentarmodul zu Spalte 2 hinzu. Aktivieren Sie alle Elemente.

• Autor Avatar anzeigen: Ja
• Antwort-Button anzeigen: Ja
• Kommentaranzahl anzeigen: Ja

Hintergrund

Fügen Sie dem Kommentarmodul einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß #ffffff

Felder

Beginnen Sie dann mit dem Styling des Moduls, indem Sie die Feldeinstellungen wie folgt anpassen

• Hintergrundfarbe: Weiß #ffffff
• Textfarbe: Blau #1a1f73
• Fokushintergrundfarbe: Weiß #ffffff
• Fokustextfarbe: Blau #1a1f73
• Schriftart: Alegreya Sans SC
• Stil: TT
• Größe:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefon: 4vw
• Abgerundete Ecken: 5px alle Ecken

Bild

Ändern Sie auch die Bildeinstellungen.

• Abgerundete Ecken: 5px
• Bordürenstil: alle Seiten
• Breite: 3px
• Farbe: Blau #1a1f73

Kommentaranzahl Text

Dann der Kommentarzählertext.

• Überschriftsebene: H3
• Schriftart: Alegreya Sans SC
• Schriftstil: TT
• Farbe: Blau #021859
• Größe:
  • Desktop: 1.3vw
  • Tablet: 3vw
  • Telefon: 5vw
• Linienhöhe: 2 em

Formulartiteltext

Gestalten Sie außerdem den Formulartiteltext.

• Überschriftsebene: H3
• Schriftart: Alegreya Sans SC
• Schriftstil: TT
• Farbe: Blau #021859
• Größe:
  • Desktop: 1vw
  • Tablet: 3vw
  • Telefon: 5vw
• Linienhöhe: 2 em

Metatext

Gehen Sie wie folgt zum Metatext und -stil über.

• Schriftart: Lato
• Farbe: #021859
• Größe:
  • Desktop: 1vw
  • Tablet: 2.7vw
  • Telefon: 3.5vw

Kommentartext

Dann der Kommentartext.

• Schriftart: Lato
• Farbe: #021859
• Größe:
  • Desktop: 0.9vw
  • Tablet: 1.8vw
  • Telefon: 2.5vw

Taste

Vergessen Sie nicht, auch die Knöpfe zu stylen.

• Textgröße:
  • Desktop: 0.9vw
  • Tablet: 2.5vw
  • Telefon: 3.5vw
• Textfarbe: Weiß #ffffff
• Randradius: 5px
• Schriftart: Lato

Abstand

Auch der Abstand des Kommentarmoduls.

• Oberer Rand:
  • Desktop: -1vw
  • Tablet und Telefon: -3.3vw
• Obere Polsterung:
  • Desktop und Tablet: 3vw
  • Telefon: 4vw
• Untere Polsterung:
  • Desktop: 3vw
  • Telefon und Tablet: 0vw
• Linke und rechte Polsterung:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 7vw

Grenze

Schließlich fügen Sie dem Kommentarmodul einige abgerundete Ecken hinzu.

• Rahmenstile: 2px alle vier Seiten
• Farbe: Blau #1a1f73

E-Mail-Optionsmodul zu Spalte 3 hinzufügen

Inhalt

Fahren Sie mit Spalte 3 und einem E-Mail-Optin-Modul fort. Geben Sie dem Modul einen Titel.

• Text: Holen Sie sich regelmäßige Updates
• Hauptteil: Absatztext

Email-Konto

Richten Sie Ihren E-Mail-Anbieter auf der Registerkarte E-Mail-Konto ein. Wählen Sie eine Liste aus und fügen Sie Ihren API-Schlüssel hinzu.

• E-Mail-Anbieter
  • Aufführen
  • API-Schlüssel

Felder

Wählen Sie dann aus, dass nur ein einzelnes Namensfeld verwendet werden soll.

• Einzelnamenfeld verwenden: Ja

Hintergrund

Fügen Sie dem Modul einen weißen Hintergrund hinzu.

• Hintergrundfarbe: Weiß

Layout

Gehen Sie zur Design-Ta und ändern Sie die Layout-Einstellungen wie folgt.

• Layout: Körper links, Form rechts
• Name Vollbreite: Ja
• Vorname in voller Breite: Ja
• Nachname in voller Breite: Ja
• E-Mail in voller Breite: Ja

Felder

Stylen Sie dann die Feldeinstellungen.

• Textfarbe: Blau #1a1f73
• Hintergrundfarbe: Weiß #ffff
• Fokustextfarbe: Blau #1a1f73
• Fokus Hintergrundfarbe: Weiß #ffff
• Schriftart: Lato
• Textgröße:
  • Desktop: 0.7vw
  • Tablet: 2.2vw
  • Telefon: 3.2vw
• Buchstabenabstand: 1px
• Runde Ecken: 0,2 vw an allen Ecken
• Rahmenstile: Alle vier Seiten
  • Breite: 2px
  • Farbe: Blau #1a1f73

Titeltext

Gefolgt vom Titeltext.

• Überschriftsebene: H4
• Schriftart: Alegreya Sans SC
• Gewicht: Mittel
• Schriftstil: TT
• Farbe: Blau #1a1f73
• Größe:
  • Desktop: 1vw
  • Tablet: 4vw
  • Telefon: 5vw
• Buchstabenabstand: 1px

Hauptteil

Auch der Fließtext.

• Schriftart: Lato
• Farbe: Blau #1a1f73
• Größe:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefon: 3vw

Ergebnisnachrichtentext

Vergessen Sie nicht den Text der Ergebnisnachricht.

• Schriftart: Lato
• Farbe: Blau #1a1f73
• Größe:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefon: 3vw

Taste

Stylen Sie auch die Schaltfläche.

• Textgröße:
  • Desktop: 0.7vw
  • Tablet: 2.3vw
  • Telefon: 3vw
• Textfarbe: Weiß #ffffff
• Hintergrundfarbe: Blau #51a2ff
• Schriftart: Lato

Abstand

Passen Sie den Abstand an.

• Obere und untere Polsterung: 4vw

Grenze

Fügen Sie dann einige abgerundete Ecken hinzu.

• Abgerundete Ecken: o.5vw an allen vier Ecken

Box Schatten

Fügen Sie schließlich einen Boxschatten hinzu.

• Schatten: Dritte Option
• Unschärfestärke: 80px
• Farbe: rgba(0,0,0,0.13)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis dieses Tutorials.

Desktop

Tablette

Telefon

Desktop

Tablette

Handy, Mobiltelefon

Es ist ein Kommentarmodul-Wrap!

Das ist es! Sie haben Ihrer Blog-Post-Vorlage gerade einen benutzerdefinierten Kommentarbereich hinzugefügt. Wir hoffen, dass diese Designs Ihre eigenen Kreationen von Divi Theme Builder inspirieren werden. Sie konnten die JSON-Dateien beider Designs zu Beginn dieses Tutorials herunterladen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!