Customizer – Fluch oder Segen?
Titel in Divi zu stylen kann schon mal sehr zeitfressend sein. Wir alle kennen die Herangehensweise nur zu gut. Man beginnt mit der Webseite und tätigt die ersten Einstellungen im Customizer. Wir stellen Schriftgrössen ein, wählen Schriftfamilien aus, definieren Farben und Zeilenabstände. Die ersten Schritte sind somit getan – super Sache so ein Customizer.
Nun beginnt aber das Design. Die ersten Seiten entstehen, Sektionen werden einfügt, Zeilen platziert und die ersten Module einfügt. Ich bin der festen Meinung, dass viele meiner Kollegen (wie ich früher übrigens auch) die Einstellungen dann in den Modulen jeweils nachjustiert haben und die Einstellungen aus dem Customizer ohnehin wieder vergessen haben oder zumindest nicht mehr daran gedacht wurde. Das ist soweit nicht weiter tragisch, denn die Einstellungen im Customizer werden durch die Einstellungen aus den Modulen überschrieben, was ja auch völlig in Ordnung ist.
Was jetzt wenn wir Änderungen an den Schriftgrössen vornehmen möchten?
Nun ja, wie soll ich es sagen… hier fängt jetzt der kleine Ärger an. In den Customizer zu gehen und die Schriftgrössen anzupassen wird nur bedingt helfen, weil wir ja die Schriftgrössen in den einzelnen Modulen verändert haben und somit die Einstellungen überschrieben haben. In der Tat könnte man in Divi hier auf die Global Presets zurückgreifen was durchaus auch relativ gut funktioniert.
Mir stellt sich hier die Frage warum soll ich mich auf einen „Automatismus“ verlassen?
Als Webdesigner sollten wir wieder vermehrt mit CSS arbeiten statt uns blind auf Einstellungen zu verlassen.
Meine Herangehensweise ist einfach:
Die einzigen Einstellungen die ich im Customizer tätige sind die Definitionen der Schriftfamilie und ggf. noch die Farben der Schrift. Die Schriftgrössen, Zeilenabstände und Zeichenabstände kümmern mich zu diesem Zeitpunkt in keiner Weise da ich diese per CSS definieren werde. Somit habe ich per CSS die komplette Kontrolle über meine Schriftgrössen, Abstände, Farben usw. Ich habe die Freiheit diese mit einer kleinen Änderung in der CSS Datei gleich Seitenweit umzuschreiben und muss nicht jedes Modul öffnen um die Anpassungen zu tätigen oder wenn ich die Global Presets von Divi nutze nachprüfen zu müssen ob sie jetzt wirklich auch überall übernommen wurden. Wir dürfen hier die mobilen Ansichten nicht vergessen, denn diese müssen dann auch noch berücksichtigt werden.
Die wichtigsten Klassen für die Titel, Texte und Listenelemente sind folgende:
/* Titel h1-h6
========================================================================== */
.et_pb_module.et_pb_text h1
.et_pb_module.et_pb_text h2
.et_pb_module.et_pb_text h3
.et_pb_module.et_pb_text h4
.et_pb_module.et_pb_text h5
.et_pb_module.et_pb_text h6
/* Text
========================================================================== */
.et_pb_module.et_pb_text p
/* Listenelemente
========================================================================== */
.et_pb_module.et_pb_text ol li
.et_pb_module.et_pb_text ul li
/* Blurb-Modul
========================================================================== */
.et_pb_module.et_pb_blurb h3 /* oder den Titel den ihr verwendet */
.et_pb_module.et_pb_blurb p
Beispiel CSS:
Hier siehst Du ein Beispiel aus einer Kundenseite mit eingebetteter Hausschrift. Im ersten Moment sieht es nach unglaublich viel Code aus, aber das ist es nicht. Glaube mir, dieser minimale Aufwand lohnt sich!
/* ==========================================================================
Font CSS
========================================================================== */
/* Font bold
========================================================================== */
@font-face {
font-family: ‚Suisse Intl Bold‘;
src: url(‚fonts/SuisseIntl-Bold-WebM.eot‘);
src: url(‚fonts/SuisseIntl-Bold-WebM.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚fonts/SuisseIntl-Bold-WebM.woff‘) format(‚woff‘),
url(‚fonts/SuisseIntl-Bold-WebM.ttf‘) format(‚truetype‘),
url(‚fonts/SuisseIntl-Bold-WebM.svg#svgwebfont‘) format(’svg‘);
font-weight: bold;
font-style: normal;
}
/* Font medium
========================================================================== */
@font-face {
font-family: ‚Suisse Intl Medium‘;
src: url(‚fonts/SuisseIntl-Medium-WebM.eot‘);
src: url(‚fonts/SuisseIntl-Medium-WebM.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚fonts/SuisseIntl-Medium-WebM.woff‘) format(‚woff‘),
url(‚fonts/SuisseIntl-Medium-WebM.ttf‘) format(‚truetype‘),
url(‚fonts/SuisseIntl-Medium-WebM.svg#svgwebfont‘) format(’svg‘);
font-weight: medium;
font-style: normal;
}
/* Font light
========================================================================== */
@font-face {
font-family: ‚Suisse Intl Light‘;
src: url(‚fonts/SuisseIntl-Light-WebM.eot‘);
src: url(‚fonts/SuisseIntl-Light-WebM.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚fonts/SuisseIntl-Light-WebM.woff‘) format(‚woff‘),
url(‚fonts/SuisseIntl-Light-WebM.ttf‘) format(‚truetype‘),
url(‚fonts/SuisseIntl-Light-WebM.svg#svgwebfont‘) format(’svg‘);
font-weight: light;
font-style: normal;
}
/* Font regular
========================================================================== */
@font-face {
font-family: ‚Suisse Intl Regular‘;
src: url(‚fonts/SuisseIntl-Regular-WebM.eot‘);
src: url(‚fonts/SuisseIntl-Regular-WebM.eot?#iefix‘) format(‚embedded-opentype‘),
url(‚fonts/SuisseIntl-Regular-WebM.woff‘) format(‚woff‘),
url(‚fonts/SuisseIntl-Regular-WebM.ttf‘) format(‚truetype‘),
url(‚fonts/SuisseIntl-Regular-WebM.svg#svgwebfont‘) format(’svg‘);
font-weight: normal;
font-style: normal;
}
.et_pb_module.et_pb_text h1 {
font-family: „Suisse Intl Bold“;
font-size: clamp(2.5rem, 5vw, 5rem);
line-height: clamp(3rem, 5vw, 6rem);
hypens:auto;
}
.et_pb_module.et_pb_text h2 {
font-family: „Suisse Intl Light“;
font-size: clamp(1.9rem, 5vw, 2.6rem);
line-height: clamp(2.3rem, 5vw, 3rem);
}
.et_pb_module.et_pb_text h3 {
font-family: „Suisse Intl Medium“;
font-size: clamp(2rem, 5vw, 2.4rem);
line-height: clamp(2.4rem, 5vw, 2.7rem);
}
.et_pb_module.et_pb_text h4 {
font-family: „Suisse Intl Medium“;
font-size:2rem!important;
line-height:2.3rem
}
.et_pb_module.et_pb_text h5,
.et_pb_module.et_pb_blurb h5 {
font-family: „Suisse Intl Bold“;
font-size:1.7rem;
}
.et_pb_module.et_pb_text p,
.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li,
.et_pb_module.et_pb_blurb p {
font-family: „Suisse Intl Light“;
font-size:1.7rem;
}
.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
padding:.7rem;
line-height: 2.4rem!important
}
.bh_footer-titel h5 {
font-family: „Suisse Intl Bold“!important;
}FAZIT:
Solltest Du dich für den Weg über CSS entscheiden, musst Dir bewusst sein, dass der Kunde in den Modulen zwar die Schriftgrössen usw. ändern kann, aber diese werden vom definierten CSS überschrieben. Du siehst, es hat also Vor- und Nachteile. Daher kommt es immer auf den einzelnen Anwendungsbereich an und wo Du einen Kunden einschränken willst.
Ich für meinen Teil schränke den Kunden in dieser Hinsicht gerne ein, da ich nicht möchte das mein Layout, welches optimiert ist für alle Geräte beeinflusst und so ggf. auch „zerschossen“ wird. Ausserdem garantiere ich mit der Anweisung «clamp», dass die Schriftgrössen perfekt auf Mobile Geräte dargestellt werden ohne extra @media Queries schreiben zu müssen.
Ja ich finde es auch toll
Hi, ich bin ein Testkommentar und finde den Beitrag sehr gut. Spart Zeit und ist perfekt mit dem clamp()
clamp() ist echt genial, man muss nur die richtigen Werte setzen