Schritt 2: Erstelle deine erste Webseite

Nachdem du deine erste Landing Page mit Chimpify erstellt hast und ein bisschen warm geworden bist, gehen wir einen Schritt weiter.

Wir erstellen deine eigentliche Webseite mit Chimpify. Aber erstmal ohne Blog. Wir gehen das alles ganz langsam an.

Generell solltest du dir zuerst deine Webseitenstruktur überlegen. Also: Was für Seiten brauchst du eigentlich? Dann solltest du die Texte ändern. Abschließend kannst du dich um das Styling kümmern. In der Regel hast du bereits eine Webseite und kannst dich einfach daran orientieren.

Beachte bei der Webseiten-Erstellung auch, dass du nicht in Perfektionswahn verfällst. Dein Ziel sollte es sein, mit einem simplen Grundgerüst zu starten. Danach kannst du es in Ruhe weiter verändern und erweitern.

Schritt 1: Wähle ein Theme

Erstelle zuerst (wie hier beschrieben) ein neues Theme und wähle eine gewünschte Webseiten-Vorlage aus. Am besten wählst du eines das hell oder dunkle Framework-Theme aus:

erste schritte framework theme waehlen

Wie du richtig mit dem Framework umgehst, erfährst du hier.

Schritt 2: Bearbeite deine Navigation

Deine Navigation ist in der Regel ein Globales Element. Es ist also ein Element, das in allen Seiten sitzt. Wenn du hier eine Änderung machst, wird die Navigation auf allen Seiten automatisch geändert. Deshalb ist er erstmal gesperrt, um Fehler zu reduzieren.

Mache also einen Doppelklick auf das Navigations-Element, um es zu entsperren und zu bearbeiten:

header globales element entsperren

Schritt 2.1: Lade dein Logo hoch

Mache einen Doppelklick auf das Logo und lade dein eigenes hoch:

erste schritte logo aendern

Am besten im SVG- oder PNG-Format. Das Logo linkt automatisch zur Startseite.

Ändere ggf. die Breite bzw. Höhe deines Logos, bis alles gut aussieht.

Schritt 2.2: Ändere die Menüpunkte

Überlege dir kurz, welche Menüpunkte du haben möchtest. Meistens brauchst du mindestens Folgende:

  • Leistungen / Produkte
  • Über mich / Über uns
  • Kontakt

Benenne die Menüpunkte in den Element-Einstellungen um. Füge welche hinzu, indem du einen bestehenden Menüpunkt kopierst. Oder lösche welche, die du nicht brauchst:

erste schritte navbar aendern

In diesem Schritt brauchen wir noch keinen Blog. Also raus damit.

Falls dazu noch keine passenden Seiten existieren, kannst du sie ein paar Schritte später erstellen und dann hier an dieser Stelle verlinken.

Schritt 2.3: Ändere den Button

In die meisten Navigationsleisten gehört ein CTA (Call-to-Action), der das Ziel deiner eigentlichen Webseite wiederspiegelt.

Was ist dein Ziel? Kontakt aufnehmen? Newsletter abonnieren? Ein Produkt kaufen?

Ändere den Button-Text wie gewünscht um:

erste schritte navbar button aendern

Wenn du mehr über das Navigations-Element erfahren möchtest, schaue hier vorbei.

Schritt 3: Bearbeite deine Startseite

Gehe jetzt deine Startseite von oben nach unten entlang und bearbeite sie. Gehe dabei die einzelnen Sektionen durch. Eine Einführung in unseren Chimpify Designer findest du hier.

Schritt 3.1: Ändere die Texte

Ändere die Texte mit einem Doppelklick bzw. in den Element-Einstellungen:

erste schritte texte aendern

Kopiere hier am besten die bestehenden Texte von deiner Webseite oder schreibe schnell neue. Wie gesagt, verfalle hier nicht in den Perfektionswahn.

Schritt 3.2: Füge Elemente hinzu, bearbeite oder lösche sie

