Das Divi-Theme bietet neben allerhand einleuchtenden Modulen auch das Code-Modul. Still und leise fristet es sein Dasein – dabei hat es echt Power unter der Haube. Eine Würdigung des oft unterschätzten Divi-Code-Moduls.
Das Code-Modul des Divi-Themes wird nicht sehr häufig eingesetzt. Viele User fragen sich, wofür es gut ist und lassen es dann – auch mangels einer Antwort – oft weg. Dabei hat es Vorzüge:
- Scripts: JavaScripts und andere Scripts können Sie im <head>-Bereich Ihrer Website anlegen. Das ist dann eine gute Wahl, wenn die Scripts auf allen Seiten verfügbar sein sollen. Oft sind Scripts aber an bestimmte Funktionen gebunden, die nicht überall auftauchen. Zum Beispiel sollen Sie ein Formular steuern. Da hülfe das Code-Modul Ladezeit einsparen: Das Script wird damit nur genau auf jenen Seiten geladen, welche die Funktion benötigen.
- CSS-Code: Ähnlich verhält es sich mit CSS-Anweisungen. Diese lassen sich wohl global im CSS-Stylesheet der Website anlegen und häufig ist das auch sinnvoll. Ab und an landet dort aber auch CSS-Code der nur ganz selten benutzt wird. Warum solchen nicht mittels Code-Modul auf ebendiesen Seiten anlegen? Das spart ebenfalls Ladezeit.
- HTML: Letztlich können auch ganze HTML-Blöcke – zum Beispiel Formulare o.ä. – im Codemodul angelegt werden. Auch das funktioniert bestens.
Ausserdem interessant: Sie können das Code-Modul als globales Element in der Divi-Bibliothek ablegen. Änderungen und Ergänzungen am Modul werden dann umgehend überall aktiv sein, wo dasselbe Cod-Modul integriert ist.
Code-Modul einfügen
Das Code-Modul finden Sie im Divi-Builder. Sie können es mittels dieses Buttons Ihrer Seite oder Ihrem Beitrag hinzufügen:
Einmal geöffnet erscheint das Modul selber dann recht unspektakulär:
Im Textfenster können Sie nun Ihre Codes deponieren. Sie werden beim Seitenaufruf geladen und funktionieren bestens. Auch HTML ist möglich – wobei: Nur Redakteure und Administratoren dürfen ungefilterten HTML-Code einfügen, was bedeutet, dass einige Codes aus dem Modul entfernt werden können, wenn sie von einem User mit weniger Berechtigungen verwendet werden. Sie können auch Shortcodes in das Modul einfügen.
Eine Bedingung: Sie müssen dem Code-Modul recht genau sagen, welcher Art der Inhalt ist. Da kommen auch <style> und <script> zum Zug – ansonsten würden die Codes einfach als Text dargestellt. Eine Möglichkeit für Inhalt wäre etwas in dieser Art:
<!-- Hier kann CSS-Code angegeben werden. Ein Beispiel: -->
<style>
.css-beispiel-klasse {
font-weight: bold;
font-size: 15px;
line-height: 1.4;
}
</style>
<!-- Es folgt ein Script. Auch hiezu ein Beispiel: -->
<script>
(function($) {
$(document).ready(function() {
var random = Math.floor(Math.random() * jQuery('.cta_randomizer').length);
jQuery('.cta_randomizer').hide().eq(random).show();
});
})(jQuery)
</script>
<!-- Zum Schluss noch ein wenig HTML. Hier können Sie die normalen Tags verwenden. Zum Beispiel so: -->
<h3>
Lorem ipsum dolor sit amet
</h3>
<p class="css-beispiel-klasse">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>Auf der Website würden aus dem übigen Code bloss die HTML-Zeilen angezeigt. Das Script und der CSS-Code werkelt im Hintergrund und wird nicht angezeigt. Also etwa so wie nebenan:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Da sich aber Text anderswie einfacher gestalten lässt, wird HTML eine Ausnahmeanwendung sein. Dadurch dürften also die Inhalte mangels HTML gar nicht angezeigt, sondern werden einfach mit der Seite mitgeladen und werkeln da.
Probieren Sie’s aus; es lohnt sich, zumal Sie mit dem Code-Modul des Divi-Themes tatsächlich einiges an Ladezeit sparen können, für Dinge, die nicht überall verfügbar sein müssen.
Werbung
Werbung
