Gewusst wie: So erstellen und bearbeiten Sie Webseiten

Zuletzt aktualisiert am: August 10, 2018

Produkte/Lizenzen

Add-ons: Website

Mit dem Editor für Website-Inhalte erstellen und bearbeiten Sie die Inhalte für Ihre eigentlichen Webseiten.

Gehen Sie folgendermaßen vor, um Webseiten für Ihre auf HubSpot gehostete Website zu erstellen.

Seiten Ihrer Website aufrufen

Navigieren Sie im HubSpot-Dashboard zu Content > Website-Pages.

main-nav-content-website-pages-2016.png

Auf „Create a New Website Page“ (Neue Webseite erstellen) klicken

Klicken Sie auf die Schaltfläche Create a New Website Page (Neue Webseite erstellen).

create-new-website-page---website-pages.png

Vorlage für die Seite auswählen

Als Nächstes sollten Sie eine Vorlage auswählen, die Sie als Grundgerüst für Ihre Seite verwenden möchten. Sie können die vorhandenen Vorlagen in Ihrem Account durchsuchen, eine Premium-Vorlage auf dem HubSpot-Marketplace erwerben oder ein neues Vorlagenlayout erstellen, indem Sie ein Mockup in ein Vorlagenlayout umwandeln. Eine Anleitung zur Umwandlung eines Mockups in ein Vorlagenlayout finden Sie hier.

Nachdem Sie die gewünschte Vorlage ausgewählt haben, müssen Sie auf die betreffende Vorlage klicken und die neue Webseite benennen. Klicken Sie dann auf Create (Erstellen).

select-a-website-page-template.png

Ihre Inhalte zur Webseite hinzufügen

Nachdem Sie die Seite erstellt haben, gelangen Sie zum Bildschirm „Edit“ (Bearbeiten). Hier können Sie Ihre Inhalte hinzufügen oder bearbeiten. 

Zum Bearbeiten der Inhalte in den Modulen auf Ihrer Seite bewegen Sie den Mauszeiger über das jeweilige Modul, bis Sie eine durchsichtige graue Schattierung und ein Bleistift-Symbol über dem Modul sehen. Klicken Sie in das Modul, um es zu bearbeiten.

edit-module.gif

Sie können auch auf der linken Seite auf das Kisten-Symbol klicken, um die Module auf Ihrer Seite zu bearbeiten. Wenn Sie auf dieses Symbol klicken, wird eine Liste aller bearbeitbaren Module auf Ihrer Seite angezeigt. Klicken Sie auf das Modul, das Sie bearbeiten möchten, und im Panel links erscheinen Ihre jeweiligen Bearbeitungsoptionen. Nehmen Sie Ihre Änderungen vor und klicken Sie anschließend oben links auf Save and go to module list (Speichern und zur Modulliste gehen). 

edit-module-left-sidebar.gif

Module zum Layout hinzufügen (flexible Spalten)

Wenn Ihre Vorlage flexible Spalten verwendet, sehen Sie ein Plus-Symbol auf der linken Seite. Klicken Sie auf dieses Symbol, um eine Liste aller verfügbaren Modularten anzuzeigen. Wählen Sie die Modulart, die Sie zu Ihrer flexiblen Spalte hinzufügen möchten. Fügen Sie dann das Modul per Drag-and-Drop zu Ihrem Seitenlayout hinzu.

HINWEIS: Sie sehen das Plus-Symbol auf der linken Seite NUR, WENN Ihre Vorlage flexible Spalten enthält; anderenfalls wird es nicht angezeigt.

add-module-flex.gif

Module gestalten

Ihre Module werden standardmäßig anhand der Stylesheets, die für die Seite angewendet werden, gestaltet. Allerdings können Sie auch benutzerdefinierte Inline-Stile auf Seitenebene anwenden. Bewegen Sie hierfür den Mauszeiger über das Modul, das Sie gestalten möchten, und klicken Sie auf das Pinsel-Symbol oben links im Modul. Es erscheint ein Panel mit den Stiloptionen für dieses bestimmte Modul. 

style-module.gif

Seiteneinstellungen bearbeiten

Klicken Sie zum Bearbeiten der Einstellungen für Ihre Seite auf die Registerkarte Einstellungen oben im Editor für Webseiten.
edit-page-settings.png

Auf dem Bildschirm „Einstellungen“ sehen Sie oben einen Abschnitt mit der Bezeichnung „Grundlegende Informationen“. Hier können Sie die allgemeinen Seiteninformationen für Suchmaschinen und Browser einfügen. 

1. Name der Seite: Dies ist der interne Name für Ihre Webseite. Beim ersten Erstellen der Seite müssten Sie diese bereits benannt haben, aber Sie können den Namen hier immer noch bearbeiten. Es handelt sich um einen internen Namen, den Sie im Sinne einer übersichtlichen Organisation frei wählen können. Ihre Website-Besucher sehen diesen Namen nicht.
2. Seitentitel: Dies ist der Ausdruck, der oben in der Registerkarte Ihres Webbrowsers erscheint, wenn die Seite geladen wird.
3. Seiten-URL: Dies ist die URL für Ihre Webseite. Sie erscheint in der URL-Leiste des Browsers, wenn Besucher zu dieser Seite navigieren.
4. Meta-Beschreibung: Dies ist der Inhalt, der in den Suchergebnissen unterhalb des Seitentitels angezeigt wird.
5. Kampagnen: In dieser Drop-down-Liste können Sie eine HubSpot-Kampagne auswählen, um Ihre Webseite mit dieser Kampagne zu verknüpfen. Sie können auch auf die Schaltfläche „Neu hinzufügen“ klicken, um eine neue Kampagne zu erstellen.
HubSpot Help article screenshot

Unter dem Abschnitt „Grundlegende Informationen“ befindet sich der Abschnitt „Erweiterte Optionen“. Dieser umfasst Einstellungen für Seiten, Stile und Vorlagen.

Sie können auf die Links HTML in der Kopfzeile bearbeiten oder HTML in der Fußzeile bearbeiten klicken, um den HTML-Kopfbereich oder -Fußbereich zu bearbeiten. Dort können Sie unbearbeitete HTML-Snippets, Einbettungscodes oder Tracking-JavaScripts zwischen die - oder

-Tags auf Ihrer Seite einfügen. Fügen Sie Ihren Code in das Pop-up-Fenster ein und klicken Sie auf Save (Speichern).

 

HubSpot Help article screenshot

Hier können Sie Ihre Seite auch mit einem Passwortschutz versehen. Diese Option ist hilfreich, wenn Sie folgende Möglichkeiten nutzen möchten:

  • Erstellen einer Seite auf Ihrer Website allein für Ihre Mitarbeiter. Speicherung von Verkaufs- und Marketingmaterialien, auf die nur Ihre Teammitglieder Zugriff haben.
  • Erstellen einer „ausschließlich für Kunden“ vorgesehenen Seite auf Ihrer Website sowie Veröffentlichung von Vorlagen und kundenspezifischen Materialien an dieser Stelle.
  • Einrichten einer Seite für Reseller und Partner, über welche diese erweiterte Materialien vor der Markteinführung eines Produkts beziehen können.

Um ein Passwort für diese Seite zu aktivieren, markieren Sie das Kontrollkästchen neben „Password protect this page“ (Diese Seite mit einem Passwortschutz versehen) und geben Sie Ihr Passwort in das eingeblendete Textfeld ein.

HubSpot Help article screenshot

Sie können auch angeben, ob die Seite zu einem bestimmten Termin ablaufen soll oder nicht. Dies kann hilfreich sein, wenn Sie eine Webseite zu einem begrenzten Angebot oder Produkt erstellen, das Sie empfehlen möchten. Markieren Sie das Kontrollkästchen neben „Legen Sie ein Ablaufdatum und eine Ablaufzeit für die Seite fest“, um diese Funktion zu aktivieren. Wählen Sie dann ein Ablaufdatum und eine Ablaufzeit, und geben Sie an, wohin Sie diese Seite umleiten möchten, nachdem sie abgelaufen ist.

HubSpot Help article screenshot

