Newsletter erstellen mit Brevo – Anleitung in 7 einfachen Schritten

Newsletter erstellen mit Brevo – Anleitung in 7 einfachen Schritten

von | Juni 8, 2024 | Anleitungen, Startseite

Inhaltsverzeichnis

Formular bauen, Optin-Mail schreiben und Automation einrichten – mit Brevo in nur 7 Schritten

Du möchtest mit E-Mail-Marketing loslegen und einen Newsletter erstellen? Am besten eine Automation, damit du möglichst wenig Arbeit hast?

Oder du möchtest deinen Newsletter-Dienst wechseln – bist aber mit der Technik überfordert.

Dann bist du hier richtig. Mit dieser Anleitung zeige ich dir, wie du dein E-Mail Marketing mit dem Newsletter-Dienst Brevo einrichtest (ehemals Sendinblue und davor Newsletter2Go).

Newsletter erstellen und mit E-Mail Marketing loslegen für mehr Kunden

Was ist ein Newsletter?

Ein Newsletter ist eine E-Mail, die du regelmäßig an Kunden oder Kontakte schickst. Diese Mails sind Teil deiner gesamten Marketingstrategie. Konkret: dein E-Mail Marketing. Damit die Leute deinen Newsletter überhaupt erhalten, müssen sie vorher ihre Mailadresse bei dir lassen.

Die Idee hinter einem Newsletter ist, Adressen in einer Liste zu sammeln. Oder im Marketing-Schnack: Mit einem E-Mail Marketing möchtest du langfristige Kundenbeziehungen aufbauen. Diese Kontaktliste ist dein Schatz.

Darum empfehle ich Brevo als Newsletter-Dienst

Brevo hab ich letztes Jahr (2023) für eine Kundin eingerichtet. Damals hieß es noch Sendinblue. Ich fand das Tool damals schon übersichtlich und intuitiv zu bedienen. Anfang 2024 hab ich dort einer anderen Kundin den Newsletter aufgebaut. Ich war erstaunt: Die Ansicht ist noch intuitiver, noch einfacher geworden.

Der Aufbau und die Gestaltung der E-Mails und die Automationen gehen simpel per Drag and Drop. Andere Newsletter-Dienste (wie ActiveCampaign, das nutze ich), sind längst nicht so einfach und intuitiv. Ein weiterer Vorteil von Brevo: Dieser Dienst ist im Vergleich zu anderen Anbietern kostengünstig und hat einen Free-Tarif (den hat ActiveCampaign nicht).

Falls du jetzt die Frage stellst: Gehts nicht auch mit einfachen E-Mail-Programmen? Nee. E-Mail Marketing ist mit „normalen” E-Mail-Programmen wie Outlook, Gmail, Thunderbird oder Mail nicht möglich. Du brauchst eine Newsletter-Software, die dir den automatisierten Versand der Newsletter abnimmt.

Mit dieser Anleitung hast du die Grundlagen für ein E-Mail-Marketing unter Dach und Fach.

Was brauchst du für dein E-Mail-Marketing?

1. Du braucht eine Website:

Die Website brauchst du, um dort dein Anmeldeformular einzubetten. Außerdem eine „Fast-geschafft-Seite“ und eine „Danke-Seite“ (dazu sag ich noch was).

Was auch geht: Eine einzelne Landingpage für die Newsletter-Anmeldung. Kannst du sogar bei Brevo einrichten.

Meine Meinung: Ich bin eine Freundin von Unabhängigkeit. Mit deiner eigenen Website bist du autark und kannst besser kontrollieren, wie du deine Kontakte begrüßt. Außerdem: Mit einer Website kannst du eine Fast-geschafft-Seite und eine Danke-Seite einrichten. Mit der Fast-geschafft-Seite erhält der Kontakt die Info, dass eine Mail folgt. Und mit der Danke-Seite erfährt der neue Kontakt, dass die Anmeldung erfolgreich war.

Theoretisch kannst du die Erfolgsmeldung auch nur als Mail versenden. Doch Mails können im Spam landen (oder garnicht erst ankommen…).

2. Du brauchst einen Newsletter-Dienst:

Du brauchst einen Dienst wie Mailchimp, ConvertKit, Active Campaign oder eben Brevo. Hier befindet sich deine Kontaktdatenbank mit den Mailadressen deiner Follower, die deinen Newsletter bestellen. Außerdem, ganz wichtig: Vom Anbieter bekommst du den Code-Schnipsel für das Anmeldeformular, das du in der Website einbindest.

Diese 7 Schritte brauchst du für dein E-Mail-Marketing

  • 1. Schritt : Mache eine Strategie und zeichne einen Plan für die Automation
  • 2. Schritt: Wenn du eine Website hast: Lege eine Fast-geschafft und eine Danke-Seite an
  • 3. Schritt: Richte einen Account in Brevo ein
  • 4. Schritt: Nenne deine Kontakt-Liste und den Ordner in um und importiere Kontakte
  • 5. Schritt: So richtest du die Optin- und die Begrüßungsmail ein
  • 6. Schritt: Newsletter-Formular bauen und mit Mails und URLs verbinden
  • 7. Schritt: So bindest du das Formularfeld in deine Webseite ein

1. Schritt: Mache einen Plan für die Automation

Stell dir die Fragen:

  • Wie soll meine Automation aussehen?
  • Was passiert, wenn ein Mensch dein Newsletter bestellt hat?
  • Was soll der neue Kontakt als nächtes sehen?
  • Was soll in den Mails stehen, die der Kontakt zur Begrüßung bekommt?

Diesen Plan skizzierst du am besten auf einem Blatt Papier. Mir hilft das, die Übersicht zu behalten. Vergiß auch nicht die Bestätigungsseiten auf deiner Website: Ich mache es immer so, dass ich auf meiner Website eine Fast-geschafft-Seite und eine Danke-Seite anlege.

Die Automation sieht also so aus:

  • Eine Person (nennen wir sie „Anna“), füllt das Formularfeld aus und klickt auf „Senden“.
  • Daraufhin öffnet sich in ihrem Browser eine Seite deiner Website. Anna liest darin, dass sie eine Mail erhält, die sie noch bestätigen muss
  • Anna sieht in ihrem Postfach eine Optin-Mail und klickt auf den Bestätigungs-Button
  • Im Browser von Anna öffnet sich eine neue Seite deiner Website. Hier wird sie darüber informiert, dass die Anmeldung geklappt hat.
  • Zum Schluß findet Anna eine 1. Begrüßungsmail in ihrem Postfach. Hier könnte ein Link zu deinem Freebie enthalten sein (oder das Freebie ist als Anhang in der Mail). Anna freut sich, weil sie jetzt eine erste Mail von dir bekommen hat.

2. Schritt: Fast-geschafft- und Danke-Seite erstellen

Ich empfehle dir, mit der Fast-geschafft-Seite und der Danke-Seite zu beginnen. Diese beiden Seiten sind simpel, denn sie brauchen keine besondere Gestaltung. Nur kurz ein paar Hinweise. Fertig.

3. Schritt: Account einrichten in Brevo

Das ist der einfachste Schritt (kennst du bestimmt von anderen Anmeldungen):

  • Öffne die Website von Brevo.
  • Oben rechts ist der grüne Button: Kostenlos beitreten.
  • Im neuen Fenster trägst du deine Mailadresse und ein beliebiges Passwort ein,
  • dann wird dir eine Bestätigungsmail an deine Mail-Adressse geschickt.
  • Öffne dein Mailprogramm und schau nach der E-Mail von Brevo,
  • auf den Button klicken „Meine E-Mailadresse bestätigen“ (Registrierung abschließen),
  • im verlinkten Browserfenster die Felder ausfüllen (Name und Angaben zum Unternehmen),
  • dann wirst du zur Paket-Auswahl geführt.
  • Einen Tarif auswählen.
  • Fertig

Das Dashboard von Brevo

4. Schritt: Liste und Ordner umbenennen

Die Oberfläche von Brevo ist sehr übersichtlich und gut strukturiert. Wenn du dich eingeloggt hast, findest du links das vertikale Hauptmenü mit allen wichtigen Punkten, die für deine Arbeit mit den Newslettern wichtig sind. Und auf der rechten Seite findest du deine Arbeitsflächen bzw. die jeweiligen Übersichten. Die Punkte in der Hauptnavigation sind:

  • Startseite
  • Kontakte
  • Kampagnen
  • Automatisierungen
  • Transaktional
  • Conversations
  • Deals
  • Meetings
  • Anrufe

Wenn du auf diese Menüpunkte klickst, öffnen sich Untermenüs. Deine Listen findest du im Untermenü von „Kontakte“. Dein nächster Schritt: Du gehst zum Menüpunkt „Kontakte“. Wenn du dort klickst, passiert folgendes: Das Menü erweitert sich unter dem Punkt Kontakte nach unten. Nun steht unter dem Menüpunkt Kontakte dieses Untermenü:

  • Listen
  • Segmente
  • Landing Pages
  • Formulare
  • Einstellungen

Auf der rechten Seite findest du – tata – deine Kontaktdatenbank. Wenn du neu bist, findest du hier deine eigene E-Mailadresse.

So findest du Listen und Ordner

Du klickst im Menü auf „Listen“. Nun steht auf der rechten Seite (neben dem Menü) deine erste Liste.

Falls du dich über diese Liste wunderst (du hast doch nix gemacht…): Das macht Brevo automatisch bei der Anmeldung. In dieser ersten Liste liegt deine eigene E-Mailadresse. Außerdem findest du bereits einen Ordner.

Deine Kontakte liegen immer in einer Liste und die Listen wiederum in einem Ordner.

Diese erste Liste nennt Brevo „Deine erste Liste“ und den Ordner „Dein erster Ordner“. Naja, diese Namen sind echt nichtsagend. Deshalb würde ich sie ändern und aussagekräftige Namen vergeben. Zumal du später bestimmt mehrere Listen und Ordner hast. Leg dir eine Liste an, in der ALLE Kontakte sind. Ich nenne meine Liste „Hauptliste“.

Und so änderst du die Namen der Listen

  • Wenn du das Untermenü von Kontakte geöffnet hast, klickst du auf > Listen
  • ganz rechts in der Tabelle mit der Liste findest du die Spalte „Aktionen“
  • in dieser Spalte auf die 3 Punkte hinter der Zeile mit der Liste klicken.
  • es öffnet sich ein Kontextfenster,
  • hier auf auf „Umbenennen“ klicken.

So änderst du den Namen der Ordner

  • Oben links steht ein Auswahlfeld.
  • Hier kannst du deine Ordner auswählen.
  • Du wählst den Ordner aus: „Dein erster Ordner“
  • Nun stehen rechts neben dem Auswahlfeld die Optionen „Ordner bearbeiten“ und „Ordner löschen“.
  • Auf „Ordner bearbeiten“ klicken (okay, war jetzt logisch…), um dein Newsletter Marketing zu strukturieren.
  • Im Kontextfenster „Ordner umbenennen“ wählen.
  • Alternativ auf „Aktionen“ und die 3 Punkte klicken (wie bei den Listen).

5. Schritt: Optin-Mail und Begrüßungsmail einrichten

Tipp: Warum du zuerst die E-Mail-Vorlage einrichtest

Der Grund ist derselbe, warum ich zuerst die Fast-geschafft- und die Danke-Seite einrichte: Strategie und Arbeitsteilung. Denn das ist so: Während du das Formular aufbaust, wirst du aufgefordert, E-Mailvorlagen auszuwählen (und URLs deiner Website, dazu später mehr). Hättest du deine Mails (und Seiten) noch nicht fertig, müsstest du jedesmal die Arbeit am Formular abbrechen. Nun sind also erstmal die E-Mails dran. Diese sind

  • die Optin-E-Mail
  • die Begrüßungsmail.

Die Optin-Mail

Die Optin-Mail ist gesetzlich zwingend vorgegeben (DSGVO). Und natürlich möchtest du deinen Newsletter datenschutzkonform einrichten. Deshalb musst du das sogenannte Optin-Verfahren anwenden. Heißt: Wenn Anna deinen Newsletter abonniert hat, bekommt sie eine E-Mail, mit der sie die Anmeldung bestätigen soll. Nur mit dieser wichtigen Bestätigung wird Anna verbindlich und datenschutzkonform in deine Liste eingetragen.

