Einen initialen Buchstaben (drop cap) am Anfang eines Textes einzufügen geht in Divi mit nur wenigen Schritten. Hier zeige ich dir wie es funktioniert. Alles was du dazu brauchst ist ein Modul in dem du Text einfügen kannst. Du kannst den Großbuchstaben am Anfang also im Prinzip überall einsetzen auch wenn es in einem reinen Textmodul sicherlich am meisten Sinn ergibt.
Ohne Initial
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Mit Initial (drop cap)
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Statt eines einzelnen Buchstabens kannst du natürlich genauso gut auch ein ganzes Wort verwenden. Wirklich Sinn macht das zwar nur in Ausnahmefällen, aber möglich ist es immerhin.
Um das zu realisieren musst du lediglich den Buchstaben oder das Wort, das du als Initial haben möchtest ohne Leerzeichen dabei einzufügen zwischen diese beiden Blöcke zu setzen:
[dropcap] [dropcap]Das sieht dann also so aus:
[dropcap]Statt[dropcap]Das Ganze kannst du im visuellen Textbereich machen. Die beiden Blöcke sind für dich während des Schreibens zwar sichtbar, auf deiner fertigen Seite bzw. deinem Beitrag dann aber nicht mehr.
Wenn du das Initial dazu noch stylen willst kannst du im HTML-Modus dann noch zusätliche Angaben machen. Also etwa so:
[dropcap] <span style="font-family: Courgette;">Statt</span>[/dropcap] In diesem Fall ändert sich die Schriftart nur für das Initial von deiner eingestellten Schrift auf die Schriftart Courgette. Der Rest deines Textes bleibt davon unberührt.
Falls du gleich mehrere Textattribute auf einmal verändern möchtest, hast du auch die Wahl dir folgenden Codeblock zu kopieren und in deinem Child Theme in die style.css einzufügen:
.et-dropcap {
font-size: 80px;
font-family: Rochester;
line-height: 0.8;
color: yellow;
padding-top: 15px;
}Den Code kannst du natürlich gerne auf deine eigenen Bedürfnisse anpassen. Damit kannst du dann die Schriftart, Farbe und anderes so verändern wie du es möchtest und zu deinem Text passt.
Wie du siehst ist es ganz einfach damit deinem Text einen ganz eigenen Stil zu verleihen und dich aus der Masse der Texte hervorzuheben.
0 Kommentare