Erster Buchstabe groß (Initiale)

Den ersten Buchstaben eines Textabsatzes hervorzuheben, kann eine gute Möglichkeit sein, seiner Website eine besondere Note zu verleihen. Die sogenannte Initiale ist ein Zierelement aus dem Printbereich, die mit ein wenig CSS Code aber auch im Webbereich genutzt werden kann.

Ich zeige dir, wie du die Initiale mit ein wenig Code auch auf deiner Divi Website zum Einsatz bringst.

Schritt 1

Füge dem Textmodul, das eine Initiale haben soll, zuerst in den Einstellungen unter Erweitert > Klasse die Klasse dt-first-paragraph hinzu.

Schritt 2

Kopiere folgenden CSS Code…

.dt-first-paragraph p::first-letter {
    color: #26173A; /* Ändere hier die Farbe des Buchstabens */
    float: left;
    font-size: 2.9em; /* Ändere hier die Schriftgröße des Buchstabens */
    line-height: 0.8em; /* Ändere hier die Zeilenhöhe des Buchstabens */
    padding-top: 0px;
    padding-right: 6px; /* Ändere hier den Abstand rechts des Buchstabens */
    padding-left: 0px;
}

Schritt 3

Passe das Codeschnipsel an den Style deiner Website an.

Je nachdem welche Schriftart und Schriftgröße du eingestellt hast, kann es sein, dass du das Codeschnipsel noch etwas nachjustieren musst.

Du kannst z.B. einen anderen Farbcode für deinen Buchstaben eingeben, die Schriftgröße des Buchstabens anpassen, oder den rechten Abstand zum restlichen Text variieren.

Damit du weißt, welche Bereiche du anpassen musst, habe ich dir die entsprechenden Parameter mit Kommentaren versehen.

Am besten spielst du ein bisschen mit den Werten herum und schaust, wie sich deine Initiale verändert.

Und fertig!

Tipp: Den besten Effekt erzielst du mit der Initiale, wenn du einen Textabsatz verwendest, der über mehrere Zeilen (also 4 oder mehr Zeilen) geht!

Ich hoffe, du findest dieses Codeschnipsel hilfreich.

Wenn du Fragen hast, schreibe mir einfach unten in den Kommentaren.