Codes für Jimdo-Websites


Mit dem Baukastensystem Jimdo können Sie verhältnismäßig leicht eine eigene Website erstellen. Jimdo funktioniert wie ein Fertigteilhaus: Alles Wesentliche ist vorhanden. Als Jimdo-Expertin mache ich allerdings die Erfahrung, dass Nutzerinnen und Nutzer sehr rasch spezielle Wünsche haben. Die Website soll breiter, Abstände sollen kleiner, Bereiche höher oder niedriger werden. Häufig wünschen sich Jimdo-Nutzerinnen und -Nutzer auch animierte Überschriften, Hyperlinks, die nicht unterstrichen sind, oder einzelne mit Farben oder Fotos hinterlegte Bereiche – und damit wird es spannend!

Arten von Codes für Jimdo-Websites

Mit Code-Schnipsel, die man in das HTML oder in den Head einbaut, sind verschiedene Änderungen an einer Jimdo-Website möglich. Code-Schnipsel finden Sie immer wieder mal im Web, und zwar in Foren, auf speziellen Code-Websites oder auch auf Websites bzw. Blogs von Webdesignerinnen und Webdesignern. Mal sind die Codes für Laien gedacht, mal für Profis. Mal sind sie gratis, mal kosten sie etwas. Mal gibt es eine Anleitung, wie man das Schnipsel einbaut, mal ist die Interessentin bzw. der Interessent völlig auf sich gestellt.

Die meisten Code-Schnipsel sind in CSS oder JavaScript geschrieben, manchmal gibt es auch eine oder mehrere CSS- oder JavaScript-Dateien. Meist sind diese Dateien für den Head bestimmt, also für jenen Bereich, den man über die „Einstellungen“ einer Jimdo-Website erreicht, manchmal handelt es sich aber auch um Codes für Widgets.

Codes können auch Schaden an Ihrer Website anrichten

Die Bandbreite der Codes ist groß und groß sind auch die Fallen, in die Sie tappen können, wenn Sie einen Code in Ihre Jimdo-Website einbauen, ohne dass Sie genau verstehen, was der Code alles beinhaltet.

Viele Codes, die Sie im Web finden, sind nämlich fehlerhaft und führen zu Schäden an der Website. Ich stehe immer wieder einmal vor der Aufgabe, Websites zu retten, in die meine Kundinnen und Kunden (das sind Laien ebenso wie Webdesignerinnen und Webdesigner) ahnungslos und gutgläubig schlechte Codes eingebaut haben.

In diesem Beitrag, mit dem ich meinen Blog zu Fragen rund Jimdo starte, möchte ich Ihnen zeigen, worauf Sie achten sollten, wenn Sie Codes in Ihre Website einbauen. Ich möchte Sie ermuntern, kritisch zu sein und nicht alles, was Sie so im Web an Codes finden, zu verwenden. Sie sollten genau wissen, was Sie einbauen und welche Folgen das hat. Wenn Sie sich mit JavaScript, HTML & Co. nicht auskennen, überlegen Sie sich bitte lieber zweimal, ob Sie Codes einfach so in Ihre Website einbauen.

Codes für Jimdo-Websites

Im Folgenden möchte ich Ihnen einen Überblick über die verschiedenen Codes geben, und zwar JavaScript-Dateien und CSS-Anweisungen bzw. CSS-Dateien.

JavaScript-Dateien

Auf JavaScript-Dateien stoßen Sie im Web, wenn Sie zum Beispiel nach „Schneeflocken auf der Homepage“ googeln. Genau gesagt stoßen Sie auf Websites, deren Betreiber Ihnen die Datei gratis, gegen Bezahlung oder im Tausch gegen Ihre Daten (Eintragung im Newsletter) anbieten.


Die Zeile, die verspricht, Schneeflocken auf Ihre Website zu zaubern, sieht dann meist so aus:

<script src="https://eineDomain/bezeichnung.js" type="text/javascript"> </ script>

 
Dies ist ein Verweis auf eine JavaScript-Datei, die von einem externen Server bei Ihnen in der Website geladen und ausgeführt wird. JavaScripte beinhalten Anweisungen, damit etwas ausgeführt wird. Oder anders gesagt: Eine JavaScript-Datei ist eine Art kleines Programm, das, fügt man die Datei ein, etwas auf Ihrer Website in Gang bringt. In unserem Beispiel rieselt dann eben der Schnee.

