Benutzerdefinierten HTML-, CSS- und JavaScript-Code einfügen – Website Editor

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

Du kannst aber auch individuellen, benutzerdefinierten Code einfügen. Der Artikel erklärt dir dabei deine vielfältigen Möglichkeiten.

Basiswissen

Du kannst nicht nur deinen eigenen Code schreiben und 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 Section-Template verwendest. Sicherheitshalber werden eher zu viele, als zu wenige Skripte blockiert, 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 unten rechts im Website Builder. Mit der Tastenkombination [Strg] + [Alt] + [C] kannst du ebenfalls den Code Editor aufrufen.

Hier hast du Zugriff auf (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

In der Grundkonfiguration kannst du deine Website konfigurieren, indem du Var iablen für Farben, Schriftgrößen, Features etc. definierst. Alle Section-Templates, die auf deiner Website verwendet werden, werden als sogenannte Mixin bereitgestellt. Diese Mixins werden vom Website Builder automatisch in die Grundkonfiguration eingefügt. Dadurch hast du die Möglichkeit, CSS-Eigenschaften entsprechend anzupassen, sobald du das erste Section-Template eingefügt hast. Bedenke, dass das Löschen eines Section-Templates im Website Builder 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 Design-Einstellungen und in den Section Templates angepasst werden. Hierfür hast du 3 Möglichkeiten:

Die Section-Template-Einstellungen erreichst du entweder per Doppelklick auf eine Section oder wenn du per Rechtsklick in dem Menü Style auswählst
Design-Settings findest du unter dem Menüpunkt Design
Durch Drücken der Tastenkombination [Strg] + [Alt] + [Y]

Boilerplate (schreibgeschützt)

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

Der Website Builder 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 hinzufügen, der anschließend auf die Website angewendet wird. Wenn du Section-Templates 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 Dateien 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

Elemente können im Code über verschiedene Wege angesprochen werden.

Jedes Element hat seine eigene eindeutige ID. Die ID ist immer im Format #ed-xxxxxxxx aufgebaut.

Du findest die ID entweder direkt oben im linken Einstellungspanel...

...oder unter Style > Element > ID & Klassen

IDs von <div>-Elementen können nicht geändert werden. Allerdings kannst du Unterelementen eine eigene 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:

Öffne die Element-Einstellungen auf eine der oben beschriebenen Weisen.
Unter Style > Element > ID & Klassen 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.
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

Mit IDs kannst du spezifischere Designvorgaben treffen, als es mit Klassen möglich ist. Klassen bestimmen die Design-Einstellungen für mehrere Elemente, während eine ID nur für ein spezifisches 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.

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 Code 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 & Drop folgendermaßen in deine Seite einbetten:

Klicke auf Elemente in der linken Sidebar
Wähle dort das HTM-Element und ziehe es per Drag and Drop an die Stelle, an der du zusätzliche HTML-Elemente einbinden möchtest.

HTML im Editor

Den Code-Editor erreichst du, indem du

unten rechts im Website Builder auf <> Code und
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 den Website Builder verwalten kannst - also sämtliche Elemente, die du in der Hauptansicht des Website Builders 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. Bitte lösche den Platzhalter {{content}} nicht.

JavaScript

Über das HTML-Element kannst du auch JavaScript in <script>-Tags einbinden. Diese Elemente werden allerdings nicht im Website Builder ausgeführt. Um den Effekt sehen zu können, ist ein Wechsel zur Vorschau-Website erforderlich. Diese Ansicht zeigt die Website wie sie aktuell ist in einem neuen Tab:

Bewege deine Maus über das Auge-Icon
Klicke auf Vorschau-Website öffnen

Du kannst JavaScript, aber auch im Code Editor hinzufügen, klicke dafür

unten rechts im Website Builder auf <> Code und
Anschließend auf den JavaScript-Reiter klickst.

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 allendeiner 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, wähle Mehr > SEO:

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.

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

Um Google Analytics zu verwenden, reicht es sogar, die Tracking-ID in das Feld Google Analytics ID einzufügen.

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 Metatags 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 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 gut auskennst.

Der Website Builder ist "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: emmet.io