Füge einzelne Elemente per Drag and Drop an die gewünschte Stelle hinzu. Bearbeite Elemente, indem du z.B. ein Bild hochlädst. Oder lösche Elemente, die du nicht brauchst:

erste schritte elemente bearbeiten

Schritt 3.3: Füge Bausteine hinzu

An dieser Stelle kannst du auch ganze Sektionen als Baustein an die gewünschte Stelle ziehen und danach bearbeiten:

erste schritte bausteine

Beachte hier jedoch, dass du nach dem Einfügen auch allen Elementen den passenden Globalen Style zuordnest - auch den Layout-Elementen (hier mehr dazu).

Schritt 3.4: Lösche Sektionen, die du nicht brauchst

Lösche abschließend Sektionen, die du nicht brauchst. Zum Beispiel die Blog-Sektion:

erste schritte sektionen loeschen

Generell: Wenn du ein Globales Element löschst, löschst du es nicht komplett. Du entfernst es nur aus der Seite.

Schritt 3.5: Achte darauf, dass mind. ein Formular vorhanden ist

Am besten sorgst du dafür, dass du mindestens ein Formular für deinen Newsletter auf deiner Startseite hast:

erste schritte formular einfuegen

Und ein Kontaktformular auf der Kontaktseite:

erste schritte kontaktformular

Schritt 4: Bearbeite deinen Footer

In der Regel ist dein Footer auch ein Globales Element, da er in mehreren Seiten sitzt und identisch sein sollte. Mache also einen Doppelklick, um ihn zu bearbeiten.

Die Text- und Text-Link-Elemente kannst du hier auch mit Doppelklick bearbeiten. Ändere also das Copyright und füge evtl. einen Menüpunkt hinzu:

erste schritte footer bearbeiten

Schritt 5: Bearbeite, erstelle und verlinke deine restlichen Seiten

Ein Theme hat in der Regel die oben genannten Seiten vorhanden und hat diese bereits in der Navbar und im Footer verlinkt. Bearbeite diese Seiten jetzt genau wie die Startseite.

Schritt 5.1: Bearbeite bereits vorhandene Seiten

Um eine Seite zu bearbeiten (z.B. „Über mich“), öffne die Seitenverwaltung und klicke auf den Seitennamen:

erste schritte seite bearbeiten

Schritt 5.2: Kopiere bereits vorhandene Seiten

Öffne eine passende Seite, kopiere sie und benenne sie danach um. Achte hier außerdem auf den richtigen Permalink:

erste schritte seite kopieren

Schritt 5.3: Lösche Seiten, die du nicht brauchst

Öffne die Einstellungen einer Seite und klicke auf löschen:

erste schritte seite loeschen

Das Template (grün) brauchst du nur für deinen Blog und kannst du im Moment erstmal ignorieren.

Schritt 5.4: Verlinke deine Seiten

Verlinke sie bzw. überprüfe die Verlinkung abschließend in der Navbar und im Footer:

erste schritte verlinkung

Schritt 6: Style deine Webseite

Wie bereits erwähnt, solltest du am besten mit einen der beiden Framework-Themes starten. Bei diesen Themes hat fast jedes Element einen Globalen Style zugeordnet.

Das hat den Vorteil, wenn du z.B. einen Text-Link änderst, ändern sich automatisch alle Text-Links, die den Globalen Style zugeordnet haben, auf deiner kompletten Webseite (mehr dazu findest du hier):

erste schritte globale styles

Schritt 6.1: Lege deine Schriftart fest

Navigiere danach in die Style-Guide-Seite und wähle in der Breadcrumb Navi die Seiten-Ebene aus. Wähle dann deine gewünschte Schriftart aus:

erste schritte schriftart aendern

Wie im GIF dargestellt, kannst du vorher gerne eine Google Font, Adobe Font oder eine manuelle Font einbinden (hier mehr dazu).

Klicke jetzt die verschiedenen Text-Link-Elemente durch (auch die unten im Style Guide) und ändere die Schriftfarbe für Normal und Hover:

