Wie kann ich die Abstände nach einem Absatztext vergrößern?

Standardmäßig sieht das Design deiner Blog-Artikel im Frontend sehr schlicht aus: 

Im Theme Customizer (Backend unter "Design") kannst du nur allgemeine Einstellungen für deine Schriftformatierung vornehmen. Bspw. kannst du den Bodytext (Inhalt) oder deine Überschriften (H1-H6) vergrößern oder den Zeilenabstand erhöhen: 

Was aber über den Theme Customizer nicht geht, ist das Verändern der Abstand vor und nach einem Absatztext sowie vor und nach einer Überschrift. Oder das Ansprechen nur der Überschrift H2.

In dieser Anleitung stellen wir dir einen einfachen CSS-Code vor, über welchen du bei deinem Blog-Artikeln genau diese Abstände beeinflussen kannst. 

Um die Ergebnisse und Auswirkungen sehen zu können, solltest du am besten im Backend unter "Blog" einen neuen Blog-Artikel erstellen und in diesen ein Platzhaltertext einsetzen, der aus mehreren Textabschnitten und den Überschriften H1-H5 besteht. Über das kostenlose Onlinetool Blindtextgenerator kannst du dir ganz schnell einen Platzhaltertext besorgen.

Nachdem du einen Blog-Artikel erstellt hast, gehst du im Backend zu "Design" > "Theme Optionen" > Registerkarte "Allgemeines" und dort in der Seitenansicht ganz ans Ende zu "Eigenes CSS":

Als erstes werden wir einen größeren Abstand nach einem Absatztext einfügen. Kopiere dazu einfach den folgenden CSS Code aus dieser Anleitung und füge ihn in dein Backend unter "Eigenes CSS" ein:

/** Schrift Formatierungen bei Blog-Artikel **/
/* Abstände nach Abstatz */
.single-post #content-area .entry-content p {
    margin-bottom: 35px;
}

Mit margin-bottom sagen wir einem Absatztext ( p ), dass ein Abstand nach unten von 35px hinzugefügt werden soll. Klicke nach Einfügen des CSS-Codes auf "Änderungen Speichern" und rufe deinen Blog-Artikel im Frontend auf. Es erscheint: 

Der margin-bottom Befehl wirkt sich nicht nur bei einem Absatztext aus, sondern bei allen. Du siehst den großen Abstand auch gleich schon beim ersten Absatz.

Du kannst ein margin-bottom auch deinen Überschriften hinzufügen, bspw. nur der Überschrift H1: 

.single-post #content-area .entry-content h1 {
    margin-bottom: 35px;
}

Füge diesen CSS-Codeschnipsel einfach in die nächste Zeile bei deinem eigenen CSS ein. Nach Speichern der Änderungen erscheint im Frontend: 

Wie du siehst, wirkt sich diese Anpassung nur auf die Überschriften der H1 Formatierung aus. Wenn du möchtest, dass der Abstand auch bei den H2 usw. genutzt wird, kannst du ganz einfach die folgenden CSS-Codezeilen kopieren und bei dir einfügen: 

.single-post #content-area .entry-content h1 {
    margin-bottom: 35px;
}

.single-post #content-area .entry-content h2 {
    margin-bottom: 35px;
}

.single-post #content-area .entry-content h3 {
    margin-bottom: 35px;
}

.single-post #content-area .entry-content h4 {
    margin-bottom: 35px;
}

.single-post #content-area .entry-content h5 {
    margin-bottom: 35px;
}

Du kannst nun für jede Überschrift eigene Werte eintragen. 

Wenn du deiner Überschrift auch einen Abstand nach oben hinzufügen möchtest, fügst du in den Code einfach ein margin-top hinzu: 

.single-post #content-area .entry-content h1 {
    margin-top: 25px;
    margin-bottom: 35px;
}

Nach Speichern der Änderungen sieht es im Frontend so aus:

Mit Hilfe von diesem CSS-Code kannst du ganz einfach bei all deinen Blog-Artikeln die Abstände nach einen Absatztext oder für deine Überschriftformatierungen beeinflussen.