So erstellen Sie eine Website

In diesem Artikel erfahren Sie, wie Sie mithilfe des Website-Builders eine Website erstellen.

Inhaltsverzeichnis:

Die Website-Funktion in systeme.io ermöglicht es Ihnen, mehrseitige Websites über eine einzige Benutzeroberfläche zu erstellen und zu verwalten.

Erstellen einer neuen Website

Um zu beginnen, navigieren Sie im Hauptmenü zum Tab Websites (1) und klicken Sie auf Websites (2).

Auf der Übersichtsseite der Websites klicken Sie auf Erstellen (3).

Im angezeigten Pop-up geben Sie die folgenden Informationen zu Ihrer Website ein:

  • Name: Geben Sie den Namen Ihrer Website ein (4)
  • Domainname: Wählen Sie die Domain aus, die Sie verwenden möchten (5)
  • URL-Pfad der Startseite: Sobald Sie eine Domain auswählen, wird dieses Feld automatisch angezeigt. Verwenden Sie es, um den URL-Pfad Ihrer Startseite festzulegen (6)
  • Sprache: Wählen Sie die Hauptsprache Ihrer Website aus (7)

Nachdem Sie alle erforderlichen Felder ausgefüllt haben, klicken Sie auf Speichern (8), um Ihre Website zu erstellen.


Wichtig:

  • Eine Domain kann jeweils nur einer Website zugewiesen werden.
  • Wenn die Domain, die Sie verwenden möchten, bereits mit einer anderen Website verknüpft ist, müssen Sie sie zuerst von dieser Website entfernen, bevor Sie sie hier zuweisen können.

Nachdem Sie die Details Ihrer Website gespeichert haben, öffnet sich ein Fenster, in dem Sie aufgefordert werden, eine Vorlage für Ihre Startseite auszuwählen.

Sie können eine der folgenden Optionen wählen:

  • Vorlage auswählen: Wählen Sie eines der vorgefertigten Designs aus und passen Sie es individuell an.
  • Von Grund auf neu erstellen: Beginnen Sie mit einer leeren Seite und gestalten Sie alles manuell.

Sobald Sie eine Option ausgewählt haben, klicken Sie auf Speichern (9), um fortzufahren.

Nachdem Sie die ausgewählte Vorlage für Ihre Website gespeichert haben, werden Sie automatisch zum Website-Editor weitergeleitet.

Übersicht über den Editor

Der Editor enthält vier Haupt-Tabs, mit denen Sie Ihre Website erstellen und verwalten:

  • Seiten: Verwalten Sie die Struktur Ihrer Website, wechseln Sie zwischen Seiten, erstellen Sie neue Seiten und greifen Sie auf die Seiteneinstellungen zu.
  • Pop-ups: Erstellen und verwalten Sie Pop-ups für Ihre Website.
  • Stil: Definieren Sie globale Design-Einstellungen wie Schriftarten, Farben und Buttons.
  • Einstellungen: Konfigurieren Sie websiteweite Optionen wie Sprachen und allgemeine Einstellungen.

Seiten verwalten

Im Tab Seiten verwalten Sie die Struktur Ihrer Website.

Hier können Sie alle Seiten anzeigen (1), zwischen ihnen wechseln und neue Seiten erstellen, indem Sie auf (+) Erstellen (2) klicken.


Beim Erstellen einer neuen Seite wird im Erstellungs-Pop-up ein Schalter angezeigt, mit dem Sie die Seite zum Menü Ihrer Website hinzufügen können. Dieser ist standardmäßig aktiviert und fügt automatisch einen Link zu Ihrer neuen Seite im Navigationsmenü der Website hinzu.

Hinweis: Wenn eine Seite deaktiviert ist, wird sie im Editor und in der Vorschau weiterhin im Menü angezeigt, ist jedoch für Besucher auf Ihrer veröffentlichten Website nicht sichtbar.

Klicken Sie auf eine beliebige Seite in der Liste, um sie im Editorbereich auf der rechten Seite anzuzeigen. Um mit der Bearbeitung dieser Seite zu beginnen, klicken Sie direkt in den Editorbereich.

Dadurch wird das Seiteneditor-Menü geöffnet, in dem Sie alle Elemente finden, mit denen Sie Ihre Seite anpassen können:

Sie können jederzeit zu Ihrer Seitenliste zurückkehren, indem Sie oben links im Editor auf Seiten klicken.

Wenn Sie versuchen, zu einer anderen Seite zu wechseln oder den Editor mit nicht gespeicherten Änderungen zu verlassen, wird ein Bestätigungs-Pop-up angezeigt:

Hinweis: Der Website-Editor verwendet denselben Page Builder wie die Funktion Verkaufsfunnels, sodass alle Bearbeitungswerkzeuge auf dieselbe Weise funktionieren.

Seiteneinstellungen

Um die Einstellungen einer bestimmten Seite aufzurufen, klicken Sie auf das Drei-Punkte-Menü neben dem Seitennamen.

Dieses Menü zeigt die folgenden Optionen an:

  • Einstellungen
  • Veröffentlichen aufheben
  • Entfernen

Hinweis: Die Startseite kann nicht gelöscht werden. Die Option Entfernen ist nur für sekundäre Seiten verfügbar.

Wenn Sie auf Einstellungen klicken, öffnet sich das Pop-up Seiteneinstellungen mit den folgenden Abschnitten:

Allgemeine Einstellungen

Hier können Sie bearbeiten:

  • Seitenname
  • URL-Pfad

SEO

Verwenden Sie diesen Abschnitt, um festzulegen, wie Ihre Seite in Suchmaschinen angezeigt wird.

Sie können den Titel, die Beschreibung, Schlüsselwörter, den Autor, ein Bild festlegen und eine Vorschau der Darstellung in den Suchergebnissen anzeigen.

Es ist außerdem möglich, diese Seite vor Suchmaschinen zu verbergen, sodass sie nicht in den Suchergebnissen erscheint.

Sprachen

Dieser Tab wird verwendet, um sprachspezifische Versionen der Seite zu erstellen.

Wenn Sie auf Sprachspezifische Versionen dieser Seite duplizieren klicken, wird eine Kopie der Seite für die ausgewählte Sprache erstellt, sodass Sie deren Inhalt manuell übersetzen können.

Wichtig: Bevor die Sprachen hier angezeigt werden, müssen Sie diese zunächst unter Einstellungen → Sprachen hinzufügen.

Erweitert

In diesem Tab können Sie benutzerdefinierten Tracking-Code hinzufügen, der nur für diese Seite gilt.

Verwenden Sie nur geprüfte Skripte, da nicht unterstützter Code die Leistung oder das Verhalten der Seite beeinträchtigen kann.

Seiten veröffentlichen

Neu erstellte Seiten werden standardmäßig im Entwurfsmodus hinzugefügt.

Um eine Seite zu veröffentlichen, klicken Sie auf das Drei-Punkte-Menü und wählen Sie Veröffentlichen.

Hinweis: Sie können die Veröffentlichung einer Seite auf dieselbe Weise aufheben.

Verwendung von Pop-ups

Klicken Sie im Tab Pop-ups auf die Schaltfläche + Erstellen, um ein neues Pop-up zu erstellen.

Sobald das Pop-up im Editorbereich erscheint, klicken Sie darauf, um mit der Anpassung zu beginnen.

Das Bearbeitungs-Panel öffnet sich auf der linken Seite des Bildschirms und zeigt alle verfügbaren Einstellungen an.

Seiten-Pop-ups vs. Website-Pop-ups

Jedes Pop-up kann entweder sein:

  • Seiten-Pop-up: Nur auf der Seite sichtbar, die Sie gerade bearbeiten.
  • Website-Pop-up: Auf allen Seiten der Website sichtbar.

Um zwischen diesen Modi zu wechseln, klicken Sie auf das Globus-Symbol.

  • Ist das Globus-Symbol blau, handelt es sich um ein Website-Pop-up.
  • Ist das Globus-Symbol grau, handelt es sich um ein Seiten-Pop-up.

Das Status-Label über der Pop-up-Liste wird automatisch aktualisiert, um Ihre Auswahl widerzuspiegeln:

  • Seiten-Pop-ups
  • Website-Pop-ups

Hinzufügen eines Formularelements zu Ihrer Website

Um Leads auf Ihrer Website einfach zu erfassen, können Sie das einheitliche Formular-Element verwenden. Anstatt Eingabefelder und Schaltflächen separat hinzuzufügen, dient das Formular-Element als einzelner Container, der Ihre Eingabefelder, Kontrollkästchen und die Senden-Schaltfläche zusammenfasst. So können Sie zuverlässig mehrere voneinander unabhängige Formulare auf derselben Seite erstellen.

