Divi Child Theme css Datei auslagern font, h1, p etc.definieren

    Hallo,

    ich arbeite mit Divi und habe ein Child theme mit den Ordnern style.css und functions.php in filezilla angelegt. Das funktioniert auch soweit.

    Beim Aufbau der Seiten mit Divi, habe ich in den Text-Modulen p, h1, h2, etc. verwendet. Die Grundeinstellungen waren "default" und es gab beispielsweise Vorgaben für h1 mit 30px. Da ich grundsätzlich gerne die Schrift Lato verwenden möchte, einen Zeilenabstand von 1.5em und beispielsweise für h1 18px statt 30px, habe ich für jedes Text-Modul unter dem Reiter Design oben (neben Inhalt und Erweitert), h1 neu definiert.

    Anscheinend führt dieses aufwändige Eingreifen in jedem Text-Modul auf jeder Seite meiner Website zu erhöhten Ladezeiten. :sad: Kann mir jemand helfen, wie ich diese Einstellungen einmalig ändern kann?

    Folgende Meldungen habe ich nämlich beim site-check bekommen:

    - Es wurden 57 Style Attribute im <body> Tag gefunden.
    Man sollte diese in eine externe CSS Datei auslagern.

    - Es wurden Inline CSS Style Tags gefunden.
    Man sollte diese in eine externe CSS Datei auslagern.

    - Es werden 7 externe CSS Dateien geladen.
    Man sollte die eingebundenen CSS Dateien auf 3-4 reduzieren.

    - Es wurden 13 Inline JavaScript Bereiche im HTML Dokument gefunden.
    Man sollte diese in eine externe JavaScript Datei auslagern.

    - Es werden 13 externe JavaScript Dateien geladen.
    Man sollte die eingebundenen JavaScript Dateien auf 3-4 reduzieren.

    Ausserdem:

    - Die Dateigröße beträgt 87.66 Kilobyte.
    Der Quelltext ist zu umfangreich.

    Leider bin ich kein Profi, obwohl ich mich zwangsläufig ein wenig in html und css eingelesen habe. Ich habe gelesen, dass man einiges in der functions.php im Child-theme eintippen kann, aber bin mit der Komplexität und Aufforderung, die Dateien "auszulagern" doch etwas überfordert. Ich würde mich sehr freuen, wenn mir jemand weiterhelfen kann.

    Danke! Lg Opsinis


    [size=10][FONT=arial][/FONT][/SIZE][COLOR=#5A6573]
    [/COLOR]

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo Opsinis

    Zitat

    [COLOR=#333333]ich arbeite mit Divi und habe ein Child theme mit den Ordnern style.css und functions.php in filezilla angelegt. Das funktioniert auch soweit.[/COLOR]


    Du musst im Ordner deines Child themes keine Unterordner mit den erwähnten Bezeichnungen anlegen. Sondern Du musst im Ordner deines Child themes Dateien mit diesen Bezeichnungen anlegen. In der functions.php musst Du dann mit der enqueue Funktion den Pfad zur Divi Eltern Datei einfügen. In der style.css Datei kannst Du dann Deine eigenen CSS Anweisungen einfügen.

    Ich arbeite auch mit Divi, benutze den Divi Frontend Builder jedoch nur für den Entwurf. Die Seiten-Entwürfe erstelle ich sowieso immer auf einem "staging"-System (entweder auf meinem Rechner oder auf dem neuen Server unter staging.neue-domain.tld). Die Seite erstelle ich dann mit dem Builder im Backend ohne die vielen Inline-CSS-Einstellungen, die ich dann mit Firebug in die style.css Datei des Child theme einfüge. Weiter füge ich HTML-Code, Texte und Shortcodes nicht mit dem Text-Modul sondern mit dem Code-Modul ein und füge deren CSS-Anweisungen ebenfalls über die style.css Datei im Child Theme ein. Ist mit Mehrarbeit verbunden, dafür kriege ich Seiten mit weniger Code und dafür mit kürzeren Ladezeiten. Weiter kann ich die CSS-Anweisungen von einem Ort aus anpassen bzw. ändern. Dies hat vor allem bei der Arbeit mit den media queries für die mobilen Geräte einen besseren Einfluss.

    Zitat

    [COLOR=#333333]Beim Aufbau der Seiten mit Divi, habe ich in den Text-Modulen p, h1, h2, etc. verwendet. Die Grundeinstellungen waren "default" und es gab beispielsweise Vorgaben für h1 mit 30px. Da ich grundsätzlich gerne die Schrift [/COLOR]Lato verwenden möchte, einen Zeilenabstand von 1.5em und beispielsweise für h1 18px statt 30px, habe ich für jedes Text-Modul unter dem Reiter Design oben (neben Inhalt und Erweitert), h1 neu definiert.


    Das ist genau das Problem bei Divi. Also jetzt den Visual Builder nicht benutzen. Im Backend Builder das Text-Modul mit H1 durch Code Modul ersetzen und den Text im Content zb.: <h1>Mein Text</h1> einfügen. Anschliessend unter dem Tab Advanced in CSS Class zB.: mein-titel eintragen.

    In die style.css Deines Child Themes die folgende CSS Anweisung eintragen:

    .mein-titel .et_pb_code_inner h1 {
    font-family: lato;
    font-size: 18px;
    }

    Dann Datei speichern, Browser Cache leeren, Seite neu laden. Wenn Du im Browser die Firebug Erweiterung nicht hast unbedingt installieren.

    Mit Mauszeiger in den Browser bewegen und mit Klick auf rechte Taste im Menu "Untersuchen" auswählen oder mit Taste F12 den Firebug öffnen. Im Tab "Elemente" wird der Quellcode angezeigt. Das äusserste Icon auf der linken Seite auswählen und mit dem Cursor den Text auswählen. Auf der rechten Seite des Firebug Tools unter dem Tab "Styles" werden Dir die CSS Anweisungen für das ausgewählte Element Deiner Seite angezeigt. Bei meinem Test also:

    .mein-titel .et_pb_code_inner h1 {
    font-family: lato;
    font-size: 18px;
    }

    Und hier kannst Du das h1 Element nach Deinen Wünschen anpassen und dann die definitiven Anweisungen in Deine style.css Datei schreiben.

    Hi bluerate,

    lieben Dank für Deine Hilfe bluerate

    Dass ich mit der der Komplexität überfordert bin, meinte ich ernst ;)

    Ich habe firebug installiert. Da werde ich mir wohl ein paar Tutorials anschauen müssen.
    Weiter habe ich eine subdomain mit staging.meinedomain.de erstellt. Ein staging System ist anscheinend eine sehr sinnvolle Sache! Mein Host ist strato. Und da fangen die Sorgen schon wieder an: Im Internet gibt es verschiedene Anleitungen so ein staging System anzulegen. Ich arbeite mit filezilla und greife da auf meine Datenbank zu. Müsste ich einen weiteren ftp-Zugang bestellen? Und dort dann die Ordner aus meinem anderen ftp-Zugang kopieren und in dem neuen einfügen?

    Du bastelst dann mit Divi in der staging Umgebung mit "Firebug-Kontrolle" und wenn Du die gewünschten Einstellungen getätigt hast, kopierst Du die Codes und fügst sie in die originale css-Datei ein? Stimmt das so?

    Ich habe von elegantthemes die Info bekommen, dass ich z.B. h1 unter Divi->Theme-option->custom css definieren kann. Das habe ich getan und einen kleinen Teil meiner Startseite entsprechend angepasst. Laut site-check konnte ich damit die style-attribute im body schon etwas reduzieren und hab bessere Ladezeiten - von optimal weit entfernt :( Zudem habe ich das Plugin Autoptimize aktiviert. Ein paar Probleme weniger, aber mir scheint diese Variante sehr unschön und Deine Variante behebt alles nachhaltig, aber ist für mich als Anfänger totales Neuland.

    Vielen Dank noch einmal für Deine Hilfe! Lg Opsinis

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden