Laden Sie 5 lebendige Hintergrundstile für Ihre Divi-Blog-Posts herunter

Wir sind hier mit einem weiteren kostenlosen Divi-Download! Dieses Mal geben wir Ihnen einen Vorgeschmack auf 5 verschiedene lebendige Hintergrundstile, die Sie für Blog-Posts auf Ihrer Website verwenden können. Sie können diese Hintergrundstile ganz einfach auf derselben Website kombinieren, um den verschiedenen Blog-Posts, die Sie veröffentlichen, ein anderes Erscheinungsbild zu verleihen. Wir bieten Ihnen nicht nur all diese lebendigen Hintergrundstile kostenlos an, sondern führen Sie auch durch die Erstellung der Blog-Post-Vorlage, die Sie für jeden Blog-Post wiederverwenden können, den Sie erstellen und auf Ihrer Website veröffentlichen.

Lasst uns anfangen!

Vorschau

Beginnen wir mit einem Blick auf die 5 verschiedenen Ergebnisse und die Ansicht auf verschiedenen Bildschirmgrößen.

Laden Sie die lebendigen Hintergrundstile KOSTENLOS herunter

Um die lebendigen Hintergrundstile 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!

Farbpaletten

Für jeden der Hintergrundstile finden Sie unten eine Farbpalette. Wir werden uns im gesamten Tutorial auf die Farbnummer beziehen, also wählen Sie den Hintergrundstil und die Palette, die Sie erstellen möchten, und gehen Sie von dort aus.

Palette #1

• Farbe #1: #886DFC
• Farbe #2: #7C56BD
• Farbe #3: #372C66

Palette #2

• Farbe #1: #42bcb2
• Farbe #2: #9CFEF0
• Farbe #3: #a8baf7

Palette #3

• Farbe #1: #96b2ff
• Farbe #2: #d999ff
• Farbe #3: #357ff4

Palette #4

• Farbe #1: #B981FF
• Farbe #2: #24EEFA
• Farbe #3: #be7bf2

Palette #5

• Farbe #1: #e02b20
• Farbe #2: #f6ff56
• Farbe #3: #db241e

Neuen Beitrag erstellen

Details hinzufügen & Divi Builder aktivieren

Fangen wir von vorne an! Fügen Sie Ihrer WordPress-Website eine neue Seite hinzu, fügen Sie Ihren Seitentitel hinzu, laden Sie ein vorgestelltes Bild hoch und aktivieren Sie den Divi Builder.

Divi-Seiteneinstellungen

Bevor Sie zu Visual Builder wechseln, nehmen Sie einige Änderungen am Feld Divi-Seiteneinstellungen oben rechts auf der Seite vor, auf der Sie sich befinden. Dadurch wird sichergestellt, dass Sie vollständig mit Divi arbeiten, um das Blogpost-Layout zu erstellen. Wenn Sie die Vorlage auf Ihrer Website wiederverwenden möchten, müssen Sie diese Einstellungen jedes Mal ändern, wenn Sie einen neuen Blogbeitrag erstellen.

• Seitenlayout: Volle Breite
• Beitragstitel: Verstecken

Wechseln Sie zu Visual Builder

Sie können jetzt zu Visual Builder wechseln.

Sobald Sie dies getan haben, werden drei Optionen auf Ihrem Bildschirm angezeigt. Klicken Sie auf die blaue Schaltfläche, um mit dem Bauen von Grund auf zu beginnen.

Blogpost-Design erstellen

Abschnitt 1 hinzufügen

Hintergrundbild

Beginnen wir mit der Erstellung der Vorlage! Beginnen Sie mit einem leeren Abschnitt oben. Öffnen Sie die Abschnittseinstellungen, gehen Sie zu den Hintergrundeinstellungen und laden Sie einen Hintergrundstil Ihrer Wahl hoch. Alle 5 Variationen finden Sie im heruntergeladenen Ordner > Hero .

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Oben Mitte

Abstand

Damit das Hintergrundbild vollständig angezeigt wird, spielen Sie mit der oberen Polsterung des Abschnitts herum.

• Obere Polsterung: 660px

Abschnitt 2 hinzufügen

Abstand

Direkt unter dem Abschnitt, den Sie gerade hinzugefügt haben, fahren Sie fort und fügen Sie einen weiteren hinzu. Öffnen Sie die Einstellungen, gehen Sie zu den Abstandseinstellungen und entfernen Sie alle standardmäßigen benutzerdefinierten Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Abstand

Entfernen Sie als nächstes alle Standard-Paddings am unteren Rand des Abschnitts.

• Untere Polsterung: 0px

Modul für Beitragstitel hinzufügen

Elemente

Zeit, Module hinzuzufügen! In dieser Zeile benötigen wir nur ein Beitragstitelmodul. Nachdem Sie eines hinzugefügt haben, wählen Sie die Elemente aus, die angezeigt werden sollen.

Einstellungen für Titeltext

Gehen Sie dann zu den Titeltexteinstellungen und nehmen Sie einige Änderungen vor.

• Titelschriftart: Abril Fatface
• Ausrichtung des Titeltextes: Mitte
• Titeltextgröße: 73 Pixel (Desktop), 50 Pixel (Tablet), 40 Pixel (Telefon)

Metatext-Einstellungen

Die Metatext-Einstellungen müssen ebenfalls geändert werden.

• Metatext-Ausrichtung: Mitte
• Metatextfarbe: Farbe #1 (In Palette suchen)
• Metatextgröße: 18px
• Höhe der Metalinie: 3em

Abschnitt 3 hinzufügen

Hintergrundbild

Der letzte Abschnitt auf dieser Seite enthält den Inhalt des Blogbeitrags und den CTA. Beginnen Sie mit dem Hochladen des Hintergrundstils Ihrer Wahl. Die Variationen finden Sie im heruntergeladenen Ordner > Body . Nachdem Sie das Hintergrundbild hochgeladen haben, nehmen Sie einige Änderungen an den Hintergrundeinstellungen vor.

• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Oben Mitte
• Hintergrundbild wiederholen: Leerzeichen

Abstand

Entfernen Sie alle standardmäßigen oberen Auffüllungen dieses Abschnitts, um alle Leerzeichen zwischen diesem Abschnitt und dem vorherigen Abschnitt zu entfernen.

• Obere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Fügen Sie der nächsten Zeile eine leicht transparente Hintergrundfarbe hinzu.

• Hintergrundfarbe: rgba(255,255,255,0,86)

Abstand

Entfernen Sie auch hier die standardmäßige benutzerdefinierte Auffüllung.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Textmodul hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie der hinzugefügten Zeile ein Textmodul hinzufügen. Hier können Sie alle gewünschten Blog-Post-Inhalte hinzufügen und die verschiedenen Textstile verwenden, um das gewünschte Ergebnis zu erzielen. Im Druckbildschirm unten verwenden wir Überschriften und Absätze.

Texteinstellungen

Gehen Sie zu den Texteinstellungen und nehmen Sie dort einige Änderungen vor.

• Textgröße: 21px (Desktop), 18px (Tablet), 15px (Telefon)
• Textzeilenhöhe: 2em

Kurseinstellungen

Die Einstellungen für den Überschriftentext müssen ebenfalls geändert werden.

• Überschrift Schriftart: Abril Fatface
• Überschriftstextgröße: 46px (Desktop), 40px (Tablet), 30px (Telefon)
• Höhe der Überschriftslinie: 1,5 em

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 80px
• Untere Polsterung: 80px
• Linke Polsterung: 80px (Desktop), 40px (Tablet), 30px (Telefon)
• Rechte Polsterung: 80px (Desktop), 40px (Tablet), 30px (Telefon)

Box Schatten

Fügen Sie zum Abschluss dem Textmodul einen subtilen Kastenschatten hinzu. Dies wird der Blog-Post-Vorlage etwas Tiefe verleihen.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -14px

Zeile 2 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile direkt unter der vorherigen mit einer Spalte hinzufügen.

Abstand

Entfernen Sie auch alle standardmäßigen benutzerdefinierten Auffüllungen dieser Zeile.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

E-Mail-Optionsmodul hinzufügen

Inhalt hinzufügen

Fügen Sie dann Ihren CTA hinzu. Wir verwenden ein E-Mail-Optin-Modul. Ändern Sie nach dem Hinzufügen den Inhalt.

Felder

Wir verwenden nur die E-Mail-Adresse in diesem Modul, also fahren Sie fort und deaktivieren Sie den Vor- und Nachnamen in den Feldeinstellungen.

Hintergrund mit Farbverlauf

Fahren Sie fort, indem Sie dem E-Mail-Optionsmodul einen Hintergrund mit Farbverlauf hinzufügen.

• Farbe 1: Farbe #2 (In Palette finden)
• Farbe 2: Farbe #3 (In Palette finden)
• Verlaufsrichtung: 144deg

Layout

Ändern Sie dann das Layout des Moduls.

• Layout: Körper oben, Form unten

Texteinstellungen

Ändern Sie auch die Texteinstellungen.

• Textausrichtung: Mitte
• Textfarbe: Hell

Einstellungen für Titeltext

Öffnen Sie als Nächstes die Titeltexteinstellungen und nehmen Sie einige Änderungen vor.

• Titelschriftart: Abril Fatface
• Titeltextgröße: 54px (Desktop), 40px (Tablet), 35px (Telefon)

Tasteneinstellungen

Ändern Sie auch das Aussehen der Schaltfläche.

• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Schriftstil: Unterstreichen
• Unterstreichungsstil: Doppel

Abstand

Verwenden Sie schließlich verschiedene benutzerdefinierte Abstandswerte in den Abstandseinstellungen des E-Mail-Optin-Moduls.

• Obere Polsterung: 100px
• Untere Polsterung: 100px
• Linke Polsterung: 300px (Desktop), 50px (Tablet & Telefon)
• Rechte Polsterung: 300px (Desktop), 50px (Tablet & Telefon)

Layout in der Divi-Bibliothek zur Wiederverwendung speichern

Das einzige, was Sie noch tun müssen, ist das Layout in der Divi-Bibliothek zu speichern. Auf diese Weise können Sie es auch für andere Seiten wiederverwenden! Sie können beim Erstellen einer neuen Seite auch auf Blogbeiträge als vorhandene Seiten zugreifen.

Vorschau

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

Abschließende Gedanken

In diesem Beitrag haben wir einige atemberaubende und lebendige Hintergrundstile mit Ihnen geteilt, die Sie kostenlos herunterladen können. Darüber hinaus haben wir Sie auch durch die Erstellung der Blogpost-Vorlage von Grund auf geführt. Sie können diese Hintergrundstile gerne für die von Ihnen selbst gestalteten Blogpost-Vorlagen verwenden. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!