Die Begrüßungsmail

Die Begrüßungsmail ist freiwillig – aus meiner Sicht aber ein unbedingtes Muss. Denn du möchtest zu Anna Vertrauen und eine Beziehung aufbauen. Mit der Begrüßungsmail sagst du Anna vor allem drei wichtige Punkte:

  • Die Anmeldung war erfolgreich
  • Sie ist nun in deiner Liste und
  • Sie findet hier (oder mit einem Link) dein kostenloses Angebot und Infos zu dir.

Optin-E-Mail schreiben und gestalten

Für die Optin E-Mail gibt es eine fertige Vorlage in Brevo. Die kannst du natürlich nutzen und anpassen, dann sparst du diesen Schritt. Aber: Ich find sie blöd. Denn die fertige Vorlage läßt sich nur schwer umbauen. Wenn du – als Beispiel – die Farbe des Buttons ändern möchtest, geht das nur umständlich. Ich hab’s sogar fertig gebracht, bei der Umgestaltung den Link zu zerschießen. Deshalb lege ich lieber mein eigenes Template an.

Also: Auch wenn du das fertige Optin nimmst: Lies die Anleitung trotzdem durch, denn sie ist gleichzeitig die Anleitung für jede andere E-Mail-Vorlage.

So richtest du Mail-Vorlagen ein (und die Optin-Mail)

  • Du klickst auf den Menüpunkt > Kampagnen (im vertikalen Hauptmenü)
  • Es öffnet sich ein weiteres vertikales Untermenü (E-Mail, SMS, WhatsApp, Web-Push, Facebook Ads, Vorlagen, Statistiken, Einstellungen).
  • Du klickst auf den Punkt > Vorlagen
  • Auf der rechten Seite steht nun eine Liste mit Standart-Templates
  • Du klickst auf „Template erstellen“ (rechts oben, der schwarze Button)
  • Es öffnet sich das Fenster: „Welches Template möchtest du erstellen?“
  • Hier wählst du E-Mail-Template (der linke Button)

1) Einstellungen der E-Mail

Bevor du texten und kannst, wirst du zunächst zu den primären Einstellungen geführt. Hier vergibst du deiner neuen Vorlage einen Namen (der ist nur für dich). Außerdem solltest du der E-Mail einen aussagekräftiges Betreff geben. Damit die Empfängerin weiß, worum es in der Mail geht.

Die 1. Einstellungen:
Name der Vorlage > Optin Email (oder ähnlich, sollte für dich nur klar sein)
Betreffzeile > Bitte bestätige deine Anmeldung (oder ähnlich)
Preheader

Was ist der Preheader? Das ist die Voransicht des E-Mailinhalts. Manche Mailprogramme stellen den Mailinhalt in einer Voransicht unter der Betreffzeile dar. Falls du hier einen eigenen Text definieren möchtest, kannst du den Preheader mit Text füllen. Beim Optin find ich‘s nicht nötig.

Erweiterte Optionen kannst du für die Optin-E-Mail ignorieren.

Button Nächster Schritt klicken

2) Vorlagen gestalten

Dieser Punkt kann jetzt etwas verwirrend sein: „Wieso soll ich eine Vorlage wählen, wenn ich gerade eine Vorlage baue?“ Der Punkt ist: Jede Vorlage ist technisch fertig eingerichtet. Selbst wenn keine oder kaum eine Gestaltung enthalten ist. Denn hinter einem automatisierten Mailversand steckt eine Menge Programmierung. Du hast also auch mit den relativ „puristischen“ Vorlagen solche, die zwar noch etwas Finetuning brauchen – die aber technisch tipptopp funktionieren.

Nach deinen Einstellungen siehst du im nächsten Arbeitsbereich 6 Rahmen. Diese Kästen sind die Ansichten von sechs einfach gestrickten Vorlagen. Doch bevor ich weitermache eine kurze Erklärung, was du in diesem Bereich noch siehst und wozu die Einträge sind:

Über den ersten sechs Vorlagen siehst du ein horizontales Menü mit den Menüpunkten:

  • Design
  • Vorlagen-Galerie
  • Meine Vorlagen
  • Vorlage programmieren

Design

Unter diesem Menüpunkt findest du die erwähnten sechs einfachen Templates mit Platzhaltern für Bilder oder Videos. In den Vorlagen wurde der Blindtext in Zeilen und Spalten eingeteilt, so dass du bei der Gestaltung weniger Arbeit hast. In diesem „Design“-Bereich findest du auch ein Template, mit dem du von Grund auf neu beginnen kannst. Diese Vorlage nutze ich für meine Optin-Mail. Weiter unten erkläre ich dir den Aufbau.

Vorlagen-Galerie

In diesem Bereich findest du alle fertig Templates in schicken Layouts, die Brevo uns schenkt. Ich finde die Menge ziemlich krass! Da kann einem die Wahl echt schwer fallen. Die Templates haben Blindtext, Bilder und Grafiken und sind in unterschiedlichen Layoutrastern fix und fertig designt. Du kannst die Bilder nutzen und brauchst nur noch Text austauschen – fertig.

Aber: Für eine Optin-Mail sind diese Vorlagen definitiv to much.

Meine Vorlagen

Dieser Bereich ist klar: Hier findest du alle deine fertigen Vorlagen, die du gespeichert hast. Praktisch, wenn du neue Kampagnen startest. Dann wählst du einfach eine deiner Vorlagen und tauscht den Text aus.

Vorlage programmieren

Hier gibt es die beiden Optionen

  • Rich Text-Editor und
  • HTML-Editor

Den Rich Text-Editor nimmst du, wenn du reine Textmails schreiben und versenden möchtest. Diese Option kann durchaus sinnvoll sein. Denn alle Vorlagen in Brevo sind HTML-Mails (auch wenn die Gestaltung eher puristisch ist). Reine Textmails haben den Vorteil, dass sie schneller geladen werden und sie sind weniger anfällig für Spamfilter. Sie sind also eine Überlegung wert!

HTML-Editor: Wenn du eine eigene HTML-Mail schreiben möchtest, kannst du diesen HTML-Editor als Spielwiese nutzen. Nachteil: Du musst gute HTML-Kenntnisse haben.

Vorlage wählen unter „Design“

Für eine Optin-Mail erstelle am besten eine Vorlage ohne großartiges Layout. Ohne Schnickschnack, nur mit einem Button und wenig Text. Denn Anna soll ja nur bestätigen und nicht abgelenkt werden. Dazu wähle ich eine der 6 Kästen (Vorlagen), die ich unter „Design“ finde. Ich wähle die Vorlage „Von Grund auf beginnen“. Hier die Auflistung der Vorlagen, die du auch alle nutzen kannst:

  • Standart-Template
  • Produkt verkaufen
  • Geschichte erzählen
  • Für eine Veranstaltung anmelden
  • Von Grund auf beginnen
  • Einfach

E-Mail-Vorlage in Brevo einrichten

Hast du die leere Vorlage gewählt?

Dann kann’s mit der Gestaltung weitergehen. Oder besser gesagt: Du setzt ein paar Zeilen Text und den Button zur Bestätigung. Nachdem du die Vorlage ausgewählt hast, erscheint in Brevo ein neuer Arbeitsbereich. Dieser Arbeitsbereich ist in 3 Teile gegliedert. Du findest

ganz links
ein vertikales Menü, das aus Icons besteht. Das erste in dieser Spalte ist das Icon „Blöcke“, gefolgt von „Style“, darunter „AI“.

Rechts daneben
findest du quadratische Felder mit Icons. Das sind die Blöcke mit verschiedenen Inhaltselementen.

Im ganz rechten Bereich
findest du den Editor mit Punktraster, in dem du deine Mail aufbaust und gestaltest. Der Bereich beginnt oben mit einem Rahmen und dem Hinweis „Inhalt hier einfügen“. In diesen Rahmen ziehst du deine Blöcke rein. Einfacher geht’s nicht. Über den Blöcken findest du noch ein kleines, horizontales Menü mit den Reitern

  • Blöcke
  • Abschnitte
  • Gespeichert

Was sind Blöcke?

Die Blöcke sind die Elemente, mit denen du deine E-Mail mit Inhalt füllst. Also z.B. „Titel“, „Text“, „Bild“ oder „Button“.Dazu klickst du  auf einen Block und ziehst das Ganz mit gedrückter Maustaste in den rechten Inhaltsbereich.

Was sind Abschnitte?

Abschnitte sind eine Zusammenstellung verschiedener Blöcke. Als Beispiel: Du möchtest einen kleinen Kasten mit einem Bild, einem Text und einem Call to Action-Button in immer derselben Gestaltung in verschiedenen Mails verwenden. Dann kannst du so einen kleinen Kasten einfach als Abschnitt speichern. Ein Anwendungsbeispiel: Ich setze unter meine E-Mails immer einen kleinen Autorenkasten. Darin ist ein Bild von mir, mein Name und ein kurzer Pitch zu meinem Angebot.

Im Bereich Abschnitte findest du fertig layoutete Abschnitte, die bereits Bilder und Blindtext enthalten. Die kannst du natürlich auch nehmen. Doch, wie gesagt: Halte die Optin-Mail so einfach wie möglich.

Unter dem Reiter „Gespeichert“ findest du deine gespeicherten Abschnitte.

Die Optin-Mail mit Inhalt füllen

Du klickst auf die jeweiligen Blöcke und ziehst sie mit gedrückter Maustaste ins Editorfeld „Inhalt hier einfügen“. Die Elemente (Text oder Button) können beliebig bearbeitet werden. Du kannst den Schrifttyp wählen, die Farbe, den Hintergrund, die Größe der Schrift usw. Wenn du das Element (den Block im Editorfenster) anklickst, wird auf der linken Seite ein neues Fenster gezeigt. Hier kannst du deine Gestaltung anpassen: Schrift anpassen, Schriftart, Schriftgröße, Zeilenabstand, Textausrichtung (linksbündig, mittig), den Hintergrund und vieles mehr.

Dieselben Anpassungen kannst du mit dem Button machen. Du kannst Rundungen hinzufügen (so dass er fast oval ist), die Hintergrundfarbe ändern, die Schriftfarbe ändern und einiges mehr. Dieser Text muss unbedingt in die Optin-Mail Was du in der Optin-Mail schreibst bleibt dir überlassen. Wichtig: Der Hinweis auf dem Button sollte so eindeutig wie möglich sein. Was auch wichtig ist: Du solltest erwähnen, dass der Kontakt sich mit der Bestätigung zum Newsletter anmeldet. Dem Kontakt muss klar sein, dass er seine Einwilligung zum Newsletter gibt, wenn er den Bestätigungsbutton klickt.

Den Link einfügen, damit der Kontakt in die Liste kommt

Zum Schluß kommt das wichtigste: der Link des Buttons. Denn wenn der neue Kontakt auf den Button geklickt hat, soll das System die E-Mailadresse und den Vornamen der Person in deine Liste für das Newsletter Marketing eintragen. Deshalb machst du noch folgendes: Du klickst mit dem Mauszeiger auf den Button. Es erscheint ein Kettensymbol.

  • Auf das Kettensymbol klicken.
  • Es öffnet sich ein > Kontextfenster:
  • Hier „Double-Opt-in-Link“ auswählen

Testen und Layout responsiv anpassen

Jetzt ist es sinnvoll, dein Layout für Smartphones anzupassen und zu testen. Oben rechts findest du dafür 2 Symbole. Das sind links neben dem Speichern-Button die Icons für die Desktop-Ansicht und die Smartphone-Ansicht. Das ist nämlich das schicke hier: Du kannst direkt prüfen, wie das Layout der E-Mail auf dem Desktop aussieht und wie auf dem Smartphone. Und, richtig grandios:

Wenn du das Smartphone-Icon aktivierst und Änderungen am Layout machst, dann wirken sich die Änderungen ausschließlich fürs Smartphone aus. Super responsiv! Außerdem gibt es verschiedene Möglichkeiten, um globale Styles für deine Vorlage einzustellen. Dazu gehst du auf das Icon „Style“ (ganz links). Hier kannst du dir global deine Markenbibliothek anlegen (Farben, Schriften, Abstände).

Letzter Schritt: Vorlage aktivieren Jetzt muss die Vorlage noch aktiviert werden. Sonst kann sie nicht eingesetzt werden. Dafür gibt es rechts oben den Button „Speichern und aktivieren“. Falls du nur zum Test gespeichert hast, kannst du auch in der Vorlagenliste aktivieren: Dazu klickst du auf die 3 Punkte in der Zeile der jeweiligen Vorlage. Im Kontextfenster einfach auf „Aktivieren“ klicken. Ist die Vorlage aktiv, steht dort ein grüner Punkt.

Vorlage erstellen für die Schlußmail

Hier gehst du genauso vor wie bei der Optin-Vorlage. Bei den Einstellungen kannst du die erweiterten Optionen anklicken. Hier gibt es nämlich die Möglichkeit, der Mail einen Anhang anzufügen (zum Beispiel ein Freebie). Oder du kannst dem Empfänger ein Tag vergeben.

Was ist ein Tag?

Ein Tag ist eine Art Etikett. Damit kannst du diesen Kontakt kennzeichnen. Ein Anwendungsbeispiel: Du hast mehrere Freebies. Damit du später in deinen Listen weißt, für welches Freebie sich der Kontakt angemeldet hat, gibst du ihm ein Tag mit der Beschreibung des Freebies. Alle anderen Schritte machst du wie oben erklärt.

Ein wichtiger Hinweis, wenn du deine Templates suchst:

Wenn du fertig bist mit deinen Vorlagen und zum Menüpunkt „Vorlagen“ zurückkehrst, kann es passieren, dass du dich wunderst: Wo sind meine gespeicherten Vorlagen? Brevo zeigt nämlich zuerst die Templates an, die zwar gespeichert, aber noch nicht aktiviert worden sind.

Das bedeutet: Wenn du im Fenster „Templates“ bist, gehe auf das Auswahlfenster „Nicht aktiv“. Hier wählst du aus: Alle Status. Und schwups: Nun siehst du alle deine gespeicherten Vorlagen. Die aktiven genauso wie die, die du nur testen willst und die deshalb „Nicht aktiv“ sind.

6. Schritt: Formular erstellen

Jetzt kommt der wesentlichste Teil des ganzen Prozedere: das Formularfeld. Das Ding, mit dem sich deine Besucher bei dir zum Newsletter anmelden. Gleichzeitig ist das eigentlich die geringste Arbeit. Also legen wir los: Den Menüpunkt Formulare findest du im Hauptmenü, wenn du Kontakte anklickst. Die nächsten Schritte sind also:

  • Kontakte anklicken (ein Untermenü öffnet sich)
  • Du klickst auf den Button oben rechts „Ein neues Anmeldeformular erstellen“
  • Erstellen Sie ein Anmeldeformular

6.1) Die Einrichtung

Es erscheint ein Fenster, in dem du nun Schritt für Schritt weitergeleitet wirst. Der erste Punkt ist die Einrichtung. Hier machst du folgendes

Oben vergibst du einen Formularname.

Darunter kannst du anklicken, ob du DSGVO-Felder aktivieren möchtest.

Jetzt Achtung:

Wenn du diesen Kasten anklickst, erscheint unter deinen Formularfeldern folgender Text und ein Kasten zum anklicken: „Ich möchte Ihren Newsletter erhalten und akzeptiere die Datenschutzerklärung“

Dieser Punkt ist für Anfänger und Rechtslaien verwirrend. Die Besucher deiner Website brauchen dieses Feld zum Anklicken nicht. Denn du verschickst ja eine Optin-Mail, mit der die Besucher dem Erhalt des Newsletters explizit zustimmen. Damit, mit dieser Optin-Mail, ist dein Newsletter datenschutzkonform eingerichtet. Double Optin heißt: Nachdem der neue Kontakt deinen Newsletter bestellt hat, muss er erst in einer separaten Mail bestätigen, dass er damit einverstanden ist, den Newsletter zu erhalten.

Das heißt für dich an diesem Punkt: die DSGVO-Felder deaktiviert lassen! Du klickst also auf Weiter.

6.2) So gestaltest du das Formular

Im nächsten Schritt siehst du 2 Arbeitsbereiche: Auf der linken Seite findest du den oben Bereich mit mehreren Blöcken (Inhaltsblöcke wie Text oder Bild) und unten den Bereich mit Feldern (Attribut, Mehrere Listen, Single Choice u.s.w.). Auf der rechten Seite siehst du ein bereits fertiges Formular mit dem Anmeldebutton. Das kannst du mit den Blöcken und Feldern für deine Bedürfnisse anpassen.

Über dem Bereich mit den Blöcken und Feldern findest du ein horizontales Menü: Formulardesign erstellen Im Bereich Erstellen findest du den Inhalt des Formularfelds. Das sind Text, Bild, Listen, Single Choice Felder und viele mehr. Die Blöcke werden einfach mit gedrückter Maustaste in den Formularbereich gezogen. Wenn du deine Newsletteranmeldung auf deiner Website gestaltet hast (ich mache das immer so), dann brauchst du für dein Anmeldeformular nur die relevanten Felder auswählen: E-Mail, Vorname und Absende-Button. Diese drei Felder sind unverzichtbar, wenn du deinen ersten Newsletter versenden möchtest.

Das heißt für dich: Den gesamten oberen Text über dem E-Mail-Feld kannst du löschen.

Das funktioniert so: Geh mit dem Mauszeiger über den jeweiligen Text, das Textfeld wird blau umrandet und an der rechten Ecke erscheint ein Papierkorb-Symbol.

Jetzt fehlt noch das Feld für den Vornamen. Dazu gehst du in den Feldern links auf „Attribut“. Das ziehst du nach rechts auf das Newsletterfeld. Nun ändert sich im linken Feld die Ansicht in „Attribut-Datenbank“. Im Auswahlfeld steht SMS. Das willst du natürlich nicht haben. Also gehst du dort ins Feld und wählst „Vorname“ aus. Von den lilafarbenen Haken kannst du folgende deaktiveren:

  • Name des Labels
  • Hilfetext
  • Pflichtfeld

Das Pflichtfeld ist Geschmacksache. Ich hab erfahren, dass viele ihren Vornamen nicht angeben möchten. Ist zwar doof, aber warum soll ich die Leute vergrätzen. Also würde ich den Haken bei Pflichtfeld deaktiveren. Dasselbe machst du mit dem E-Mailfeld:

  • Auf das E-Mailfeld klicken
  • Es öffnet sich wieder links die Attribut-Datenbank
  • Name des Labels deaktivieren
  • Hilfetext deaktivieren.

Das Pflichtfeld kannst du nicht deaktivieren. Was ja logisch ist, denn die E-Mailadresse ist zwingend notwendig, sonst kann sich der Mensch ja nicht anmelden.

Fertig. Jetzt kannst du noch ein wenig gestalten. Wenn du nicht möchtest, dass der Button schwarz ist, sondern vielleicht ein schickes Pink hat, dann machst du folgendes:

  • Du klickst auf den Button.
  • Links öffnet sich der Bereich „Formulardesign“.
  • Klick auf den Button
  • Hier kannst du die Schriftart auswählen (vorausgewählt: Helvetica)
  • Du kannst die Hintergrundfarbe ändern
  • du kannst Rundungen einfügen

Fertig. Klick auf Weiter.

Im nächsten Schritt wird dir empfohlen, die reCaptcha-Bestätigung zu nutzen. Das würde ich nicht machen, weil es für den Spamschutz bessere Möglichkeiten gibt. Das aber anderer Stelle.

6.3) Liste auswählen

Das ist einfach: Du musst nur deine gewünschte Liste auswählen.

6.4) Einstellungen für deine automatisierten E-Mails

Die ersten Einstellungen sind einfach:

  • Double-Opt-in-E-Mail anklicken
  • Eine Vorlage auswählen
  • Deine Optin-Vorlage auswählen

Jetzt bewährt sich, dass du deine Mails bereits angelegt hast und dass du deine Fast-geschafft und die Danke-Seite erstellt hast. Im folgenden Schritt kannst du aus den 3 runden Radio-Buttons auswählen:

  • Double-Opt-In-E-Mail
  • Einfache Bestätigungs-E-Mail (Nach der Einsendung des Formulars wird eine einzige Bestätigungs-E-Mail versandt.)
  • Keine Bestätigungs-E-Mail (Nach der Einsendung des Formulars wird keine Bestätigungs-E-Mail versandt.)

Double-Opt-in-E-Mail wählen

Wir wählen natürlich den ersten Radio-Button: Double-Opt-in-E-Mail. Die anderen 3 Buttons sind nicht DSGVO-konform. Wenn du Double-Opt-In-E-Mail aktiviert hast, werden weitere Optionen geöffnet. Die Optionen haben jeweils ein Kästchen zum Aktivieren. Links davon befindet sich ein senkrechter Strich. Diesen Strich ist super sinnvoll, weil der visualisiert, dass diese 3 Schritte zur Automation zusammengehören.

Bestätigungsseite nach Absenden des Formulars

Bestätigungsseite nach Klicken auf den Bestätigungslink in der E-Mail

Finale Bestätigungs-E-Mail

Automation festlegen

Spätestens jetzt bewährt sich dein Plan, den du oben gemacht hast. Und nun wird dir vielleicht klar, warum es sinnvoll war, zuerst die Fast-geschafft-Seite, die Danke-Seite und die Bestätigungsmail anzulegen.

Bestätigungsseite nach Absenden des Formulars

Es öffnen sich 2 Felder
Feld 1) Wählen Sie eine Bestätigungsseite aus (das sind die Standardseiten von Brevo)
Feld 2) Ein leeres Feld, in der du deine URL eintragen kannst.

Du wählst natürlich die 2. Option. Kopiere die URL deiner Fast-geschafft-Seite und füge sie in das 2. Feld ein.

Bestätigungsseite nach Klicken auf den Bestätigungslink in der E-Mail

Das geht genauso wie oben:
Feld 1) Wählen Sie eine Bestätigungsseite aus (das sind die Standardseiten von Brevo)
Feld 2) Ein leeres Feld, in der du deine URL eintragen kannst.

Du wählst wiederh die 2. Option. Kopiere die URL deiner Danke-Seite und füge sie in das 2. Feld ein.

„Finale Bestätigungs-E-Mail“ wählen

Hier wählst du deine letzte Bestätigungsmail aus. Wenn du alles gemacht hast wie in dieser Anleitung, dann hast du die Vorlage für die Begrüßungsmail bereits erstellt und aktiviert.

Klick also auf Weiter

6.5) Nachrichten anpassen

Nachrichten können u.a. Fehlermeldungen sein. Beispiel: Wenn der Kontakt seine E-Mailadresse falsch geschrieben hat (so dass sie als Mailadresse nicht erkannt wird). Dann muss eine Fehlermeldung ausgegeben werden. Oder wenn er vergißt, das Mailfeld auszufüllen.

6.6) Formular Teilen

Brevo stellt mehrere Möglichkeiten vor, wie du dein Formular teilen kannst. Die 1. Möglichkeit ist ein „Quick Share“. Das heißt: Du kannst einfach per Social Media und per E-Mail den Code für das Formular weiterleiten. In diesem Fall möchtest du das Formular auf deiner Website einbinden. Dafür hast du drei Möglichkeiten

  • Per iFrame
  • Per HTML oder
  • per einfaches HTML

Ich habe iFrame und HTML versucht.

IFrames finde ich etwas problemetisch. Sie sind nicht sehr responsiv und sie können einige Nachteile haben. Es kann sein, dass bei einem serverseitigen Cache der Code nicht geladen wird. Dann musst du die URL des Formulars im Cache ausschließen. Und du musst die URL in deinem Cookie-Plugin ausschließen.

Der Nachteil bei der HTML-Einbettung: Hier kann es passieren, dass das Formular nicht so angezeigt wird, wie du es gestaltet hast. Das passiert dann, wenn die Styles deiner Website die Styles des Formulars überschreiben. Bei mir ist genau DAS passiert.

Deshalb habe ich die iFrame-Lösung gewählt.

7. Schritt: So fügst du den Formular-Code in deine Webseite ein

Das ist jetzt einfacher als du denkst. Du kopierst den Code (ich habe wie gesagt den iFrame kopiert).

Auf deiner Website musst du ein „Code-Modul“ wählen. Je nachdem, mit welchem Theme du arbeitest. Für das Theme Divi oder für Elementor gibt es so ein Code-Modul. Das wählst du aus und setzt es an die Stelle in deinem Newsletter-Feld, wo das Formular stehen soll. In das Code-Modul setzt du deinen kopierten Code ein.

Fertig.

Wenn du alles richtig gemacht hast, dann kann Anna sich jetzt bei deinem Newsletter anmelden.

Mach am besten ein Test.

Hast du Fragen? Dann melde dich gern bei mir. Für Support kannst du dich gern im Kalender eintragen.

Oder schreib mir einfach eine Mail.

Was ist ein Theme? Was ist WordPress?

Was ist ein Theme? Was ist WordPress?

von | Nov. 10, 2022 | Anleitungen, Startseite, WordPress

Was ist ein Pagebuilder?
Was sind Plugins?

Meine Antworten, wenn es schnell gehen soll:

  • WordPress ist das Programm, mit dem du eine Website baust. Dafür hat WordPress alle grundlegenden Funktionen „an Bord“.
  • Das Theme legt das Design und die Optik deiner Website fest und beeinflusst einige Funktionen von WordPress.
  • Ein Pagebuilder ist ein Tool, das den Aufbau einer Website leichter macht. Manche Themes haben einen Pagebuilder integriert (so wie „Divi“)
  • Plugins erweitern WordPress um zusätzliche Funktionen. Manche Funktionen sind wichtig. Sie sorgen u.a. für die Sicherheit und Ladegeschwindigkeit der Website.

Keine besonders originellen Antworten.

Und irgendwie etwas trocken und abstrakt.

Nichts für visuell denkende Menschen.

Deshalb hab ich eine Art Übersetzung überlegt.

Eine, die das Thema verständlich macht, ohne mit Technik zu langweilen.

Falls du jetzt die Stirn runzelst: Keine Sorge, der Titel diese Artikels soll dich nicht in die Irre führen. Am Ende der Geschichte sage ich dir, mit welchem Theme ich arbeite und welche Plugins du WIRKLICH brauchst.

Lass mich dir ein Bild malen

Stell dir drei neu gebaute Häuser vor.
In eines der Häuser möchtest du einziehen.
Dazu schaust du dir Haus für Haus an.

Du schließt die Haustür von Haus Nummer eins auf.
Schon im Flur siehst du, dass mit dem Haus etwas nicht stimmt:

Der Fußboden ist ein grauer, kalter Betonboden.
Das Haus ist kalt, denn im Haus gibt es keinen einzigen Heizkörper.
Die Küche ist leer. Aus den nüchternen Wänden ragen die nackten Wasserrohre. Wasseranschluss, Stromanschluss und Rohre sind zwar verlegt, aber die Einrichtungen und Anschlüsse fehlen: Spülbecken, Herd, Kühlschrank und Schränke gibt es nicht.
Auch das Bad hat nur die offenen Wasseranschlüsse und einen Ablauf für die Toilette. Waschbecken, Dusche und ein WC: Fehlanzeige.
Licht gibt es natürlich auch nicht: An der Decke baumeln die nackten Stromkabel.

Ziemlich unwohnlich also.

Du ahnst es vielleicht:

Dieses leere Haus ist deine WordPress-Installation.

Ohne Theme, ohne Plugins.

Nur das nackte WordPress.

Du kannst dich in diesem Haus aufhalten, du hast sogar einen Schlüssel für die Haustür, die du abschließen kannst. Du kannst deine Sachen mitbringen und in den Räumen ablegen.

Aber wohnen kann man diesen Aufenthalt nicht nennen.

Diesem Haus fehlt die Grundausstattung:
Heizkörper, Küchenschränke, Herd, Spülbecken, WC, Dusche, Waschbecken.

Erst mit dieser Grundausstattung kann das Haus als „Wohnung“ bezeichnet werden.

Das sagt sogar Wikipedia 😉

So machst du WordPress „wohnlich“: mit einem Theme

Also schaust du dir das zweite Haus an.

Du schließt wieder die Tür auf.

Dieses Haus sieht schon ganz anders aus:

Auf dem Fußboden wurde ein einfaches, aber schickes Klicklaminat verlegt. Das macht einen warmen und gepflegten Eindruck.

Die Küche ist vollständig eingerichtet. Mit Küchenschränken, Arbeitsplatte, Spüle, Herd und sogar einen Kühlschrank gibt es. In den Schränken findest du Tassen, Gläser und Teller.

Auch das Bad ist vollständig: Darin findest du eine Dusche mit Schiebetüren, ein Waschbecken und nebenan ein Stand-WC. Die Wände und der Fußboden sind mit weißen Fliesen bedeckt.

Und natürlich hat das gesamten Haus moderne Flachheizkörper unter den Fenstern.

Die Grundausstattung einer Wohnung ist also schon mal da.

Doch nicht nur das: Mittlerweile dämmert es und du siehst keine Details mehr. Du tippst auf den Lichtschalter und siehe da: Licht. In diesem Haus hängt in jedem Raum eine flache Deckenleuchte. Elegant geht anders, aber du kannst alles sehen. Das ist ja die Hauptsache.

Du gehst weiter:
In einem Raum findest du ein Bett und daneben ein Nachttisch mit einer kleinen LED-Lampe drauf. Im nächsten Raum stehen zwei Sessel, ein kleiner Hocker als Beistelltisch und eine Stehlampe. Im dritten Raum steht ein kleiner Esstisch mit zwei Stühlen.

Zwar ist dieses Haus immer noch nicht der Knaller. Aber wenn du Purist bist, reicht diese Einrichtung völlig: Du kannst dir einen Tee machen, dich auf dem Sessel ausruhen, im Bett die Nächte verbringen und für’s Frühstück setzt du dich an den Tisch.

So, jetzt kommt das Theme ins Spiel:

Dieses rudimentär eingerichtete Haus ist dein kostenloses Standard-Theme.

Nicht besonders schick und sehr einfach gestrickt.

Wenn du dein individuelles Design hinbekommen möchtest, brauchst du Zeit, Geduld und musst vielleicht etwas Technikkenntnisse haben, denn das Theme ist nicht so einfach zu handhaben.

Aber es reicht völlig aus, um damit einen einfach gestalteten Blog zu starten.

Jetzt denkst du sicher: Da geht natürlich mehr.

Und, weil wir ja malen wollen:

Du möchtest nicht nur „irgendwie“ wohnen.

Du möchtest es gemütlich haben, du möchtest deine Wohnung geniessen!

Also gehst du ins Haus Nummer drei.

In diesem Haus findest du das, was eine Wohnung erst so richtig behaglich macht: Teppiche auf den Fußböden, Bilder an den Wänden, Vorhänge an den Fenstern, passend zu den Sesseln eine gemütliche Coach, eine Musikanlage, um richtig schön zu chillen, weiche Kissen und ein hübsches Plaid auf dem Sofa, damit du dich wohlig zurücklehnen und dich einkuscheln kannst, während du dein Lieblingsbuch liest.

An der Wand steht ein cooles Echtholzregal für deine Bücher. Und gegenüber steht eine schicke Landhaus-Kommode, auf der eine stylische Tischlampe steht, die deinen Raum in warmes und gemütliches Licht taucht.

Die Wände haben einen Farbanstrich. Im Esszimmer steht ein einladender, großer Holztisch mit sechs gepolsterten Stühlen. Der Tisch bietet viel Platz und lädt dazu ein, mit Freunden stundenlang gemütlich zu brunchen.

Auch Küche und Bad sind tippitoppi: In der Küche sind moderne Einbaumöbel mit Schubladenelemente, in denen alles seinen festen Platz hat und die beim Schließen wie von Zauberhand leise zufahren. Hier findest du Küchenhelferchen, mit denen du ruckzuck deine Lieblingssachen machen kannst: Kaffee, Smoothies, Toast, Tee oder Kuchen. Eine Spülmaschine ist natürlich ebenfalls vorhanden – damit du deine Zeit nicht mit dem lästigen Abwasch verschwenden musst.

Diese Wohnung hat alles, wonach du dich sehnst, wenn du kaputt von der Arbeit kommst und dich einfach nur in den Kissen rekeln willst, um Vivaldis Vierjahreszeiten zu lauschen.

Das ist dein Premium-Theme, das viele zusätzliche Funktionen hat. Mit diesem Theme bekommst du deine Website schneller und einfacher nach deinem Geschmack hin als mit einem kostenlosen Standard-Theme.

Mit dem Pagebuilder baust du ruckzuck deine Seiten

Doch dieses 3. Haus hat noch mehr zu bieten.

Zu diesem Haus gehört ein Team von Helfern.

Du hast also nicht nur eine exquisite Wohnungseinrichtung, sondern zusätzlich Hilfe für deinen Haushalt:

eine Köchin, die dein Mittagessen zubereitet,
eine Haushaltshilfe, die deine Wohnung in Schuss hält und
eine Fachkraft, die deine Fenster putzt
Du hast endlich mehr Zeit für deine Hobbys.
Du brauchst keine lästige Hausarbeit machen.

Das ist dein Theme mit Pagebuilder

Der Pagebuilder nimmt dir viel Aufbau-Arbeit ab und hilft dir, Zeit zu sparen.

Die Entscheidung ist gefallen:
Haus Nummer 3 ist es. Hier ziehst du ein.

Nun fehlt dir fast nichts mehr zum Glück in deiner Wohnung.

Oder?

Plugins bringen wichtige Funktionen mit

Fast.

Denn dir fällt ein, dass du ein paar Erweiterungen für dein schickes Haus brauchst:

Du möchtest dich vor Einbruch absichern. Und du brauchst einen Schutz vor Sonneneinstrahlung, damit es im Sommer nicht zu heiß wird in der Wohnung. Also lässt du dir eine Aussenjalousie installieren.
Ein Gartenhäuschen fehlt dir auch noch. Damit du Rasenmäher, Werkzeuge und Fahrräder unterstellen kannst. Deshalb holst du dir vom Baumarkt eines der netten Holzhäuschen, die es als Bausatz gibt.
Außerdem fehlt noch ein gut sichtbares Nummerschild am Garteneingang, damit Besucher dich schnell finden und
ein großer Briefkasten, damit der Postbote mit einem Blick sieht, wo er deine Briefe einwerfen darf.
Und schwups: Schon hat deine WordPress-Installation 4 Plugins bekommen.

Du siehst: Es ist gar nicht soooo kompliziert 😉

Mein Empfehlung zu deinem „Haus“

Mit diesem Theme arbeite ich

Ich arbeite seit Jahren mit dem Theme Divi.
Divi stammt vom Anbieter „Element Themes“. Divi ist ein Theme mit integriertem PageBuilder und wird ständig weiterentwickelt.

Mit so einem PageBuilder kannst du die einzelnen Elemente einer Seite ruckzuck zusammen bauen. Denn der Pagebuilder hat fertig programmierte Module, die du nur noch „zusammenstecken“ brauchst. Wie die Steine eines Lego-Hauses.

Übrigens: Viele sagen mir, dass sie Divi getestet haben und damit nicht zurecht gekommen sind.

Ich fand die Arbeit am Divi zu Anfang auch holperig. Immer wieder bin ich gestolpert. Und tatsächlich: Noch vor wenigen Jahren war Divi etwas sperrig – Anfänger konnten schon mal ihre liebe Not mit dem Divi haben.

Inzwischen ist das Theme richtig gut geworden. Es wurde schneller und es wurden Funktionen eingebaut, die richtig Gold wert sind. Einmal das Theme kennengelernt, können Laien ihre Seitenelemente ohne Probleme ruckzuck zusammenbauen.

Diese 4 Plugins brauchst du wirklich

Was ist ein Plugin?

Ein Plugin ist eine technische Erweiterung der Grundprogrammierung von WordPress.
Leider stellen Plugins immer wieder DIE Schreckgespenster von WordPress dar. Ganz zu unrecht. Denn im Gegensatz zu anderen Systemen kannst du auswählen, welche Plugins du installierst und welche nicht. Das ist ein riesiger Vorteil. Denn je mehr Plugins im System installiert werden, desto „schwerer“ wird das System – die Ladezeit der Website wird immer langsamer. Das stört den Besucher der Website und ist deshalb auch ein Rankingfaktor von Google. Außerdem: Die Website wird anfälliger für Störungen.

Viele Websitebetreiber nutzen leider zu viele Plugins.

Hier also meine Empfehlungen. Du brauchst:

ein Plugin für die Ladegeschwindigkeit
ein Plugin, um Spams zu vermeiden
ein Plugin für deine BackUps
ein Plugin zur Suchmaschinenoptimierung
Vielleicht noch das ein oder andere Plugin zusätzlich. Als Beispiel: Falls du viele Bilder auf deiner Website hast, lohnt sich noch Smash, das den Ladevorgang von Bildern optimiert.

Die wichtigsten Plugins:

Ladezeit der Website:
Ein Caching-Plugin verringert die Ladezeit deiner Website. Und das honoriert Google mit einem besseren Ranking. Ich empfehle dafür WP Rocket oder WP Super Cache.

Kommentar-Spams:
Ein Spam-Plugin sorgt dafür, dass du nicht mit Spam-Kommentare deiner Beiträge überhäuft wirst. Ein gutes Plugin ist Antispam Bee. Vorinstalliert in WordPress ist Akismet – das aber würde ich löschen, da es datenschutzrechtlich bedenklich ist.

Backup des Systems:
Ein Backup-Plugin ist wohl eines der wichtigsten Plugins. Zwar machen gute Hoster von sich aus regelmäßige Backups deiner Website. Aber sicher ist sicher und du hast mit einem Plugin die volle Kontrolle deiner Sicherungen. Ein gutes Plugin ist Backup Draft. Aber auch andere funktionieren gut und machen, was sie sollen.

SEO (Suchmaschinenoptimierung)
Du brauchst ein Plugin für die Suchmaschinenoptimierung. Ich nutze auf unterschiedlichen Websites Yoast SEO und RankMath. Beide Plugins sind gut und richtig wertvoll für dich, um dein Ranking zu verbessern.

Website richtig gestalten – vermeide diese 9 Fehler

Website richtig gestalten – vermeide diese 9 Fehler

von | Dez. 11, 2020 | Design, Startseite, Text, WordPress

Gestalte deine Website für deine Besucher: lesbar

Egal womit du unterwegs bist: WordPress, Joomla, Typo 3 oder Baukastensysteme wie Jimdo, Squarespace oder Wix: Jedes System stellt unterschiedliche Anforderungen. Aber eine Arbeit musst du überall machen: Du musst dir Gedanken darüber machen, wie du deine Website richtig gestalten kannst. Richtig heißt: lesbar und verständlich. Als WordPress-Coach bewege ich mich in diesem Artikel in erster Linie im System WordPress. Aber die hier erwähnten Fehler werden mit jedem System gemacht.

In meinem Blogartikel „Wie du ein genial einfaches Konzept für deine Website erstellst“ hab ich es geschrieben: Wenn du eine Website baust, bist du als Texter, Designer und Techniker unterwegs. Wenn du mit WordPress und einem guten Premium-Theme wie dem Divi arbeitest, dann nimmt dir das Theme viele Arbeiten ab. Ein professionelles Theme unterstützt dich in Design und Technik.

Ein bisschen gesunder Menschenverstand, Logik und Einfühlungsvermögen ist trotzdem nicht verkehrt. Häufig beobachte ich auf Websites dieselben Fehler in der Gestaltung. Die schlimmsten Fehler sind aus meiner Sicht mangelnde Lesbarkeit der Texte. Damit du auf deiner Website diese Fehler vermeidest, hab ich diesen Blogpost geschrieben.

Mach es besser. Ich zeige dir hier, wie du deine Website richtig gestalten kannst, damit deine Besucher deine Texte gern lesen.

Fehler Nr. 1

Schlechte Lesbarkeit durch zu breite Text-Zeilen

Viel zu breite Textblöcke ist ein häufig zu beobachtendes Phänomen. Warum so viele Websitebetreiber diesen Fehler machen ist mir ein Rätsel. Breit laufende Zeilen lesen sich einfach extrem anstrengend. Ich bekomme davon Kopfschmerzen. Probier mal: Nimm ein normal großes Lineal (30 cm). Falls du das nicht hast: Halte ein DinA4-Blatt quer vor deinen Augen. In dem Abstand, den du vor einem Monitor einnimmst. Also ca. 50 cm. Und nun wandere mit deinen Augen die gesamte Kante des Lineals oder des Blatts entlang: Von links, nach rechts, wieder zurück nach links, wieder nach rechts. Hin und her, von Ecke zu Ecke. Ein paar mal.

Das ist Schwerstarbeit für deine Augen. Das tut weh. Ich bekomme davon Kopfschmerzen. Jetzt wirst du einwenden: Okay, aber ich kann von links nacht rechts auch den Kopf bewegen. Klar. Beim Zuschauen eines Tennisspiels ist das normal. Da bewegt man den Kopf. Aber: Das macht keiner vor dem Monitor.

Es gibt verschiedene Kniffe, wie du dich an eine ideale Breite deiner Texte hältst. Eine einfache Möglichkeit ist: Lass den Text nicht breiter laufen als 15 – 20 cm. Abhängig von der Auflösung deines Displays. Natürlich ist dieses Hilfsmittel relativ. Relativ zu der Auflösung deines Notebook-Displays, von der Schriftgröße und dem Schrifttyp. Aber als grobe Richtung hilft diese Angabe.

Eine andere Empfehlung ist, die Texte nicht breiter laufen zu lassen als 800 Pixel. Aber dieser Tipp hat 2 Haken: Der 1. Haken: Pixel ist nicht gleich Pixel. Die Pixel eines Displays mit einer hohen Auflösung sind kleiner als die Pixel eines Displays, dessen Auflösung weniger groß sind. Das heißt: 800 Pixel sind nicht gleich 800 Pixel. Auf dem einen Display sind 800 Pixel 20 cm breit, auf einem anderen Display sind 800 Pixel 18 cm breit. Und 2 cm mehr oder weniger machen für die Lesbarkeit eines Textblocks viel aus!

Der 2. Haken: Die Breite eines Elements in responsiv programmierten Themes – wozu auch professionelle Premium-Themes von WordPress gehören – geben die Breite auch in Prozent an. Und selbst wenn die Breite eines Elements in Pixel angegeben ist – siehe oben. Eine sinnvolle Empfehlung ist die Anzahl der Zeichen in einer Zeile. Meine Empfehlung: Nimm 70 bis 80 Zeichen (ohne Leerzeichen) in einer Zeile. Wobei dieser Wert wieder abhängig ist von der Schriftgröße und der Schriftart. Je größer die Schrift, desto weniger Zeichen. Je schlanker der Schriftschnitt, desto mehr Zeichen. Letztlich ist alles relativ. Behalt deshalb die Lauflänge in cm im Auge. Also gefühlt 18 – 20 cm ist ein guter Wert.

Fehler Nr. 2

Textwüsten: Die Textblöcke haben zu wenig Absätze

Ein wesentliches Element, wenn du deine Website richtig gestalten möchtest, ist die Gestaltung der Texte.

Leider wird häufig zu wenig auf dieses wichtige Element geachtet. Dabei nehmen die Texte einen Großteil der Fläche auf den Seiten ein. Wenn man von Foto-Websites absieht. Fehlende Absätze sind einer der Fehler: Häufig sieht man auf schlecht strukturierten Webseiten riesige Textblöcke ohne Gliederungen, mit wenig Absätzen. Die berüchtigten Textwüsten. Die Absatzlänge ist ein wichtiges Kriterium, wenn man eine Website richtig gestalten will. Warum? Weil zu lange Absätze die Seite unübersichtlich machen. Mach es besser. Gliedere deine Texte in kurze, leicht verdauliche Happen. Plane viele Absätze ein. Mit höchstens 3 bis 4 Zeilen. Das Lesen am Rechner ist sehr anstrengend. Wenn du möchtest, dass deine Leser deine Seite nicht fluchtartig verlassen, dann strukturiere deine Texte. Setze viele Absätze, baue Listen ein, setze Grafiken in den Text. Da gibt’s viele Möglichkeiten. Sei kreativ. Gut sind Listen:

  • Listen bringen Abwechslung
  • Listen sind gut für das SEO
  • Listen lockern Texte auf
  • Listen lassen sich prima lesen
  • Listen bleiben super im Gedächtnis

Fehler Nr. 3

Schriften im Fließtext, die schlecht lesbar sind

Wie du ohne Arial, Tahoma oder Times deine Website richtig gestalten kannst

Vorbei die Zeit, als Websites mit der winzigen Auswahl von 3 bis 4 Schriften unterwegs waren. Damals musste man die Schriften für seine Website nehmen, von denen man ausgehen konnte, dass die auch auf dem Rechner des Websitebesuchers vorhanden sind. Nutzt du Google-Fonts? Oder hast du schon mal davon gehört? Ein super Tool. Nie war es so einfach wie heute, wirklich schöne und dennoch lesbare Schriften auf seiner Website zu nutzen. Die Auswahl an schönen Schriften ist fast grenzenlos. Aber wer die Wahl hat, hat die Qual. Die meisten Websitebetreiber sind keine Designer. Und wissen eben nicht, welche Schriften zusammen harmonieren und welche nicht. Das ist allerdings noch das kleine Problem. Das größte Problem ist: Viele Websiteinhaber nehmen Schriften, die in Fließtexten nur sehr schwer zu lesen sind. Beispiel: Es gibt Schriften, die sehr schlank gestaltet sind. Ich finde solche Schriften schick, sie sehen meist edel aus. Wie die Condensed-Schnitte mancher Schrifttypen. Die Schrift hier in den Überschrifte meiner Posts haben eine Condensed-Schrift. Sie ist schmal und schlank geschnitten. Aber: Im Fließtext eingesetzt, also in längeren Texten, sind solche Schriften eine Katastrophe. Besonders ältere Augen ab 50 haben größte Schwierigkeiten, solche Schriften zu lesen. Damit du siehst, was ich meine: Die Roboto zum Beispiel. Eine sehr gern und häufig genutzte Schrift, die auch in den Google-Fonts enthalten ist. Diese Schrift hat einen normalen Schnitt (wie dieser Text), aber auch einen, der sehr schmal läuft (Roboto Condensed). Im Bild unten links die Roboto, rechts die Roboto Condensed.
Roboto und Roboto Condensed

Schriften im Vergleich: Roboto und Roboto Condensed. Im Fließtext ist ein normaler Schriftschnitt wie Roboto regular einfacher zu lesen als eine schmal geschnittener Schrift wie die Roboto Condensed
Im Vergleich siehst du sehr gut, was besser zu lesen ist. Zum Stichwort Google Fonts ein wichtiger Tipp: Setze Google Fonts DSGVO-konform ein! Was das bedeutet und welche Auswirkungen es haben kann, wenn du die Google Fonts falsch anwendest, hab ich in diesem Artikel beschrieben. Dort liest du auch, wie du die Google Fonts richtig einsetzt.

Formatierungen, die die Schrift unleserlich machen

Unnötige Formatierungen sind genauso schlimm. Wenn du deine Website richtig gestalten möchtest, kannst du auch auf diesen Punkt achten. Was verstehe ich unter „unnötigen Formatierungen“? Auf einer Website mit Rezepten hab ich neulich einen Text lesen müssen, der in 6 längeren Absätzen mit Kursivschrift geschrieben wurde. Wie hier, diese schräg gestellt Schrift. Ich musste 3 mal lesen, um den Text erfassen zu können. Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.

Eine andere Problemschrift: Script-Schriften

Script-Schriften sind Schriften, die aussehen wie von Hand geschrieben. Sie haben diesen menschlichen Touch, wirken nahbar und authentisch, bringen die emotionale Note in den Text, den Human Touch. Und zu vielen Branchen passen sie wunderbar. Zum Beispiel zu DIY-Angeboten.

Ich mag Script-Schriften. Aber: Sie sind oft miserabel lesbar. Kann man leider nicht anders sagen. Neulich ist mir genau das passiert: Eine wunderschön schnörkelige, weit geschwungene Schrift als Überschrift auf einer Website. Aber: Ich konnte einfach nicht auf dem ersten Blick erkennen, ob es sich beim f um ein f oder um ein s handelt. Ich kam ins Stocken. Ich musste mehrmals lesen. Es war ein s. Ungünstig, wenn man 5 Sekunden braucht, um überhaupt die Schrift entziffern zu können. Und dann weitere wertvolle Sekunden um zu erfassen, welches Produkt die werte Dame bietet. (Sorry an dieser Stelle, aber Scriptschriften sieht man zu 99,9 Prozent bei AnbieterInnen). Daher meine Empfehlung: Sei vorsichtig im Gebrauch von Scriptschriften.
Website richtig gestalten

Fehler Nr. 4

Zu kleine Schrift und ungünstiger Zeilenabstand

Du merkst: Zu Schriften gibt es viel zu schreiben.

Leider machen sich die wenigsten wirklich Gedanken um diesen so wichtigen Punkt. Denn was nützt das schönste Layout der Website, die tollsten Farben, die brilliantesten Bilder, der hilfreichste Inhalt – wenn ich Probleme habe, die Schrift zu lesen? Wenn du die Website richtig gestalten möchtest, achtest du auch auf die Schriftgröße und den Zeilenabstand. Häufig sehe ich auf Websites zu kleine Schrift und / oder zu enge Zeilenabstände. Das ist echt eine Herausforderung für jeden Leser. Und wenn du möchtest, dass wirklich alle Altersgruppen deine Inhalte sehen, dann lass auch mal ältere Augen deine Texte lesen. Die werden mit der Lesbarkeit nämlich weit mehr Probleme haben als deine 20 Jahre jüngeren Leser und Leserinnen. Auch ein falscher Zeilenabstand kann die Lesbarkeit beeinflussen. Ist der Zeilenabstand zu gering, wird das Lesen anstrengend. Ist der Zeilenabstand zu weit, besteht die Gefahr, dass sich dein Leser auf deiner Website verliert. Und es muss unnötig gescrollt werden.
Website richtig gestalten

Fehler Nr. 5

Komplizierter Satzbau macht das Lesen schwer

Die Wesite richtig gestalten mit dem richtigen Inhalt

Zugegeben: Jetzt hab ich mich sehr weit aus dem Fenster gehängt: Denn der Inhalt hat nicht wirklich etwas mit der Gestaltung der Website zu tun. Aber: Mit der Formulierung deiner Texte kannst du dazu beitragen, wie gern die Besucher deine Texte lesen. Durch zu komplizierten Satzbau kannst du das Lesen erschweren. Je einfacher die Texte zu lesen sind, desto besser für deine Website, weil deine Besucher dann länger auf deiner Website bleiben. Und das ist nebenbei bemerkt gut für das SEO. Auf dem PC oder Smartphone lesen ist anstrengend für die Augen. Und wenn du in einfachen Worten und kurzen Sätzen schreibst, machst du es deinen Lesern leichter. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler anwendest.

Wenn du komplizierte Sätze bildest, passiert nur eins: Du wirst nicht verstanden. Worauf musst du also achten?

  • Einfachheit: Kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden Syntax: Pro Satz sollte nur ein Gedanke ausgedrückt werden. Das Wesentliche steht am am Anfang des Satzes.
  • Prägnanz: viele Verben und die Anwendung von Metaphern machen den Text lebendig (und leichter verständlich)

Übrigens gibt es zur Ermittlung der Lesefreundlichkeit sogar eine wissenschaftliche Herangehensweise.

Der Flesch Reading Ease

Hast du schon mal was von Flesch Reading Ease gehört? Der Flesch Reading Ease (FRE) wird für die Lesbarkeit von Texten angewendet. Dazu wird der FRE aus verschiedenen Faktoren berechnet. Unter anderem die oben genannten. Der Grad der Lesbarkeit wird mit einem Index ausgedrückt. Diesen Index kannst du sogar überprüfen lassen. Gib hier deinen Text ein und du erhältst den Index: fleschindex.de/berechnen Ein hilfreiches Buch zu dem Thema ist das Buch „Deusch für junge Profis“ von Wolf Schneider. Lesenswert auch „Das Leben und das Schreiben“ von Stephen King. Wie, DER Stephen King? Der mit „The Shining“ oder „Carrie“? Genau. Dass ich Horrofilm-Fan bin kann ich nicht gerade sagen. Das Buch empfehle ich trotzdem gern.
Website richtig gestalten

Fehler Nr. 6

Zu wenig Kontrast

Ich bleibe bei den Schriften: Ungünstige Kontraste wirken sich besonders bei den Texten negativ auf die Lesbarkeit aus. Beispiel: Wenn die Farbe der Schrift auf deiner Website ein heller Grauton ist und der Text auf weißem Grund steht, dann ist der Kontrast zu gering. Besonders ältere Augen haben Schwierigkeiten, solche Texte zu lesen. Oder gelbe Schrift auf rotem Grund. Das geht gar nicht. Bei der Gelegenheit: Bestimmt achtest du vor dem Erstellen deiner Website auf deine Zielgruppe. Wenn du Studenten ansprichst musst du auf andere Dinge achten, als wenn du deine Website für Rentner konzipierst. Trotzdem weißt du nie, wie gut die Augen deiner Leser sind. Egal ob jung oder alt. Deshalb achte immer darauf, dass die Kontraste ausreichend sind. Du musst es deinen Leser ja nicht unnötig schwer machen. Auch wenn es megaschick aussieht…
Website richtig gestalten

Fehler Nr. 7

Zu viele unterschiedliche Farben

Wie du mit Farben deine Website richtig gestalten kannst

Wie häufig hab ich das gesehen: Websites, die aussehen wie zugeklebte Litfasssäulen. Hier ein Bild, da eine Grafik, viele unterschiedliche Farben: knallbunt und überladen waren die Websites. Die Elemente einer Website haben zwei Aufgaben:

  • die Leser informieren und
  • die Leser beim Lesen führen.

Form follows Function: Die Inhalte sollten immer der Maßstab sein für die Gestaltung. Das betrifft Texte, Grafiken, Fotos, Farben, Schriften, Weißräume – alle Gestaltungsmerkmale einer Website. Farben: Wenig Akzentfarben sind sinnvoll. Farbliche Akzente helfen beim Lesen und strukturieren die Seite. Biete Abwechslung und mach mit sparsam und klug eingesetzten Akzentfarben das Lesen angenehmer. Wenn du zu viel Bilder und Farben einsetzt, dann ermüdet das Auge schnell, der Leser ist in nullkommanix von der Reizüberflutung übersättigt und hat wenig Lust, weiterzulesen. Außerdem führt zu viel Bunt schnell dazu, dass der Leser das Wesentliche aus den Augen verliert. Du möchtest ja, dass deine Leser deine Texte lesen. Dein Produkt kaufen. Zu viel unterschiedliche Farben lenken dabei ab. Manchmal ist weniger mehr…

Fehler Nr. 8

Ungünstige Farben für dein Angebot

Welche Farben kannst du nehmen für dein Thema? Welche Farben passen? Es müssen nicht deine Lieblingsfarben sein. Im Gegenteil, häufig sind es völlig andere Farben als die Lieblingsfarben des Anbieters der Website. Die Farben müssen zum Produkt passen. Und sollten die Zielgruppe erreichen können. Denn die Website soll in erster Linie die potentiellen Kunden ansprechen. Als Designerin nehme ich mir Tools zur Hilfe. Damit kann ich gezielt bestimmte Farbkombinationen heraussuchen. Bevor ich mit der Gestaltung anfange, überlege ich, welche Farbbereiche zum Thema passen könnten und wo und wie ich die Farben einsetze. Sind eher kalte Farben sinnvoll? Braucht mein Thema eher warme Farben? Was soll rüberkommen: Verspieltheit, Information, wissenschaftlicher Hintergrund, unterkühlte Distanz, menschliche Wärme, möchte ich Appetit machen, die Sinne ansprechen…

Dann überlege ich Farbkombinationen. Ein schönes Tool für die Zusammenstellung von passenden Farbpaletten ist das Color-Wheel von Adobe color.adobe.com Übrigens: Farben werden im Web in einem 6-stelligen Hexadezimalcode angegeben. Dieser Code besteht aus insgesamt 6 Ziffern und/oder Buchstaben mit einem # davor. Die Farbe schwarz hat den Code: #000000 Die Farbe weiß hat den Code: #ffffff Ein helles Grau hat den Code: #f2f2f2 Such dir einige wenige oder auch nur 2 harmonierende Farben und setze sie gezielt ein.

Fehler Nr. 9

Fehlender Weißraum lässt deine Seiten unruhig wirken

Jeder kennt die Start-Seite von Google: Minimalistisch, pur, reduziert. Ein weißes, ziemlich leeres Feld. In der Mitte das Suchfeld, in das man sein Suchbegriff eingeben kann. Mehr nicht. Jeder weiß sofort, was er/sie dort auf der Seite machen soll: ein Suchbegriff eingeben. Nichts lenkt vom eigentlichen Inhalt ab. Keine Werbung links, keine nervigen Banner, keine Links. Alle weiteren Produkte von Google findet man – unauffällig und nicht störend – in der oberen rechten Ecke. Die gesamte Seite wirkt sehr aufgeräumt und klar. Das ist kein Zufall. Der Besucher der Seite soll sich voll und ganz auf seine Suche konzentrieren. Nichts soll ihn ablenken. Kein Link soll ihn auf eine andere Seite locken. Und das Suchfeld ist in der Mitte des Viewports, damit der sofort beim Öffnen der Seite zu sehen ist.

Erklärung: Viewport ist der sichtbare Bereich innerhalb deines Browserfensters, den du siehst, ohne scrollen zu müssen. Natürlich werden deine Seiten nicht so weiß sein, so leer. Du möchtest ja Inhalte zeigen, deine Besucher sollen wissen, wie du helfen kannst, was du anbietest. Aber: Wenn du deine Seite zupflasterst wie ein Litfaßsäule, dann wissen deine Leser nicht, wo sie anfangen sollen. Nichts gegen Litfaßsäulen. Ich finde, Herr Ernst Litfaß hatte damals eine tolle Idee mit seiner Säule. Sogar im Zeitalter des Internets ist eine Säule zum Anbringen von Nachrichtigen eine tolle Sache. Litfaßsäulen beleben Innenstädte. Nicht selten lese ich beim Warten auf eine S-Bahn an der Litfaßsäule und schau mir die Poster an. Leider denken viele Websitebetreiber, dass ihre Website dieselbe Aufgabe hat wie ein Litfaßsäule. Ein Grafikelement, ein Banner, eine Foto, ein Textblock neben dem nächsten.

Was fehlt ist der Weißraum. Was ist Weißraum?

Weißraum bezeichnet den Raum zwischen den einzelnen Elementen einer grafischen Gestaltung. Also der Raum zwischen 2 oder mehreren Textblöcken, der Raum zwischen dem Menü und dem Text, der Raum zwischen Fotos und Textblöcken und so weiter. Den Effekt von Weißraum kennt jeder von Bildern. Um wieviel toller fühlt sich der Piratenknabe beim linken Bild? Genau. Links ist der Weißraum größer als im rechten Bild, der Pfannkuchen hat mehr Abstand zum Jungen, also hat er es höher geworfen. Oder der Pfannkuchen ist rechts wieder runtergekommen…
Zeichnung Junge mit Pfanne, der einen Pfannkuchen hochwirft

Zwischen Junge und fliegendem Pfannkuchen ist ein Raum. Auch dies ist ein Beispiel von Weißraum, der die Beziehung zwischen den Motiven definiert. Genauso gibt es Beziehungen zwischen Text-Bild, Bild-Rand etc. Der sogenannte Weißraum ist wichtig für die Wirkung von Text und Bild.

Weißraum bringt also zusätzliche Aussagen. Eine gute Lesbarkeit einer grafischen Oberfläche (die lesbare Fläche eine Webseite ist auch eine grafische Oberfläche) wird durch den Weißraum gefördert. Der Weißraum hat mehrere Aufgaben:

  • Weißraum sorgt für Aufgeräumtheit,
  • Weißraum führt den Blick der Leser
  • Weißraum trennt die einzelnen Bereiche einer Webseite
  • Weißraum sorgt dafür, dass sich das Auge beim Lesen immer wieder ausruhen kann

Mein Tipp also: Versuche, Weißraum in deine Seiten zu integrieren. Sei sparsam mit grafischen Elementen oder Fotos. Und gliedere Texte in einzelne Abschnitte. Auch so entsteht der wichtige Weißraum. Konnte ich dir mit meinen Tipps helfen? Fallen dir weitere haarsträubende Designsünden auf Websites auf? Dann schreib hier im Kommentar. Falls du etwas mehr Hilfe brauchst:

Das Website Konzept genial einfach in 5 Schritten

Das Website Konzept genial einfach in 5 Schritten

von | Dez. 1, 2020 | Anleitungen, Startseite, Text

Ein schlaues Website Konzept ist die Blaupause für deine Online-Präsenz.

Du hängst fest. Deine Gedanken rotieren: Wie fange ich mit einer Website an?
Was ist wichtig für die Website? Was ist der erste Schritt für eine Website?
Oder du bist ganz mutig und denkst:
Ich leg einfach los. Ich hab im Kopf, was ich machen muss… Ich brauche kein Konzept für eine Website…

Ohne Plan eine Website zu starten ist so doof, wie ohne Navi zu fahren.

Mein Partner nutzt selbst auf kurzen Strecken das Navi. Ich finde das ständige Plappern der Navistimme ehrlich gesagt ziemlich nervig. Aber ich kann ihn verstehen: Er möchte sich ohne Ablenkung aufs Fahren konzentrieren.

Ich fahr gern ohne Navi. Ich mag es, mich den Herausforderungen der Leitsysteme zu stellen. Es macht mir auch deshalb Spaß, weil ich mir die Route vorher auf Google Maps ansehe und einpräge.

Das ist ein nettes Gehirnjogging.

Aber: „Aus dem Kopf fahren“ klappt nicht ganz ohne unfreiwillige Stopps. Denn regelmäßig passiert das: anhalten, Fahrzeug wenden und dieselbe Strecke bis zu letzten Kreuzung zurück… Entspannt reisen geht anders. Und wenn man ein fast idiotensicheres Navigationssystem hat, wärs doch blöd, hier falsche Eitelkeit zu zeigen.

Was hat ein Navi mit einem Website Konzept zu tun?

Ganz einfach: Für die Planung der Website brauchst du Leitlinien. Ein Fahrplan mit System, der dir jede einzelne Station auf dem Weg zu einer perfekten Website zeigt. Du brauchst ein Website Konzept, das dir sagt, was du wo wann und wie konkret machst.

Du brauchst einen eindeutigen Weg, der dich direkt zum Ziel führt. Ohne Umwege. Damit du nicht an jeder Kreuzung stehen bleibst oder sogar zu letzten Kreuzung zurückfahren musst.

Ein Website Konzept ist dein Navigationssystem zu deiner Website.

Warum?
Der Aufbau einer Website erfordert sehr unterschiedliche Arbeiten. Du bist als Texter, Designer und als Techniker unterwegs. Ohne Plan bist du völlig aufgeschmissen. Und wie bei allen Arbeiten ist es schlau, die unterschiedlichen Arbeitsbereiche voneinander zu trennen. Du kommst schneller voran, wenn du erst einen Arbeitsbereich abhaken kannst, bevor du den nächsten startest.

Website Konzept

Schritt 1
Teile die Arbeit an deiner Website in Arbeitsbereiche ein

Als ich vor 15 Jahren anfing, Websites umzusetzen, bin ich ziemlich intuitiv vorgegangen:

  • Was brauche ich? Was hab ich?
  • Eine kurze Skizze reicht.
  • Das andere hab ich im Kopf.
  • Ein Konzept für eine Website brauch ich nicht.

Dachte ich. Dann: Noch während der Arbeit an der Technik hatte ich ständig neue Ideen. Ergebnis: die Codierung der HTML-Bausteine musste geändert werden. Dann fiel mir eine Textänderung ein. Ein Bild hier, ein Textbaustein dort… Jetzt stimmte das Design nicht mehr. Die Folge: Ich musste wieder an den HTML-Code…

Du merkst was?
Ich bin hin und her gesprungen zwischen 3 Arbeitsbereichen, die komplett unterschiedlich sind. Mal war’s der Inhalt, mal die Technik, zwischendurch das Design, dann wieder der Inhalt…

Ergebnis: Stress.

Das ist alles andere als effektiv.

Zwar hast du es mit den heutigen WordPress-Versionen und den idiotensicheren Themes technisch sehr einfach. Dennoch: Der Weg bleibt derselbe.

Ein guter Plan für eine Website bedeutet: ähnliche Arbeiten bündeln.

Das heißt in deinem Fall:

  • erst die Inhalte überlegen und strukturieren,
  • dann die Gestaltung überlegen,
  • dann die Technik umsetzen.

Viele haben eine ungefähre Idee, welche Inhalten sie haben. Und suchen dann ein Theme, also ein Layout. Aber Form follows Content. Und das im besonderen Maße auf Websites.

Erst wenn für dich der Inhalt glasklar ist, überleg dir Ideen für die Gestaltung. Notiere deine Ideen zum Layout. Aber leg dich noch nicht fest. Denn alles kann umgeschmissen werden, wenn du erst deine eindeutigen Texte und Bilder hast. Erst wenn du die Texte hast, mach dich an die Umsetzung. Wenn die Basisarbeit fertig ist, fällt es dir viel leichter, deine inhaltlichen Ideen und Vorstellungen technisch umzusetzen.

Du wirst dann nicht mehr abgelenkt.
Die Arbeit gelingt dir zügiger und leichter.

Website Konzept

Schritt 2
Dein Inhalt deiner Website: Diese Fragen solltest du dir stellen

Bevor du deinen Plan zeichnest, stellst du dir zuerst deine Keller-Fragen:

  • Für wen schreibe ich?
  • Wen will ich erreichen?
  • Was will ich mit der Website erreichen?
  • Wer ist meine Wunschkundin?
  • Welche Probleme hat meine Wunschkundin?
  • Was erwartet die Kundin auf meiner Website zu lesen?
  • Wie kann ich dem Kunden/der Kundin helfen?

Erst wenn du diese Fragen beantwortet hast, wenn du dich in deine Kundin hineinversetzen kannst und für sie perfekte Texte geschrieben hast, solltest du loslegen. Erst jetzt weißt du, was auf deine Website soll – und was nicht. Sprich nicht darüber, was du kannst, sondern darüber, welches Problem du für deine Kundin löst.

So, irgendwann sind die Texte fertig.

Die Texte hast du am besten in einem Dokument wie Word zusammengefasst.

Die nächste Frage: Gibt es Bilder, mit denen du deine Texte auflockerst oder mit denen du Inhalte besser beschreibst? Menschen behalten Informationen am besten visuell. Oder sind Bilder ein wichtiger Bestandteil deiner Website?

Am besten sind eigene Fotos, sie sind unverwechselbar. Und du hast keine Rechte-Probleme. Ansonsten: Es gibt diverse Bilddatenbanken, auf denen du sogar kostenfreie Fotos erhältst. Wenn du vorsichtig und sparsam damit umgehst, sind sie durchaus eine Alternative. Abhängig von deinem Produkt. Nimm Bilder, die nicht zu perfekt sind. Perfekte Bilder sind schnell austauschbar und beliebig. Besser sind Bilder, die eher wie gute Schnappschüsse daherkommen und dadurch authentischer wirken – ohne dilettantisch zu sein. Hier musst du genau schauen. Es kann sich lohnen.

Wer weiß, dass ich ausgebildete Fotografin bin wird denken: Hm, das klingt jetzt etwas widersprüchlich… Schließlich will ich doch nur „gute“ und „professionelle“ Bilder auf meine Website. Ja, stimmt im Prinzip. Aber sehr gut ausgeleuchtete und perfekt gestylte Bilder mit gestochener Schärfe wirken schnell künstlich. Kommt natürlich auf die Branche an.

Zwei Beispiele, Nr. 1: ein Versicherungsmakler. Im Header hat er ein Bild, dass Büroarbeit, Kommunkation, Freundlichkeit, Kundenzugewandheit etc. darstellen soll. Als Bild hat er ein Stockfoto aus einer Bilddatenbank: 3 Personen, die miteinander sprechen, ein Laptop im Arm, alle lachen und zeigen ihre blendend weißen Zähne, alle sind zwischen 25 und 30… Ein schickes Bild, super fotografiert, tolle Ausleuchtung. Aber eine typische Arbeitssituation? Eher nicht.

Beispiel Nr. 2: eine Ernährungsberaterin. Im Header ein Bild von einem Markt. Die Sonne scheint, Gewusel von Menschen, hier und da sieht man leckeres Gemüse. Das Bild ist nicht super perfekt, manche Ecken sind unscharf – aber die Sonne scheint und man denkt sofort: Toll, ich möchte auch wieder auf den Markt. Frisches, gesundes Gemüse holen… Obwohl kein Profifoto, vielleicht ein Ausschußbild, würde ich eher so ein weniger perfektes Bild nehmen. Es ist eher authentisch. So ein Bild vermittelt das Gefühl, das die Ernährungsberaterin gern rüberbringen möchte: Frisches Gemüse einkaufen kann richtig Spaß machen. Und gesundes Essen beginnt beim Einkauf.

Website Konzept

Schritt 3
Fang mit einer groben Skizze an: als Basis für das Konzept deiner Website

Schnapp dir ein DinA4-Blatt und ein Stift.

Leg das Blatt quer. Du überlegst nun:

  • Was ist dein Thema
  • Welche Stichworte hast du?
  • Unter welchen Themen können deine Inhalte zusammengefasst werden?
  • Wie können deine Texte strukturiert werden?

Wie so eine Überlegung aussehen könnte zeige ich am Beispiel einer Ernährungsberatung:

Nun überlegst du:

Wie könnten die Seiten benannt werden?

Denk hier schon an das SEO, indem du im Titel wichtige Keywords für dein Thema einbaust.
Wie könnten die Menüpunkte lauten, die zu den jeweiligen Seiten führen?
Mach es deinen Besuchern so einfach und eindeutig wie möglich.
Auf welchen Seiten können deine Inhalte aufgeführt werden?
Sei bei der Benennung der Menüpunkte so kurz und konkret wie möglich.

Je kürzer, konkreter und eindeutiger der Menüpunkt, desto besser. Keine Phantasiebegriffe, sondern Bekanntes. Und wenn der Menüpunkt bereits ein Keyword ist – noch besser.

  • Reicht ein Menü oder müssen Untermenüs erstellt werden?
  • Welche Seiten bzw. Inhalte sind am wichtigsten, welche müssen zuerst gesehen werden?
  • Welche Inhalte sind untergeordnet und können deshalb in ein Untermenü?
  • Sieh dir andere Websites an.

Jetzt werden auf deinem Blatt wahrscheinlich einige Kästchen sein und Striche, die die einzelnen Kästchen verbinden. Die Skizze gleicht eher einer Mindmap.

In der folgenden Skizze siehst du ein Beispiel, wie die Website der Ernährungsberaterin grob strukturiert sein könnte. Was genau du hier schreibst hängt natürlich von deinem Angebot ab.

Wichtig ist: Oben hast du die wichtigsten Seiten. Sie sind gleichzeitig die Menüpunkte.

In dieser Skizze siehst du 5 Menüpunkte:

  • Start (die Startseite)
  • Leistungen
  • Ablauf
  • Über mich
  • Kontakt

Drei der Seiten führen zu weiteren Seiten. Die blauen Kästchen im Bild (grün umrahmt) stehen für Seiten, die in einem sogenannten Submenü bzw. Pull-Down-Menü stehen. Dies ist sinnvoll, wenn nicht alle Links im obersten Menü passen. Hinweis: Mehr als 7 Menüpunkte sollte das Hauptmenü nicht haben.

Die Skizze zeigt:

  • die Titel deiner Seiten,
  • die Verteilung der Seiten auf deiner Website, also die Hierarchie der einzelnen Seiten,
  • die Inhalte der einzelnen Seiten, stichwortartig.

Schritt 4
Strukturiere deine Texte in einzelne Elemente

Du hast jetzt eine Übersicht deiner gesamten Website.

Je nachdem, wie konkret du vorgehst, hast du bereits die einzelnen Seiten der Website.

Jetzt gehst du ins Detail:

Wie sollen die Seiten strukturiert werden?

Dazu musst du wissen:

Deine Texte sind nicht der einzige Inhalte auf deinen Seiten (hast du Bilder oder PDF-Dokumente?)
Es ist sinnvoll, wenn du deine Texte nochmal überprüfst: Gehört das, was ich „Über mich“ geschrieben habe, wirklich nur auf die Seite „Über mich“? Oder kann ein Teil bereits auf die Startseite? Wie kann ich die Texte gliedern?
Habe ich einen Newsletter? Wie sollen die KundInnen mit mir Kontakt aufnehmen?
Jede Seite hat ihre eigene Seitenarchitektur

Eine Startseite hat andere Anforderungen als eine Angebotsseite. Je nach Inhalten und Aufgabe der Seiten musst du die Texte anders strukturieren. Die unterschiedlichen Texte der Startseite sollten nur kurz sein und besonders übersichtlich sein. Auf der Startseite erhalten die BesucherInnen die erste Orientierung der gesamten Website.

Überlege: Was will ich mit der Startseite erreichen? Wenn du an E-Mailmarketing denkst: In dem Fall sollte auf die Startseite unbedingt mindestens 1 Call-to-Action (also ein Button, der zu einer Handlung aufruft), besser 2 oder 3 CtA. Und vielleicht auch auf anderen Seiten deiner Website.

Geh in dein Worddokument (oder wo auch immer du deine Texte hast) und schau sie in Ruhe an. Überlege, ob die Aufteilung so richtig ist, ob und wie du einzelne Texte inhaltlich gliedern kannst.

Sind deine Texte stellenweise sehr lang?
Teile sie auf in appetitliche und einfach zu verdauende Happen. Wir Menschen sind von Natur aus bequem, das Lesen langer Textpassagen auf dem PC ist eher die Ausnahme. So wie jetzt, weil du unbedingt meinen Plan kennenlernen möchtest 😉

Mit einer Strukturierung deiner Seite machst du es deinen Besuchern leichter, deine Inhalte zu lesen. Und mit einer ansprechenden Gestaltung und kurzen Textbrocken „führst“ du deine Besucher auf deiner Seite.

Website Konzept

Schritt 5
Die Strukturierung der Seiten ist das Finetuning in deinem Konzept

Jetzt kommt der Clou der Planung: Damit du bei der technischen Umsetzung nachher in WordPress (oder anderen Systemen) nicht ständig grübeln musst, welchen Text und welches Bild du wohin setzt, machst du dir nun eine schematische Struktur jeder einzelnen Seite.

Bei dieser Arbeit darfst du kreativ sein – doch nicht zu kreativ. Die Seiten sollten einem bekannten Schema folgen (Stichwort „Userbility“).

Die Strukturierung machst du entweder mit Papier und Stift. Oder, wenn du gut mit Grafik- oder Schreibprogrammen umgehst, kannst du diese Struktur auf dem PC machen.

Es ist wurscht, ob du einen Stift oder die Maus in die Hand nimmst.

Für die PC-Freaks erkläre ich weiter unten, wie das geht.

Nimm dir wieder ein Blatt Papier (DinA4) und deinen Stift.

Die Seite nimmst du diesmal im Hochformat.
Dann zeichnest du auf das Blatt mehrere Kästchen.
Zeichne die Kästen in der Breite deiner Papierseite.

Jeder Kasten steht für ein Seitenelement mit seinen Textbausteinen. Oder anderen Bausteinen, wie z.B. Produktbilder etc.

Plan

Aufbau und inhaltliches Konzept deiner Webseite: die Seitenelemente

Eine sehr einfache Seite einer Website kann sich in 3 Bereiche gliedern. Es gibt auch andere Möglichkeiten einer Gliederung. Hier zeig ich dir eine Strukturierung, wie sie am häufigsten für kleine Websites zu sehen ist. Nicht ohne Grund, denn diese Struktur hat sich bestens bewährt und ist tausendfach erprobt (Stichwort Usability, ein Artikel dazu folgt später).

Die Bereiche:

  • Header
  • Content
  • Footer

Und diese 3 Bereiche skizzierst du jetzt auf dein Blatt Papier, indem du ihnen Inhaltsbereiche zuordnest:

  • 1 Kasten für den Header
  • 3 bis 5 Kästen für den Content
  • 1 Kasten für den Footer

In die einzelnen Kästen notierst du, welche Inhalte rein sollen.

Header:
Wie der Name Header andeutet: Dieser Bereich ist der Anfang einer Webseite.

Hast du bestimmt schon häufig gesehen: Am Anfang, ganz oben einer Seite, siehst du ein horizontales Menü, dass dich auf die Seiten führt. Hier steht meistens auch ein Logo.

Sinnvollerweise notierst du hier deine Menüpunkte.

Häufig sieht man unter dem eigentlichen Header (unter dem Menü) ein großes Bild. Derzeit gibt es den Trend, dieses Bild – das Headerbild oder auch Heroimage – in der gesamten Breite des Browserfensters anzulegen. Das Bild dient u.a. dazu, auf die Seite einzustimmen. Denn, wie du weißt: Ein Bild sagt mehr als 1.000 Worte. Gleichzeitig soll es eine grobe Orientierung bieten: Was wird auf dieser Website geboten?

Auf dem Bild steht eine Überschrift oder ein Slogan. Wichtig ist der Zweck dieser Headline: Sie soll in möglichst 3 Sekunden deutlich machen, was du anbietest. Vielleicht steht auf dem Bild auch ein Button mit einer Aufforderung (z.B. die Möglichkeit, sich zum Newsletter anzumelden). Natürlich kannst du den Kopfteil der Webseiten auch anders gestalten. Das horizontale Menü oben ist aber auf jeden Fall sinnvoll (abgesehen von Landingpages, die kein Menü erhalten sollten).

Content:
Hierhin kommt der eigentliche Content, dein Text und deine Bilder. Diesem Contentbereich kannst du mehrere Kästchen geben, damit du deine unterschiedlichen Bereiche hast. Die Appetithäppchen, du weißt schon…

Diese Elemente solltest du gut überlegt auf der Seite anordnen. Dazu später.

Footer:
Jeder Anfang hat ein Ende: Der Footer ist, wie der Name erahnen lässt, der Fuß, das Ende, der Abschluß einer Seite.

Hier steht häufig eine Kontaktangabe, die Wiederholung des Menüs von oben (häufig ein reduziertes Menü mit den wichtigsten Seiten), ein Kontaktformular, eine Handlungsaufforderung. Oder was auch immer, das entscheidest du. Hierhin stellst du, was du „zum Abschied“ sagen möchtest.

Sinnvoll sind hier Impressum und Datenschutzhinweis. Denn beides ist eine Pflichtangabe und darf auf keinen Fall fehlen. Diese Angaben sind mehr für die Anwälte und Datenschützer wichtig, weniger für deine Besucher. Deshalb sind diese Angaben gut im Footer aufgehoben. Du kannst das Impressum auch in die sogenannte Fußleiste stellen, das ist eine schmale bzw. niedrige Leiste unter dem eigentlichen Footer.

Dein Content: Meine Tipps zur Aufteilung deiner Seiten

Wo Header und Footer erscheinen ist klar.

Wie du gelernt hast kann dein Content unterschiedliche Aussagen und Aufgaben haben. Deshalb ist es sinnvoll, sich über eine Aufteilung des Contents (Texte und Bilder) Gedanken zu machen.

Die Reihenfolge der Elemente

Für den Inhalt deiner Kästchen im Contentbereich stellst du dir vor, was deine Besucher zuerst lesen sollen. Die Reihenfolge ist nicht unwichtig, denn du möchtest, dass deine Besucher neugierig sind, auf deiner Seite bleiben und ganz nach unten scrollen.

Wie bringe ich Abwechslung auf meine Seite

Stell dir die Frage: Mit welchen Inhalten kann ich meine Besucherin so neugierig machen, dass sie auf meiner Seite bleibt? Mit welchen Inhalten bring ich die Besucherin dazu, nach unten zu scrollen, also die nicht sichtbaren Bereiche meiner Seite anzusehen?

Gibt es Inhalte, die auf jeden Fall im Viewport zu sehen sein sollen? (Viewport ist das, was dein Browserfenster von einer Website zeigt, ohne dass du scrollen musst).

Du findest heraus: Hab ich für meine Besucherin ein Versprechen, eine Lösung eines Problems? Wie gewinne ich das Vertrauen der Besucherin?

Und wenn der Besucher nach unten scrollt: Welche Inhalte haben Priorität? Was kann ganz nach unten, was sollte möglichst oben zu sehen sein, also ohne langes Scrollen? Wo sollte eine Handlungsaufforderung stehen?

Sei kreativ. Aber nicht nur kreativ. Auch ein wenig Einfühlungsvermögen und Verständnis für die Lesegewohnheiten von Menschen ist wichtig. Und ein wenig Psychologie kann an dieser Stelle sowieso nicht schaden.

Zusätzlich zum Text überlegst du, ob und wo du Fotos oder Grafiken einsetzt. Damit kannst du deine Seiten aufpeppen: Abhängig natürlich von deinem Angebot, von deinem Produkt. So machst du es deinen Besuchern leichter. Und sie werden es dir danken, indem sie bis an Ende der Seite scrollen und alles lesen.

Wichtig auch für Suchmaschinen bzw. für die Auffindbarkeit deiner Site in Google: Je länger deine Besucher auf deiner Seite sind, desto wichtiger ist deine Seite für Google, umso besser dein Ranking in Google…

Wie oben beschrieben gehst du Seitenelement für Seitenelement vor.

Und du schreibst in jedes Kästchen die wichtigsten Aufgaben des Elements. Soll oben z.B. ein Header mit Hintergrundbild, etwas Text und ein Button, dann schreib das in das Kästchen.

Hat dein Contentbereich ein großes, wichtiges Bild: aufschreiben.
Soll unter das große Bild ein Text: aufschreiben.

Das machst du für jede Seite.
Damit hast du eine gute Struktur und Übersicht.

Diese Struktur ist quasi die Blaupause für deine Webseite.

Statt einer Handzeichnung kannst du die Struktur wie gesagt in einem Programm machen. Sieht schicker aus und du kannst immer wieder ändern, falls du eine andere Idee hast.

Wie du das am PC machst erkläre ich am Schreibprogramm Page (das geht auch mit Word oder Excel):

In Page erstellst du ein neues Dokument.

Auf der leeren Seite fügst du jetzt mehrere Tabellen untereinander ein. Jede Tabelle entspricht einem Seitenelement. Den Tabellen gibst du einen Rahmen (damit du die „Elemente“ siehst).

Die Tabelle kann aus nur einer Zeile und einer Zelle bestehen. Falls ein Element unterschiedliche Text- oder Bildelemente haben soll, gibst du der Tabelle einfach mehrere Zellen und Zeilen.

Seitenplan ConstanzeStraub

Falls du gern bastelts ein weiterer super Tipp:

  • Druck die einzelenen Elemente deines Contens aus.
  • Schneide dann die Elemte aus
  • Lege die Elemente auf den Fußboden (oder Tisch)
  • Nun kannst du spielerisch und frei deine Elemente so lange schieben, bis du damit zufrieden bist.

Und wenn du fertig bist, schnappst du dir einen Klebestift und klebst die Elemente aneinander. Bis du eine „gescrollte“ Website als Ansicht hast. Das hilft ungemein, denn auf dem PC siehst du ja immer nur ein Teil der Website bzw. des Entwurfs. Was ziemlich schnell verwirren kann.

Ich spreche aus eigener Erfahrung. Du hast jetzt ein Konzept für deine Website, einen konkreten Plan, der dich sicher durch die Arbeit an deiner Website führt. Wenn du mal nicht weiter weist, schau dir einfach deinen Plan an.

Das ist die wichtigste Basis deiner Website.

Wenn du Fragen zur Gestaltung deiner Website hast lies hier:
9 Fehler bei der Gestaltung einer Website