Wenn Sie auf das Formular-Element klicken, können Sie es über das Menü auf der linken Seite des Editors vollständig konfigurieren:

a. Unter dem Tab Elemente:

  • Standardfelder verwalten: Entfernen Sie Standard-Eingabefelder (z. B. Vorname oder Telefonnummer) ganz einfach, indem Sie den Mauszeiger über das Feld bewegen, das Sie entfernen möchten. Daraufhin wird ein Papierkorb-Symbol (1) angezeigt.

Sie können die Standardfelder auch bearbeiten, indem Sie einfach darauf klicken. Dabei können Sie den Platzhaltertext anpassen, das Feld durch Aktivieren des Kontrollkästchens Optional als optional festlegen, ein Symbol hinzufügen und das Design bearbeiten.

  • Neues Feld hinzufügen: Scrollen Sie nach unten und klicken Sie auf die Schaltfläche (+) (2), um sofort neue Felder hinzuzufügen.

Sie können aus den standardmäßig verfügbaren Feldern wählen, z. B. Postleitzahl, Firmenname usw. Sie können außerdem ein Kontrollkästchen (3) hinzufügen.

Oder fügen Sie ein benutzerdefiniertes Feld (4) hinzu.

Hinweis: Benutzerdefinierte Felder werden auf der Seite Kontakte in Ihrem Dashboard erstellt. Nach der Erstellung werden sie automatisch in den Formulareinstellungen unter „Benutzerdefinierte Felder“ angezeigt.

Weitere Informationen finden Sie auf der folgenden Seite:  So fügen Sie ein benutzerdefiniertes Formulareingabefeld hinzu

Nachdem Sie Ihre Felder hinzugefügt haben, können Sie sie per Drag-and-Drop in der gewünschten Reihenfolge anordnen.

b. Unter dem Tab Design:

  • Erscheinungsbild anpassen: Standardmäßig übernimmt das Formularelement automatisch die globalen Stileinstellungen Ihrer Website. Sie können diese Einstellungen jedoch über den Tab Design überschreiben und Rahmen, Abstände, Position und Farben vollständig anpassen, damit sie zum Layout Ihrer Seite passen.

c. Unter dem Tab Aktionen:

  • Weiterleitungsregeln (nach dem Absenden): Wählen Sie aus, was nach dem Absenden des Formulars geschehen soll.
    • Keine Weiterleitung (5): Sie können festlegen, dass Besucher auf derselben Seite bleiben und eine übersichtliche Erfolgsmeldung angezeigt wird.

    • Benutzerdefinierte URL (6): Sie können festlegen, dass Besucher auf eine andere Seite weitergeleitet werden.

  • Double-Opt-in (7): Aktivieren Sie einfach das Kontrollkästchen, um das Double-Opt-in für Ihre neuen Abonnenten zu aktivieren.

  • Automatisierungen im Editor (8): Fügen Sie Automatisierungsregeln direkt im Seiteneditor hinzu. Sie können ganz einfach bestimmte Aktionen auslösen (z. B. ein Tag hinzufügen, einen Kontakt für eine Kampagne anmelden oder eine E-Mail senden), sobald jemand das Formular absendet.

Außerhalb des Seiteneditors können Sie Ihr gewünschtes Formularelement auch auswählen, wenn Sie den Trigger „Website-Formular abonniert“ in den folgenden Bereichen Ihres Kontos konfigurieren:

Automatisierungsregeln:

Und Workflows:

Globale Stileinstellungen

Der Tab Stil steuert die globalen Erscheinungseinstellungen, die auf alle Seiten der Website angewendet werden.

Sie können konfigurieren:

  • Typografie (Überschriften und Absätze)
  • Farben (Hintergrund, Buttons, Links)
  • Buttons
  • Formularfelder (Abstand, Eckenradius, Rahmen, Farben)

Alle hier vorgenommenen Änderungen werden global auf die gesamte Website angewendet.


Nachdem Sie Elemente wie Text, Bilder oder andere Blöcke zu Ihrer Website-Seite hinzugefügt haben, können Sie Stiländerungen schnell rückgängig machen, indem Sie auf das Symbol Zurücksetzen neben Einstellungen wie Typografie, Farben, Größe oder Position klicken.