Wo Gefahren lauern

1 Die Datei liegt nicht auf dem Server, auf dem Ihre Jimdo-Website liegt, sondern auf einem fremden Server. Wenn es mit dem Server Probleme gibt, hat das Folgen für die Datei: Der Schnee rieselt dann beispielsweise nicht mehr oder es gibt Probleme in der Darstellung des Schnees.

2 Die Datei wird von dem fremden Server entweder geladen und/oder ausgeführt, was zu einer längeren Ladezeit Ihrer Website führt. Auch das hat Folgen: Je größer die Ladezeit Ihrer Website ist, desto eher springen Nutzerinnen und Nutzer frühzeitig wieder ab. Außerdem kann eine lange Ladezeit das Ranking Ihrer Website auf Google verschlechtern. Wird die Datei „ausgeführt“, wird der Inhalt Ihrer Website erweitert oder geändert.

Fazit

Immer, wenn eine fremde Domain im Code-Schnipsel oder Code-Eintrag steht, sollten Sie vorsichtig sein. Wenn Sie dem Anbieter oder dem Inhaber der Domain nicht vertrauen, dann sollten Sie den Code lieber nicht verwenden. Sollte Ihre Webdesignerin bzw. Ihr Webdesigner einen Eintrag mit externer Domain im Head Ihrer Jimdo-Website einfügen, fragen Sie ruhig nach, warum sie bzw. er das gemacht hat.

CSS-Anweisungen bzw. CSS-Dateien

Auf CSS-Anweisungen bzw. CSS-Dateien stoßen Sie im Web, wenn Sie zum Beispiel nach „Content verbreitern“ oder „Mouseover Bild“ googeln. CSS, also Cascading Style Sheets, legen fest, wie eine Website aussieht. Sie definieren die Breite einer Website, die Farbe der Schrift, die Schriftart, die Abstände, die Hintergrundfarbe etc.


Möglichkeiten, um CSS-Anweisungen und CSS-Dateien einzubauen

Es gibt verschiedene Möglichkeiten, um CSS-Codes in eine Jimdo-Website einzufügen. Hier die beiden gängigsten Wege:

1 Externe Datei mit einer Zeile im Head

<link type="text/css" media="all" href=" https://eineDomain.de/bezeichnung.css " rel="stylesheet"/ Hier handelt es sich um eine Zeile, die auf eine Datei mit CSS-Anweisungen verweist. Wenn in der Zeile Ihre Domain angeführt ist, ist alles in Ordnung. Ist in der Zeile eine fremde Domain angeführt, dann sollten Sie vorsichtig sein. Der Inhalt der Datei kann nämlich von fremder Seite nachträglich geändert werden, und zwar ohne direkten Zugriff auf Ihre Website. Wenn Sie der Quelle vertrauen, kann die Datei auf Ihren Wunsch geändert werden, ohne dass Zugriff auf Ihre Website notwendig ist, was für die Dienstleisterin bzw. den Dienstleister Ihres Vertrauens gut ist.

Achten Sie darauf, dass sie bzw. er nicht mehrere dieser Dateien im Head einträgt. Eine Datei ist mehr als ausreichend. Denn jeder Eintrag fordert einen weiteren Zugriff des Browsers auf den Webserver.

2 CSS-Anweisungen direkt im Head

Jimdo erlaubt es, CSS-Anweisungen direkt im Head einzutragen. Dies ist eine schnelle Art der Eingabe von CSS-Anweisungen bzw. von „Code-Schnipseln“.

Fehlerquellen

Sie haben den Code erfolgreich eingegeben und Ihre Jimdo-Website sieht (sei es nun am Desktop und/oder mobil) nicht so aus, wie Sie sich das vorgestellt haben? Dann müssen Sie sich auf Fehlersuche begeben. Die häufigsten Probleme resultieren meiner Erfahrung nach aus Fehlern in der Schreibweise oder aus Fehlern in der Wertigkeit der CSS-Anweisungen.

 

1 CSS-Anweisungen und Fehler in der Schreibweise

Bei CSS-Anweisungen kommt es auf jedes Zeichen an. Wenn ein Zeichen fehlt oder wenn Sie ein falsches Zeichen verwenden, funktionieren der Code oder Teile davon nicht. 

