h1-h6 Titel in Divi mit CSS stylen leicht gemacht
Ihr stellt Euch jetzt bestimmt die Frage wieso ich das mit CSS mache statt den Weg über den Theme Customizer zu gehen. Nun kann man machen und das funktioniert auch sehr gut. ABER eben oft nicht so wie ich es gerne hätte. Da ziehe ich dann den Weg über CSS vor. Es ist schnell geschrieben und lässt mir die meisten Freiheiten in der Gestaltung.
Im Video erkläre ich einige Schwachstellen des Customizers und zeige auch wieso ich den Weg über CSS bevorzuge.
Hier findest du den von mir verwendeten CSS Code. Diesen kannst Du an deine Bedürfnisse anpassen und stylen. Ich habe mich lediglich um das Video kurz zu halten auf eine einfache Basis beschränkt. Der Kreativität sind keine Grenzen gesetzt, also kannst Du Farben, Zeilenhöhe, unterschiedliche Schriftschnitte usw. vergeben. Kopiere den Code in dein style.css des Child-Themes oder im Customizer unter Custom CSS einfügen.
.et_pb_module.et_pb_text h1 {
font-size: 50px;
font-weight:900;
}
.et_pb_module.et_pb_text h2 {
font-size: 42px;
font-weight:300;
}
.et_pb_module.et_pb_text h3 {
font-size: 36px;
}
.et_pb_module.et_pb_text h4 {
font-size: 28px;
}
.et_pb_module.et_pb_text h5 {
font-size: 22px;
font-weight:900;
}
.et_pb_module.et_pb_text h6 {
font-size: 18px;
}
Als kleiner Bonus zum kopieren: Media-Queries, welche ich oft nutze
/* Grosse Bildschirme über (1405px) */
@media only screen and ( min-width: 1405px ) {
/* hier dein css einfügen */
}
/* Laptops & Desktops zwischen (1100-1405px) */
@media only screen and ( min-width: 1100px ) and ( max-width: 1405px) {
/* hier dein css einfügen */
}
/* Tablets in Landscape-Modus zwischen (981-1100px) */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
/* hier dein css einfügen */
}
/* Tablets in Portrait-Modus zwischen (768-980px) */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
/* hier dein css einfügen */
}
/* Smartphones in Landscape-Modus zwischen (480-768px) */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
/* hier dein css einfügen */
}
/* Smartphones im Portrait-Modus zwischen (0-479px) */
@media only screen and ( max-width: 479px ) {
/* hier dein css einfügen */
}
In diesem Sinne hoffe ich, dass Du etwas aus diesem Tutorial mitnehmen konntest. Um keine Videos mehr zu verpassen, abonniere doch unseren Kanal oder unseren Blog 🙂
Bis Bald, Benny
