Help Center /

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:

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:

Schritt 2.1: Lade dein Logo hoch

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

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:

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:

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:

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:

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:

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:

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:

Und ein Kontaktformular auf der Kontaktseite:

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:

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:

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:

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

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

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:

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):

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:

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

Schritt 6.2: Ändere die Schriftfarbe deiner Text-Links

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

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:

Schritt 6.4: Tausche die Bilder aus

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

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:

Sogar die Bestätigungsseiten haben sich angepasst! 😉

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

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:

Schritt 9: Lege die Domain fest

Hier angekommen hast du zwei Möglichkeiten:

Chimpify Subdomain - Du lässt erstmal die Chimpify Subdomain, die standardmäßig dabei ist. Diese kannst du jederzeit unter Einstellungen > Allgemein > Domain ändern.
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.