Folgende Fehler begegnen mir besonders häufig:

  • fehlende oder doppelte geschweifte Klammern, die die Anweisung für ein HTML-Element umrahmen
  • fehlendes oder doppeltes Semikolon
  • fehlende Anführungszeichen
  • falscher Wert einer Anweisung (zum Beispiel none statt normal)
  • falsche Schreibweisen: Komma statt Punkt, geschweifte Klammer statt runder Klammer etc.
  • falsche Schreibweise des HTML

2 CSS-Anweisungen und Fehler in der Wertigkeit

CSS-Eigenschaften unterliegen Wertigkeiten, deren Bestimmung komplex ist. Die Wertigkeit wird u. a. durch den Ort festgelegt, an dem sich die CSS-Angaben befinden, also ob sie sich in einer CSS-Datei, in einer CSS-Anweisung im Head oder sonst wo in der Website befinden.

Hier ein Beispiel:

Nehmen wir an, Sie möchten in Jimdo einen Text schreiben. Dazu fügen Sie ein Text-Element ein und schreiben los. Was aber passiert im Hintergrund (also für Sie in der normalen Benutzeransicht nicht sichtbar)?

Im Hintergrund wird der Text in HTML gesetzt. Ihr Text bekommt dabei auch ein p-Element, damit klar ist, dass das ein Absatz ist und als solcher angezeigt werden soll.

Dies sieht dann so aus:


 <p> ich bin ein Absatz.</p>
 <p>nach betätigen der Enter-Taste, entsteht automatisch ein neuer Absatz</p>

Das ist aber noch nicht alles. Der Jimdo-Baukasten fügt rund um Ihren Text noch weiteres HTML ein. Genau gesagt bekommt Ihr Text-Element einen sog. DIV-Container. Die Abkürzung „DIV“ steht für division. Ein DIV-Container ist eine Art Raum bzw. Bereich, der das p umschließt.

Der DIV-Container bekommt vom System zusätzlich Klassen zugewiesen. Und so sieht Ihr Text im HTML dann letztendlich aus:

  <div class=“j-text“>
     <p> ich bin ein Absatz.</p>
     <p>nach betätigen der Enter-Taste, entsteht automatisch ein neuer Absatz</p>
  </div>

Wenn Ihr Text im Inhaltsbereich (Content) steht, dann liegt ihr Absatz mit dem DIV-Text in einem weiteren DIV-Container, der den Inhaltsbereich kennzeichnet. Gern wird dem DIV die Klasse „content“ zugewiesen.

 

Ihr HTML wird dann so abgebildet.

<div class=“content“>
  <div class=“j-text“>
     <p> ich bin ein Absatz.</p>
     <p>nach betätigen der Enter-Taste, entsteht automatisch ein neuer Absatz</p>
  </div>
</div>

Sie sehen also: Es wird viel HTML vom System generiert, obwohl Sie ja nur einen Text schreiben!

Warum jetzt diese DIV und die Klassen? 

Die DIV-Container sind in der Programmierung hilfreich, um Bereiche abzugrenzen. Auch für die Zuweisung von CSS-Anweisungen sind DIV-Container hilfreich. Die Klassen an den DIV geben in der Programmierung mehr Übersicht und in der Gestaltung mit CSS mehr Ansatzpunkte für CSS-Anweisungen. Auf diese Weise definiertes HTML kann man dann mit CSS-Anweisungen das gewünschte Aussehen geben.


 

Auch wenn wir in diesem Fall nur das p gestalten möchten, haben wir hier doch mindestens vier Möglichkeiten. Man kann

  • die Anweisungen nur dem p-Element geben.
  • die Anweisungen dem p-Element und der div mit der Klasse j-text geben.
  • die Anweisungen nur dem p-Element und dem div mit der Klasse content geben.
  • die Anweisungen dem p-Element, dem div mit der Klasse j-text und dem div mit der Klasse content geben.

Abhängig davon, welche Lösung man nun wählt, entstehen verschiedene Wertigkeiten für die Anweisung.

Und nun wollen wir dem p-Element noch eine bestimmte Schriftfarbe geben. Im Head der Jimdo-Website tragen wir ein:

p{color: blue}
.j-text p{color:yellow}
.content p{color:green}
.content .j-text p{color:red}

 

So wird nun unser Absatz (p) in der Farbe rot (red) dargestellt. Da Sie sich jetzt schon ein wenig auskennen, werden Sie sehen, dass vor der Anweisung noch mehr steht. Durch dieses Mehr wird die Wertigkeit der Anweisung erhöht.

Falls Sie denken, dass die Reihenfolge der Anweisungen in unserem eine Rolle spielt, muss ich Sie allerdings enttäuschen.
 

Was würde nun passieren, wenn wir die folgende Anweisung so in den Head eintragen?

.content .j-text p{color:red}
.content p{color:green}
.j-text p{color:yellow}
p{color: blue}

Ganz einfach: Unser Absatz würde immer noch die Farbe Rot bekommen. Denn nicht die Reihenfolge der Anweisungen ist entscheidend, sondern die Wertigkeit.

Die Anweisung mit der höchsten Wertigkeit wird vom Browser umgesetzt. Alle anderen Anweisungen werden verworfen bzw. ignoriert.

Das Schlüsselwort !important

Eine andere sehr oft eingesetzte Möglichkeit, um die Wertigkeit zu verändern, ist die Verwendung des Schlüsselwortes !important. Es hebt die Wertigkeit einer CSS-Anweisung ganz nach oben.

Für unser Beispiel könnte dies dann so aussehen:

.content .j-text p {color:red }
.content p {color:green}
.j-text p {color:yellow}
p {color: blue!important}

Nun würde unser Absatz die Farbe Blau bekommen, durch das Schlüsselwort !important ist die Wertigkeit nach oben gehoben worden.

 

Das kann unproblematisch sein, es kann aber auch zu ungewünschten Ergebnissen führen. Oft ist die Verwendung von !important sogar überflüssig, da es die vergebene Eigenschaft für dieses HTML-Element gar nicht gibt. Somit muss auch die Wertigkeit nicht angehoben oder ein bestehende Anweisung überschrieben werden. Und vergessen Sie nicht: Jedes Zeichen im Code, also auch ein Leerzeichen, erhöht die Ladezeit, wenn auch nur minimal. Aber wenn die Ladezeit tausende Male minimal erhöht wird, summiert sich das.

Hier wird das Schlüsselwort !important zu oft verwendet.
Hier wird das Schlüsselwort !important zu oft verwendet.

Es gibt viele Wege, um !important zu vermeiden. Die Wertigkeit von Eigenschaften kann nämlich durch andere Schreibweisen der CSS-Anweisung angehoben werden – und das ist der beste Weg.

Ein paar Tipps zum Schluss

Wenn Sie einen Code verwenden möchten, dann testen sie diesen zuerst. Erstellen Sie eine Free-Website mit Jimdo, bauen Sie den Code dort ein und schauen Sie, ob er funktioniert. Testen Sie die Free-Website bitte auch auf mobilen Geräten und prüfen Sie die Ladezeit. Wenn eine Website zu langsam lädt, springen die Besucherinnen und Besucher Ihrer Jimdo-Website rasch wieder ab. Der beste Code bringt nichts, wenn er die Ladezeit zu stark erhöht.

Überlegen Sie sich, ob Sie bei extern geladenen Dateien der Anbieterin bzw. dem Anbieter vertrauen. Wie schon erwähnt: Bei extern geladenen Dateien hat jemand Zugriff auf Ihre Website, ohne dass er sich einloggen muss. Manchmal kommt es übrigens vor, dass der neu eingebaute Code plötzlich das Login nicht mehr ermöglicht und Sie den Jimdo-Support brauchen. In so einem Fall ist es natürlich besonders gut, wenn Sie den Fehler an Ihrer Testseite und nicht an Ihrer Hauptwebsite bemerken.

 

Kurzum: Informieren Sie sich, vertrauen Sie Anbieterinnen und Anbietern von Codes nicht blind und testen Sie!

Kerstin Fiedler
Kerstin Fiedler

Ich bin Webmasterin und arbeite seit 2011 mit Jimdo. Für Laien ist CSS oft ein kompliziertes Thema, für mich ist CSS ein Instrument, mit dem ich täglich arbeite. CSS gibt mir die Möglichkeit, Inhalte von Websites auf verschiedene Arten darzustellen. Mit CSS und HTML kann ich auch das Aussehen von Jimdo-Websites individuell gestalten, und zwar so, wie es sich meine Kundinnen und Kunden wünschen. Ich bin Webmasterin mit Leidenschaft! Gerne unterstütze ich auch Sie, wenn Sie Ihre Jimdo-Website verändern möchten.

Sie haben Fragen? Jetzt Kontakt aufnehmen

Kommentar schreiben

Kommentare: 0