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.

Divi Textmodul Einstellungen

Schritt 2

Kopiere folgenden CSS Code…

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.

Endecke weitere Divi Codeschnipsel

Logo beim Scrollen ändern

Logo beim Scrollen ändern

Mit diesem Codeschnipsel kannst du dein Logo beim Scrollen ändern. /* Ändert das Logo beim Scrollen */ .et-fixed-header #logo { content: url(hier neue Bild-URL eintragen); } Das kann z.B. sinnvoll sein, wenn dein Hauptmenü transparent und dein Logo weiß ist und sich...

Dem Informationstext Titel einen Unterstrich hinzufügen

Dem Informationstext Titel einen Unterstrich hinzufügen

Füge deinen Titeln einen stylischen Unterstrich hinzu. Kopiere dazu folgenden Code in den Einstellungen deines Informationstexts unter Erweitert > Benutzerdefinierte CSS > Vorher. content:""; background:#000; /* Hier Farbwert ändern */ height:3px; width:50px;...

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du nutzt noch kein Divi Child-Theme?

Dann hol dir mein fertiges Divi Basis-Child Theme als perfekte Basis für deine Divi Website!

Hey, ich bin Tobias!

Portraitfoto von Tobias Both

Ich bin selbstständiger Webdesigner und der Gründer von Divitorials.

Seit rund einem Jahr veröffentliche ich auf diesem Blog Tutorials, Tipps und Tricks rund um das beliebte Divi Theme von Elegant Themes und teile meine Erfahrungen, die ich während meiner Arbeit als selbstständiger Webdesigner mit Divi sammeln konnte.

Mehr über mich erfahren