Benutzerdefinierten HTML-, CSS- und JavaScript-Code einfügen

Mit den Sitejet Templates und Presets meisterst du in Sitejet die meisten Design-Herausforderungen ohne jegliche Kenntnisse in Programmierung und Design. 

Darüber hinaus kannst du individuellen, benutzerdefinierten Code einfügen. Der Artikel erklärt dir dabei deine vielfältigen Möglichkeiten.

INHALTSANGABE


Basiswissen

Sitejet ermöglicht es dir, nicht nur eigenen Code in Sitejet zu schreiben und zu verwenden, sondern auch Drittanbieter-Tools mit Hilfe von Code-Snippets in HTML, CSS und/oder Javascript einzubinden. Beachte hierbei, dass manche Tools ggf. nicht richtig verwendet oder dargestellt werden können, wenn du das Cookie Consent Bar Preset verwendest. Sitejet blockiert sicherheitshalber lieber zu viele, als zu wenige Skripte, um den rechtlichen Bestimmungen zu entsprechen. Fehlerhafte Funktionsweise oder Darstellung tritt beispielsweise auf, wenn ein Script von externe Quellen geladen wird und in einem zweiten Script darauf zugegriffen wird. Sorgt der Anbieter nicht selbst dafür, dass das zweite Script erst auf das erste Script zugreift, nachdem eben dieses "lazy" geladenen wurde, wird das Tool nicht wie gewünscht funktionieren.


Code-Editor

CSS-, JavaScript- und HTML-Code kann im Code-Editor bearbeitet werden. Diesen erreichst du per Klick auf "<> Code" oben rechts im Website Builder. Mit der Tastenkombination [Strg] + [Alt] + [C] kannst du ebenfalls den Editor aufrufen.  

Außerdem hast du von hier aus Zugriff auf die weiteren Tabs "(S)CSS", "JavaScript", "HTML", "Grundkonfiguration" und "Boilerplate".

Fehlerfreier "Custom Code" gewährleistet eine einwandfreie Funktion der Website. Stelle hierfür zum Beispiel mithilfe externer Tools wie Debuggern oder durch Testen sicher, dass der Code wie erwartet funktioniert.

Grundkonfiguration

"Grundkonfiguration" ist ein Reiter im Code Editor. Hier kannst du deine Website konfigurieren, indem du Variablen für Farben, Schriftgrößen, Features etc. definierst. Alle Presets, die auf deiner Website verwendet werden, werden als sogenannte "Mixins" bereitgestellt. Diese Mixins werden vom Website Builder (CMS) automatisch in die "Grundkonfiguration" eingefügt. Dadurch hast du die Möglichkeit, CSS-Eigenschaften entsprechend anzupassen, sobald du das erste Preset eingefügt hast. Bedenke, dass das Löschen eines Presets im Website Builder (CMS) nicht automatisch den dafür eingebundenen CSS- bzw. JavaScript-Code entfernt. 

Tipp: Wenn du nicht mit CSS vertraut bist - keine Sorge! Fast alle im CSS enthaltenen Werte können durch Theme- und Preset-Einstellungen angepasst werden. Hierfür hast du 3 Möglichkeiten:

  • Preset-Einstellungen - diese erreichst du per Klick auf das Puzzle-Icon am Element oder per Rechtsklick auf das Element und anschließendem Klick auf "Preset-Einstellungen" 
  • Über den Website Builder (CMS) Menüpunkt "Design" per Klick auf "Theme"
  • Durch Drücken der Tastenkombination [Strg] + [Alt] + [Y] 

Boilerplate (read-only)

In einem "Boilerplate" ist sämtlicher Standard-Code hinterlegt, der in der Website automatisch eingebunden wird und auch an anderen Stellen genutzt werden kann. Möchtest du sehen, was unter der Haube deiner Website steckt? Dann ist das "Boilerplate" der richtige Ort dafür. Den Code kannst du ebenfalls im Code Editor unter dem Reiter "Boilerplate" einsehen. Hier sind sämtliche voreingestellten Variablen einsehbar - sowohl die Standardwerte bestimmter Elemente als auch bestimmte Design-Eigenschaften und -Effekte. Diese Variablen kannst du für dein Design auch bei anderen Elementen nutzen, um ein möglichst einheitliches, professionelles und einfach wartbares Design zu erstellen. 


(S)CSS

Das Sitejet Website BuilderCMS bietet einen leistungsstarken (S)CSS-Editor, mit dem du deine Website in jeder Hinsicht anpassen kannst.

Sollte der Reiter "(S)CSS" nicht vorausgewählt sein, kannst du ihn nun klicken, um sämtlichen CSS-Code zu sehen und zu editieren.

Hier kannst du die entsprechenden Design-Eigenschaften deinen eigenen und bereits existierenden Standard-Klassen (z. B. ".ed-button") zuweisen. Standardmäßig ist der Code für jede Klasse "eingeklappt", also nicht sichtbar, um Platz zu sparen und eine bessere Übersicht zu gewährleisten. Per Klick auf den kleinen Pfeil neben der Zeilennummer auf der linken Seite des Editor-Feldes kannst du die Klasse "ausklappen" und so sämtliche Eigenschaften sichtbar machen

Hier kannst du deine eigenen CSS-Stile hinzufügen, die anschließend auf die Website angewendet werden können. Wenn du Presets verwendest, werden diese hier aufgenommen und du kannst deine "Overrides" in die jeweiligen Abschnitte einfügen. Du kannst alle Variablen verwenden, die in der "Boilerplate" oder "Grundkonfiguration" definiert sind.

Der Website Builder versteht auch deinen CSS-Code. Du kannst die CSS-Regeln, die für ein Element auf deiner Website gelten, finden, indem du ein Element auswählst und die Tastenkombination [Strg] + [Alt] + [C] drückst. Dadurch wird der CSS-Editor geöffnet und die für die ausgewählten Elemente geltenden Zeilen werden markiert. 

Du kannst auch den Button "Optimieren" verwenden, um unbenutzte Regeln zu finden und deinen Code zu bereinigen.

Aus dem Dateimanager kannst du über "Datei einfügen" auch CSS-/JS-Dateien nutzen. 

Per Klick auf "Colorpicker" kannst du über das Farbauswahlfenster deines Systems deine gewünschte Farbe auswählen. Dies erleichtert es dir die richtigen Werte für die gewünschte Farbe zu finden oder z.B. auf Mac- und Linux-Systemen eine Farbe an beliebiger Stelle auf deinem Bildschirm zu picken.

IDs und Klassen in Sitejet benutzen

Elemente können innerhalb von Sitejet über verschiedene Wege angesprochen werden. 

Jedes Element in Sitejet hat seine eigene eindeutige ID. Die ID ist immer im Format #ed-xxxxxx aufgebaut. Du findest sie in den Element-Eigenschaften und hast folgende Möglichkeiten, um die Element-Eigenschaften aufzurufen:

  • Klicke auf das Element und dann in den Breadcrumbs am unteren Rand des Bildschirms doppelklicken 
  • Doppelklicke auf das Element 
  • Wähle das Element aus und drücke die [Enter]-Taste 

In den Element-Eigenschaften auf der linken Seite des Bildschirms wird unter dem Reiter "Style" im Abschnitt "ID & Klassen" die ID angezeigt. 

IDs von <div>-Elementen können in Sitejet nicht geändert werden. Allerdings kannst du Unterelementen eine ID zuweisen.

Klassen

Klassen sind der komfortabelste Weg, um Elemente anzupassen und zu gestalten. Außerdem bieten sie eine Möglichkeit, um auch für andere Entwickler und Designer verständlichen bzw. in anderen Projekten wiederverwendbaren Code zu erstellen.

Um einem Element Klassen zuzuweisen gehe wie folgt vor:

  1. Öffne die Element-Eigenschaften auf eine der oben beschriebenen Weisen.
  2. Unter "ID & Klassen" im Reiter "Style" werden dann die einzelnen Klassen angezeigt, die diesem Element zugewiesen wurden. Das vorausgewählte Element ist das Container-Element - hier im Bild ein <div>-Element. Allerdings können auch die diesem Element untergeordneten Elemente angepasst werden, indem du auf den jeweiligen Tab klickt - hier beispielsweise "Button (a)", um das Link-Element des Buttons anzupassen.
  3. Jedem Element können mehrere Klassen zugeordnet werden, um eine höhere Spezifizierung in deinem CSS-Code zu erreichen. Weitere Details hierzu findest du in diesem englisch-sprachigen Artikel zu CSS-Klassen.

Unter "CSS-Klassen" kannst du so viele Klassen hinzufügen, wie du möchtest, indem du diese durch ein Leerzeichen getrennt einfügst.

