Landingpages

Der Octoserv Landingpage-Builder ermöglicht es Ihnen, professionelle Landingpages ohne Programmierkenntnisse zu erstellen und direkt zu veröffentlichen. Alle Seiten werden als schlanke, schnelle HTML-Dateien ausgespielt – ideal für Kampagnen, Lead-Generierung und Produktvorstellungen. Erfasste Formulardaten landen automatisch als Kontakte in Ihrem Octoserv-CRM.

Wofür ist diese Funktion

Mit dem Landingpage-Builder erstellen Sie zielgerichtete Seiten für Ihre Marketing-Kampagnen. Anders als normale Webseiten sind Landingpages auf eine einzige Aktion ausgerichtet – zum Beispiel das Ausfüllen eines Kontaktformulars, das Anfordern eines Angebots oder die Anmeldung zu einem Event. Der integrierte Formular-Builder verbindet Ihre Landingpage direkt mit dem Octoserv-CRM, sodass neue Leads ohne manuellen Aufwand erfasst werden.

Erstellung statischer HTML-Landingpages per Drag-and-Drop oder HTML-Import
Automatische Übertragung von Formular-Einsendungen als CRM-Kontakte
Veröffentlichung auf demselben Server oder auf einem externen Server
DSGVO-konforme Einbindung eigener Webfonts und Bilder
Tracking-Code-Verwaltung pro Seite (z. B. Tag Manager)

Unterseiten / Bereiche

Bereich	Beschreibung
Übersicht	Liste aller vorhandenen Landingpages mit Status (Entwurf / Veröffentlicht), URL und letztem Änderungsdatum
Visueller Builder	Drag-and-Drop-Editor zum Aufbau und zur Gestaltung von Sektionen, Texten, Farben und Bildern
HTML-Import	Eigenen HTML-Code einfügen; Tracking-Code wird automatisch ergänzt
Formular-Builder	Formularfelder konfigurieren und CRM-Felder zuordnen
Bilderbibliothek	Seitenspezifische Bildverwaltung; Upload eigener Bilder direkt im Editor
Webfonts	Upload eigener Schriftarten (DSGVO-konform, kein externer Abruf)
Tracking-Manager	JS-Snippets pro Seite verwalten (z. B. Tag Manager, Pixel)
Deploy-Einstellungen	Veröffentlichung lokal oder auf einem externen Server konfigurieren

So verwenden Sie Landingpages

Neue Landingpage erstellen

Navigieren Sie zu OctoPages › Landingpages.
Klicken Sie auf Neue Seite erstellen.
Vergeben Sie einen internen Seitennamen (nur für die interne Verwaltung sichtbar) und eine URL (Pfad der veröffentlichten Seite).
Wählen Sie den gewünschten Editor-Modus: Visueller Builder oder HTML-Import.
Bestätigen Sie mit Erstellen.

Visueller Builder

Der visuelle Builder bietet einen Drag-and-Drop-Ansatz, bei dem Sie vorgefertigte Sektionen auf Ihre Seite ziehen und anschließend anpassen.

Sektionen hinzufügen

Öffnen Sie die gewünschte Landingpage im Editor.
Klicken Sie auf Sektion hinzufügen und wählen Sie einen Sektionstyp aus der Bibliothek:

Hero – Großflächiger Einstiegsbereich mit Überschrift, Untertext und Call-to-Action-Button
Features – Auflistung von Merkmalen oder Vorteilen mit Icons
CTA – Handlungsaufforderungsbereich mit Button
Testimonials – Kundenstimmen und Bewertungen
Kontaktformular – Einbettbares Formular mit CRM-Anbindung
Bild / Medien – Freifläche für Bilder oder eingebettete Videos
Text – Freier Textblock
Fußzeile – Seitenfuß mit Links und Impressumshinweis

Ziehen Sie Sektionen per Drag-and-Drop in die gewünschte Reihenfolge.
Klicken Sie auf eine Sektion, um Texte, Farben und Bilder direkt im Editor zu bearbeiten.
Speichern Sie zwischenzeitlich mit Entwurf speichern.

Hinweis: Änderungen im visuellen Builder werden erst nach dem Klick auf Entwurf speichern oder Veröffentlichen übernommen. Nicht gespeicherte Änderungen gehen beim Verlassen des Editors verloren.

Texte und Farben anpassen

Klicken Sie auf das Textelement oder den Farbbereich, den Sie ändern möchten.
Im rechten Einstellungsbereich erscheinen die verfügbaren Optionen (Schriftgröße, Farbe, Ausrichtung).
Farben können als Hex-Wert (#ffffff) oder über den Farbwähler eingegeben werden.

Bilder einbinden

Klicken Sie auf ein Bildelement in einer Sektion.
Wählen Sie Bild auswählen, um die Bilderbibliothek dieser Seite zu öffnen.
Laden Sie neue Bilder per Drag-and-Drop oder über Bild hochladen hoch.
Wählen Sie das gewünschte Bild und bestätigen Sie mit Übernehmen.

Hinweis: Die Bilderbibliothek ist seitenspezifisch. Jede Landingpage verfügt über eine eigene Bibliothek, um die Übersicht zu bewahren.

Native Felder vs. HTML-Blöcke

Beim Aufbau einer Seite – ob manuell oder per Import – gibt es zwei Arten, wie Sektionsinhalte gespeichert werden:

Native Felder (visuell editierbar)

Alle Felder, die der Builder direkt kennt, sind im Editor vollständig bearbeitbar:

Hintergrundfarbe, Textfarbe – über den Farbwähler anpassbar
Hintergrundbild, Position – per Bildauswahl und Regler einstellbar
Abstands-Felder (oben, rechts, unten, links) – als Zahlwert in px einstellbar
Overlay-Farbe und -Stärke – für einen farbigen Schleier über einem Hintergrundbild
Spalten-Hintergrundbilder – jede Spalte kann ein eigenes Hintergrundbild haben
Spaltenbreiten – relative Verteilung (z.B. 55 % / 45 %)
Anker-ID – für direkte Verlinkung auf eine Sektion (#kontakt)
Textinhalt einer Spalte – wenn der Spaltentyp auf Text steht

HTML-Blöcke (eingefroren)

Wenn eine Spalte auf den Typ HTML gesetzt ist, wird ihr Inhalt als Rohtext gespeichert und direkt ausgegeben. Das ermöglicht komplexe Layouts oder benutzerdefiniertes Markup – allerdings mit einem wichtigen Unterschied:

HTML-Inhalte sind im visuellen Editor nicht editierbar. Änderungen müssen direkt im HTML-Code vorgenommen werden.
Section-Level-Felder (Hintergrundfarbe, Abstände, Bild) bleiben davon unberührt – sie sind immer über den Editor anpassbar.

Empfehlung: Setzen Sie Sektionsinhalte wann immer möglich auf native Felder (Spaltentyp Text oder Bild). So bleibt die Seite vollständig im Editor bearbeitbar. HTML-Blöcke eignen sich nur für Inhalte, die eine besondere Struktur erfordern und sich selten ändern.

HTML-Import

Der HTML-Import-Modus richtet sich an Nutzer, die eine fertige HTML-Vorlage – zum Beispiel aus einem externen Editor – einbinden möchten.

Wählen Sie beim Erstellen oder in den Seiteneinstellungen den Modus HTML-Import.
Fügen Sie Ihren vollständigen HTML-Code in das Eingabefeld ein.
Klicken Sie auf Importieren.
Octoserv ergänzt automatisch den konfigurierten Tracking-Code (siehe Abschnitt Tracking-Manager).
Prüfen Sie die Vorschau und veröffentlichen Sie die Seite.

Wichtig: Im HTML-Import-Modus steht der visuelle Builder nicht zur Verfügung. Änderungen müssen direkt im HTML-Code vorgenommen werden. Ein nachträglicher Wechsel in den visuellen Builder ist nicht möglich, ohne den Inhalt neu aufzubauen.

Formular-Builder

Der Formular-Builder ermöglicht die Einbindung von Kontaktformularen direkt auf Ihrer Landingpage. Ausgefüllte Formulare werden automatisch als neue Kontakte im Octoserv-CRM gespeichert.

Formular konfigurieren

Fügen Sie im visuellen Builder die Sektion Kontaktformular ein oder öffnen Sie ein bestehendes Formular über Formular bearbeiten.
Klicken Sie auf Feld hinzufügen und wählen Sie den Feldtyp:

Textfeld (einzeilig)
Textbereich (mehrzeilig)
E-Mail
Telefon
Auswahlliste
Checkbox
Datum

Legen Sie für jedes Feld die Bezeichnung (Feldname auf der Seite) und den Platzhaltertext fest.
Aktivieren Sie bei Pflichtfeldern die Option Erforderlich.
Ordnen Sie jedem Feld ein CRM-Zielfeld zu (z. B. Vorname, Nachname, E-Mail-Adresse, Telefon, Notiz).
Speichern Sie das Formular mit Änderungen speichern.

Hinweis: Die CRM-Feldzuordnung stellt sicher, dass eingehende Leads direkt dem richtigen Datensatz im Octoserv-CRM zugewiesen werden. Felder ohne Zuordnung werden als zusätzliche Notiz am Kontakt gespeichert.

Weiterleitungsseite nach dem Absenden

Öffnen Sie die Formulareinstellungen.
Geben Sie unter Weiterleitung nach Absenden eine URL ein (z. B. eine Dankeschön-Seite).
Alternativ aktivieren Sie Bestätigungsmeldung anzeigen und formulieren Ihren Bestätigungstext.

Webfonts

Octoserv unterstützt den Upload eigener Schriftarten. Damit werden Schriften ausschließlich vom eigenen Server ausgeliefert – kein externer Abruf, keine Übertragung von Nutzerdaten an Dritte.

Navigieren Sie zu OctoPages › Webfonts.
Klicken Sie auf Schriftart hochladen.
Laden Sie die Schriftdateien im Format .woff oder .woff2 hoch.
Vergeben Sie einen Anzeigenamen für die interne Auswahl.
Die Schriftart steht anschließend im visuellen Builder unter den Schriftarteneinstellungen zur Verfügung.

Hinweis: Bitte stellen Sie sicher, dass Sie über die erforderlichen Lizenzen für die hochgeladenen Schriftarten verfügen. Die DSGVO-Konformität gilt für die technische Auslieferung – die lizenzrechtliche Prüfung obliegt Ihnen.

Tracking-Manager

Der Tracking-Manager ermöglicht die Einbindung externer JS-Snippets pro Seite – zum Beispiel für Tag Manager, Conversion-Tracking oder Analyse-Pixel.

Öffnen Sie die gewünschte Landingpage und wechseln Sie zum Reiter Tracking.
Klicken Sie auf Snippet hinzufügen.
Fügen Sie Ihren JavaScript-Code in das Eingabefeld ein.
Wählen Sie die Position der Einbindung: <head> oder <body> (Ende).
Speichern Sie das Snippet.

Das Snippet wird bei jeder Veröffentlichung automatisch in die erzeugte HTML-Datei integriert – auch im HTML-Import-Modus.

Wichtig: Stellen Sie sicher, dass eingebundene Tracking-Dienste in Ihrer Datenschutzerklärung erwähnt sind und eine entsprechende Einwilligung der Nutzer vorliegt, sofern dies nach geltendem Recht erforderlich ist.

Deploy – Seite veröffentlichen

Landingpages können auf zwei Wegen veröffentlicht werden: lokal auf demselben Server wie Octoserv oder auf einem externen Server.

Lokales Deploy

Öffnen Sie die Landingpage und klicken Sie auf Veröffentlichen.
Wählen Sie als Ziel Lokaler Server.
Bestätigen Sie mit Jetzt veröffentlichen.
Die fertige HTML-Datei ist unter der konfigurierten URL erreichbar.

Remote-Deploy (externer Server)

Laden Sie die mitgelieferte Receiver-PHP-Datei einmalig auf Ihren externen Webserver hoch (Pfad und Zugangsdaten erhalten Sie unter Einstellungen › OctoPages › Remote-Deploy).
Tragen Sie in den Deploy-Einstellungen der Landingpage die Receiver-URL und den API-Schlüssel ein.
Klicken Sie auf Veröffentlichen und wählen Sie Externer Server.
Octoserv überträgt die HTML-Datei automatisch an den Receiver auf Ihrem Server.

Hinweis: Die Receiver-PHP-Datei muss auf dem externen Server nur einmalig eingerichtet werden. Alle späteren Aktualisierungen der Landingpage werden über diese Verbindung automatisch übertragen.

Wichtig: Sichern Sie den Zugang zur Receiver-PHP-Datei mit einem starken API-Schlüssel. Der Schlüssel sollte ausschließlich in den Octoserv-Deploy-Einstellungen hinterlegt sein und nicht weitergegeben werden.

Status: Entwurf und Veröffentlicht

Jede Landingpage befindet sich in einem von zwei Zuständen:

Status	Bedeutung
Entwurf	Die Seite ist gespeichert, aber noch nicht öffentlich erreichbar. Änderungen können jederzeit vorgenommen werden.
Veröffentlicht	Die Seite wurde deployed und ist unter der konfigurierten URL erreichbar. Weitere Änderungen erfordern ein erneutes Deployment.

Um eine veröffentlichte Seite zu aktualisieren, nehmen Sie die gewünschten Änderungen im Editor vor und klicken Sie erneut auf Veröffentlichen. Die bestehende Seite wird überschrieben.

Um eine Seite vom Netz zu nehmen, setzen Sie den Status auf Entwurf zurück und bestätigen Sie das Zurückziehen des Deployments.

Voraussetzungen

Wichtig: Die Landingpage-Funktion steht nur zur Verfügung, wenn das OctoPages-Modul in Ihrer Octoserv-Installation aktiv ist. Wenden Sie sich an Ihren Administrator, falls das Modul nicht sichtbar ist.

Das Modul OctoPages muss aktiviert sein.
Die API-Schlüssel für OctoPages müssen unter Einstellungen › OctoPages konfiguriert sein.
Für Remote-Deploy: Die Receiver-PHP-Datei muss einmalig auf dem Zielserver eingerichtet und die Receiver-URL in den Deploy-Einstellungen hinterlegt sein.
Für die CRM-Formularanbindung: Mindestens ein CRM-Kontaktfeld muss im Formular-Builder zugeordnet sein.