Wie Sie Drop Caps in WordPress-Beiträgen hinzufügen (3 einfache Methoden)

Das Hinzufügen von Elementen wie Drop Caps zu Ihren WordPress-Beiträgen kann die Lesbarkeit verbessern und Ihren Inhalten ein professionelles, poliertes Aussehen verleihen.

Drop Caps sind große, dekorative Großbuchstaben, die am Anfang eines Absatzes verwendet werden. Sie ziehen die Aufmerksamkeit der Leser auf sich und verleihen Ihrem Text einen Hauch von Eleganz.

Im Laufe der Jahre haben wir Drop Caps auf unseren persönlichen Blogs verwendet, um einen ästhetischen Touch zu verleihen. Viele unserer Leser haben bemerkt und kommentiert, wie sehr sie diese Funktion mögen und die verbesserte visuelle Attraktivität schätzen, die sie dem Design der Website verleiht.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ganz einfach Initialen in WordPress-Beiträgen hinzufügen.

Was ist ein Drop Cap?

Ein initialer Großbuchstabe ist eine gängige Styling-Technik in gedruckten Büchern und Magazinen, die längere Beiträge enthalten. Der erste Buchstabe des einleitenden Absatzes jedes Kapitels wird in einer großen Schriftgröße dargestellt.

Normalerweise erstreckt sich der große Großbuchstabe nach unten über die ersten paar Zeilen, weshalb er als „Drop Cap“ bezeichnet wird.

Das Hinzufügen von Initialen hilft Ihren Inhalten, hervorzustechen und die Aufmerksamkeit Ihrer Besucher zu erregen. Sie verleihen dem Design Ihrer Website eine formellere und traditionellere Note.

Es gibt verschiedene Möglichkeiten, Initialen zu einer WordPress-Website hinzuzufügen. Sie können die integrierte Option im WordPress-Blockeditor verwenden oder ein Plugin nutzen.

Das heißt, sehen wir uns an, wie Sie ganz einfach Drop Caps in WordPress-Beiträgen mit verschiedenen Methoden hinzufügen können.

Klicken Sie auf die Links unten, um zu Ihrer bevorzugten Methode zu springen:

• Methode 1: Drop Caps mit dem WordPress Block Editor hinzufügen
• Methode 2: Initialen mit CSS-Code hinzufügen
• Methode 3: Drop Caps mit einem Plugin hinzufügen
• Bonus: Schriftarten in Ihren WordPress-Themes ändern

Methode 1: Drop Caps mit dem WordPress Block Editor hinzufügen

Wenn Sie Drop Caps mit dem Standard- WordPress-Blockeditor hinzufügen möchten, dann ist diese Methode genau das Richtige für Sie. Beachten Sie, dass diese Methode zwar funktioniert, Sie jedoch Drop Caps manuell für jeden Beitrag hinzufügen müssen.

Wenn Sie nach einer automatischen Methode suchen, überspringen Sie einfach Methode 2.

Gehen Sie zuerst zur Seite Beiträge » Neu hinzufügen im WordPress-Admin-Dashboard. Klicken Sie nun einfach auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms.

Suchen Sie anschließend den Absatzblock und klicken Sie darauf, um ihn zu Ihrem Beitrag hinzuzufügen.

Als Nächstes müssen Sie das Block-Einstellungen-Panel in der rechten Spalte öffnen.

Wenn Sie das getan haben, scrollen Sie nach unten zum Abschnitt „Typografie“ und klicken Sie auf das Drei-Punkte-Symbol daneben. Dies öffnet eine Liste mit weiteren Optionen, aus denen Sie „Drop Cap“ auswählen müssen, um es zu Ihrem Block-Panel hinzuzufügen.

Sobald die Drop-Cap-Funktion hinzugefügt wurde, schalten Sie einfach den Schalter neben der Option „Drop Cap“ um, um einen großen Anfangsbuchstaben am Anfang eines Absatzes anzuzeigen.

Vergessen Sie nicht, oben auf die Schaltfläche „Entwurf speichern“ oder „Veröffentlichen“ zu klicken, um Ihre Änderungen zu speichern.

Sie haben nun erfolgreich einen Drop Cap zu Ihrem Beitrag hinzugefügt.

So sah es auf unserer Demo-Website aus.

Beachten Sie, dass die integrierte Drop-Cap-Option im Block-Editor die Stile Ihres WordPress-Themes für Farbe, Schriftart und Größe des ersten Buchstabens verwendet.

Wenn Sie den Stil Ihrer Drop Caps im WordPress Block Editor ändern möchten, müssen Sie benutzerdefinierten CSS-Code verwenden, um Ihre Drop Caps zu gestalten.

Methode 2: Initialen mit CSS-Code hinzufügen

Für diese Methode verwenden wir benutzerdefinierten CSS-Code, um automatisch initiale Großbuchstaben zum ersten Absatz jedes Beitrags hinzuzufügen. Sie können den CSS-Code entweder zu den Stylesheets Ihres Themes hinzufügen oder ein Code-Snippet-Plugin verwenden.

Wir empfehlen die Verwendung von WPCode, da es das Code-Snippet-Plugin Nr. 1 ist, das von über 2.000.000 Websites weltweit verwendet wird. Es macht es super einfach, Code ohne Aufwand zu Ihrer Website hinzuzufügen.

Installieren und aktivieren Sie zuerst das WPCode Plugin. Weitere Anweisungen finden Sie in unserem Anfängerleitfaden zum Thema Installieren eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code-Schnipsel » +Schnipsel hinzufügen in der WordPress-Admin-Seitenleiste.

Fahren Sie von hier aus mit der Maus über die Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“. Dadurch wird die Schaltfläche „Snippet verwenden“ angezeigt, auf die Sie klicken müssen.

Jetzt, da Sie sich auf der Seite „Benutzerdefinierten Snippet erstellen“ befinden, können Sie mit der Eingabe eines Titels für Ihr Code-Snippet beginnen. Es kann alles sein, was Ihnen hilft, das Snippet zu identifizieren.

Wählen Sie anschließend im Dropdown-Menü auf der rechten Seite „CSS-Snippet“ als „Code-Typ“ aus.

Kopieren Sie als Nächstes einfach den folgenden Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein:

<style type="text/css">
.entry-content p:first-child:first-of-type:first-letter {
    font-size: 85px;
    line-height: 1;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 4px;
    color: #000080;
    float: left;
    font-family: 'Tangerine', serif;
    text-shadow: 4px 4px 4px #aaa;
</style>
}

Jetzt müssen Sie nach unten zum Abschnitt „Insertion“ scrollen und die Methode „Auto Insert“ auswählen, wenn Sie den Code auf Ihrer gesamten Website ausführen möchten.

Sie können die Methode „Shortcode“ verwenden, wenn Sie Drop Caps nur zu bestimmten Beiträgen hinzufügen möchten.

Sobald Sie das Snippet gespeichert haben, erhalten Sie einen Shortcode, den Sie in den Block-Editor der Beiträge einfügen können, in denen Sie Drop Caps hinzufügen möchten.

Gehen Sie danach zurück zum Seitenanfang und schalten Sie den Schalter auf „Aktiv“.

Klicken Sie schließlich auf die Schaltfläche „Snippet speichern“.

Ihr CSS-Code-Snippet ist jetzt auf Ihrer Website live.

So sahen die Initialen auf unserer Demo-Website mit dem obigen CSS-Snippet aus.

Methode 3: Drop Caps mit einem Plugin hinzufügen

Wenn Sie zögern, benutzerdefiniertes CSS hinzuzufügen, können Sie auch Initialen mit dem Initial Letter-Plugin hinzufügen.

Dieses Plugin ermöglicht es Ihnen auch, die Größe, Farbe und Schriftart der Initialen zu ändern.

Das heißt, zuerst müssen Sie das Initial Letter Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Navigieren Sie nach der Aktivierung im Admin-Menü zu Einstellungen » Initial Letter. Hier können Sie die Einstellungen für Drop Caps konfigurieren.

Zuerst müssen Sie auswählen, ob initiale Großbuchstaben automatisch auf neue Beiträge angewendet werden sollen. Wählen Sie dazu die Option „Ja“ aus dem Dropdown-Menü neben der Option „Standard für Beiträge“.

Wählen Sie als Nächstes Ihre bevorzugte Schriftart, Farbe, Größe und den Abstand für Drop Caps aus.

Hinweis: Möglicherweise müssen Sie nach der Vorschau Ihrer Website zu den Einstellungen zurückkehren, um diese Styling-Optionen anzupassen.

Überprüfen Sie danach das Kontrollkästchen neben der Option „Für Auszüge aktivieren“, wenn Sie Drop Caps für Beitragsauszüge aktivieren möchten.

Sie können auch das Kontrollkästchen neben der Option „Nur erster Absatz“ aktivieren, wenn Sie nur für den ersten Absatz Ihres Beitrags Initialen hinzufügen möchten.

Vergessen Sie schließlich nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.

Sie können nun jeden Beitrag auf Ihrer Website besuchen und sehen die Initialen im ersten Absatz Ihres Beitrags in Aktion.

Wenn Sie Drop Caps für einen Beitrag entfernen möchten, können Sie dies auch tun, indem Sie den Beitrag im Block-Editor öffnen.

Scrollen Sie dort nach unten zum Abschnitt „Initial Letter“ und wählen Sie im Dropdown-Menü die Option „No“. Dadurch werden die Drop Caps für diesen Beitrag deaktiviert.

Bonus: Schriftarten in Ihren WordPress-Themes ändern

Abgesehen von Drop Caps können Sie auch die Schriftart auf Ihrer WordPress-Website ändern, um Ihre Inhalte lesbarer und ästhetisch ansprechender zu gestalten.

Um dies zu tun, können Sie die Seite Darstellung » Anpassen im WordPress-Dashboard aufrufen. Dies öffnet den Theme-Customizer, wo Sie den Reiter „Global“ öffnen müssen.

Sie sehen nun in der linken Spalte einige neue Optionen, darunter Typografie, Farben, Container und Schaltflächen. Hier müssen Sie den Tab „Typografie“ erweitern.

Dies öffnet eine Liste verschiedener Voreinstellungen, die vom Theme angeboten werden, und Sie können eine Schriftart Ihrer Wahl auswählen. Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Einstellungen zu speichern.

Wenn Sie ein Block-Theme verwenden, ist der Theme-Customizer nicht verfügbar und Sie müssen die Schriftart über den Full-Site-Editor ändern.

Weitere Details hierzu finden Sie in unserem Tutorial zum Thema Ändern von Schriftarten in WordPress-Themes.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie initiale Großbuchstaben in WordPress-Beiträgen hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Ändern von Schriftarten in Ihrem WordPress-Theme und unsere Liste mit Möglichkeiten zur Erstellung einer mobilfreundlichen WordPress-Website ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.