Einstellungen

Der Tab Einstellungen steuert allgemeine Optionen der Website, einschließlich:

  • Website-Name
  • Domain
  • Startseite
  • Sprache
  • Logo

Wechseln der Website-Sprache

Oben im Tab Seiten können Sie die Website-Sprache über das Sprach-Dropdown ändern.

Wenn Sie eine andere Sprache auswählen, wird die Seitenliste automatisch aktualisiert und zeigt die für diese Sprachversion verfügbaren Seiten an.

Wichtig:

Das Ändern der Sprache im Dropdown übersetzt den Inhalt nicht automatisch. Jede Seitenversion muss manuell bearbeitet werden.

Erstellen einer mehrsprachigen Website

Die Website-Funktion unterstützt mehrsprachige Strukturen.

So erstellen Sie eine mehrsprachige Website:

  1. Erstellen Sie Ihre Hauptwebsite in einer Sprache.
  2. Öffnen Sie für jede Seite das Drei-Punkte-Menü und gehen Sie zu Sprachen.
  3. Duplizieren Sie die Seite für die Sprache, die Sie hinzufügen möchten.
  4. Wechseln Sie die Website-Sprache im Pages-Dropdown.
  5. Bearbeiten Sie die übersetzte Version jeder Seite manuell.

So behalten Sie die volle Kontrolle über die Inhalte, die in jeder Sprache angezeigt werden.

Gerätevorschau

Während Sie eine Seite bearbeiten, können Sie eine Vorschau anzeigen, wie sie auf verschiedenen Geräten aussieht.

Verwenden Sie die Vorschau-Leiste oben rechts, um zwischen den Ansichten zu wechseln:

  • Desktop-Ansicht
  • Mobile Hochformat-Ansicht
  • Mobile Querformat-Ansicht

So können Sie überprüfen, ob Ihr Layout auf allen Bildschirmgrößen korrekt angezeigt wird.

Eine Website teilen

Sie können eine Website ganz einfach über einen Freigabelink mit anderen systeme.io-Benutzern teilen. Das ist besonders nützlich, wenn Sie Vorlagen mit Kunden, Teammitgliedern oder Ihrer Zielgruppe teilen möchten.

Klicken Sie in Ihrer Website-Liste auf das Dreipunkt-Menü (...) neben der Website, die Sie teilen möchten, und wählen Sie Teilen aus.

Ein Pop-up-Fenster mit einer Freigabe-URL wird angezeigt. Klicken Sie auf Link in die Zwischenablage kopieren.

Wenn ein Benutzer auf die Freigabe-URL klickt, wird er aufgefordert, sich bei seinem systeme.io-Konto anzumelden (falls er dies noch nicht getan hat). Nach der Anmeldung wird die Website automatisch in sein Konto importiert und eine Benachrichtigung mit der Meldung „Website wurde Ihrem Konto hinzugefügt“ angezeigt.

Hinweis: Die Option „Teilen“ ist nur für Websites verfügbar, für die bereits eine Vorlage ausgewählt wurde. Wenn Sie für Ihre Website noch keine Vorlage ausgewählt haben, wird die Option „Teilen“ im Menü nicht angezeigt.

Regeln zur Domain-Nutzung

Wenn Sie die Domain Ihrer Website ändern müssen, nachdem die Website bereits erstellt oder veröffentlicht wurde, können Sie diese Angaben in der Website-Übersicht aktualisieren.

So greifen Sie auf die Website-Einstellungen zu:

  1. Beenden Sie den Website-Editor.
  2. Navigieren Sie zu Sites > Websites.
  3. Suchen Sie Ihre Website in der Liste.
  4. Klicken Sie auf die Drei-Punkte-Menü-Schaltfläche daneben.
  5. Wählen Sie Einstellungen

Dadurch öffnet sich das Pop-up Website bearbeiten, in dem Sie Folgendes ändern können:

  • Website-Name
  • Domainname
  • URL-Pfad der Startseite

Wenn Sie auf das X-Symbol klicken, um die zugewiesene Domain zu entfernen, zeigt das System eine Warnung an, dass die Website deaktiviert wird, bis eine neue Domain ausgewählt wird.

Wichtig:

Das Entfernen der Domain deaktiviert die Website. Ihre Seite bleibt nicht zugänglich, bis Sie eine neue Domain zuweisen.