erste schritte text links aendern

Achte hier darauf, dass das Text-Link-Element die selbe Schriftgröße und Zeilenhöhe wie dein normaler Text hat. Ansonsten sieht es komisch aus.

Schritt 6.3: Ändere die Button-und Icon-Farbe

Scrolle etwas weiter runter, klicke die verschiedenen Button- und Icon-Elemente durch und ändere die Hintergrund-Farbe:

erste schritte buttons icons aendern

Schritt 6.4: Tausche die Bilder aus

Ändere abschließend die Bilder und Hintergründe (hier mehr dazu) auf allen Seiten:

erste schritte bilder austauschen

Schritt: 6.5 Tausche Globale Styles aus

Im letzten Schritt kannst du noch Globale Styles austauschen, damit das Layout etwas harmonischer aussieht:

erste schritte globale styles austauschen

Schritt 6.6: Überprüfe das Styling deiner Seiten

Nach den Änderungen sollte deine Startseite schon ganz anders aussehen:

erste schritte startseite final

Sogar die Bestätigungsseiten haben sich angepasst! 😉

erste schritte bestaetigungsseite

An einigen Stellen musst du evtl. noch manuell nachbessern. Zum Beispiel wenn das Element keinen Globalen Style zugeordnet hat.

Klicke also kurz alle Seiten durch und schaue, ob du zufrieden bist.

Du kannst dich beim Styling ruhig etwas kreativ austoben. Aber wie bereits mehrfach erwähnt, verfalle nicht in den Perfektionswahn. Hauptsache erstmal ein ansehnliches Design erstellen und raus damit. Feinschleifen kannst du später immer noch.

Schritt 7: Aktualisiere die Datenschutzerklärung und das Impressum

Navigiere jetzt zur Datenschutz- und danach zur Impressum-Seite. Füge dort deine richtigen Daten ein:

erste schritte datenschutzerklaerung aendern erste schritte impressum aendern

Gerne kannst du auch ein neues Impressum erstellen (z.B. mit dem Generator von eRecht24) und einfügen.

Beachte an dieser Stelle, dass du für die Richtigkeit deiner Datenschutzerklärung und des Impressums verantwortlich bist.

Schritt 8: Aktiviere dein Theme

Falls dein Theme noch nicht aktiv ist, aktiviere es:

erste schritte theme aktivieren

Schritt 9: Lege die Domain fest

Hier angekommen hast du zwei Möglichkeiten:

  1. Chimpify Subdomain - Du lässt erstmal die Chimpify Subdomain, die standardmäßig dabei ist. Diese kannst du jederzeit unter Einstellungen > Allgemein > Domain ändern.

  2. Eigene Domain - Du hast eine eigene Domain bei einem Domain-Anbieter und verbindest diese einmalig mit Chimpify (wie hier beschrieben). Wenn du dabei noch Hilfe brauchst, sende uns die Zugangsdaten und wir verbinden deine Domain für dich.

Schritt 10: Vermarkte deine Webseite

Wenn du im ersten Schritt eine Landing Page erstellt hast, hast du vielleicht schon ein paar Kontakte gesammelt. Sende ihnen jetzt eine kleine E-Mail-Kampagne mit dem Hinweis auf deine neue Webseite.

Sende deine neue Webseite außerdem deinen Freunden, Kollegen und Bekannten via E-Mail, WhatsApp, SMS usw. Poste sie außerdem auf Social Media und schalte gerne Anzeigen darauf.

Schritt 11: Analysiere deine Kennzahlen

Checke ab jetzt regelmäßig (z.B. einmal die Woche) dein Dashboard und schaue, wie viele Besucher du bekommen hast:

erste schritte dashboard

Vielleicht hast du nach einigen Tagen weitere Kontakte (=Conversions) mit deiner Chimpify-Webseite generiert? Dann kann der Spaß langsam losgehen! 😉

Brandneu

Chimpify

Plattform

Powered by Chimpify