Tipp: Du kannst mehrere Elemente auswählen, indem du während des Klickens die [Shift]-Taste gedrückt hältst. Du kannst auch mit der Tastenkombination [Strg] + [A] alle Elemente auf einmal auswählen. Auf diese Weise kannst du mehreren Elementen auf einmal bestimmte Klassen zuweisen.

IDs

IDs zum Gestalten bestimmter Elemente zu nutzen ermöglicht dir spezifischere Designvorgaben zu treffen, als es dir Klassen ermöglichen. Klassen versehen Design-Eigenschaften für mehrere Elemente, während eine ID nur für dieses eine spezifische Element gilt. Deshalb überschreiben die speziellen Vorgaben der ID die allgemeinen Vorgaben der Klasse.

Ein Beispiel: Ein Button-Element umfasst ein <div>-Element und ein <a>-Element. Das <div>-Element ist dabei das Eltern-Element, weil es das <a>-Element umschließt. In diesem Beispiel ist dem <div>-Element die ID #ed-1234567 und die Standard-Klasse .ed-button zugewiesen. Fügst du nun verschiedene Designvorgaben für die Klasse .ed-button und die ID #ed-1234567 hinzu, so werden die CSS-Eigenschaften der ID, die der Klasse immer überschreiben.

Insbesondere bei Animationen sind IDs hilfreich, da sich Animationen im Normalfall auf bestimmte Elemente beziehen.

IDs werden automatisch projektspezifisch vergeben. Kopierst du bestehenden CSS-Code in ein anderes Projekt, so hat dieser keinen Effekt, weil die verwendeten IDs nicht für dieses Projekt gelten. Arbeite stattdessen lieber mit Klassen. 

Um IDs zu kopieren, kannst du per Rechtsklick auf das jeweilige Element den Punkt "Element-ID kopieren" auswählen. Das Gleiche kannst du auch über die Tastenkombination [Strg] + [I] erreichen. 


HTML

Um HTML-Code direkt einzufügen, hast du zwei Möglichkeiten: 

  • Ein HTML-Element verwenden
  • Den Editor nutzen

HTML-Element

Das HTML-Element eignet sich unter anderem dafür, bestimmte Bausteine und Tools von Drittanbietern einzubinden. Dies kannst du per Drag and Drop folgendermaßen in deine Seite einbetten:

  1. Klicke oben im Website Builder auf "Inhalte hinzufügen" 
  2. Klicke nun auf "Element"
  3. Im sich links öffnenden Fenster wählst du nun "HTML" aus und ziehst es an die Stelle, an der du zusätzliche HTML-Elemente einbinden möchtest.

HTML im Editor

Den Code-Editor erreichst du, indem du 

  1. oben rechts im Website Builder auf "<> Code" und
  2. Anschließend auf den "HTML"-Reiter klickst. 

Normalerweise siehst du hier nur den Platzhalter {{content}} - es sei denn, du hast selbst hier zusätzlichen Code eingefügt. Alles, was hier hinterlegt ist, wird auf der Website dargestellt. Der Platzhalter {{content}} repräsentiert den gesamten Inhalt, den du über das Website Builder (CMS) verwalten kannst - also sämtliche Elemente, die du in der Hauptansicht des Website Builders (CMS) bearbeitest, verschiebst, hinzufügst oder entfernst. Bei Bedarf kannst du um diesen Platzhalter herum dein eigenes HTML oder Ausschnitte von Drittanbietern hinzufügen. Im Moment ist es nicht möglich, das bereits auf der Website vorhandene HTML zu bearbeiten. Damit stellen wir sicher, dass die vorhandenen Strukturen einwandfrei funktionieren.


JavaScript

Über das HTML-Element kannst du auch JavaScript in <script>-Tags einbinden. Diese Elemente werden allerdings nicht im Website Builder (CMS) ausgeführt. Um den Effekt sehen zu können, ist ein Wechsel zur "Vorschau-Website" erforderlich. Diese Ansicht zeigt die Website so, wie sie aktuell aussehen würde - ganz ohne Sitejet Website Builder (CMS). Diese erreichst du folgendermaßen:

  1. Bewege deine Maus über den Menüpunkt "Vorschau"
  2. Klicke auf "Vorschau-Website öffnen"

Zusätzlich kannst du jederzeit aus der Websites-Übersicht per Klick auf das Thumbnail die Vorschau-Website des Projekts öffnen:

Du kannst aber auch den Code Editor verwenden. Diesen erreichst du wie unter " HTML im Editor" beschrieben, nur in diesem Fall im Reiter "JavaScript". jQuery, eine weit verbreitete Javascript-Bibliothek, wird automatisch eingebunden, so dass du es in deinem JavaScript verwenden kannst. Der hier verwendete Code ist global, wird also auf allen Seiten ausgeführt.


Pixel, Tracking Code und dergleichen

Um für Werbemaßnahmen Daten sammeln zu können, werden sogenannte "Pixel" verwendet. Pixel sind JavaScript Code. Die bekanntesten Pixel stammen von Google und Facebook. In der Regel werden sie für Suchmaschinen- und Marketing-Optimierung genutzt und im <head>-Bereich der Website eingefügt.

Um Code in den <head>-Bereich deiner Website einzufügen, gehe in die "Website-Einstellungen" im Reiter "SEO/Meta". Das Website-Einstellungs-Fenster kannst du mit dem Tastaturkürzel [Strg] + [Alt] + [E] erreichen oder über folge Klickfolge:

  1. Du fährst mit der Maus über "Website",
  2. Klickst dann auf "Website-Einstellungen" und
  3. Klickst anschließend auf den Reiter "SEO / Meta"

Hier können sämtliche relevanten Meta-Informationen zu deiner Website angegeben werden. Das können z. B. Titel, Keywords oder eine kurze Beschreibung sein. Mehr Informationen über SEO werden in unserem SEO-Artikel behandelt. 

Für Tracking-Code, der im <head>-Bereich der Website eingefügt werden soll, ist der Punkt "Header-Angaben" von Interesse. 

Um Google Analytics zu verwenden, reicht es sogar, die Tracking-ID in das Feld "Google Analytics Tracking-ID" einzufügen. Wie du diese findest, wird dir in diesem Artikel von Google erklärt.

Vergewissere dich, dass du die TRACKING_ID (bzw. Pixel-ID bei Facebook) aus deinem jeweiligen Dashboard übernimmst und vervollständige deine Datenschutzrichtlinie entsprechend.

Sollte weiterer Code für andere Tools nötig sein, kannst du diesen ebenfalls unter "Header-Angaben" einfügen. Hier sind normalerweise <meta>-tags einzufügen, <script>-tags sind allerdings auch möglich. Soll der Code kurz vor dem schließenden </body>-Tag gesetzt werden, empfiehlt es sich, diesen wie unter " HTML im Editor" beschrieben unter "{{content}}" im "HTML" Tab einzufügen.


Den Code sauber halten

Die schnelle Eingabe von Code im Code-Editor kann manchmal unübersichtlich sein. Drücke einfach die Tastenkombination [Strg] + [I], um den gesamten Code im aktiven Fenster automatisch zu formatieren. Dies funktioniert sowohl für CSS, JS als auch für HTML. So behältst du den Überblick über die einzelnen Bereiche in deinem Code, deine Variablen und deren Definitionen.


Emmet

Emmet ist ein Plugin für viele verschiedene Text- und Code-Editoren, mit dem der HTML & CSS Workflow verbessert werden kann. Du kannst mit Sitejet auch ohne Emmet-Kenntnisse tolle Websites in kürzester Zeit erstellen. Emmet bringt jedoch einige Vorteile mit sich, die wir nicht unerwähnt lassen wollen.

So kann durch Abkürzungen z. B. viel Zeit gespart werden - allerdings ist dies nur wirklich sinnvoll, wenn du viel Code selbst schreibst und dich bereits mit dem Schreiben von HTML- und CSS-Code gut auskennst. 

Alle Editoren bei Sitejet sind "Emmet-ready", sodass du sämtliche Vorteile von Emmet nutzen kannst. Dies geschieht durch Drücken der [Tab]- Taste im jeweiligen Editor-Fenster. 

Wenn du Emmet nicht kennst, aber viel custom code schreibst, solltest du es dir unbedingt ansehen. Hier sind ein paar Beispiele:

Im CSS:

m0 -> [TAB] -> margin: 0;
p1 -> [TAB] -> padding: 1px;
h80px -> [TAB] -> height: 80px;
c#333 -> [TAB] -> color: #333;
fs -> [TAB] -> font-size: ;
! -> !important;

In HTML:

ul>li.test*3 -> [TAB] ->
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul><br>

Die vollständige Dokumentation findest du hier: http://emmet.io/


Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.

Zurück zum Anfang

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen