h1-h6 Titel in Divi mit CSS stylen leicht gemacht

von | 26. April 2019 | Tutorials

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_column .et_pb_module h1 {
  font-size: 50px;
  font-weight:900;
}

.et_pb_column .et_pb_module h2 {
  font-size: 42px;
  font-weight:300;
}

.et_pb_column .et_pb_module h3 {
  font-size: 36px;
}

.et_pb_column .et_pb_module h4 {
  font-size: 28px;
}

.et_pb_column .et_pb_module h5 {
  font-size: 22px;
  font-weight:900;
}

.et_pb_column .et_pb_module 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

©2019 - Ein Design mit von Divi Mastermind - Benny
Impressum | Datenschutz

Divi ist ein eingetragenes Warenzeichen von Elegant Themes. Diese Website ist weder mit Elegant Themes verbunden noch wird sie von Elegant Themes unterstützt.