Du kannst Custom-Code in deine Seite oder dein gesamtes Projekt einbinden, um eigene Anpassungen vorzunehmen oder externe Funktionen wie Tracking, interaktive Elemente oder andere Skripte zu integrieren. Dabei kannst du flexibel entscheiden, ob der Code nur für eine einzelne Seite oder projektweit für alle Seiten gelten soll.
Custom-Code hinzufügen
Schritt 1: Projekt öffnen
Öffne dein Projekt und anschließend die Seite, auf der der Code platziert werden soll. Wenn der Code projektweit verfügbar sein soll, kannst du einfach eine beliebige Seite innerhalb des Projekts öffnen.
Schritt 2: Code-Einstellungen öffnen
Wenn du die Seite geöffnet hast, kannst du in der linken Leiste auf das Code-Symbol klicken, um das Eingabefenster für den Custom-Code zu öffnen.
Schritt 3: Richtige Spalte wählen
Du siehst jetzt die Bereiche Page Code und Site Code:
Page Code = gilt nur für die einzelne Seite, auf der du ihn einfügst
Site Code = gilt projektweit für alle Seiten innerhalb des Projekts
Wenn der Code also nur auf einer Seite angezeigt beziehungsweise ausgeführt werden soll, nutzt du Page Code. Wenn er auf allen Seiten gelten soll, nutzt du Site Code.
Anschließend stehen dir die Bereiche <head>, <body> und Styles zur Verfügung. Diese haben folgende Bedeutung:
<head>: Hier werden Inhalte eingefügt, die im Hintergrund geladen werden. Dazu gehören zum Beispiel Tracking-Codes (Google Analytics, Meta Pixel), Meta-Tags oder externe Skripte, die vor dem Laden der Seite eingebunden werden sollen.<body>: Hier kommt der Code hinein, der direkt auf der Seite ausgeführt oder angezeigt werden soll. Zum Beispiel Chat-Widgets, Floating-Elemente, Buttons oder Skripte, die nach dem Laden der Seite aktiv werden.Styles: Hier wird CSS eingefügt, also alles, was das Design der Seite beeinflusst.
Schritt 4: Code einfügen
Jetzt kannst du in den jeweiligen Spalten deinen Code einfügen und bei Bedarf auch noch bearbeiten. Achte dabei darauf, den Code in die jeweils richtige Spalte einzufügen.
Schritt 5: Speichern und Veröffentlichen
Speichere die Eingabe und klicke auf "Update" oder "Veröffentlichen", um die Änderungen live auf deiner Seite sichtbar zu machen.
Benutzerdefinierte Klassen für Custom-Code verwenden
Wenn du im Bereich "Benutzerdefinierter Code" beispielsweise einen CSS-Code (Styles) hinzufügst, brauchst du eindeutige Referenzen, um bestimmte Bereiche deiner Seite gezielt anzusprechen.
Dafür kannst du benutzerdefinierte Klassen vergeben.
Schritt 1: Zum Element scrollen
Gehe zu dem Element, wo du eine Klasse zuweisen möchtest.
Schritt 2: Einstellungen öffnen
Öffne die Einstellungen:
Bei Abschnitten: Klicke oben rechts auf die drei Punkte. Wähle anschließend "Benutzerdefinierte Attribute" und klicke auf "+ Klasse hinzufügen".
Bei einzelnen Elementen: Öffne die Spaltenübersicht (drei Linien), wähle das gewünschte Element aus und klicke anschließend auf die drei Punkte. Wähle danach "Benutzerdefinierte Attribute" und klicke auf "+ Klasse hinzufügen".
Schritt 3: Klasse hinzufügen
Dort kannst du dann deine Klasse hinzufügen. Zum Beispiel: hero-section
Schritt 4: Klasse im Code einbinden
Nutze diese Klasse anschließend in deinem Custom-Code, um genau diesen Bereich gezielt anzusprechen.
📌 Hinweis: Das ist nur für Kunden gedacht, die eigene Code-Anpassungen vornehmen und das Verhalten von Onepage gezielt erweitern oder überschreiben möchten. Unser Support kann hierbei nur eingeschränkt unterstützen.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