Website erstellen lassen: Der Ablauf vom Text bis zum Launch

Website erstellen lassen: Der Ablauf vom Text bis zum Launch

Das Konzept steht: Zielgruppe, Wettbewerb und Struktur sind geklärt, wie ich hier am Beispiel meiner Kundin Susanne beschrieben habe. Jetzt beginnt die Umsetzung: Aus Stichpunkten werden fertige Texte, aus Ideen ein Bildkonzept, aus der Struktur eine technische Website, die auch gefunden wird.

In diesem Artikel zeige ich dir meinen Ablauf von Text bis Launch, wieder am Beispiel von Susanne Möpert, Ernährungsberaterin für Frauen in den Wechseljahren: Content, Suchmaschinenoptimierung, Design, Technik und der letzte Feinschliff vor dem Launch.

Content-Strategie: Texte strukturieren, Headlines formulieren

Wenn die Struktur steht, fülle ich sie nicht einfach mit Text. Ich überlege, welche Inhalte welche Aufgabe übernehmen. Die Architektur gibt den Rahmen vor, aber der Content entscheidet, ob eine Website Erfolg hat.

Bei der Ernährungsberaterin Susanne bedeutet das: Welche Themen gehören auf die Startseite – und welche nicht? Was muss eine Besucherin sofort verstehen, damit sie weiß, dass ihr auf dieser Website geholfen werden kann. Wie findet die Besucherin die für sich wichtigen Informationen?

Lange Texte teile ich in appetitliche, leicht verdauliche Happen. Wir sind von Natur aus bequem, lange Textpassagen am Bildschirm lesen die wenigsten zu Ende. Diese Einteilung visualisiere ich dadurch, indem ich die Website in unterschiedlich farbigen Segmenten oder Blöcken teile. Das erleichtert das Lesen unterschiedlicher Bereiche.

Content-Strategie: Bilder ergänzen die Texte

Bildsprache finden

Welche Bildsprache Susannes Website trägt, also der Wechsel zwischen ihren eigenen Marktfotos, dem beauftragten Fotoshooting und den bewusst eingesetzten Stockfotos zum Thema Lebensmittelindustrie, habe ich im Konzept-Artikel beschrieben. Hier geht es um den nächsten Schritt: Wie werden aus diesen Entscheidungen fertige, technisch saubere Bilder auf der Website?

Als ausgebildete Fotografin sehe ich das besonders deutlich.

* Ein Bild kann Atmosphäre schaffen.
* Es kann Nähe herstellen.
* Es kann Professionalität zeigen.
* Falsch gewählt kann es aber die Aussage verwischen.
* Auch professionelle Fotos müssen für den Webbereich bearbeitet werden
* Wichtig sind Dateigröße, Dateimaße, Dateinamen und Alternativtext.

Bilder richtig bearbeiten und Dateinamen ändern

Die Fotos spielen in mehrfacher Hinsicht eine wichtige Rolle auf Websites. Das wird leider immer wieder unterschätzt. Die Punkte Atmosphäre und Professionalität habe ich bereits angesprochen. Es ist das, was die Besucherin vorn auf der Webseite sieht. Aber wie sieht es im Backend der Website aus? Denn Fotos müssen für die Website optimiert werden: Dateigröße, Dateinamen, Alternivtexte, Keywords. Leider sehe ich immer wieder viel zu große Dateigrößen: Fotos mit einer Dateigröße von über 100 KB verlangsamen die Ladezeit der Website. Auf vielen Websites sehe ich sogar mehr als 1 MB. Hier wurde offensichtlich das Foto direkt aus der Kamera bzw. dem Handy in die Website geladen. Das ist nicht nur nervig für Menschen, die die Website auf dem Handy öffnen und ewig lange warten müssen, bis die Seite geladen ist, sondern es beeinflußt auch die Suchmaschinenplatzierung. Wie du die vermeidest, habe ich in diesem Artikel beschrieben.

Content-Strategie bedeutet für mich deshalb nicht „viel Inhalt“, sondern gezielter Inhalt.

Suchmaschinenoptimierung – von Anfang an mitgedacht

Suchmaschinenoptimierung beginnt für mich nicht mit einem Plugin und auch nicht mit einer Liste von Keywords. Sie beginnt in dem Moment, in dem wir über Zielgruppe und Inhalte sprechen. SEO ist für mich Haltung und Denkweise.

Bei der Ernährungsberaterin Susanne stellte sich früh die Frage: Wie suchen ihre potenziellen Kundinnen eigentlich? Geben sie „Ernährungsberatung Wechseljahre“ ein? „Hormonbeschwerden“? „Gewichtszunahme ab 50″? Oder sehr konkrete Symptome wie „Schlafprobleme Wechseljahre was hilft“, „Was hilft mir bei Hitzewallungen“, „Welche Ernährung hilft mir bei Kopfschmerzen“?

Was wir mittlerweile auch von Anfang an mitdenken müssen: Immer mehr Menschen geben ihre Suchanfrage nicht in Google ein, sondern geben ganze Sätze in einer KI wie ChatGPT ein.

Diese Überlegungen beeinflussen bereits die Struktur. Wenn wir wissen, dass viele Frauen mit konkreten Beschwerden suchen, kann es sinnvoll sein, diese Themen klar zu benennen – nicht versteckt im Fließtext, sondern sichtbar in Überschriften und eigenen Abschnitten.

Suchmaschinenoptimierung heißt für mich: Die Sprache meiner Kundin mit der Sprache ihrer Zielgruppe abzugleichen.

Später kommen technische Aspekte hinzu: saubere Überschriftenstruktur, sinnvolle Seitentitel, Meta-Beschreibungen, Ladezeiten. Aber die Grundlage entsteht schon in der Konzeptphase.

Konkret heißt das bei Susanne: Jede Überschrift (H1, H2, H3) folgt einer klaren Hierarchie, keine Überschrift wird nur wegen der Formatierung vergeben, sondern weil sie eine echte Gliederungsebene markiert. Der Seitentitel, der bei Google als schwarze Überschrift erscheint, enthält den wichtigsten Suchbegriff der Seite, zum Beispiel „Hitzewallungen“ und „Wechseljahre“ statt nur „Angebot“. Die Meta-Beschreibung darunter ist kein Fülltext, sondern eine kurze Einladung: Sie beantwortet in ein bis zwei Sätzen, was die Besucherin auf der Seite erwartet. Die Ladezeit hängt eng mit den Bildern zusammen, dazu mehr im Abschnitt zur technischen Umsetzung.

Webdesign – Stimmung, Farbe und Typografie

Typografie: Schrift als wichtiges Gestaltungsmoment

Form follows Content. Auch bei Websites.

Erst wenn Struktur, Inhalte und Suchbegriffe geklärt sind, beginne ich mit der gestalterischen Ebene. Dafür lege ich ein Moodboard an.

Ich sammle visuelle Eindrücke, Farbwelten, Bildstimmungen, Typografie-Beispiele. Die Basis ist wieder das, was wir zuvor strategisch erarbeitet haben.

Für die Texte auf Websites verwende ich meistens Google-Fonts, die ich natürlich lokal einbinde, damit die Seite DSGVO-konform bleibt. Dafür nutze ich keine der üblichen Plugin-Lösungen, sondern eine einfache PHP-Anweisung von Sonia Rieder. Der Vorteil: Anders als ein echtes Plugin braucht sie keine Updates. Wie die Schriften lokal eingebunden werden, habe ich hier beschrieben.

Für die Fließtexte und Headlines auf Susannes Website habe ich mich für die Schriften Lato und Abel entschieden. Beide Schriften sind Grotesk-Schriften, das heißt, sie haben keine Serifen. Dadurch wirken die Textblöcke ruhig und sachlich. Auf Schreibschriften, wie sie oft auf Beratungsseiten insbesondere für Frauen zu sehen sind, habe ich bewußt verzichtet, um den professionellen und sachlich informierenden Charakter der Website zu unterstreichen.

Akzente habe ich in den Headlines und schmalen Teasern gesetzt: Die Headlines erhalten die Farben Grün und Lila, die Schriften in den Teasern die Schrift Abel, da wir hier wenig Platz haben und die Abel sehr schmal läuft.

Insgesamt habe ich die Schrift bewußt groß gesetzt mit großem Zeilenabstand, damit die Texte flüssig zu lesen sind. Durch den Zeilenabstand wirken die Textblöcke zudem leicht und luftig.

Farben: Die richtige Farbwahl unterstützt die Aussage der Texte

Bei der Ernährungsberaterin stellt sich zum Beispiel die Frage: Welche Farben unterstützen ihre Aussage? Mit welchen Farben kann ich die Besucherinnen abholen? Welche Farben passen zum Angebot und sorgen für Vertrauen?

Soll sie mit warmen Naturtönen arbeiten oder mit reduzierten, aber eindeutigen Farben? Was lässt sich als primäre Farbe definieren und welche Farbe wählen wir für Buttons – die auffällig, aber nicht zu knallig sein sollen, um nicht vom Thema abzulenken?

Das Moodboard ist keine Spielerei, sondern hilft uns, Entscheidungen zu treffen. Auf dieser Grundlage entwickle ich dann das visuelle Konzept: Farbpalette, Schriftkombination, Grundlayout, Bildsprache. [Welche 9 Fehler besonders häufig gemacht werden, hab ich hier beschrieben.](https://constanzestraub.de/website-richtig-gestalten/)

Design ist für mich die Übersetzung der Strategie in eine visuelle Sprache. Wenn die Architektur steht und die Inhalte klar sind, erfüllt das Design seine eigentliche Aufgabe: die Aussagen der Inhalte verstärken.

Die Farbentscheidung auf Susannes Website war relativ schnell getroffen: Wir wollten eine Farbe haben, die frisch wirkt, den Bereich „Gesundheit“ und „gesunde Ernährung“ abdeckt und gleichzeitig beruhigend wirkt. Deshalb lag die Farbe Grün nahe, die diesen Bereich sehr gut widergibt. Wir haben uns für zwei helle, leicht abgestufte Grüntöne und Weiß entschieden, um damit die unterschiedlichen Textbereiche zu segmentieren.

Als Akzentfarbe für die Buttons und Links hatte Susanne sich für ein kräftiges Lila entschieden, fast schon Pink, der sehr gut zum weiblichen Bereich passt. Gleichzeitig ist diese Farbe eine Kontrastfarbe (komplementär), die sich klar vom umgebenden Grün absetzt und damit schnell gesehen wird.

Mit der Wahl dieser reduzierten Farbsprache hat Susanne ein relativ ruhiges Umfeld auf ihrer Website erhalten. Ruhe ist hier wichtig, da einige Besucherinnen mit körperlichen Leiden und vielleicht Schmerzen zu ihr kommen. Die Wechseljahre sind eine sehr besondere Phase im Leben einer Frau, in der es auch unruhig zugeht. Eine dezente Farbgebung wirkt dann eher beruhigend. Außerdem setzt Susanne farbenfrohe Fotos ein von bunten Gemüsen und Obst, die mit der reduzierten Farbwelt gut harmonieren.

Technische Umsetzung der Website

Die technische Umsetzung ist relativ unabhängig vom Inhalt. Relativ, denn ein Shop als Beispiel benötigt bestimmte technische Voraussetzungen. Eine Website mit Blog braucht ein dynamisches System. Eine weitere Überlegung ist, ob die Websitebetreiberin als Laiin die Website nach der Fertigstellung selber editieren möchte. Ein Pagebuilder könnte dann die richtige Wahl sein. Welche Plattform für dein Projekt sinnvoll ist, habe ich hier ausführlicher beschrieben.

Für diejenigen, die ganz am Anfang stehen und wissen möchten, was WordPress überhaupt ist, habe ich diesen etwas humorvollen Artikel geschrieben.

Ich arbeite ausschließlich mit WordPress, in der Regel mit dem Theme Divi. WordPress ist sehr flexibel, ebenso das Theme Divi. Ich kann beliebige Erweiterungen hinzufügen, egal ob technische oder gestalterische Erweiterungen (CSS). Viele Websitebetreiber nutzen fertige Seiten-Layouts. Die gibt es bei mir nicht. Es gibt bei mir keine „Website von der Stange“. Jede Seite entsteht aus dem zuvor entwickelten Konzept.

Auch technische Grundlagen gehören dazu: saubere Seitenstruktur, klare Überschriftenhierarchie, sinnvolle Permalinks, Bildgrößen, Dateibezeichnungen, Ladezeiten. Vieles davon ist später nicht sichtbar. Aber es entscheidet darüber, wie nachhaltig die Website funktioniert.

Dafür setze ich auf eine feste Auswahl bewährter Plugins, statt bei jedem Projekt neu zu suchen: Real Cookie Banner für den Cookie-Hinweis, falls nötig, Perfect Images für die Bildoptimierung, Rank Math SEO oder Yoast SEO für die Suchmaschinenoptimierung, WP Armour gegen Spam über einen Honeypot, WP Mail SMTP für zuverlässigen Mailversand, WP-Sweep zum Aufräumen der Datenbank und UpdraftPlus für die wichtigen Backups von WordPress und der Datenbank. Als Sicherheits-Plugin hat sich Wordfence Security bewährt. Für die lokale Einbindung von Google-Fonts nutze ich kein Plugin, sondern eine schlanke PHP-Anweisung von Sonia Rieder, die im Gegensatz zu einem Plugin keine Updates braucht. Für die Auswertung nutze ich Koko Analytics und nicht Google Analytics, weil ich der Meinung bin, dass Koko datenschutzkonformer ist. Koko speichert keine personenbezogenen Daten, nutzt keine Dienste von Drittanbietern und erfasst lediglich aggregierte Zahlen. Das bedeutet, dass ich die Leistung meiner Website verfolgen kann, ohne Besucherprofile zu erstellen oder Nutzer im Internet zu verfolgen.

Die Technik folgt bei mir immer dem Konzept. Sie löst nichts, was vorher nicht geklärt wurde. Und genau deshalb steht sie in meinem Prozess fast am Ende.

Usability-Tests und Mobil-Optimierung

Wenn die Website technisch steht, ist sie noch nicht fertig. Jetzt beginnt die Phase, in der ich prüfe, wie sie sich tatsächlich anfühlt – und wie sie auf verschiedenen Geräten funktioniert. Ich teste die Seiten auf mehreren Bildschirmgrößen auf originalen Geräten, nicht nur simuliert im Programm: auf Desktop, Tablet (hoch und quer) und Smartphones.

Eine Website wird heute überwiegend auf dem Smartphone gelesen. Diese Tatsache denke ich im gesamten Konzept mit. Manche Unstimmigkeiten fallen erst jetzt auf. Diese Feinjustierung gehört für mich genauso zum Prozess wie die strategischen Vorüberlegungen.

Typische Beispiele, die mir dabei fast auf jeder Website begegnen: Schriften sind auf dem Smartphone oft zu groß und müssen angepasst werden. Außerdem teste ich auch auf dem Pad, in meinem Fall dem iPad, ein weiteres beliebtes Arbeitsgerät, das von vielen Webdesignerin leider vergessen wird. Hier teste ich auch Hoch- und Querformat, die sich stärker unterscheiden, als man denkt: Im Hochformat ähnelt die Darstellung einem großen Smartphone, im Querformat eher einem kleinen Monitor, und beides braucht eigene Anpassungen.

Bei umfangreicheren Menüs wird die Navigation in der Queransicht des iPads oft ein Problem: sie bricht um. Die Folge ist oft genug, dass man die einzelnen Links im Menü nicht mehr sauber ansteuern kann. Bei Susanne war das kein Problem, ihre Navigation hat nur fünf Links. Aber bei umfangreicheren Websites gehört das zu den Punkten, die ich in diesem Schritt korrigiere. Unter Umständen kann das bedeuten, die Schrift in der Navigation zu ändern: entweder einen schmal laufenden Font zu wählen, hierfür eignen sich die Condensed-Schriften sehr gut, wie als Beispiel die Roboto Condensed. Oder man wählt die Schrift kleiner, damit kein Umbruch entsteht.

Wie lange dauert die Erstellung der Website bis zum Launch?

Wie lange dieser gesamte Ablauf dauert, hängt stark davon ab, wie weit die Texte schon vorbereitet sind. Bei einer kleineren Website wie der von Susanne rechne ich mit vier bis acht Wochen von der Konzeptphase bis zum Launch. Muss ich die Texte selbst noch verfassen, dauert es entsprechend länger.

Abschluss

Wenn du merkst, dass du zwischen Selbermachen und Abgeben schwankst: Genau an diesem Punkt steige ich mit meinen Kundinnen ein, in jeder Phase, die du brauchst. [Hier geht es zu meinem Angebot.](https://constanzestraub.de/website-und-logo-aus-einer-hand/) Oder vereinbare gleich ein kostenloses Kennenlerngespräch mit mir.

→ Zum Kennenlerngespräch

Fazit: Vom Konzept zur fertigen Website

Text, Bilder, Suchmaschinenoptimierung, Design, Technik, Usability-Tests: Sechs Bereiche, die auf den ersten Blick unabhängig voneinander wirken. Bei Susanne griffen sie ineinander, weil jede Entscheidung auf dem Konzept aufbaute, das vorher stand. Die Farbwahl folgte der Zielgruppe, die Bildsprache folgte den Texten, die Struktur der Navigation folgte der Informationsarchitektur.
Genau das unterscheidet eine Website mit Konzept von einer Website ohne: Nicht die einzelnen Bausteine sind das Besondere, Text, Farbe und Technik gibt es überall. Entscheidend ist, dass sie alle dieselbe Sprache sprechen.

FAQ zur Website-Erstellung

**Welche Farbe passt zu meiner Website?**
Ausgangspunkt ist nie die Lieblingsfarbe, sondern die Zielgruppe und die Aussage. Bei Susanne stand die Frage: Welche Farbe wirkt beruhigend und passt zum Thema Gesundheit? Die Antwort war Grün, dazu eine Komplementärfarbe als Kontrast für Buttons und Links. Zwei bis drei Farben reichen für eine stimmige Website völlig aus.

**Welche Schriftart soll ich nehmen?**
Serifenlose Schriften wirken sachlich und modern, Serifenschriften eher traditionell und elegant. Wichtiger als die Wahl selbst: Nicht mehr als zwei Schriften kombinieren, und im Fließtext geht Lesbarkeit immer vor Kreativität.

**Es gibt tausend Plugins, welche brauche ich wirklich?**
Die meisten Websites brauchen eine kleine, feste Grundausstattung, keine hundert Plugins: eines für Sicherheit, eines für Backups, eines für Suchmaschinenoptimierung, eines für Bildoptimierung. Ich arbeite mit einer festen Auswahl, statt bei jedem Projekt neu zu suchen, das erspart auch dir spätere Kompatibilitätsprobleme.

**Welches WordPress-Theme sollte ich verwenden?**
Ich arbeite ausschließlich mit Divi. Der Grund: Es ist flexibel genug für jedes Konzept, ich muss also nie das Theme wechseln, wenn sich die Anforderungen ändern. Für Einsteigerinnen ist wichtig: Ein Theme sollte langfristig gepflegt werden, sonst entstehen später Sicherheitslücken.

Website Konzept – Definition, Beispiel und strategische Grundlagen

Website Konzept – Definition, Beispiel und strategische Grundlagen

Ein Website Konzept entscheidet darüber, ob eine Website Orientierung gibt oder verwirrt.Für mich als Webdesignerin heißt das: Das Konzept klärt für mich und für die Kundin die Struktur, das Angebot und die Zielgruppe. Bevor ich auch nur einen Gedanken an Gestaltung und Technik verliere.

Warum ein Website Konzept Stress vermeidet

Als ich vor über 20 Jahren zusätzlich zum Printdesign anfing, Websites für Kunden umzusetzen, musste ich erst einmal Lehrgeld zahlen. Ich habe intuitiv gearbeitet. Iterativ. Und ich dachte, das reicht.

Was brauche ich? Was habe ich? Eine kurze Skizze reicht doch. Die Idee und das Layout hatte ich im Kopf. Ein Konzept? Wieso das denn?

Blöd nur: Während ich schon an der Technik saß, kamen neue Design-Ideen. Dann fiel mir eine Textänderung ein. Oder der Kunde lieferte neue Texte. Ein Bild hier, ein Absatz dort. Und plötzlich passte die Struktur nicht mehr. Also zurück an den Code. Ich bin hin- und her gesprungen zwischen Inhalt, Gestaltung und Technik.

Ergebnis: Stress. Und Zeitverlust.

Heute weiß ich: Nicht die Technik war das Problem. Nicht das Design. Nicht einmal der Inhalt. Es fehlte die Architektur davor. Und genau das ist die konzeptionelle Grundlage.

  • Es trennt Denkprozesse voneinander.
  • Es bündelt Entscheidungen.
  • Es schafft eine logische Reihenfolge.

Seitdem starte ich kein Projekt mehr ohne diese gedankliche Vorarbeit.

Ein Website Konzept ist die strategische Grundlage einer Website. Es legt fest,

  • für wen die Seite gedacht ist,
  • welche Inhalte im Mittelpunkt stehen und
  • wie Besucher durch die Website geführt werden.

Stell dir vor, du möchtest dein Traumhaus bauen. Würdest du einfach zum Baumarkt fahren, wahllos Ziegel, Fenster und eine schicke Haustür kaufen und auf der grünen Wiese anfangen zu mauern? Wohl kaum. Du hättest vermutlich erst einmal einen Bauplan.

Genau das ist ein Website-Konzept. Es ist die gedankliche Vorarbeit, bevor das erste Design-Element gewählt oder die erste Zeile Programmcode geschrieben wird.

Was ist ein Website-Konzept eigentlich?

Ein Website-Konzept (oft auch Homepage-Konzept oder Website-Konzeption genannt) ist das Fundament deiner Seite. Hier klären wir die strategischen Grundlagen, lange bevor wir uns über Farben, Schriften oder technische Spielereien wie Pagebuilder Gedanken machen.

In dieser Phase stellen wir uns die wirklich wichtigen Fragen:

  • Die Zielgruppe: Wer soll sich hier angesprochen fühlen?
  • Die Zielgruppe bestimmt die Sprache: wissenschaftlich, sachlich, locker?
  • Welche Inhalte stehen im Mittelpunkt?
  • In welcher Reihenfolge sollen die Inhalte gesehen werden?
  • Welche Fragen müssen in wenigen Sekunden beantwortet werden?
  • Welche Informationen können später kommen?

Man kann ein Konzept nicht direkt sehen – so wie man das Fundament eines Hauses nicht sieht, wenn es erst einmal steht. Aber du merkst sofort, wenn das Konzept fehlt: Die Seite wirkt unruhig, die Botschaft schwammig, Bilder verwirren, Texte führen in die Irre – und der rote Faden fehlt völlig.

Website Konzept: Zwei Beispiele aus der Praxis, ein Vorgehen

Dass ein gutes Konzept nicht kompliziert sein muss, zeige ich anhand zweier bestehenden Websites, beide Kundinnen von mir. Es ist die Website von Chiara Rieß, Psychotherapeutin, die in Lüneburg eine Praxis für Kinder- und Jugendlichenpsychotherapie führt. Und von Susanne Möpert, sie ist Ernährungsberaterin für Frauen in den Wechseljahren. Bei beiden war die Zielgruppe klar. Und falls du jetzt denkst: Wozu brauche ich dann ein Website Konzept? Meine Antwort: Bei beiden musste ich genau hinschauen, wie Sprache und Konzept aussehen sollen, denn beide unterscheiden sich vollständig.

Auf den ersten Blick wirken beide Seiten fast schon radikal schlicht: Du findest dort keine Downloads, keine komplexen Verkaufs-Funnel, nicht einmal Blogartikel. Und genau diese Schlichtheit zeigt perfekt, was ein gutes Konzept eigentlich leistet. Es ist wie bei einem gut geplanten Bungalow: Alles ist auf einer Ebene, ohne Stolperfallen. Beide Websites funktionieren für ihren Zweck. Warum?

website konzept chiara riess beispiel

Warum „einfach machen“ hier nicht funktioniert hätte und wie das Website Konzept beim Aufbau hilft

Bei Chiara Rieß schien die Zielgruppe klar. Dennoch mussten wir uns Fragen stellen: Menschen, in diesem Fall Eltern, kommen oft mit einer großen Last an Sorgen auf die Website. Jugendliche dagegen spüren vielleicht eher Widerstand, Scham oder ziehen sich zurück. Kinder kommen vielleicht mit Ängsten. Die einen brauchen sofort Hilfe, die anderen wollen erst einmal ganz vorsichtig aus der Distanz gucken, wer da eigentlich hinter der Praxistür steckt.

Die richtigen Fragen, die wir für unser Website Konzept stellen:

  • Wie bauen wir Vertrauen auf? Eltern und Jugendliche müssen sich sofort sicher fühlen. Wie erreichen wir das?
  • Struktur: Wo ist die Praxis? Wie läuft das Erstgespräch ab?
  • Was ist die Gewichtung der Website? Die Kontaktinformationen müssen so leicht zu finden sein wie der Lichtschalter neben der Tür.

Bei Susanne, der Ernährungsberaterin für Frauen in den Wechseljahren, klingt die Zielgruppe ebenfalls zunächst klar. Doch auch hier stelle ich weitere Fragen.

  • Wie alt sind diese Frauen?
  • In welchem Umfeld leben sie?
  • Stehen sie mitten im Berufsleben oder in einer Phase des Umbruchs?
  • Kommen sie mit akuten Beschwerden wie Schlafproblemen, Gewichtszunahme oder Hitzewallungen – oder suchen sie präventive Begleitung?
  • Wollen sie medizinisch fundierte Erklärungen oder eher praktische, alltagstaugliche Lösungen?

Diese Differenzierungen entscheiden darüber, wie die Website später klingt, welche Beispiele gewählt werden, welche Begriffe wir verwenden und wie tief wir in konkrete Themen einsteigen. Eine berufstätige Frau, die zwischen Job, Familie und eigener Gesundheit jongliert, liest anders als eine Frau, die Single ist und Zeit hat, sich intensiv in Fachliteratur einzulesen.

Zielgruppe und Positionierung

Bevor wir also Farben und Schrift definiert haben, musste das Website-Konzept diese harten Nüsse knacken:

  • Der erste Kontakt: Wer soll sich beim Öffnen der Seite als Erstes „gemeint“ fühlen?
  • Die Atmosphäre: Wie schaffen wir es, über den Bildschirm eine Hand zu reichen und Vertrauen aufzubauen?
  • Die Sprache: Wie viel Fach-Chinesisch ist nötig, um Kompetenz zu zeigen, und wie viel Gefühl brauchen wir, um die Menschen wirklich zu erreichen?

Der Realitätscheck: was die Mitbewerber sagen

Nachdem die Zielgruppe geklärt ist, schaue ich zur Seite: die Mitbewerber. Nicht um zu kopieren, sondern um das Spielfeld zu verstehen, auf dem sich meine Kundinnen bewegen. Denn jede Branche hat ihre unausgesprochenen Regeln, die sich auf Websites spiegeln.

Bei der Ernährungsberaterin heißt das konkret: Ich google „Ernährungsberatung Wechseljahre“, „Ernährungsberaterin Hormonbeschwerden“, auch regional. Ich sehe mir an, wer gut sichtbar ist, wie diese Websites aufgebaut sind und welche Sprache dort gesprochen wird.

Muster erkennen

Sehr schnell erkenne ich Muster. Bestimmte Begriffe tauchen immer wieder auf: „ganzheitlich“, „nachhaltig“, „natürlich“, „im Einklang mit deinem Körper“. Das sind keine falschen Begriffe – aber wenn alle sie verwenden, werden sie beliebig, austauschbar. Auch die Bildwelt wiederholt sich: lachende Frauen mittleren Alters, Kräuter, Teetassen, viel Grün.

Passt unsere definierte Zielgruppe in dieses Bild – oder setzen wir bewusst einen anderen Akzent? Wenn alle weich und „wohlfühlig“ auftreten, kann es sinnvoll sein, stärker auf Klarheit und Struktur zu setzen. Mit einer eindeutigen Positionierung machen wir konkrete Türen auf und laden bewußt nur bestimmte Frauen ein. Die Positionierung ist dann kein Zufall, sondern eine bewusste Entscheidung.

Suchbegriffe finden

Aus denselben Fragen ergeben sich später auch die Suchbegriffe: Wer nach „Schlafprobleme Wechseljahre“ statt nach „Ernährungsberatung“ sucht, formuliert sein Problem anders als seine Lösung. Die Sprache der Zielgruppe ist die Sprache, mit der sie auch bei Google sucht.

Auch bei Chiara war der Blick auf andere Praxen Teil der Vorarbeit. Wie treten andere Therapeutinnen in Lüneburg mit ähnlichen Angeboten auf? Die Therapeutinnen-Websites in Lüneburg, die wir uns angesehen haben, zeigen ähnliche Elemente: ruhige Praxisbilder, damit Patienten auf die jeweiligen Praxisräume eingestimmt werden, und eine Farbgebung, die Ruhe und Zuversicht ausstrahlt. Diese Parallelen übernehmen wir bewusst, weil sie funktionieren.

Differenzierung durch Bildsprache

Der Unterschied liegt woanders: Chiara hat sich auf ihren Fotos bewußt für eine legere Kleidung entschieden, anders als auf vergleichbaren Seiten üblich. Kein Business-Kostüm, das auf Kinder eher distanziert wirken könnte. Außerdem haben wir auf der Startseite ein Foto eingesetzt, das sie zusammen mit einem Kind abbildet (von hinten fotografiert). Damit zeigt sie das aufmerksame, zugewandte und verstehende Gespräch mit dem Kind, wichtig für die Vertrauensbasis. Gleichzeitig weiß die Besucherin: Hier geht es um mein Kind.

Ziel und Funktion mit dem Website Konzept bestimmen

Bevor ich über Seiten spreche, kläre ich mit meiner Kundin zuerst eine grundlegende Frage: Wofür ist diese Website eigentlich da?

Das klingt banal. Ist es aber nicht. Viele antworten spontan: „Na ja, ich will gesehen werden.“ Oder: „Ich möchte Informationen bereitstellen.“ Ich frage weiter, welche Seiten wir brauchen, wie wir Inhalte gewichten, welche Angebote im Zentrum stehen, und welche Handlung am Ende vorbereitet wird.

Ohne diese Klarheit könnte ich später ein schönes Layout bauen – aber keine Website, die gezielt arbeitet und unternehmerisch funktioniert. Die Website ist kein Selbstzweck. Sie hat eine Aufgabe. Und diese Aufgabe definieren wir, bevor irgendetwas gestaltet wird.

Bei Chiara war die Aufgabe glasklar: Vertrauen aufbauen, und zwar bei einer Zielgruppe, die mit großer Sorge oder mit Scham auf die Seite kommt. Kein Blog, keine Downloads, keine Marketingsprache – die Funktion dieser Website ist ausschließlich, Sicherheit zu vermitteln und den ersten Kontakt zu erleichtern.

Anders Susanne: Sie wollte nicht nur ihre unterschiedlichen Angebote zeigen, sondern vor allem einen Newsletter integrieren, damit sie über ein Geschenk an ihre Kundinnen (dem sogenannten „Freebie“) neue Kundinnen gewinnen kann.

Website Konzept Beispiel Newsletter Susanne Möpert

Struktur und Navigation im Website Konzept klären

Die Struktur einer Website verständlich planen

Struktur bedeutet: Hierarchie schaffen. Bei beiden Websites ist die Navigation bewußt reduziert gehalten.

Bei Chiara haben wir uns gefragt: Was muss nach ganz links, was ist zweitrangig? Für Eltern ist die Frage nach den „Kosten & Ablauf“ oft zentral. Dieser Punkt stand in der ersten Überlegung noch auf der Startseite. Bis uns klar wurde: Nein, „Kosten & Ablauf“ ist von zentraler Bedeutung und muss deshalb in die Navigation. Und zwar an einem prominenten Platz relativ weit links.

Die Hierarchie der Website beginnt nämlich schon beim Menü: Welcher Menüpunkt gehört an erste oder zweite Stelle? Welcher kann ganz nach rechts (in unserer westlichen Kultur lesen wir von links nach rechts). Und wohin gehören Menüpunkte, die den Besucher zunächst nicht interessieren, wie das Impressum?

  • Welche Inhalte sind zentral, welche untergeordnet?
  • Wie hängen die Seiten logisch zusammen?
  • Gibt es Inhalte, die über ein Untermenü erreichbar sein können?
  • Ist ein komplexes Menü nötig oder ist eine radikale Reduktion sinnvoller?

In der Hauptnavigation auf Chiaras Website finden wir nur sechs Punkte: Start, Psychotherapie, Kosten & Ablauf, Yoga, Über mich und Kontakt. Keine verschachtelten Untermenüs, in denen man sich wie in einem Raum mit 6 Türen verloren fühlt.

Gerade bei sensiblen Themen ist Klarheit das wichtigste Fundament. Zu viele Wahlmöglichkeiten erzeugen Unsicherheit – und wer unsicher ist, verlässt die Website wieder. Jeder Bereich der Website hat eine klare Aufgabe:

  • Psychotherapie erklärt, wie gearbeitet wird.
  • Kosten & Ablauf sorgt für das sichere Gefühl, zu wissen, was auf einen zukommt.
  • Yoga ist ein schöner Bonus, der aber sauber auf einer eigenen Seite steht.
  • Über mich gibt der Besucherin die Gelegenheit, der Therapeutin virtuell die Hand zu schütteln.
  • Kontakt ist die offene Tür, durch die man leicht eintreten kann.

Diese Ordnung ist kein Zufallsprodukt, sondern das Ergebnis intensiver Überlegungen.

Susannes Navigation ist sogar um einen Punkt schlanker: Start, Mit mir arbeiten, Über mich, Kontakt. Auch das war eine bewußte Entscheidung. Sie hat all ihre Angebote auf der Seite „Mit mir arbeiten“ untergebracht. Hier kann die Besucherin sofort mit ihr Kontakt aufnehmen und findet die Angebote übersichtlich auf einer Seite, ohne klicken zu müssen.

Da alle Angebote ineinander greifen, konnten wir hier auf Untermenüs verzichten und sie so überschaubar halten. Die Buttons führen zu ihrer Mailadresse oder zu einem Online-Kalender. Ihr Ziel: Newsletter-Leserinnen gewinnen. Wenn diese groben Inhaltsbereiche feststehen, beginne ich mit der eigentlichen Strukturarbeit: Welche dieser Inhalte gehören in die Hauptnavigation? Was ist zentral, was untergeordnet?

Websitestruktur und Informationsarchitektur visualisieren

Nun sind die Ziele und die Zielgruppe klar. Beide Kundinnen hatten erste Textfragmente, aus denen hervorging, was wo wie auf den einzelnen Seiten verteilt wird. Um die Verteilung der Text zu visualisieren, gehe ich oft ganz oldschool vor: mit Farbstift auf Papier.

Ich arbeite bewusst analog. Auf Papier sehe ich die gesamte Struktur auf einen Blick. Ich kann Bereiche einkreisen oder streichen, ohne dass ich in einem Programm in Ebenen und Module denken muss. Die Zusammenhänge erschließen sich mir so viel unmittelbarer. Außerdem arbeite ich in dieser Phase noch eng mit den Kundinnen zusammen.

Websitestruktur ausdrucken

Tipp: Die gescrollte Website auf Papier

Manchmal baue ich mir sogar eine ganze Webseite aus Papier zusammen: Wenn einzelne Textfragmente einigermaßen klar sind, drucke ich sie aus. Gerade mit der Startseite kann so eine Arbeit sinnvoll sein, denn die Startseite ist anderes als andere Seiten viel modularer und aus unterschiedlichen Bereichen aufgebaut. Ich schneide also die einzelnen Absätze aus, lege sie auf den Boden oder Tisch und verschiebe sie, bis die Reihenfolge stimmt. Danach klebe ich sie untereinander zusammen, bis eine „gescrollte“ Website entsteht.

Warum das sinnvoll sein kann: Am Bildschirm siehst du immer nur einen Ausschnitt. Das kann verwirren oder dazu führen, dass man Teile übersieht. Man scrollt in der Seite nach unten und vergißt, was denn nun oben stand. Hab ich alles schon erlebt. Auf dem Boden siehst du alles auf einmal. Das kann vor allem bei der Startseite helfen, die Übersicht zu behalten und alle wesentlichen Punkte einzuordnen.

Informationsarchitektur bedeutet für mich, Ordnung in Inhalte zu bringen. Eine klare Hierarchie zu schaffen. Besucherinnen sollen intuitiv verstehen, wo sie sich befinden, was wichtig ist, wie sie weiterkommen und wie sie Kontakt aufnehmen.

Zwei Websites bei unterschiedlichen Angeboten

Anders als bei Susanne, die in ihrem Angebot mit Kochkursen und Ernährungsberatung in einem Themenbereich bleibt, sieht das bei Chiara anders aus: Sie ist neben ihrer Expertise als Psychotherapeutin ausgebildete Yogalehrerin und bietet regelmäßig Yoga-Retreats an.

Damit beide Bereiche nicht verschwimmen, hat sie einen anderen Weg gewählt: zwei Websites. Für ihr Yogaangebot habe ich ihr einen Onepager erstellt auf einer Subdomain. Dort finden Besucher ihre Yogatermine. Auf der Website für Psychotherapie wird ihr Yogaangebot ebenfalls erwähnt, da sie Yoga als therapeutisches Mittel anbietet. So bedient sie zwei Zielgruppen: Die Frauen (und Männer), die gern Yoga ausüben und ihre Patienten, die sie mit Yogaübungen therapeutisch unterstützen kann. Auch das ist eine Struktur-Entscheidung: was zusammengehört, und was besser getrennt bleibt.

Was die Trennung bewirkt hat

Die Trennung der beiden Bereiche Psychotherapie und Yoga ermöglichte, dass wir ihr Yogaangebot gezielt optimieren und bewerben konnten. Über Mundpropaganda wurde ihr Angebot mit den Yogaterminen weitergegeben und hatte auch neue Frauen angesprochen. Das Ergebnis: Über ihre Yoga-Website schreibt Chiara Rieß: „5 x mehr Yogaanfragen seit dem Launch der Website.“

Wie sich das Website Konzept in der Sprache zeigt – das Ergebnis einer gelungenen Planung

Bei Chiara war der Startseitensatz eine Herausforderung: Sie darf keine Heilversprechen machen, möchte ihre Patienten aber dennoch mit einer emotionalen Sprache abholen. Und ein „Herzlich Willkommen“ wäre Platzverschwendung. Auch hier war unsere erste Überlegung: Wie geht es den Besucherinnen und Besucher ihrer Website? Was ist ihr Problem? Mit welchen Sorgen suchen sie eine Psychotherapeutin für ihr Kind?

Meine Überlegung: Was geht in einem Menschen vor, der eine psychische Last trägt? Wie fühlen sich Eltern, die sich Sorgen um ihr Kind machen? Was beobachten Eltern an ihren Kindern, wenn es sich anders verhält als sonst? So überlegte ich einen Satz für die Startseite und damit den Türöffner für Chiaras Besucher: „Wenn Lachen stiller wird“. Eine besorgte Mutter könnte sich angesprochen fühlen und denken: „Stimmt, mein Sohn lacht viel seltener als früher.“ Das Konzept gibt hier die Richtung vor: Erst bauen wir eine menschliche Verbindung auf, danach liefern wir die sachlichen Fakten.

Fachbegriffe nur gezielt und sparsam einsetzen

Auf der Seite „Psychotherapie“ finden sich Fachbegriffe wie EMDR oder I.B.T. Aber sie erschlagen niemanden. Chiara zeigt Fachkompetenz, aber wir übersetzen sie in eine Sprache, die Eltern auch dann noch verstehen, wenn sie vor Sorge kaum einen klaren Gedanken fassen können. Auch bei „Kosten & Ablauf“ war uns absolute Klarheit wichtig. Erstgespräch, Dauer, Honorar – alles ist schnell zu finden.

Bei der Ernährungsberaterin zeigt sich dieselbe Konzept-Entscheidung im Text. Viele Texte auf Websites entstehen aus der Perspektive: „Was kann ich?“ Ich frage stattdessen: „Was braucht deine Kundin, um das Gefühl zu haben, verstanden zu sein?“

Auch hier suchen wir wieder die Probleme der Besucherinnen, um die richtige Sprache zu finden. Was quält Frauen in den Wechseljahren besonders häufig? Vier von Fünf Frauen in dieser Phase kennen Hitzewallungen, viele Frauen kennen Kopfschmerzen oder Schlafmangel aus eigenem Erleben. Und wer kennt nicht Filmszenen, in denen Frauen am Handtrockner ihre Achseln trocknen.

Gerade Hitzewallungen können bei Frauen zu einer einschlägigen Erfahrung werden. Körperliche Reaktionen werden als noch unangenehmer wahrgenommen, wenn die Frauen davon in der Öffentlichkeit überrascht werden und sich dem völlig ausgeliefert fühlen. Mein Vorschlag: „Stell dir vor, du bist im Meeting, und die Bluse bleibt trocken.“ Nicht allgemein „Ernährungsberatung“, sondern eine konkrete Situation, die sofort verstanden wird – genau wie bei Chiara zuerst das Gefühl, dann die Fakten.

Und das möchte ich all meinen Kundinnen und Kunden mitgeben: Fühle dich in die Haut der Menschen ein, die du ansprechen möchtest mit deiner Website.

Ein wichtiger Teil im Website Konzept: die Bildsprache

Auch das Bildkonzept folgt dieser Logik. Deshalb denke ich von Anfang an die Bilder mit.

Ich notiere mir früh, welche Atmosphäre entstehen soll. Für die Ernährungsberaterin heißt das: Stockfotos nur dann, wenn sie eine Alternative bieten zu selbst fotografierten Bildern. In ihrem Fall wollten wir die Zutaten für eine gesunde Ernährung mit Appetit machenden Fotos zeigen, mit Fotografien von frischen Gemüse vom Markt. Die Fotos setzen ein wichtiges Signal: Wohlfühlen beginnt bei der richtigen Ernährung. Ich bin gegenüber Stockfotos eher skeptisch. Dennoch ist hier ein Fall, in dem wir sie – gut gewählt – auf der Startseite einsetzen können.
website konzept susanne moepert beispiel

Auf der Seite „Über mich“ gibt es einen Absatz zu Problemen in der Lebensmittelindustrie. Susanne hat viele Jahre in der Lebensmittelbranche gearbeitet und weiß, was dort gut und was dort schief läuft. Deshalb war es ihr wichtig, auch mal Dinge beim Namen zu nennen. Die Bilder zu diesem Abschnitt sind ebenfalls Stockfotos, doch sie illustrieren diesen Themenbereich sinnvoll, ohne wie Fremdkörper zu wirken.

Alle anderen Bereiche, in denen es um sie und um ihre Beratung geht, zeigt sie mit Fotos, für die sie eine professionelle Fotografin beauftragt hat. In dieser Fotosession ist sie planvoll vorgegangen: Die Fotografin fotografierte sie in verschiedenen Beratungssituationen, am PC arbeitend und auf dem Markt, während sie frisches Obst und Gemüse einkauft.

website konzept susanne moepert stockfotos

Chiaras hatte sich von einer Freundin fotografieren lassen zusammen mit einer ihrer Töchter. Dadurch sind lebendige Gesprächssituationen entstanden, die genau das transportieren sollen, was ihr wichtig ist: Der lockere, ungezwungene Zugang zu ihren jungen Klienten.

Als ausgebildete Fotografin sehe ich das besonders deutlich.

  • Ein Bild kann Atmosphäre schaffen.
  • Es kann Nähe herstellen.
  • Es kann Professionalität zeigen.
  • Falsch gewählt kann es aber die Aussage verwischen.

Website Konzept vs. Sitemap vs. Website Strategie

Diese Begriffe werden oft in einen Topf geworfen, dabei haben sie ganz unterschiedliche Aufgaben im Bauplan:

Begriff Worum geht es? Das Ziel
Website Konzept Struktur, Gewichtung, Besucherführung Klarheit
Sitemap Reine Liste aller Seiten Orientierung
Website Strategie Das „Warum“ hinter der Seite Geschäftliches Ziel

Stell es dir so vor: Die Strategie beantwortet die Frage, warum du überhaupt baust (wohnen oder arbeiten?). Die Sitemap ist die Liste der Baumaterialien. Und das Konzept ist der architektonische Plan, der festlegt, in welcher Reihenfolge man die Räume betritt.

Ohne Strategie fehlt die Richtung, ohne Konzept herrscht Chaos in der Bude.

Welche Bestandteile gehören in ein Website Konzept?

Ein Konzept ist keine bunte Zeichnung, sondern ein Paket aus bewußten Entscheidungen:

  • Zielgruppe: Wer steht vor der Tür und was brennt diesen Menschen auf der Seele?
  • Kernangebot: Was ist das Herzstück und was ist nur Beiwerk?
  • Struktur: Welche Seiten brauchen wir wirklich, um die Geschichte zu erzählen?
  • Tonalität: Reden wir förmlich im Anzug oder einfühlsam auf Augenhöhe?
  • Transparenz: Wo finden die Besucher die Infos, die ihnen die Angst vor dem nächsten Schritt nehmen?

Wie umfangreich ist ein Website Konzept – und wie lange dauert es?

Ein Website-Konzept ist kein 30-seitiges Werk. Bei einer kleinen Website reicht oft eine Handvoll Notizen und eine Skizze auf Papier. Entscheidend ist nicht die Seitenzahl des Dokuments, sondern die Klarheit im Kopf.

Je verzweigter das Angebot, je mehr Zielgruppen oder je komplexer die Struktur, desto mehr Zeit braucht die Vorarbeit. Diese Zeit zahlt sich aus: Sie erspart dir später endlose Korrekturschleifen und teure Umbaumaßnahmen an der fertigen Website.

Typische Fehler bei der Website-Konzeption

Oft wird versucht, es jedem recht zu machen. Das sieht man der Website an:

  • Alle sollen angesprochen werden.
  • Nebenangebote werden gleichrangig platziert.
  • Die Startseite wird überladen.

Oder das Design wird vor der Struktur entschieden. Was immer dann passiert, wenn man fertige „Branchen-Layouts“ für seine Website wählt. Dann werden die Inhalte dem Design angepasst, obwohl sie vielleicht ein völlig anders Umfeld brauchen, weil die Aussage des Textes von einem anderen Design besser unterstützt werden würde.
Was ich auch oft sehe: Ausgerechnet die Startseite enthält zu viele Informationen und Grafiken. Das führt dazu, dass den Besuchern nicht klar ist, was eigentlich wichtig ist. Oder sie brauchen zu lange, um die für sie relevanten Informationen zu finden. Das Ergebnis wirkt unruhig – nicht weil die Designerin gepatzt hat, sondern weil das Fundament wackelt.

Fazit: Was ein gutes Website Konzept ausmacht

Ein Website Konzept ist kein theoretisches Dokument für die Schublade. Es ist die unsichtbare Architektur, die deine Besucher leitet. Im Beispiel der Therapeutin sehen wir: Die Ruhe und Klarheit der Seite ist kein Zufall des Designs, sondern das Ergebnis von Planung.

Nach dem Konzept folgt die Umsetzung. Das heißt: Wie aus dieser Struktur fertige Texte, Design und eine technische Website werden, beschreibe ich in Website erstellen lassen: Mein Ablauf von Text bis Launch, wieder am Beispiel der Ernährungsberaterin Susanne.

Häufige Fragen zum Website Konzept

Website Konzept erstellen – 9 strategische Punkte für eine erfolgreiche Website

Warum viele Websites ohne Konzept nicht funktionieren

Was macht eigentlich eine erfolgreiche Website aus?
Kurz gesagt: Sie bringt dir Kunden.

Aber wie wird eine Website erfolgreich? Was konkret muss ich tun, damit sie nicht nur gut aussieht, sondern tatsächlich arbeitet? Damit sie sichtbar wird, Vertrauen aufbaut und Anfragen vorbereitet?

Eine erfolgreiche Website setzt sich aus unzähligen kleinen Puzzleteilen zusammen, thematisch gruppiert in Inhalt, Design und Technik. Und damit all diese Teilchen ein erfolgreiches Ganzes ergeben, muss vorher sortiert und strukturiert werden.

In diesem Artikel erfährst du, wie du ein Website Konzept erstellen kannst – anhand von 9 strategischen Schritten aus meiner Praxis.

Das steht am Anfang jeder professionellen Website. Eine konvertierende Website beginnt nicht mit einem Theme und nicht mit Farben – sondern mit Vorüberlegungen. Denn das schönste Design und die modernste Technik nutzen nichts, wenn die Besucher auf der Website nicht finden, was sie suchen – oder nicht verstehen, warum sie bleiben sollten.

Was ist ein Website Konzept?

Ein Website-Konzept ist die strategische Grundlage einer Website. Es klärt Zielgruppe, Struktur, Inhalte, Suchintention und technische Umsetzung – bevor Gestaltung beginnt. Und genau hier liegt der Unterschied: Eine Sitemap ist noch kein Website-Konzept. Ein schönes Layout ersetzt keine Struktur. Und ein Relaunch ohne gedankliche Vorarbeit bleibt Kosmetik.

Ein gutes Website Konzept ist die Blaupause für deine Online-Präsenz. Es ist Plan und strategische Grundlage deiner Website. Es beantwortet die grundlegenden Fragen:

Für wen ist diese Website gedacht?
Welches Kernangebot steht im Mittelpunkt?
Welche Botschaft soll zuerst verstanden werden?
Welche Seiten braucht es wirklich?
Wie werden Inhalte gewichtet?
Welche Handlung soll vorbereitet werden?

Website Konzept erstellen: Der strategische Ablauf

Wenn wir ein Website Konzept erstellen, strukturieren wir Inhalte, bevor sie gestaltet werden. Es legt die Seitenarchitektur fest und definiert Prioritäten. Es sorgt dafür, dass deine Website nicht nur gut aussieht, sondern klar führt.

Und vor allem:
Es sorgt dafür, dass deine Website deinem heutigen Business entspricht – nicht der Version von vor fünf Jahren.

Warum ich heute keine Website mehr ohne Konzept starte

Als ich vor 20 Jahren begann, Websites umzusetzen, musste ich erst einmal Lehrgeld zahlen. Ich habe intuitiv gearbeitet. Iterativ. Und ich dachte, das reicht.

Was brauche ich?
Was habe ich?
Eine kurze Skizze reicht doch.

Die Idee und das Layout hatte ich im Kopf.
Ein Konzept? Wieso das denn?

Blöd nur: Noch während ich an der Technik saß, kamen neue Design-Ideen. Dann fiel mir eine Textänderung ein. Ein Bild hier, ein Abschnitt dort. Und plötzlich passte die Struktur nicht mehr.

Also zurück an den Code.
Ich bin hin- und her gesprungen zwischen Inhalt, Gestaltung und Technik.

Drei völlig unterschiedliche Bereiche.

Ergebnis: Stress. Und Zeitverlust.

Heute weiß ich: Nicht die Technik war das Problem. Nicht das Design. Nicht einmal der Inhalt.

Es fehlte die Architektur davor.

Und genau das ist die konzeptionelle Grundlage.

  • Es trennt Denkprozesse voneinander.
  • Es bündelt Entscheidungen.
  • Es schafft eine logische Reihenfolge,

Eine Website entsteht nicht dadurch, dass man Module verschiebt.
Sie entsteht dadurch, dass man vorher Klarheit schafft.

Seitdem starte ich kein Projekt mehr ohne diese gedankliche Vorarbeit.
Und ich empfehle das auch niemandem, der seine Website als Instrument für sein Business begreift.

Beispiel aus meiner Praxis: Website-Konzept für eine Ernährungsberaterin

In diesem Artikel geht es mir nicht um Theorie, sondern um meine konkrete Arbeitsweise. Ich zeige dir, welche strategischen Fragen ich vor jedem Projekt kläre – lange bevor Design oder Technik ins Spiel kommen.

  • Was mache ich als allererstes, bevor ich eine Website aufbaue?
  • Welche Entscheidungen treffe ich, bevor auch nur ein Layout entsteht?

Das Beispiel ist die Website einer Ernährungsberaterin für Frauen in den Wechseljahren.

Bevor ich nur einen Pixel schiebe, kläre ich gemeinsam mit der Kundin die Grundlagen: Zielgruppe, Gewichtung der Angebote, Positionierung, Struktur.  Ich mache mir Notizen. Ich zeichne Skizzen. Aber nicht, um eine hübsche Sitemap zu basteln – sondern um die Architektur festzulegen. Diese Vorarbeit ist kein Beiwerk. Sie ist der Plan. Ähnlich dem Grundriss zum Bau eines Hauses.

Stimmt der Grundriss nicht, hilft später auch die schönste Fassade nichts.

Wenn ich mit einer Kundin ein Website Konzept erstellen will, gehe ich strukturiert vor. Diese 9 strategischen Punkte kläre ich in jedem Projekt.

1. Zielgruppe konkretisieren – Für wen ist diese Website wirklich gedacht?

Bevor ich mit Kundinnen über Ziele, Seiten oder Angebote spreche, klären wir zuerst die Zielgruppe.

Das ist immer der erste Schritt. Manchmal ist die Zielgruppe schon klar formuliert, wie bei meiner Kundin, der Ernährungsberaterin für Frauen in den Wechseljahren. In diesem Fall wussten wir zu Beginn zumindest, in welche Richtung wir denken. Oft genug jedoch sind die Zielgruppen deutlich unklarer.

Dann überlegen wir in die Tiefe. Das Website Konzept spiegelt diese Überlegungen wider – nicht nur in Worten, sondern später in Struktur, Gewichtung und Tonalität.
Doch auch bei meinem Beispiel reicht „Ich begleite Frauen“ nicht. „Ich arbeite mit Frauen, die sich gesünder ernähren möchten“ ebenfalls nicht.

Das sind Beschreibungen. Aber noch keine strategische Grundlage für eine Website.

Eine Website spricht nie „alle“ an. Sie spricht immer eine klar definierte Menschengruppe an – oder sie bleibt austauschbar.

Warum „alle“ für Google und für deine Positionierung „niemand“ bedeutet

Bei der Ernährungsberaterin für Frauen in den Wechseljahren klingt die Zielgruppe zunächst klar. Doch auch hier stelle ich weitere Fragen.

  • Wie alt sind diese Frauen?
  • In welchem Umfeld leben sie?
  • Stehen sie mitten im Berufsleben oder in einer Phase des Umbruchs?
  • Kommen sie mit akuten Beschwerden wie Schlafproblemen, Gewichtszunahme oder Hitzewallungen – oder suchen sie präventive Begleitung?
  • Wollen sie medizinisch fundierte Erklärungen oder eher praktische, alltagstaugliche Lösungen?

Diese Differenzierungen entscheiden darüber, wie die Website später klingt, welche Beispiele gewählt werden, welche Begriffe wir verwenden und wie tief wir in bestimmte Themen einsteigen. Eine berufstätige Frau, die zwischen Job, Familie und eigener Gesundheit jongliert, liest anders als eine Frau, die Single ist und Zeit hat, sich intensiv in Fachliteratur einzulesen.

Gerade wenn die Zielgruppe noch nicht klar ist, nehme ich mir an dieser Stelle Zeit. Wir schauen uns bisherige Kundinnen an, sprechen über gelungene und weniger gelungene Projekte, über Gespräche, die gut verliefen – und über solche, die anstrengend waren. Oft zeigt sich dabei sehr deutlich, mit wem meine Kundin wirklich arbeiten möchte – und mit wem nicht.

Erst wenn diese Zielgruppe klar vor Augen steht, kann ich weiterdenken. Denn von ihr hängt alles Weitere ab:

  • die Funktion der Website
  • die Gewichtung der Angebote
  • die Struktur
  • die Sprache
  • das Bildkonzept
  • das Design

Ohne diese Grundlagen könnte ich zwar eine Website bauen. Aber keine, die gezielt Vertrauen aufbaut, die Positionierung stärkt und langfristig die richtigen Anfragen anzieht.

Für mich beginnt ein Website Konzept deshalb immer mit der Frage:

Für wen genau machen wir das hier?

2. Was machen direkte Wettbewerber? Ein strategischer Realitätscheck

Nachdem wir die Zielgruppe geklärt haben, schaue ich zur Seite: die Mitbewerber.

Nein, nicht um zu kopieren. Eine Markanalyse gehört dazu: Wir müssen das Spielfeld verstehen, auf dem sich meine Kundin bewegt.

Bei der Ernährungsberaterin für Frauen in den Wechseljahren heißt das konkret: Ich google.

„Ernährungsberatung Wechseljahre“, „Ernährungsberaterin Hormonbeschwerden“, vielleicht auch regional kombiniert mit einer Stadt. Ich sehe mir an, wer gut sichtbar ist, wie diese Websites aufgebaut sind und welche Sprache dort gesprochen wird.

Sehr schnell erkenne ich Muster. Bestimmte Begriffe tauchen immer wieder auf: „ganzheitlich“, „individuell“, „natürlich“, „im Einklang mit deinem Körper“. Das sind keine falschen Begriffe – aber wenn alle sie verwenden, werden sie beliebig, austauschbar.

Auch die Bildwelt wiederholt sich: lachende Frauen mittleren Alters, Kräuter, Teetassen, viel Grün. Wenn alles ähnlich klingt und ähnlich aussieht, entsteht kein klarer Unterschied. Und genau dort beginnt die strategische Entscheidung.

Passt unsere definierte Zielgruppe in dieses Bild – oder setzen wir bewusst einen anderen Akzent? Wenn alle weich und „wohlfühlig“ auftreten, kann es sinnvoll sein, stärker auf Klarheit und Struktur zu setzen. Wenn viele sehr medizinisch argumentieren, kann eine zugänglichere, alltagstaugliche Sprache ein Unterschied sein. Der Blick auf die Mitbewerber hilft uns auch dabei, Überfrachtung zu erkennen. Manche Websites versuchen, alles gleichzeitig abzudecken: Wechseljahre, Darmgesundheit, Gewichtsreduktion, Stressmanagement, Nahrungsergänzung, Rezepte, Workshops.

Auf den ersten Blick wirkt das umfangreiche Angebot attraktiv. Auf den zweiten Blick wird es unübersichtlich. Das bedeutet: Wir prüfen nicht nur, wo sich meine Kundin einordnet – sondern wo sie sich bewusst positionieren möchte.

Vielleicht liegt ihre Stärke genau darin, sich ausschließlich auf ein klar umrissenes Thema zu konzentrieren. Vielleicht ist es ihre ruhige, strukturierte Art. Vielleicht ihr wissenschaftlicher Hintergrund. Vielleicht ihre Erfahrung in der Lebensmittelindustrie.

Positionierung ist keine zufällige Eigenschaft. Sie ist eine Entscheidung.

Diese Analyse ist kein großes Marktforschungsprojekt. Sie ist ein realistischer Abgleich zwischen Zielgruppe, Markt und eigener Haltung.

Wir schauen uns an, was bereits da ist – und entscheiden dann bewusst, wie unsere Website darin bestehen soll. Erst danach gehe ich wieder zurück und definiere mit der Kundin genauer, welche Funktion ihre Website im Vergleich zu anderen übernehmen soll.

So entsteht aus Zielgruppe und Marktbeobachtung eine fundierte Grundlage für den nächsten Schritt.

3. Ziel und Funktion der Website: Welche Aufgabe soll deine Website erfüllen?

Bevor ich über Seiten spreche, kläre ich mit meiner Kundin zuerst eine grundlegende Frage:

Wofür ist diese Website eigentlich da?

Das klingt banal. Ist es aber nicht.

Viele antworten spontan: „Na ja, sichtbar sein.“ Oder: „Informationen bereitstellen.“ Manchmal auch: „Damit man mich findet.“

Doch das sind Zustände – keine strategischen Ziele.

Bei der Ernährungsberaterin für Frauen in den Wechseljahren frage ich konkreter. Möchte sie in erster Linie 1:1-Beratungen verkaufen? Gruppenprogramme? Einen Onlinekurs? Möchte sie Vorträge anbieten? Oder geht es ihr darum, über einen Newsletter langfristig Vertrauen aufzubauen?

Je nachdem verändert sich die gesamte Ausrichtung der Website. Eine Website kann sehr unterschiedliche Funktionen haben. Sie kann ein digitales Schaufenster sein, eine Terminmaschine, eine Vertrauensplattform oder eine Verkaufsseite. Sie kann informieren, vorbereiten, überzeugen oder direkt verkaufen.

In der Praxis vermischt sich das oft.

Im Konzept entscheide ich mich bewusst, welche Funktion im Vordergrund steht. Denn eine Website kann vieles – aber sie sollte nicht alles gleichzeitig priorisieren.

Wenn die Ernährungsberaterin sagt: „Ich möchte vor allem 1:1-Beratungen verkaufen“, dann muss sich das in der Struktur widerspiegeln. Dann steht dieses Angebot im Mittelpunkt. Wenn sie hingegen sagt: „Ich möchte mittelfristig einen Onlinekurs aufbauen und zunächst Reichweite über Inhalte aufbauen“, verschiebt sich der Schwerpunkt deutlich in Richtung Blog und Newsletter-Angebot.

An diesem Punkt grenzen wir auch ein, welche Art von Anfragen sie bekommen möchte – und welche nicht. Möchte sie nur Selbstzahlerinnen? Möchte sie bestimmte Themen ausschließen? Arbeitet sie mit klar definierten Schwerpunkten oder eher offen?

All das gehört zur Funktion der Website. Erst wenn diese Funktion klar ist, kann ich weiterdenken. Denn sie entscheidet darüber,

  • welche Seiten wir brauchen,
  • wie wir Inhalte gewichten,
  • welche Angebote im Zentrum stehen,
  • und welche Handlung am Ende vorbereitet wird.

Ohne diese Klarheit könnte ich später ein schönes Layout bauen – aber keine Website, die gezielt arbeitet und unternehmerisch arbeitet. Das ist ein zentraler strategischer Punkt, wenn wir ein Website Konzept erstellen:

Die Website ist kein Selbstzweck. Sie hat eine Aufgabe. Und diese Aufgabe definieren wir, bevor irgendetwas gestaltet wird.

4. Websitestruktur und Informationsarchitektur

Vor der technischen Arbeit zeichne ich die grobe Struktur auf. Und zwar ganz oldschool: mit Farbstift auf Papier.

Ich arbeite bewusst analog. Auf Papier sehe ich die gesamte Struktur auf einen Blick. Ich kann Bereiche einkreisen oder streichen, ohne dass ich in einem Programm in Ebenen und Module denken muss. Die Zusammenhänge erschließen sich mir so viel unmittelbarer.

Dazu legen wir vorher die groben Inhalte fest. Im Idealfall liegen die Texte bereits vor. Das ist allerdings selten so. Oft gibt es einzelne Textbausteine, alte Webseiten, Stichpunkte oder nur Gedanken im Kopf der Kundin. Genau deshalb ist dieser Schritt so wichtig.

Wir sortieren zunächst stichwortartig das, was existiert – und benennen klar, was noch fehlt. Schon hier entstehen die ersten strategischen Entscheidungen. Bei der Ernährungsberaterin sammeln wir zunächst die Hauptbereiche: Startseite, Über mich, Angebot. Vielleicht zwei unterschiedliche Beratungsformate. Eventuell ein Blog. Ein Bereich für häufige Fragen. Manchmal kommt ein Newsletter dazu oder ein Download-Angebot.

Das sind noch keine ausgearbeiteten Texte, sondern Themenfelder. Erst wenn diese groben Inhaltsbereiche feststehen, beginne ich mit der eigentlichen Strukturarbeit. Jetzt zeichne ich. Und jetzt wird entschieden.

  • Welche dieser Inhalte gehören in die Hauptnavigation?
  • Was ist zentral, was untergeordnet?

Welche Angebote stehen nebeneinander – und welche sind eigentlich Variationen desselben Themas?

Bei der Ernährungsberaterin kann sich zum Beispiel zeigen, dass zwei geplante Angebote inhaltlich sehr ähnlich sind. Das könnte Besucherinnen verwirren. Oder wir merken, dass ein zusätzlich geplanter Rezeptbereich zwar sympathisch ist, aber von der der individuellen Beratung ablenkt.

In diesem Fall war die bessere Entscheidung, die Rezept-Tipps in einem Newsletter zu veröffentlichen. Die Website und der Fokus blieben eindeutiger.

Informationsarchitektur bedeutet für mich, Ordnung in Inhalte zu bringen. Eine klare Hierarchie zu schaffen. Ebenen zu definieren. Besucherinnen sollen intuitiv verstehen, wo sie sich befinden, was wichtig ist und wie sie weiterkommen.

Die handgezeichnete Skizze ist noch kein Layout – sondern eine funktionale Struktur. Sie zeigt, welche Seiten es gibt, wie sie zusammenhängen und welchen Weg eine Besucherin typischerweise nimmt.

Diese Skizze ist unser Grundriss.
Und wie beim Hausbau gilt: Wenn der Grundriss nicht stimmt, hilft später auch keine schöne Fassade. Dann wird improvisiert, umgebaut – oder eben mit einem WC ohne Wasseranschluss gelebt.

5. Content Strategie – Texte und Bilder

Auf die richtige Sprache kommt es an

Wenn die Struktur steht, füllen wir sie nicht einfach mit Text. Wir überlegen, welche Inhalte welche Aufgabe übernehmen. Die Architektur gibt den Rahmen vor, aber der Content entscheidet, ob eine Website Erfolg hat.

Bei der Ernährungsberaterin bedeutet das: Welche Themen gehören auf die Startseite – und welche nicht? Was muss eine Besucherin sofort verstehen, und was kann später folgen? Ich prüfe gemeinsam mit der Kundin, ob ihre bisherigen Texte wirklich die Fragen ihrer Zielgruppe beantworten oder ob sie eher ihr eigenes Fachwissen darstellen.

Viele Texte entstehen aus der Perspektive: „Was kann ich?“ Das sehe ich leider noch auf vielen Websites.

Ich frage: „Was braucht deine Kundin, um das Gefühl zu haben, verstanden zu sein?“

Wenn wir wissen, dass wir Frauen in den Wechseljahren ansprechen, die mit konkreten Beschwerden kämpfen, wie Hitzewallungen, Gewichtszunahme oder oder – dann muss sich genau das im Text widerspiegeln. Nicht allgemein „Ernährungsberatung“, sondern: Schlafprobleme, Hitzewallungen, Gewichtszunahme, Stimmungsschwankungen. Die Texte gehen konkret auf die Probleme ein. In einfacher Sprache, weil sie eher Gefühle anspricht.

Bilder ergänzen die Texte

Gleichzeitig denke ich die Bilder mit. Ich notiere mir früh, welche Atmosphäre entstehen soll. Ruhig und sachlich? Warm und einladend? Klar und strukturiert? Für die Ernährungsberaterin heißt das: Keine austauschbaren Stockfotos mit Avocado und Teetasse, wenn sie eigentlich fundiert und strukturiert arbeitet. Vielleicht braucht es Bilder, die Beratungssituationen zeigen. Oder eine Marktsituation, die zeigt, wo gesunde Ernährung beginnt. So spiegelt die Bildwelt das wider, was die Beratung wirklich ausmacht.

Als ausgebildete Fotografin sehe ich das besonders deutlich.

  • Ein Bild kann Atmosphäre schaffen.
  • Es kann Nähe herstellen.
  • Es kann Professionalität zeigen.
  • Falsch gewählt kann es aber die Aussage verwischen

Bilder sind mehr als nur Deko: Die Psychologie der Optik

Text und Bild entstehen nicht getrennt voneinander. Sie bilden eine Einheit. Wenn ein Abschnitt Vertrauen aufbauen soll, unterstütze ich das nicht nur durch Worte, sondern auch durch die Bildauswahl. Wenn ein Bereich Orientierung geben soll, braucht er klare Überschriften, eine nachvollziehbare Zwischenstruktur und eine verständliche Sprache.

Gleichzeitig kann man gerade bei Bildern einiges falsch machen. Immer wieder sehe ich viel zu große Dateigrößen: Fotos mit einer Dateigröße von über 100 KB verlangsamen die Ladezeit der Website. Und auch bei der Kompression und den Formaten werden viele Fehler gemacht. Wie du die vermeidest, habe ich in diesem Artikel beschrieben:

Content-Strategie bedeutet für mich deshalb nicht „viel Inhalt“, sondern gezielter Inhalt. Jede Seite bekommt eine Aufgabe. Jeder Abschnitt erfüllt eine Funktion. Und alles, was diese Funktion nicht unterstützt, kommt entweder an eine andere Stelle – oder fliegt raus.

Erst wenn Texte und Bilder in dieser Logik zusammenpassen, gehe ich zum nächsten Punkt über.

6. Suchmaschinenoptimierung – von Anfang an mitgedacht

Suchmaschinenoptimierung beginnt für mich nicht mit einem Plugin und auch nicht mit einer Liste von Keywords. Sie beginnt in dem Moment, in dem wir über Zielgruppe und Inhalte sprechen. SEO ist für mich Haltung und Denkweise. Deshalb steht SEO nicht etwas am Ende des Konzepts, sondern bereits an Punkt 6.

Bei der Ernährungsberaterin stellte sich früh die Frage: Wie suchen ihre potenziellen Kundinnen eigentlich? Geben sie „Ernährungsberatung Wechseljahre“ ein? „Hormonbeschwerden Ernährung“? „Gewichtszunahme ab 50“? Oder sehr konkrete Symptome wie „Schlafprobleme Wechseljahre was hilft“?

Diese Überlegungen beeinflussen bereits die Struktur.

Wenn wir wissen, dass viele Frauen mit konkreten Beschwerden suchen, kann es sinnvoll sein, diese Themen klar zu benennen – nicht versteckt im Fließtext, sondern sichtbar in Überschriften und eigenen Abschnitten. Wenn wir feststellen, dass der Begriff „Wechseljahre“ zwar gesucht wird, aber viele Mitbewerber ihn sehr allgemein verwenden, können wir präziser werden.

Suchmaschinenoptimierung heißt für mich: Die Sprache meiner Kundin mit der Sprache ihrer Zielgruppe abzugleichen.

Natürlich gibt es Begriffe, die fachlich interessant sind. Trotzdem stelle ich mir die Frage: Werden sie auch gesucht?

Wenn nicht, brauchen sie vielleicht keinen eigenen Schwerpunkt – oder sie müssen anders formuliert werden.

Später kommen technische Aspekte hinzu: saubere Überschriftenstruktur, sinnvolle Seitentitel, Meta-Beschreibungen, Ladezeiten. Aber die Grundlage entsteht hier, in der Konzeptphase.

Bei der Ernährungsberaterin bedeutet das konkret: Wir nennen eine Seite nicht einfach „Angebot“, sondern formulieren eindeutig, worum es geht. Oder wir entscheiden bewusst, ob ein Blog strategisch sinnvoll ist – oder ob ein Newsletter besser zur Zielsetzung passt.

SEO ist deshalb kein Zusatzpunkt am Ende des Projekts.

Es ist eine Denkweise, die das gesamte Website-Konzept durchzieht.

7. Webdesign – Stimmung, Farbe und Typografie

Form follows Content. Auch bei Websites.

Erst wenn Struktur, Inhalte und Suchbegriffe geklärt sind, beginne ich mit der gestalterischen Ebene.

Dafür lege ich ein Moodboard an.

Ich sammle visuelle Eindrücke, Farbwelten, Bildstimmungen, Typografie-Beispiele. Die Basis ist wieder das, was wir zuvor strategisch erarbeitet haben. Die Zielgruppe, die Positionierung und die Abgrenzung vom Wettbewerb geben hier meine Arbeit vor.

Bei der Ernährungsberaterin für Frauen in den Wechseljahren stellt sich zum Beispiel die Frage: Soll die Website weich und „wohlfühlig“ wirken – wie viele andere in diesem Bereich? Oder eher klar, strukturiert und sachlich? Soll sie mit warmen Naturtönen arbeiten oder mit reduzierten, aber eindeutigen Farben?
Was lässt sich als primäre Farbe definieren und welche Farbe wählen wir für Buttons – die auffällig, aber nicht zu knallig sein sollen, um nicht vom Thema abzulenken? Welche Typografie transportiert Vertrauen, ohne beliebig zu sein?

Das Moodboard ist keine Spielerei oder nettes Gimmik, sondern hilft uns, Entscheidungen zu treffen. Es hilft der Kundin und mir, eine visuelle Richtung festzulegen, bevor die eigentliche Gestaltung beginnt. Wir beantworten Fragen wie: Welche Stimmung soll entstehen? Welche Haltung soll sichtbar werden? Wie soll sich die Website anfühlen, wenn man sie öffnet?

Auf dieser Grundlage entwickle ich dann das visuelle Konzept: Farbpalette, Schriftkombination, Grundlayout, Bildsprache. Erst wenn diese gestalterischen Parameter definiert sind, gehe ich in die konkrete Ausarbeitung. Ein Moodboard hat einen weiteren Vorteil: Indem du Farbwirkung und Kontraste testest, Schriften ausprobierst, Breiten festlegst kannst du einige Fehler vermeiden, die gern beim Design einer Website gemacht werden. Welche 9 Fehler besonders häufig gemacht werden, hab ich hier beschrieben: 

Design ist für mich die Übersetzung der Strategie in eine visuelle Sprache. Es macht sichtbar, was wir zuvor inhaltlich geklärt haben. Wenn die Architektur steht und die Inhalte klar sind, erfüllt das Design seine eigentliche Aufgabe: die Inhalte verstärken.

8. Technische Umsetzung der Website

Jetzt kommt der Moment, ob die vorherige Denkarbeit erfolgreich war. Struktur, Inhalte, Suchbegriffe und gestalterische Richtung sind festgelegt – nun beginne ich mit der technischen Umsetzung.

Welche Plattform für dein Projekt sinnvoll ist, habe ich hier ausführlicher beschrieben:

Ich arbeite ausschließlich mit WordPress. In der Regel setze ich das Theme Divi ein, weil es mir die Flexibilität gibt, die zuvor entwickelte Struktur exakt umzusetzen. Das Werkzeug steht dabei nicht im Vordergrund. Entscheidend ist, dass es die konzeptionellen Entscheidungen spiegelt.

Eines mag ich bei der Umsetzung in WordPress nicht: fertige Seiten-Layouts. Deshalb arbeite ich nicht mit Komplett-Templates, die ich nur anpasse. Es gibt bei mir keine „Website von der Stange“.

Ich habe einzelne gespeicherte Bausteine und Layout-Elemente, die sich bewährt haben und wiederkehren. Aber jede Seite entsteht aus dem zuvor entwickelten Konzept.
Fertige Seiten-Layouts haben für mich einen klaren Nachteil: Man quetscht Inhalte in vorgegebene Bereiche. Das führt fast immer zu Kompromissen – in der Struktur, im Text oder in der Wirkung.

Deshalb baue ich jede Website individuell neu auf. Das betrifft Abstände, Schriftgrößen, Modul-Anordnungen, Bildgrößen und die gesamte Seitenlogik. Bei der Ernährungsberaterin bedeutet das konkret: Die zuvor gezeichnete Struktur wird jetzt in WordPress umgesetzt. Die Navigation wird angelegt, Seiten logisch miteinander verknüpft, Inhalte eingefügt und anschließend gestaltet.

Auch technische Grundlagen gehören dazu: saubere Seitenstruktur, klare Überschriftenhierarchie, sinnvolle Permalinks, Bildgrößen, Dateibezeichnungen, Ladezeiten.

Vieles davon ist später nicht sichtbar.
Aber es entscheidet darüber, wie nachhaltig die Website funktioniert.

Die Technik folgt bei mir immer dem Konzept. Sie löst nichts, was vorher nicht geklärt wurde. Und genau deshalb steht sie in meinem Prozess fast am Ende.

9. Usability-Tests und Mobil-Optimierung

Wenn die Website technisch steht, ist sie noch nicht fertig. Jetzt beginnt die Phase, in der ich prüfe, wie sie sich tatsächlich anfühlt – und wie sie auf verschiedenen Geräten funktioniert. Ich teste die Seiten auf mehreren Bildschirmgrößen auf originalen Geräten, nicht nur simuliert im Programm.

Dazu öffne ich die Website auf

  • unterschiedlichen Desktop-Geräten,
  • auf dem Tablet (hoch und quer) und
  • auf Smartphones.

Die Tests mache ich nicht nur technisch, sondern auch inhaltlich. Haben die Abstände genug Luft? Bleiben Überschriften lesbar? Ist ein Abschnitt auf dem Handy zu sehr versteckt? Wie lange muss man scrollen bzw. wischen? Muss ein Bild anders beschnitten werden? Müssen Positionen angepasst werden?

Gerade auf mobilen Geräten verändern sich Proportionen stark. Ein großzügiger Header auf dem Desktop gerät auf dem Smartphone zu wuchtig. Texte, die am großen Bildschirm harmonisch gegliedert sind, brauchen auf dem Smartphone vielleicht eine andere Struktur. Der Test auf einem oder besser zwei unterschiedlichen Smartphones ist deshalb für mich Pflicht.

Eine Website wird heute überwiegend auf dem Smartphone gelesen. Diese Tatsache denke ich im gesamten Konzept mit.

Usability bedeutet für mich: Die Website soll sich selbstverständlich bedienen lassen. Besucherinnen sollen nicht überlegen müssen, wo sie klicken oder wie sie zurückfinden. Navigation, Hierarchie und Handlungsaufforderungen müssen intuitiv funktionieren.

Manche Unstimmigkeiten fallen erst jetzt auf. Ein Absatz wirkt zu gequetscht. Ein Button verdrängt den Folgetext. Eine Information taucht an zwei Stellen auf.
Diese Feinjustierung gehört für mich genauso zum Website-Konzept wie die strategischen Vorüberlegungen.

Erst wenn Struktur, Inhalt, Gestaltung und Technik auch im realen Gebrauch stimmig sind, ist die Website wirklich bereit, online zu gehen.

Struktur vor Gestaltung

Wenn du beim Lesen gemerkt hast, dass deine Website zwar Inhalte hat, aber keinen klaren Aufbau, dann liegt das selten am Design.

Meist fehlt die gedankliche Vorarbeit.

Ein Website-Konzept entsteht nicht nebenbei. Es braucht Abstand, Struktur und die Bereitschaft, Entscheidungen zu treffen: Was gehört ins Zentrum? Was kann weg? Was ist heute dein Kernangebot? An diesem Punkt steige ich mit meinen Kundinnen ein. Wir entwickeln zuerst die Architektur. Alles andere – Gestaltung, Technik, SEO – baut darauf auf.

Wenn du dein Website-Konzept nicht allein durchdenken möchtest, sondern strukturiert erarbeiten willst, dann lass uns darüber sprechen. Hier geht es zu meinem Angebot. Oder vereinbare gleich ein kostenloses Kennenlerngespräch mit mir.

→ Zum Kennenlerngespräch

FAQ zum Website-Konzept

50 Fun Facts über mich

50 Fun Facts über mich

53 Dinge, die du (vielleicht) noch nicht von mir wusstest

Fun Facts? Wozu das? Was gibt es schon von mir zu berichten? Ich bin keine Heldin und keine Abenteuerin. Ich bin sogar ein ziemlicher Angsthase.
Aber Hasen können super Haken springen… Und schwups – schon wird diese Aktion zu einer unendlichen Geschichte. Und ich bin überrascht, wieviel gleiche Interessen und liebenswerte Macken ich mit anderen teile. Die Welt ist eben klein und wunderbar. #RapidBlogFlow2022.

  • Als Mädchen wollte ich Künsterin werden und dachte, dass ich schon irgendwie „entdeckt“ werde. Irgendwann hab ich mich als Grafik- und Webdesignerin selber entdeckt.
    Dafür male ich, wenn ich dazu Zeit habe. Es gab sogar schon einige Artikel meiner Ausstellungen in der Presse (okay, ins MoMA werde ich es nicht schaffen).
  • Ich liebe alles nussige. Mein genialster Brotaufstrich: Erdnusscreme. Und manchmal ist meine Kaffeebeilage statt Kuchen: Haselnussmus.
  • Meine Mutter erzählte mir mal, dass sie während der Schwangerschaft mit mir ständig Heißhunger hatte auf Nüsse. Zufall?
  • Ich hab noch nie einen Führerschein besessen.
  • Genau: Eine Führerscheinprüfung hab ich nie gemacht.
  • Ich tanze leidenschaftlich gern. Wenn mir danach ist, drehe ich im Büro Musik auf und tanze, bis mir die Puste ausgeht (natürlich nur, wenn ich nicht im Kundengespräch bin).
  • Ich mag Fußball nicht und finde Fußballübertragungen fürchterlich. Überhaupt den ganzen Bohei um Fußball, Liga und dieses Gedöns kann nicht verstehen. Kann man die vielen Millionen nicht sinnvoll investieren?
  • Klingt jetzt komisch: Ich bin total entzückt, sobald ich irgendwo einen Tischfußball sehe. Dann kann ich stundenlang mit Begeisterung kickern.
  • Abgesehen von Fußball mag ich Ballspiele aller Art. Als Mädchen hab ich mit Begeisterung Badminton gespielt und meinen Onkel mit flachen Schüssen genervt, die er selten erwischt hat.
    Und Tischtennis: Im Keller bei meiner Mutter stand früher eine Tischtennisplatte. Die war vor mir nie sicher. Und alle, die die Herausforderung angenommen haben, wurden von mir mit blitzschnellen Schmetterbällen bedacht.
  • Wann immer es geht, schmeiße ich Stahlkugeln in den Sand.  Wieso? Mein Lieblingsspiel ist Pétanque (auch Boule genannt). Noch eine Leidenschaft von mir.
  • Wenn ich mal länger nicht zum Spielen komme, schau ich auf YouTube Aufzeichnungen von den französischen oder internationalen Pétanque-Meisterschaften an.
  • Ich habe seit ich denken kann eine Schwäche für Erdtöne. Meine letzten Bildreihen hab ich fast ausschließlich mit Naturmaterialien wie Gesteinsmehlen, Erden und gelösten Kaffee gemalt.
  • Ich liebe Schachteln, geflochtene Körbe und Holzkästchen. Aber bitte nicht bunt. Naturton, Holzfarbe, Grauton und auch mal Schwarz muss es sein.
  • In Einrichtungsläden oder Baumärkten muss ich mich zusammenreißen, damit ich nicht wieder irgend einen wunderschönen Korb oder einen unwiderstehlichen Holzkasten kaufe, für den ich in meiner Wohnung erst einen Platz suchen muss.
  • Und noch eine Leidenschaft: Treibholz. Bei jedem Strandspaziergang an Elbe oder Nordsee grase ich den Boden ab, ob da nicht was spannendes liegt. Die interessantesten Hölzer erkläre ich kurzerhand zum Kunstobjekt. Dann dürfen sie auf dem Sideboard oder Fensterbrett betrachtet werden. Ach ja: auch neben der Badewanne (obwohl ich selten bade).
  • Weil ich nicht alle gesammelten Treibhölzer ausstellen kann, liegen die anderen in einem der vielen Körbe und Schachteln. Darin warten die gestrandeten Schönheiten, um später von mir neu entdeckt zu werden.
  • Ich darf auf keinen Fall bei Gewitter draußen sein, weil ich sonst vor Angst hysterisch werde.
  • Ich hab noch nie ein Flugzeug betreten. Was auch an meiner Flugangst liegt.
  • Ich hab nichts gegen Spinnen. Mit einer Ausnahme: Wenn ich eine schwarze Winkelspinne sehe, bekomme ich eine mittlere Krise. Eine hatte sich mal in meiner Socke verkrochen. Was ich mit einem merkwürdigen Kitzeln an den Zehen gemerkt habe. Die Spinne hat’s mit einem Schrecken überlebt und ich hatte den ganzen Vormittag weiche Knie.
  • Ich trage seit 2 Jahren Schuhe nur noch barfuß, ohne Socken oder Strümpfe. Auch im Winter. Und falls du jetzt fragst: Nein, die Spinne hat daran keine Schuld. Ganz sicher.
  • Ich wurde in einer langweiligen Kleinstadt nahe der DDR-Grenze geboren. In Lüneburg. Heute ist die alte Salzstadt eine der beliebtesten Touristenattraktionen aller deutschen Städte. Ich sag nur: Rote Rosen.
  • Als junge Frau konnte ich Noten lesen und ich hatte eine Gitarre, auf der ich gern klassische und spanische Stücke gespielt hab. Die Gitarre gibt es seit Jahren nicht mehr und Noten lesen hab ich verlernt. Leider.
  • Ich war in Mathe immer eine Niete. Und Physik und Chemie hab ich genauso wenig verstanden…
  • Mit 12 war ich in einen Lehrer verknallt. Der war zur selben Zeit mein Mathe-, Physik-, und Chemielehrer (was mein Verhältnis zu Formeln, physikalischen Gesetzmäßigkeiten und chemischen Verbindungen nur wenig beeinflusst hat).
  • Eine Beraterin beim Arbeitsamt sagte mir nach einem Test, dass ich „eine mathematische Flasche wäre und wie ich denn durch den Alltag käme“. Das war vor 30 Jahren. Der Alltag hat trotzdem ganz gut geklappt.
  • Ich kann schlecht lügen. Diese „Schwäche“ kam mir so manches mal teuer zu stehen. Und hat mich sogar Freundschaften gekostet. Unglaublich, aber wahr.
  • Als Schülerin sollte ich im Fach Handarbeit eine Hose nähen. Ich hatte keine Lust dazu. Also hat meine Oma eine wundervolle Jeans genäht. Aber die Lehrerin war nicht auf den Kopf gefallen und hat gefragt: „Das hast DU doch nicht gemacht.“ So kam ich zu meiner ersten 6 außerhalb von Mathe. Warum? Siehe Punkt 28.
  • Inzwischen nähe ich richtig gern. So gern, dass ich zu Beginn der Corona-Einschränkungen dutzende von Masken genäht habe in allen möglichen Farben und Mustern. Meine Familie hat sich gefreut.
  • Ich kann unbeschreiblich gut Teppiche, Laminat und Vinylböden verlegen.
  • Und tapezieren konnte ich schon mit 14 perfekt. Das ist wahr! (Du weißt ja: Ich kann nicht lügen.)
  • Ich mag Cafés. Sehr oft schnappe ich mein iPad und arbeite in einem meiner Lieblingscafés. Dabei kann ich mich richtig gut konzentrieren.
  • Ich bin hoffnungslose Pferdenärrin. Schon als Achtjährige hab ich ständig Pferde gezeichnet. Damit hab ich jahrelang in fast jeder Schulstunde die Lehrer genervt. Zum Ende der Schulzeit konnte ich Pferde aus allen Perspektiven und in jeder Gangart fotorealistisch zeichnen.
  • Ich guck irre gern Tierfilme und Naturdokus. Frag mich, welche Katzen- und Bärenarten es gibt und was ein Przewalski ist: Ich sag’s dir.
  • Ich lasse fast immer Reste auf Tellern und in Bechern. Warum, kann ich dir nicht sagen. Ich weiß es einfach nicht.
  • Ich esse unter der Woche fast ausschließlich Rohkost, weil ich zu faul zum Kochen bin.
  • Mein liebstes Obst sind nicht Kirschen oder Erdbeeren. Sondern: Zwetschgen. Was aber kaum eine Rolle spielt, weil Kirschen und Erdbeeren im Sommer und Zwetschgen im Herbst reif sind. Ich hätte aber nichts dagegen, wenn es auch im Sommer Zwetschgen gäbe…
  • Mit 20 hab ich gern weiße Blusen und Hemden getragen, mit 30 gern beigefarbene Pullover, mit 40 vorwiegend dunkelbraune Tuniken und jetzt trage ich fast nur schwarze Pullover. Muss ich mir Gedanken machen?
  • Ich trage am liebsten Oversize-Pullover. In anliegender Begleidung werde ich nervös und fühle mich eingeengt.
  • Ich fahre gern Fahrrad. Regelmäßig mache ich kleine oder große Fahradtouren.
  • Mein Fahrrad feiert in diesem Jahr seinen 20. Geburtstag. Und es trägt mich genauso gut durch Feld und Flur wie in seiner Jugend. Ich mag das silberne Ding einfach.
  • Ich habe noch nie geraucht.
  • Ich liebe Lakritz. Dafür ist Schokolade nicht so meins. Mit einer Ausnahme: Salz-Schokolade (aber nur von Leysieffer).
  • Ich arbeite an einem Stehschreibtisch, den ich hydraulisch runterfahren kann. Und wenn ich doch mal sitze, dann nur auf einem Gymnastikball.
  • Ich tauche wahnsinnig gern. Egal ob im See oder im Schwimmbad: Ohne Tauchgänge geht gar nichts. Unter Wasser fühle ich mich herrlich unbeschwert, leicht und frei. Und die Welt scheint leise und friedlich.
  • Ich hab eine Schwäche für Teelichter. Alljährlich kaufe ich neue, hübsche und dekorative Gläser.
  • Ich liebe Kerzenlicht. Jedes Jahr freue ich mich auf die dunklen und kalten Monate, in denen ich mich bei Kerzenschein und Tee auf dem Sofa einmümmel und die gemütliche Stimmung geniesse.
  • Ich hab eine Sauklaue. Besonders, wenn ich schnell schreibe. Und wenn ich die Notizen brauche, hör ich ich mich häufig genug seufzen. Weil ich dann raten muss.
  • In meinem Bücherschrank stehen etliche ungelesene Romane. Aber irgendwie mag ich mich von den Büchern nicht trennen.
  • Dafür lese ich wann immer es geht Sachbücher und Biografien.
  • Ich bin in den letzten 20 Jahren 5 mal umgezogen. Zuletzt am 23. Dezember 2020. Wohin? Zurück nach Lüneburg (edit 2025: Wir ziehen wieder um…).
  • Ich lese meine Bücher seit 7 Jahren mit wenigen Ausnahmen überwiegend auf dem iPad. Wer weiß, wann ich wieder umziehe.

Und was sollte ich über dich wissen?
Schreib gern ein paar Macken hier in den Kommentaren. Ich bin super gespannt und neugierig!
constanze straub 274 start

Newsletter einrichten mit Divi in 5 einfachen Schritten

Newsletter einrichten mit Divi in 5 einfachen Schritten

In 5 Schritten Newsletter in WordPress integrieren, mit Divi

Kommt dir das bekannt vor:

Du möchtest einen Newsletter einrichten. Und die Technik bringt dich um den Verstand…

Ich kann dich beruhigen: Das Ganze ist einfacher, als du denkst.

Mein Problem bei der Einbindung des Anmeldeformulars war immer die Optik. Die meisten Formular sehen einfach grottig aus oder sind nur rudimentär an das Corporate Design anzupassen.

Warum mir das Design wichtig ist?

Bestimmt weißt du, dass nicht nur die Funktion, sondern dass auch eine gute Gestaltung des Newsletter-Formulars für Vertrauen sorgen kann. Und mehr Vertrauen heißt: mehr Kontakte.

Bei ActiveCampaign kann man Eingabefelder und Buttons zwar minimal gestalten – trotzdem kannst du das Formular kaum an deinen Look anpassen.

Ich hab‘s versucht: Es sah einfach schlimm aus.

Wie gut, dass uns Divi entgegenkommt.

Du brauchst nicht einmal ein Plugin. ActiveCampaign (und wahrscheinlich auch andere Anbieter) bringt zwar ein Plugin mit – doch das ist völlig unnötig. Denn Divi bietet ein Optin-Modul, mit dem du dein Formular wie gewohnt wunderbar gestalten kannst. Und das ist aus mehrfacher Hinsicht super: Denn je weniger Plugins du in deiner WordPress-Website hast, desto besser die Performance.

Mit dem Opt-in-Modul bist du flexibel, das Formular ist leicht anpassbar, rechtlich korrekt und schick obendrein.

Und so sieht mein Formular aus:

optin 12

Das bekommst du auch hin. Versprochen.

Bevor du beginnst: Technik ist der letzte Schritt. Entscheidend ist, dass der Newsletter in dein Website-Konzept eingebettet ist. Was für dein Website Konzept wichtig ist, das habe ich hier ausführlich beschrieben: 

Doch legen wir los:

Schritt 1: Voraussetzungen für die Newsletter-Integration

Ich arbeite mit ActiveCampaign. Logisch, dass ich ActiveCampaign als Beispiel nutze. Falls du Brevo oder andere Newsletter-Anbieter nutzt: Die Vorgehensweise ist ähnlich bis genauso.

Hier nur der Vollständigkeit halber einige andere Dienste:
Brevo, MailChimp, ClipTip, Convert Pro, AWeber, CleverReach, GetResponse.

Es gibt noch einige mehr und sie sind auch im Divi-Optin-Modul gelistet.

Jedes der oben genannten Tools hat seine Stärken und Schwächen. Getestet habe ich Brevo (hieß damals Sendinblue), das ich auch für Kundinnen eingerichtet habe. Außerdem Convert Pro und ActiveCampaign.

Einfach ausprobieren.

Brevo und ActiveCampaign kann ich uneingeschränkt empfehlen.

constanze straub 560 web koll

Ja, setz mich auf die Warteliste von Website Wunder. Sobald es losgeht, werde ich informiert.

Mit der Anmeldung bekommst du meinen WordPress-Newsletter, vollgepackt mit hilfreichen Tipps rund um deine neue Website. Du kannst den Newsletter jederzeit abmelden. Versprochen. Details findest du in meiner Datenschutzerklärung.

Schritt 2: Kontakt-Liste und Formular anlegen.

Die folgenden Todos sind wichtig, weil du sie für die Einrichtung des Opt-in-Modul brauchst.

Also legen wir los:

  • Du wählst einen Newsletter-Dienst und legst dort einen Account an.
  • Dort erstellst du eine Liste für deine (späteren) Kontakte und
  • du baust dein Formularfeld.
  • Außerdem brauchst du die API-Daten (kannst du auch später kopieren).

Ich nenne meine 1. Liste „Hauptliste“.

Wie alles im Einzelnen konkret geht in ActiveCampaign – das schreibe ich in einem späteren Artikel.

Was brauchst du außerdem?

Zusätzlich überlegst du dir, was nach dem Absenden des Formulars passieren soll. Entsprechend solltest du nämlich noch weitere Arbeiten machen:

  • Erfolgsmeldung oder Weiterleitung zu einer separaten Seite.
  • Bei Bedarf: Danke-Seite nach Bestätigung der Mail.

Schritt 3: Erfolgsmeldung vs. Fortschritts-Seite

Was passiert, wenn der neue Kontakt auf den Senden-Button geklickt hat?

Richtig. Der Kontakt muss einen Hinweis erhalten, dass er noch eine Mail bestätigen muss (kennst du bestimmt, nur das ist DSGVO-konform).

Erst mit der Bestätigung der Mail wird der neue Kontakt als aktiver Lead in deiner Liste geführt (und erhält später deine Newsletter). Und, wichtig: Diese Bestätigung der Mail ist Teil des Double-Opt-in-Verfahrens, das von der DSGVO für eine Adressspeicherung gefordert wird.

Was macht nun das Opt-in-Modul, wenn der Kontakt auf den Absenden-Button geklickt hat?

Das Optin-Modul von Divi bietet 2 Möglichkeiten, wie der neue Kontakt informiert wird

  1. Möglichkeit: Divi gibt eine Erfolgsmeldung in Schriftform aus (die du inhaltlich anpassen kannst)
  2. Möglichkeit: Du kannst nach dem Absenden des Formulars auf eine externe Seite umleiten lassen.

Die Erfolgsmeldung (Möglichkeit 1)  finde ich ungünstig, da der neue Kontakt verwirrt werden kann. Außerdem: Auf einer zusätzlichen Seite hast du mehr Gestaltungsmöglichkeiten und mehr Platz für eine ausführliche Information.

Weiter unten gehe ich näher auf dieses Thema ein.

Schritt 4: ActiveCampaign über das Opt-In-Modul einrichten

Kommen wir zum eigentlichen Punkt:

Das Opt-in-Modul von Divi einrichten, gestalten und mit ActiveCampaign verbinden:

Du fügst an beliebiger Stelle deiner Seite das Opt-in-Modul ein. Es lässt sich genauso bearbeiten, wie alle anderen Module, die du bereits kennst und ist ähnlich aufgebaut wie das Kontaktformular. Mit dem Unterschied: Hier trägst du die Daten von ActiveCampaign ein. Denn nur so werden die vom neuen Kontakt eingetippten Daten an ActiveCampaign übertragen.

Und das geht so:

Du öffnest deine Seite, auf der das Formular stehen soll (entweder im Gridmodus oder mit dem Visual Builder).

Zeile einfügen (falls gewünscht)
Optin-Modul einfügen.

Nun hast du zwei Möglichkeiten zur weiteren Gestaltung:

Du kannst die zusätzlichen Texte zur Newsletteranmeldung mit einem zusätzlichen Text-Modul einfügen. Damit hast du größere Gestaltungsfreiheit. Also Sachen wie: „Hole dir hier mein tolles Freebie und werde Teil meiner Liste“ oder so, nur ein Beispiel.

Das brauchst du aber nicht, Denn das Opt-in-Modul bringt alles mit, was du für ein sinnvolles Anmeldeformular brauchst: Titel, Beschreibung, Fußzeile.

Ich zeige dir hier, wie ich das gemacht habe:

  • Optin-Modul zum Bearbeiten öffnen.
  • Im ersten Reiter unter „Inhalt“ wie gewohnt die Inhalte einsetzen.
  • Unter „Titel“ trägst du deine Überschrift ein. Bei mir steht als Titel der Name des Freebies.
  • Darunter kommt schon der Button. Hier gibst du einen aussagekräftigen Text ein. Also bitte nicht „Zum Newsletter anmelden“ oder schlimmer: „Senden“. Sondern du wiederholst kreativ das, was der neue Kontakt möchte.
    Bei mir steht: „Her mit dem Fahrplan“.
  • Unter dem Button hast du ein Textfeld. Wird „Body“ genannt. Hier habe ich eine Erklärung geschrieben, was das Freebie bietet.
  • Darunter befindet sich ein weiterer Texteditor. Die „Fußzeile“. Was du hier eingibst, erscheint im Formularfeld unter dem Button. Bei mir steht ein Hinweis, dass der Kontakt mit dem Fahrplan ein Newsletter erhält. Das ist ein wichtiger Zusatz.

Schau dir einfach das Bild ganz oben an.

Und so sieht das Opt-in-Modul von innen unter „Einstellungen“ aus:

optin 01

Newsletter-Dienst mit deiner Website verbinden

Nun kommt das Wichtigste: Die Verbindung zum Newsletter-Tool.

Im Optin-Modul findest du das innerhalb der Option E-Mail-Account. (Das ist der Button unter dem Text-Button).

Diesen Button öffnen.

Dort findest du zwei Eingabefelder:

Serviceanbieter und
Liste

optin 02

Meistens ist dort schon der Mailanbieter MailChimp vorausgewählt. Deshalb steht unter „Serviceanbieter“ MailChimp und über dem Listen-Feld darunter steht „MailChimp Liste“ und im Feld selber „Wählen Sie eine Liste“.

Im ersten Feld klickst du rein. Dir wird eine lange Liste mit Newsletter-Diensten angezeigt. Angefangen mit ActiveCampaign. Logisch, was du nun machst: Du wählst deinen Dienst aus. Wenn du mit Brevo arbeitest, wählst du „SendinBlue“ (weil das früher so hieß).

Ich habe natürlich „ActiveCampaign“ gewählt.

optin 04

optin 03

Danach werden im Feld darunter deine Listen angezeigt, die du in ActiveCampaign (resp. deinem Dienst) angelegt hast. Wenn du wie ich mehrere Listen hast, wählst du deine bevorzugte Liste aus.

Du klickst auf „Hinzufügen“.

Wenn du ActiveCampaign gewählt hast, werden dir nach der Auswahl von ActiveCampaign vier Eingabe-Felder angezeigt (bei anderen Anbietern können die Felder abweichen). Du siehst die Felder im Bild unten.

Hier sind es:

  • Account-Name
  • API Key
  • API URL
  • Form ID

optin 06

Was erstmal kompliziert klingt, ist kinderleicht:

Account-Name

Der Accountname ist der, mit dem du dich bei ActiveCampaign anmeldest. Bei mir: meinbenutzer.activehosted.com (meinbenutzer ist natürlich der jeweilige Nutzername).

API-Key und API URL

API Key (API-Schlüssel) und API URL findest du in ActiveCampaign unter:

Einstellungen > Entwickler

Dort kopierst du die Daten einfach raus und setzt sie in den Feldern des Opt-in-Moduls ein.

Form ID

Die Form ID ist die ID, die jedes Formular in ActiveCapaign nach der Erstellung automatisch erhält. Mein Formular hat die ID 9, weil ich schon einige Formulare versucht hatte ;-). Also muss ich dort im Feld unter Form ID einfach die 9 einsetzen. So easy.

Wichtig: Zum Schluß den Button „Senden“ klicken. Das war es schon, damit ist die Verbindung zu AC hergestellt.

Deine Kontakte können sich nun anmelden.

Aber das ist ja nicht alles.

Du erinnerst dich an das, was ich oben geschrieben hab? Irgendwie muss der neue Kontakt noch einen Hinweis lesen, dass er noch eine Mail erhält, die er erst bestätigen muss.

Dafür gibt es wie oben erwähnt im Optin-Modul zwei Möglichkeiten.

Mit dem Button „Sektion“ kannst du die beiden Möglichkeiten auswählen.

Captcha anzeigen und
Redirect-URL

optin 08

Möglichkeit 1: Erfolgsmeldung direkt auf der Formular-Seite

Wenn du die erste Möglichkeit wählst – Captcha anzeigen – dann siehst du darunter das Feld > Nachricht. Darin steht in grauer Schrift: „Erfolgsmeldung“. Hier kannst du dein Erfolgsmeldung eintippen.

Also zum Beispiel: „Danke für deine Anmeldung. Schau bitte in deinem Postfach. Du erhältst eine Mail, in der du auf den Link klicken musst zum Bestätigen.“

Oder so. Geschmacksache.

Dieser Hinweis erscheint direkt auf der Seite, auf der auch das Formular steht (stand, nach dem Absenden ist das Formular nicht mehr zu sehen.

Ich finde das nicht so geschickt. Weil der Hinweis dort schnell übersehen werden kann.

Mir ist eine separate Seite lieber, die sich nach dem Absenden des Formulars in einem neuen Browserfenster öffnet. So eine Seite ist klarer, die kann nicht so schnell verschwinden wie ein Hinweis direkt auf der Formularseite.

Wieso verschwinden? 

Wenn die Seite neu geladen wird, ist der Hinweistext weg. Dann steht dort wieder das Formular. Das kann mit einer separaten Seite nicht passieren. Und du hast mehr gestalterische und inhaltliche Möglichkeiten.

Ich bin also für Möglichkeit 2. Und die geht so:

Möglichkeit 2: Umleitung zu einer Fast-geschafft-Seite

Du bist noch in den Einstellungen des Optin-Moduls. Und beim Button „Sektion“.

optin 09

Nun wählst du statt „Captcha“ – logisch: Redirect-URL.

Dann erscheint unter dem Feld „Sektion“ ein Feld mit der Beschriftung „Redirect-URL“. Hier trägst du die URL deiner Seite ein, die du für diesen Zweck erstellt hast.

Meine Seite heißt hier im Beispiel: https://constanzestraub.de/fast-geschafft.

Das war‘s.

Schritt 5: Felder und Inhalte im Divi-Opt-in-Modul gestalten

Das ganze Formular kannst du natürlich noch gestalten.

Solltest du sogar. Denn nur mit einer professionellen Gestaltung weckst du Vertrauen. Was die Chance erhöht, dass du viel Anmeldungen erhältst.

Und das geht so:

Felder anpassen

Das Formular enthält standardmäßig das Feld E-Mail-Adresse, du kannst aber weitere Felder hinzufügen oder anpassen.

Unter dem Button „Felder“ findest du bereits die Felder Vorname und Nachname.

Felder gestalten:

Hierzu gehst du in den Bereich „Design“ oben in den Reitern. Dort unter „Felder“ kannst du beliebig anpassen (Hintergrundfarbe, Rand, Rundung, Schriftfarbe etc.)

Button gestalten

Der Button ist ein entscheidendes Element deines Formulars. Er sollte auffällig und motivierend gestaltet sein.

Gehe zu Design > Button:

Du kannst die globalen Button-Einstellungen übernehmen oder den Button individuell anpassen. So, wie du es aus den anderen Modulen kennst.

Text und Überschriften gestalten

Dasselbe kannst du mit den Texten machen: Schriftgröße ändern, Schriftart, Schriftfarbe usw.

Erfolgsmeldung und Weiterleitung

Wenn du lieber mit einer Erfolgsmeldung direkt auf der Formularseite arbeitest (statt mit einer Weiterleitung auf eine separate Seite), dann kannst du auch diesen Text gestalten. Dafür gibt es unter > Design ebenfalls einen Button mit Einstellungsmöglichkeiten.

Das war’s schon.

War doch garnicht schwer, oder?

Zum Schluß solltest du das Formular auf mobilen Geräten prüfen. Aber auch hier kann der Visual Builder toll helfen.