Darunter wird der Abschnitt „Style-Einstellungen“ angezeigt, in dem Sie folgende Bearbeitungen vornehmen können:

  • Primary CSS File (Primäre CSS-Datei): Hier können Sie überprüfen, welche primäre CSS-Datei für die Seite eingerichtet ist. Zudem können Sie diese über das Drop-down-Menü aktivieren, deaktivieren oder die Standardeinstellung verwenden.
  • Domain-Stylesheets: Hier können Sie überprüfen, welche CSS-Datei auf Domainebene eingerichtet ist. Zudem können Sie diese über das Drop-down-Menü aktivieren, deaktivieren oder die Standardeinstellung verwenden.
  • Vorlagen-Stylesheets: Hier können Sie überprüfen, welche CSS-Datei Sie an die von dieser Seite verwendete Vorlage angefügt haben. Zudem können Sie diese über das Drop-down-Menü aktivieren, deaktivieren oder die Standardeinstellung verwenden.
  • Seitenspezifische Stylesheets: Hier können Sie überprüfen, welche CSS-Dateien nur auf diese Seite angewendet werden. Klicken Sie auf + Add stylesheet (+ Stylesheet hinzufügen), wenn Sie eine CSS-Datei auf diese spezifische Seite anwenden möchten.

Wenn Sie wissen möchten, wie diese Stylesheets angefügt werden, klicken Sie hier.

HubSpot Help article screenshot

Im Abschnitt „Vorlageneinstellungen“ können Sie auf Vorlage ändern klicken, wenn Sie für Ihre Seite ein anderes Layout verwenden möchten, oder auf Vorlage bearbeiten, um zum derzeitigen Layout zu gelangen und dort Änderungen vorzunehmen. In diesem Abschnitt sehen Sie auch den Namen und eine Vorschau der Vorlage, die auf Ihrer Seite aktuell verwendet wird.

template-settings.png

Suchmaschinenoptimierung (SEO)

Klicken Sie auf das Balkendiagramm-Symbol auf der linken Seite, um zum Abschnitt „SEO Optimization“ (Suchmaschinenoptimierung) zu navigieren. Hier können Sie speziell für diese Seite Keywords in das Textfeld eingeben. Darunter sehen Sie alle ausstehenden Aufgaben. Hierbei handelt es sich um Elemente, mit denen Sie Ihre Seite optimieren können. Beispiele für derartige Elemente sehen Sie im nachfolgenden Screenshot.

seo-optimize-icon.png

Vorschau der Seite anzeigen

Im Menü auf der linken Seite können Sie auch das Augen-Symbol wählen, um den Abschnitt „Vorschau“ aufzurufen. Hier können Sie Folgendes tun:

  • Gerätetyp-Vorschau: Klicken Sie auf eines der hier angezeigten Symbole, um eine Vorschau Ihrer Seite für das jeweilige Anzeigegerät (Tablet, Smartphone usw.) anzuzeigen.
  • Smart Preview (Intelligente Vorschau): Markieren Sie das Kontrollkästchen neben „Vorschau der Seite für einen bestimmten Kontakt anschauen“ und wählen Sie einen Kontakt aus dem Drop-down-Menü aus. Hierdurch können Sie eine Vorschau der Seite anzeigen, wie sie für einzelne Besucher erscheint. Dies kann hilfreich sein, wenn Sie auf Ihrer Seite Smart Content verwenden.
  • Teilbare Vorschau: Klicken Sie auf diese Schaltfläche, um einen Link zur Vorschau zu erhalten, den Sie mit Kollegen teilen können (auch wenn Ihre Seite noch nicht veröffentlicht ist). 
HubSpot Help article screenshot

Seite veröffentlichen oder planen

Nun, da Sie Ihren Inhalt fertig bearbeitet und für Suchmaschinen optimiert haben und mit dem Aussehen Ihrer Vorschau zufrieden sind, müssen Sie auf die Registerkarte „Veröffentlichen oder planen“ klicken.

Dort haben Sie zwei Möglichkeiten zur Auswahl: Jetzt veröffentlichen oder Für einen späteren Zeitpunkt planen. Klicken Sie auf die Optionsschaltfläche unter der gewünschten Option (wenn Sie „Für einen späteren Zeitpunkt planen“ auswählen, müssen Sie Datum und Uhrzeit für die Veröffentlichung eingeben), und klicken Sie dann oben rechts auf die blaue Schaltfläche Planen oder Veröffentlichen

HubSpot Help article screenshot

Inhaltsverzeichnis

    Vorheriger Artikel:

    Measuring Your Performance Project

    Weiter zum nächsten Artikel: