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.
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.
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
Möglichkeit: Divi gibt eine Erfolgsmeldung in Schriftform aus (die du inhaltlich anpassen kannst)
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).
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:
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
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.
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
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
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“.
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.
Newsletter erstellen mit Brevo – lohnt sich das überhaupt für dich?
Ich geb’s zu, das klingt jetzt etwas gemein. Ist aber nicht so gemeint. Die Frage ist vielmehr wichtig und strategisch gedacht. Vielleicht wird meine nächste Frage etwas klarer:
Wie baust du Vertrauen auf – nicht nur eine Liste?
Diese Anleitung zeigt dir die technische Einrichtung in 7 Schritten. Gleichzeitig zeige ich dir, worauf es strategisch ankommt.
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
Moment noch: Ein wichtiger Punkt, den viele unterschätzen
Viele denken:
„Wenn das Formular steht, läuft der Newsletter von allein.“
Das stimmt nicht.
Ein Newsletter funktioniert nur dann, wenn:
deine Website klar positioniert ist,
dein Angebot verständlich ist,
dein Freebie zum Angebot passt,
deine E-Mails auf ein konkretes Ziel einzahlen.
Sonst sammelst du Kontakte – aber keine Kunden.
Brevo ist die Technik.
Möchtest du Menschen in deine Welt holen, dann brauchst du zuerst eine klare Positionierung.
Bevor du mit der Technik in Brevo beginnst:
Wenn du gerade erst deine Website aufbaust oder dein Angebot noch unscharf ist, dann lohnt es sich, zuerst die Struktur und Strategie der Website zu klären (im Blogartikel liest, was du machen kannst).
Ein Newsletter verstärkt immer das, was bereits da ist. Ist die Grundlage unklar, verstärkst du Unklarheit.
Natürlich kannst dir auch dabei helfen lassen. Dafür biete ich immer noch meinen Website Sprint an – in 4 Stunden deine Startseite (oder eben deinen Newsletter oder irgendeine andere Seite deiner Website).
1. Schritt
Einen Plan für die Automation erstellen
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
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
Opt-In-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.
Opt-In-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 OptIn-E-Mail
Bevor du texten 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 der Opt-In-Mail
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 Opt-In-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 too 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 in Brevo 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 des Formulars in Brevo
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 in Brevo
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 in Brevo 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 in Brevo 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 in Brevo 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
Brevo Formular in WordPress einbauen: so geht’s
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.
Bevor du deinen ersten Newsletter versendest, solltest du deine Absender-Domain authentifizieren.
Dazu gehören:
SPF-Eintrag
DKIM-Signatur
optional: DMARC (inkl. rua-Tag)
Warum ist das wichtig?
Ohne diese Einstellungen kann es passieren, dass deine E-Mails:
im Spam landen
blockiert werden
gar nicht zugestellt werden
Brevo führt dich im Backend durch diesen Prozess. Und hier findest du deine Einträge:
Klick oben rechts auf deinen Namen (bzw. Firmennamen, je nachdem)
Im Kontextmenü gehst du auf „Einstellungen“
Dann siehst du links eine neues, vertikales Menü.
Hier auf „Absender, Domains, IPs klicken.
Im rechten großen Feld findest du dann weitere Einstellmöglichkeiten. Oben siehst du horizontale Reiter mit unterschiedlichen Optionen.
Beispiel Domain: Hier findest du jetzt alle DNS-Einträge.
Die kopierst du (das zeigt dir auch Brevo an).
Als letzten Schritt setzt du die Daten in deine DNS-Einstellungen deines Hosters ein.
Wenn du hier unsicher bist, solltest du die Einrichtung prüfen lassen. Die Zustellbarkeit deines Newsletters entscheidet darüber, ob deine mit viel Mühe und Zeit geschriebenen Mails überhaupt gelesen wird.
Wann du dir die Einrichtung sparen solltest
Es gibt Situationen, in denen ich dir nicht empfehlen würde, dein Newsletter-System selbst aufzusetzen:
Wenn du keine Zeit hast, dich mit Technik auseinanderzusetzen.
Wenn du dein Angebot gerade neu positionierst.
Wenn dein Newsletter direkt Kunden bringen soll – nicht nur Abonnenten.
Wenn du sicherstellen willst, dass Datenschutz, Domain-Authentifizierung und Zustellbarkeit sauber eingerichtet sind.
Gerade die Themen Domain-Authentifizierung, SPF, DKIM und rua-Tags werden häufig übersehen – und führen dazu, dass Mails nicht zugestellt werden.
In solchen Fällen ist es sinnvoll, die Einrichtung professionell begleiten zu lassen. Ich unterstütze dich entweder bei der kompletten Einrichtung oder baue das System gemeinsam mit dir auf – inklusive strategischer Einbindung in deine Website.
Brauchst du Unterstützung bei Brevo?
Wenn dir die technische Einrichtung zu aufwendig ist oder du sicherstellen willst, dass:
Double-Opt-in korrekt funktioniert
SPF und DKIM richtig gesetzt sind
dein Newsletter strategisch in deine Website eingebunden ist
Dann unterstütze ich dich gern bei der Einrichtung.
Echt simpel: WordPress Backup erstellen in 10 Minuten!
Die perfekte Anleitung für Anfänger und Fortgeschrittene.
Die Website ist fertig – allerhöchste Zeit, dein WordPress Backup zu erstellen. Denn dies passiert schneller, als dir lieb ist: Die Festplatte hat den Geist aufgegeben, dein Server wurde gehackt, deine WordPress-Installation ist verunglückt… Egal aus welchem Grund die Daten deiner Website futsch sind: Wenn du jetzt kein Backup hast, wirst du dir die Haare raufen oder schlecht schlafen. Auf jeden Fall ist deine gute Laune dahin.
In meinen WordPress-Kursen ist dies der erste Schritt – gleich nach der Installation des Themes: Ich zeige meinen Teilnehmern, wie das Backup-Plugin installiert und eingestellt wird.
Was ist ein Backup?
Ein Backup ist eine Sicherungskopie von Daten oder Informationen. Die Daten werden auf einem Computer, einem Server oder Speicher gesichert. Speicher können externe Festplatten oder USB-Sticks sein.
Ein Datenverlust passiert schneller und häufiger, als man denkt. Gerade WordPress-Websites werden gern gehackt. Nicht, weil WordPress unsicher ist, sondern weil es weit verbreitet ist.
Aber es gibt noch mehr Ursachen, seine Daten zu verlieren: Softwareprobleme, menschliches Versagen, Viren, Malware oder andere Katastrophen. Dein Backup ist der doppelte Boden, deine Sicherheitsleine, dein Fallschirm.
Wie und wo kann ich ein Backup machen?
Ein Backup kannst du entweder manuell oder automatisch machen. Wie genau – das erkläre ich unten. Wo und auf welchem Gerät du speicherst, hängt davon ab, wie sicher deine Speicherung sein soll. Als Speicherorte sind mehrere Möglichkeiten denkbar: externen Festplatten, USB-Sticks, CDs/DVDs, Cloud-Speicher oder Netzwerkspeicher.
Cloudspeicher scheinen sicher – aber natürlich können auch dort die Server gehackt werden (alles schon passiert). Und Hardware wie USB-Sticks kann mechanisch zerstört werden.
Mehrgleisige Backups sind deshalb sinnvoll.
Zu Beginn meiner Selbständigkeit vor 20 Jahren hab ich meine Daten auf externe Festplatten gespeichert. Eine der Festplatten hatte ich im Haus, die andere hatte ich in einen gemieteten Tresor der Bank gebracht. Clouddienste, so wie wir sie heute kennen, gab es zu der Zeit noch nicht. Heute sichere ich meine Daten in einem Clouddienst und zusätzlich auf externe Festplatten.
Wie mache ich ein Backup meiner Website in WordPress?
Für ein Backup hast du drei Möglichkeiten:
Eine bequeme und schnelle Methode ist das Backup mit einem Plugin. Ich nutze dazu UpdraftPlus. Die Basisversion ist kostenlos und dennoch sehr umfangreich. Ich habe einige Plugins getestet und kann dir dieses Plugin gut empfehlen. Für UpdraftPlus gibt es einige Gründe: Das Plugin ist leicht zu verstehen und obendrein in Deutsch, du kannst Zeitpläne erstellen (die Backups werden dann automatisch erledigt) und du kannst deine Backups auf anderen Servern als deinem Hoster erstellen.
Einige Webhoster bieten eine Backup-Möglichkeit an. Falls du einen guten Hoster hast und dich darauf verlassen kannst, dann ist diese Option komfortabel.
Manuelles Backups: Meine Websites sichere ich immer zusätzlich manuell. Das empfehle ich dir, selbst wenn du ein Plugin nutzt oder deine Daten per Hoster sicherst.
So machst du das WordPress-Backup mit einem Plugin (UpdraftPlus)
Zuerst musst du UpdraftPlus (oder jedes andere Backup-Plugin) in deinem WordPress installieren. Das ist sehr simpel:
Im WordPress-Menü klickst du auf > Plugins und
gehst du auf > Plugin installieren.
Dort werden dir standardmäßig diverse Plugins angezeigt.
Rechts oben im Suchfeld > Plugin suchen gibst du UpdraftPlus ein und
das Icon des Plugins wird dir gezeigt.
Jetzt drauf klicken, installieren und aktivieren.
UpdraftPlus führt dich mit einem Assistenten durch das Prozedere uns lässt dich gleich ein 1. Backup machen.
Unter > Einstellungen kommst du auf die Oberfläche von UpdraftPlus.
Das Fenster zeigt dir mehrere Tabs. Der erste ist der, auf dem du deine Sicherungen machst: > Sicherung/Wiederherstellen. Gleich unter den Tabs kannst du sofort sichern. Wichtig: Du musst immer beides sichern – Datenbank und Dateien. Mit dem Klick auf den blauen Button wird sofort alles gesichert.
Über den Reiter > Einstellungen kannst du deinen Sicherungsplan anlegen. Damit werden die Sicherungen automatisch von UpdraftPlus ausgeführt – und du kannst dich entspannt zurücklehnen.
Die Standartsicherungen werden auf deinem Hoster abgelegt.
Aber du kannst – und solltest – zusätzliche andere Orte wählen, auf deinen du deine Daten sicherst. UpdraftPlus bietet dir sogar in der kostenlosen Version verschiedene Möglichkeiten an
Die Einstellungen von UpdraftPlus
Datenbank und Dateien in UpdraftPlus sichern
backup plan
Zeitplan der Sicherung festlegen
Das Backup über deinen Hoster
Einige Hoster bieten diese komfortable Sicherung an. Ich bin mit einer meiner Websites bei Raidboxes. Dort wird regelmäßig ein Backup meiner Installation durchgeführt, die ich auf meinen Rechner laden kann.
Schau einfach nach, ob dein Hoster diesen Service anbietet. Allerdings solltest du dich nicht unbedingt nur auf diese Sicherungen verlassen. Ich finde es sinnvoll, zusätzlich manuelle Backups zu laden.
So machst du ein manuelles Backup deiner Website
Nie verkehrt: ein manuelles Backup deiner Website
Ich gebe es zu: Dieser Weg ist weit umständlicher als mit einem Plugin. Und bestimmst fragst du dich jetzt: Warum soll ich mir dann die Mühe machen? Ich empfehle dir diese zusätzliche Sicherung, weil du dann ein Gefühl dafür bekommst, aus welchen Dateien deine Website besteht.
Mich beruhigt die Tatsache, dass alle meine Dateien selig auf meinem Rechner schlummern – und dass ich sie bei Bedarf einfach nur auf den Webserver hochladen brauche.
Es gibt noch einen anderen Grund, warum ich das zusätzliche manuelle Backup empfehle: Ein Plugin ist ein Tool, das auch mal versagen kann. Getreu dem Gesetz: alles was passieren kann, passiert irgendwann.
Oder die Dateien, die vom Plugin auf deinen Server gespeichert werden, sind aus welchen Gründen auch immer futsch. Dann wirst du der glücklichste Mensch auf unserem Planeten sein, wenn du irgendwo auf einer deiner Festplatten ein Backup schlummern hast…
Die Kopie deiner Dateien geht völlig simpel:
Du brauchst dazu ein FTP-Programm
Damit wählst du alle deine WordPress-Dateien bzw. den Ordner mit den Dateien aus
Und dann lädst du diesen Ordner einfach in einen beliebigen Order auf deinem PC.
Deine Datenbank darfst du natürlich nicht vergessen.
Dazu wählst du dich im Kundenbereich deines Hosters ein und dort in den technischen Bereich, wählst deine Datenbank aus und lädst sie ebenfalls auf deinen PC.
Fotos und Grafiken sind auf Websites ein Dauerbrenner. Immer wieder landen Website-Bilder falsch in der Mediathek: zu groß in den Abmessungen, zu schwer in der Dateigröße oder im falschen Format. Dazu fehlen oft sinnvolle Dateinamen und Alt-Texte, zwei Punkte, die für SEO und Barrierefreiheit zählen.
Wenn du deine Website-Bilder optimieren willst, bearbeitest du die Bilder am besten noch vor dem Upload nach WordPress. Mit ein paar Handgriffen lädt deine Website schneller, Google versteht deine Bilder besser und seheingeschränkte Menschen verstehen, welche Motive auf deinen Fotos abgebildet sind.
Website-Bilder optimieren: das Wichtigste in Kürze
Website-Bilder für WordPress optimierst du am besten vor dem Upload: Bring sie auf die Pixelbreite, in der sie angezeigt werden, komprimiere sie und speichere sie als WebP. Jedes Bild bekommt einen sprechenden Dateinamen und nach dem Upload in WordPress einen Alt-Text. Komprimierung und Umwandlung kann ein Plugin automatisch übernehmen.
Die folgenden sechs Fehler sehe ich bei Kundinnen-Websites am häufigsten.
Fehler 1
Die Pixelmaße passen nicht zum Einsatzort
Hat dein Foto mehr als 3.000 Pixel Breite? Fotos vom Handy oder aus der Kamera sind oft 4.000 Pixel breit oder mehr. Diese Pixelzahl brauchst du für den Druck, für eine Website ist sie zu viel. Wie groß dein Bild sein muss, hängt vom Einsatzort ab. Für ein kleines Begleitbild im Text reichen 900 bis 1.200 Pixel Breite, kleine Bilder dürfen noch schmaler sein. Das Headerbild (auch Herobild genannt) läuft dagegen oft über die ganze Breite des Displays und braucht deutlich mehr Pixel, damit es auf großen Monitoren scharf bleibt.
Oft wird nach „dpi“ gefragt. Für deine Website spielt das keine Rolle. Ob dein Bild mit 72 oder 300 dpi gespeichert ist, sieht der Browser nicht, er zeigt Pixel an. Entscheidend sind Breite und Höhe in Pixeln, die dpi-Angabe zählt erst beim Druck.
Wie viele Pixel braucht dein Bild?
Die Breite hängt von der Layoutbreite deiner Seiten ab. Angenommen, dein Inhaltsbereich ist 1.200 Pixel breit. Damit meine ich den Bereich, in dem deine Texte laufen bzw. bei einem zweispaltigen Format Text + Bild. Ich meine also nicht den Bereich von Displayrand zu Displayrand. Diese Layoutbreite kannst du übrigens auf deiner Website global einstellen, damit sie für alle Seiten gilt.
Bei der Gelegenheit: Bilder sind ein wichtiger Bestandteil deines Contents, der schon vor der Umsetzung der Website mit dem Konzept der Website überlegt werden sollte. Es ist also sinnvoll, auch die Anzahl, die Art und die Größe der Bilder gut zu überlegen. > Erfahre hier mehr darüber, wie du ein Website-Konzept erstellst
Nehmen wir nun als Beispiel ein Seitenlayout von 1200 Pixel, das zwei Spalten hat. Links der Text und rechts ein Bild. Wenn deine Texte nun über knapp die Hälfte von 1200 Pixel laufen sollen, weil neben dem Text ein Bild steht, rechnest du die Abstände von Layoutrand zu Text (wenn der Text auf einer Hintergrundfarbe steht, braucht er ja etwas Luft) und den Abstand zwischen Text und Bild dazu. Du rechnest also (Ja, beim Bau einer Website gehört einiges an Rechenarbeit dazu):
1.200 Pixel – 600 Pixel für den Text – 20 Pixel Abstand vom Text zum Layoutrand – 20 Pixel Abstand zwischen Text und Bild = 560 Pixel Bildbreite. Die Zwischenräume kannst du natürlich frei wählen, die Spaltenbreiten sind zumindest im Divi-Theme vorgegeben.
Allerdings schneidest du das Bild besser nicht auf 560 Pixel zurecht, aus folgendem Grund:
Warum die doppelte Breite oft besser aussieht
Viele Laptops und fast alle Smartphones haben hochauflösende Displays, bei Apple heißen sie Retina-Display. Sie stellen auf derselben Fläche doppelt so viele Pixel dar. Ein 560 Pixel breites Bild wirkt dort leicht weich oder sogar pixelig.
Deshalb lade das Bilder für die Spalte in diesem Beispiel mit rund 1.200 Pixel Breite hoch, auch wenn die Spalte halb so breit ist. Die Ladezeit leidet darunter nicht, denn WordPress schickt jedem Gerät automatisch die passende Größe (mehr dazu weiter unten). Für Google gibt es einen weiteren Grund: Damit ein Bild in Google Discover oder als große Vorschau erscheint, empfiehlt Google mindestens 1.200 Pixel Breite.
Ein kurzes Wort zum Seiten-Layout und ein praktisches Beispiel: Das Layout für meine Blogartikel habe ich mit 1.150 Pixelbreite eingerichet. Etwas schmaler als das Grundlayout, weil ich hier weniger Bilder einsetze, dafür viel Fließtext. Und lange Texte auf dem Bildschirm lesen sich leichter, wenn sie schmaler laufen. Deshalb habe ich an den Seiten Zwischenräume zwischen Hintergrund und Text eingegeben, in diesem Fall pro Seite links und rechts 60 Pixel. Falls du mehr darüber wissen möchtest, wie breit Textzeilen laufen sollten (was sich auf das Seitenlayout auswirkt), dann lies hier meinen Blogartikel > Website-Texte lesbar gestalten.
Das ergibt für meine Bilder folgende Rechnung, wenn sie über die gesamte Layout-Breite laufen sollen:
1.150 – 2x 60 = 1.030 Pixel Breite für die Bilder.
So erkennst du in WordPress die Dateigröße
Manchmal ist es sinnvoll, direkt in der WordPress-Installation zu schauen, ob die Bilder optimal sind. Das kannst du hier natürlich auch machen: Auf der linken, schwarzen Leiste des WordPress-Menüs (wenn du auf deiner WordPress-Website eingeloggt bist), siehst du oben den Punkt „Medien“. In diesem Bereich findest du alle deine Bilder, die du in WordPress hochgeladen hast. Klicke nun auf das Bild, das du untersuchen möchtest. WordPress öffnet das Bild in einem neuen Fenster, in dem du oben rechts die wichtigsten Informationen zum Bild findest. Also Dateiformat, Dateigröße, Datum der Erstellung bzw. des Hochladens und Name der Datei.
Sonderfall Headerbild
Für das Headerbild wählst du 1.920 Pixel Breite, für große und hochauflösende Monitore bis zu 2.560 Pixel. Die Höhe bestimmst du selbst. Ich verwende meist Panoramaformate, zum Beispiel 1.920 × 600 Pixel. Panorama deshalb, damit man beim Öffnen der Website auf größeren Monitoren nicht nur Bild sieht, sondern auch unterhalb des Bildes den oberen Teil des Inhaltsbereichs der Website. Ziel soll ja sein, dass die Besucher auf der Seite weiter nach unten scrollen. Ausnahme: Layouts mit einem Hintergrundbild über die gesamte Bildschirmfläche. Hier braucht das Bild mehr als 1.000 Pixel Höhe, für Retina-Displays eher 2.000.
Was WordPress mit deinen Bildern macht
Sobald du ein Bild in die Mediathek lädst, erstellt WordPress mehrere Kopien in verschiedenen Größen: standardmäßig mit 150, 300, 768, 1.024, 1.536 und 2.048 Pixel. Falls du dich jetzt wunderst: Diese unterschiedlichen Bildmaße findest du nicht in der Mediathek deiner WordPress-Installation. Erst wenn du z.B. per FTP die Verzeichnisse deiner Installation untersuchst, findest du im Verzeichnis „uploads“ (im Verzeichnis „wp-content“) alle Bilder, also auch die Duplikate der Originalbilder in den unterschiedlichen Pixelmaßen. Beim Aufruf der Seite bekommt jedes Gerät die Version, die zu seinem Display passt. Dein Smartphone lädt also kein 2.000-Pixel-Bild, wenn 400 Pixel reichen. Schlau, oder?
Drei dieser Größen (Vorschaubild, Mittel, Groß) stellst du im Dashboard unter „Einstellungen > Medien“ ein. Viele Themes legen weitere Größen an, Divi zum Beispiel eine ganze Reihe eigener Formate. Deshalb wächst der Upload-Ordner bei Divi-Websites schnell, ein Grund mehr, Bilder vor dem Upload zu verkleinern. Ist dein Original breiter als 2.560 Pixel, verkleinert WordPress es automatisch und hängt „-scaled“ an den Dateinamen. Das Original bleibt trotzdem auf dem Server und belegt Speicherplatz.
Fehler 2
Die Dateigröße ist zu hoch
Ist dein Foto größer als 200 KB oder sogar 1 MB? Auch nach dem Verkleinern der Pixelmaße ist die Datei oft noch schwer im Sinne von > viel KB. Der nächste Schritt heißt Komprimierung: Ein Programm entfernt Bildinformationen, die das Auge kaum wahrnimmt. So schrumpft ein Foto von 330 KB auf 70 KB, und du siehst keinen Unterschied.
Beim Speichern wählst du eine Qualitätsstufe. Zwischen 75 und 85 Prozent liegt meist der beste Kompromiss aus Qualität und Dateigröße. Ich nutze für Beispielbilder in Blogposts sogar stärkere Komprimierungen, da es hier nicht so sehr auf die Qualität der Bilder ankommt.
Wie klein die Datei wird, hängt vom Motiv ab. Je detailreicher und farbiger ein Bild, desto größer die Datei. Schwarzweißbilder sind meist kleiner als Farbbilder desselben Motivs. Als Richtwert gilt: Bilder im Text unter 150 KB, Headerbilder bis etwa 200 KB.
Warum das so viel ausmacht? Das Headerbild ist meist das größte Element, das beim Aufruf deiner Seite sichtbar wird. Google misst, wie schnell es erscheint (Largest Contentful Paint, kurz LCP). Dieser Wert gehört zu den Core Web Vitals, und Google berücksichtigt ihn beim Ranking. Übrigens: Diesen Wert und andere kannst du mit Googles Tool > Pages Speed Insights messen. Das empfehle ich dir sogar, denn die Ladezeiten sind eines der vielen Rankingkriterien bei Google. Lädt deine Seite zu lange, wirkt sich das nachteilig auf deine Website-Position aus. Und Menschen, die deine Website besuchen, sind genervt.
Fehler 3
Das Dateiformat passt nicht
JPG, TIFF, PNG, HEIC, PSD, RAW, SVG, WebP, AVIF … Und das sind nur einige Beispiele. Beim Speichern bieten dir manche Programme eine lange Liste an Dateiformaten an. Das kann verwirren. Wenn du deine Website-Bilder optimieren willst, kommen nur die Formate infrage, die jeder Browser lesen kann. Damit bleiben sechs für deine Website übrig: JPG, WebP, AVIF, PNG, GIF und SVG. Für Fotos brauchst du davon meist nur ein Format.
WebP, AVIF und JPG: die Formate für Fotos
Alle drei Formate stellen über 16 Millionen Farben dar und komprimieren Fotos stark. JPG ist der Klassiker, wahrscheinlich am bekanntesten (denn das Format kommt auch aus der Kamera oder dem Handy) und es funktioniert überall. WebP ist leider immer noch nicht so bekannt. Es erreicht bei gleicher Bild-Qualität etwa 25 bis 35 Prozent kleinere Dateien (bezogen auf die KB-Zahl). WordPress unterstützt es seit Version 5.8. (im Jahr 2026 ist bereits Version 7+ aktuell). Für die meisten Websites ist WebP heute die beste Wahl.
AVIF komprimiert oft noch stärker. WordPress kann es seit Version 6.5, sofern dein Server das Format verarbeitet. Frag im Zweifel bei deinem Hoster nach. JPG brauchst du weiterhin für Vorschaubilder, die beim Teilen auf Social Media erscheinen: Dieses Format zeigen alle Plattformen zuverlässig an.
PNG: für Bilder mit Transparenz
PNG stellt ebenfalls Millionen Farben dar und kann zusätzlich Transparenz. Für Fotos ist es trotzdem ungeeignet, weil die Dateien sehr groß werden.
Transparenz, was ist das nun wieder? Du hast es bestimmt schon gesehen: Das Foto einer Blüte, die „frei geschnitten“ ohne Hintergrund auf Text oder einem anderen Bild liegt. Das funktioniert nur mit Bildformaten, die Transparenzen unterstützen. JPGs kennen keine durchsichtigen Bereiche. Stellst du ein Motiv frei, schneidest also den Hintergrund weg und speicherst das Bild als JPG, dann füllt das JPG die leere Fläche mit einer Farbe, meist Weiß. Auf einem farbigen Seitenhintergrund siehst du dann einen weißen Kasten um dein Motiv.
Die Fotoreihe unten zeigt das an einem verwelkten Blatt. Freigestellt und als JPG gespeichert, steckt es in einem weißen Kasten. Als PNG oder WebP liegt das Blatt direkt auf jedem beliebigen Hintergrund, denn auch WebP kann Transparenz, bei deutlich kleinerer Datei.
Animationen auf Websites: das GIF
GIF brauchst du nur für bewegte Bilder, etwa eine winkende Katze oder diese blinkenden Werbebanner, die jeder kennt. GIF kann nur 256 Farben darstellen und erzeugt trotzdem riesige Dateien. Ein kurzes Video im MP4-Format oder ein animiertes WebP ist ein Bruchteil davon groß.
SVG für Logo und Icons
SVG ist ein Sonderfall, denn es ist ein Vektorformat. JPG, PNG, GIF, WebP und AVIF bestehen aus Pixeln, SVG besteht aus mathematisch berechneten Kurven. Deshalb bleibt eine SVG-Grafik in jeder Größe gestochen scharf.
Einen Haken gibt es: WordPress blockiert SVG-Uploads standardmäßig, weil SVG-Dateien schädlichen Code enthalten können. Doch hier gibt es Umwege: Mit dem Plugin Safe SVG kannst du das SVG trotzdem sicher hochladen, es prüft jede Datei beim Upload.
Welches Format wofür?
Fotos: WebP, oder AVIF, falls dein Server es unterstützt
Vorschaubild für Social Media: JPG
Bilder mit Transparenz: WebP oder PNG
Logo und Icons: SVG, wenn die Grafik in einem Vektorprogramm entstanden ist, sonst PNG
Animationen: kurzes Video oder animiertes WebP statt GIF
Fehler 4
Der Dateiname ist nicht websicher
Die Pixelzahl wurde reduziert, das Bild komprimiert – nun fehlt nur noch der Dateiname. Viele, die ihre Website-Bilder optimieren, machen ausgerechnet im fast letzten Schritt einen großen Fehler: falsche Zeichen im Dateinamen. Die können nämlich dazu führen, dass Server, Betriebssystem oder Browser ein Bild nicht finden. Die Bilder auf der Website werden einfach nicht angezeigt. Die BesucherInnen sehen nur ein kleines, hässliches Platzhalter-Icon. Oder eine leere Fläche. Damit das nicht passiert, gibt es für das Web Grundregeln:
Die Grundregeln für Dateinamen
keine Umlaute und kein ß
keine Sonderzeichen
keine Leerzeichen
nur Kleinbuchstaben
Wörter mit Bindestrich trennen
In 8 Schritten zur selbstgebauten Website
Mein Fahrplan zeigt dir in einfachen Worten, was du für den Start deiner Website wirklich brauchst. Melde dich hier an und du erhältst den Fahrplan als Geschenk in dein Postfach und als Download.
Warum Bindestrich und kein Unterstrich?
Google liest den Bindestrich als Worttrenner, den Unterstrich nicht. Aus schneiderin_mueller wird für Google ein einziges Wort.
Und warum Kleinbuchstaben?
Die meisten Webserver laufen unter Betriebssystem Linux und unterscheiden Groß- und Kleinschreibung. Für sie sind Haus.jpg und haus.jpg zwei verschiedene Dateien. Ein falscher Buchstabe im Link genügt, und das Bild fehlt. Spaßeshalber hab ich hier einen kleinen Test gemacht:
WordPress ersetzt Leerzeichen beim Upload automatisch durch Bindestriche. Auf den Rest verlässt du dich besser nicht.
Fehler 5
Der Dateiname sagt nichts über das Bild
IMG_3519.jpg. Mit solchen oder ähnlichen Bezeichnungen kommen Fotos aus der Kamera, und so landen sie oft in der Mediathek. Das ist aus zwei Gründen ungünstig:
Erstens findest du das Foto später kaum wieder. Ich suche Bilder auf meinem Rechner per Schlagwort, und img-2537.jpg hilft mir wenig, wenn ich das Selfie vom letzten Waldspaziergang brauche.
Zweitens liefert der Dateiname Google einen Hinweis auf den Bildinhalt. Laut Google ist dieser Hinweis schwach, deutlich wichtiger sind der Alt-Text und der Text rund um das Bild. Ein beschreibender Dateiname kostet dich trotzdem nur Sekunden. Außerdem findest du das Bild in der Mediathek von WordPress schneller, wenn der Dateiname passt.
Bleiben wir beim Beispiel der Schneiderin: Sie hat eine Website und zeigt dort mit einem Foto, wie sie Maß nimmt bei einer Kundin. Der passende Dateiname lautet dann: schneiderin-mueller-nimmt-mass.webp. Steht das Foto direkt neben dem Text über ihre Maßanfertigung, erkennt Google den Zusammenhang am besten.
Fehler 6
Der Alt-Text fehlt (Alternativtext)
Den Alt-Text vergibst du nach dem Upload, in der WordPress-Mediathek oder direkt im Bildmodul. Das Feld für den Alt-Text, genauer den „Alternativtext“, findest du wieder, wie oben beschrieben, unter den Informationen zum Bild. Dort gibst du einfach deinen Text ein. Er erfüllt zwei Aufgaben:
Menschen, die blind oder stark sehbehindert sind, nutzen Screenreader. Das Programm liest den Alt-Text vor, so erfahren sie, was auf dem Bild zu sehen ist. Außerdem nutzt Google den Alt-Text, um das Bild zu verstehen und in der Bildersuche einzuordnen.
So schreibst du einen guten Alt-Text
Beschreib in einem Satz, was zu sehen ist, zum Beispiel: „Schneiderin Anna Müller misst die Schulterbreite einer Kundin.“
Ein Keyword passt hinein, wenn es zum Bild gehört. Keyword-Listen im Alt-Text schaden mehr, als sie nützen.
Rein dekorative Bilder wie Linien oder Hintergrundmuster bekommen einen leeren Alt-Text. Der Screenreader überspringt sie dann.
Eine Falle aus der Praxis: Änderst du den Alt-Text später in der Mediathek, übernimmt ein bereits eingefügtes Bild die Änderung nicht automatisch. In Divi hat das Bildmodul ein eigenes Feld für den Alt-Text. Prüf nach dem Einfügen, ob dort etwas steht.
Das Gesetz zur Barrierefreiheit
Seit Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Ein typisch deutsches Wortungetüm, dessen Inhalt aber wichtig ist. Es betrifft vor allem Onlineshops und digitale Dienstleistungen für VerbraucherInnen. Kleinstunternehmen mit Dienstleistungen sind ausgenommen. Alt-Texte gehören trotzdem auf jede Website.
Zusammenfassung und wichtige Hinweise
Welche Bildgröße ist optimal für WordPress?
Als Faustregel gilt: Inhaltsbilder zwischen 1.200 und 2.000 Pixel Breite, Headerbilder bis 2.560 Pixel, und jedes Bild möglichst unter 150 KB. Die Werte im Einzelnen:
Optimale Bildgröße für deine Website: die Übersicht
Einsatz
Breite
Format
Dateigröße (Richtwert)
Headerbild, volle Displaybreite
1.920–2.560 px
WebP
bis ca. 200 KB
Bild über die volle Inhaltsbreite
doppelte Layoutbreite, höchstens 2.560 px
WebP
bis 150 KB
Bild neben dem Text
900–1.200 px
WebP
unter 100 KB
Kleines Bild, Porträt
600–800 px
WebP
unter 60 KB
Beitragsbild / Social-Media-Vorschau
1.200 × 630 px
JPG
ca. 100 KB
Logo, Icons
–
SVG, sonst PNG
wenige KB
Die 1.960 px in der zweiten Zeile gelten für deine Layoutbreite. Falls sich die nach dem Relaunch geändert hat, passt du den Wert noch an.
Zwei Punkte, die fast alle vergessen
Das Headerbild sollte sofort laden
WordPress lädt Bilder seit Version 5.5 erst, wenn BesucherInnen zu dem Bereich scrollen, in dem die Bilder eingebunden sind. Dieses Verhalten nennt man Lazy Loading, was enorm Ladezeit spart. Beim Headerbild bewirkt es das Gegenteil, denn dort soll das Bild sofort erscheinen.
Neuere WordPress-Versionen nehmen das erste große Bild deshalb automatisch vom Lazy Loading aus. Viele Cache- und Performance-Plugins überschreiben diese Einstellung aber wieder. Prüf in deinem Plugin, ob das erste Bild ausgenommen ist.
Standortdaten aus Handyfotos entfernen
Handyfotos speichern oft unsichtbar den Aufnahmeort, als GPS-Daten in den Metadaten. Ein Foto aus deinem Garten oder deiner Praxis verrät so im Zweifel deine Adresse. Viele Komprimierungstools entfernen diese Daten automatisch, aber nicht alle. Wenn du wie ich mit dem Mac arbeitest, findest du diese Daten in der Vorschau unter Werkzeuge > Informationen einblenden.
Tools: So bearbeitest du deine Bilder vor dem Upload
Website-Bilder optimieren mit einem Programm
Ich arbeite heute mit Affinity (vormals viele Jahre in Photoshop, doch das ist mir mittlerweile zu massig geworden). Mit Affinity erledige ich alles in einem Durchgang: Bild zuschneiden, Pixelmaße reduzieren, komprimieren, als WebP speichern und sinnvoll benennen.
Diese Programme eignen sich auch für Einsteigerinnen:
Affinity: seit Ende 2025 kostenlos mit einem Canva-Konto, Profi-Funktionen ohne Abo, für Mac und Windows
GraphicConverter: sehr gut, ich nutze es gelegentlich, allerdings gibt es das nur für den Mac
Handy-Apps gibt es ebenfalls reichlich. Ich finde Bildbearbeitung auf dem kleinen Display mühsam, für dich kann es trotzdem eine Alternative sein.
Website-Bilder optimieren mit einem Online-Tool
Squoosh (von Google, kostenlos): Du siehst Original und komprimierte Version nebeneinander und probierst WebP und AVIF direkt aus. So bekommst du schnell ein Gefühl für Qualität und Dateigröße. Squoosh verarbeitet die Bilder in deinem Browser, sie landen auf keinem fremden Server.
iLoveIMG: zuschneiden, verkleinern, komprimieren, in JPG oder WebP umwandeln, drehen. Du kannst sogar Text einfügen, etwa als Wasserzeichen.
Plugins: So optimierst du Bilder direkt in WordPress
Ein Optimierungs-Plugin übernimmt einen Teil der Arbeit beim Upload. Es verkleinert Bilder auf eine Maximalbreite, komprimiert sie und wandelt sie in WebP oder AVIF um. Zuschneiden und Umbenennen bleibt deine Aufgabe.
Ich empfehle ShortPixel Image Optimizer. Gute Alternativen sind Imagify, EWWW Image Optimizer oder Converter for Media. Nutze nur eines dieser Plugins, zwei gleichzeitig komprimieren doppelt und kommen sich in die Quere.
Ordnung: So behältst du den Überblick über deine Bilder
Auf dem Rechner
Was hat Ordnung mit Bildoptimierung zu tun? Erst mal nichts. Sie hilft dir aber, sofort das richtige Bild zu finden, und das spart Zeit und Nerven. Und sind beide erstmal am Ende, passieren schnell Fehler (wer kennt das nicht).
Ich lege für meine Website-Bilder Ordner nach Einsatzort an:
Header
Beiträge
Anleitungen
private Fotos
Selfies
Unterordner, etwa nach Hoch- und Querformat, helfen zusätzlich. Was auch immer du anlegst: Eine gute Struktur ist die halbe Miete. Für größere Bildbestände gibt es Verwaltungsprogramme wie Adobe Lightroom.
In der WordPress-Mediathek
Die Mediathek in WordPress ist meiner Meinung nach ziemlich grottig. Sie kennt nur zwei Arten von Ordnung: Bilder in Monatsordnern oder alle auf einem Haufen. So oder so suchst du dir nach kurzer Zeit einen Wolf.
Plugins wie Real Media Library oder FileBird bringen Ordner in die Mediathek. So sortierst du Bilder nach Themen und behältst den Überblick.
Ist die Mediathek schon voller Altlasten? Mit Media Cleaner findest du Bilder, die nirgends verwendet werden. Vorsicht bei Page Buildern wie Divi: Das Plugin erkennt nicht jedes eingebundene Bild zuverlässig. Mach vorher ein Backup und prüf jede Datei, bevor du sie löschst.
Mit Enable Media Replace tauschst du ein Bild gegen eine neue Version aus. Die URL bleibt gleich, alle Seiten mit diesem Bild zeigen automatisch die neue Datei. An dieser Stelle ein wichtiger Hinweis, den viele Websitebetreiber vergessen: Jedes Bild hat eine eindeutige URL. Was ist das nun wieder? Ein Beispiel: Alle Bilder, die du über WordPress hochlädst, landen in einem Unterordner vom WordPress-Content. Das ist wie oben beschrieben der Ordner „uploads“. Demnach erhält mein Bild für das Blatt oben folgende eindeutige URL: „https://constanzestraub.de/wp-content/uploads/website-bilder-optimieren-blatt-mit-hintergrund.webp“.
Deshalb ist dieses Tool praktisch, wenn du alte Bilder nachträglich optimierst.
Das waren die wichtigsten Fakten und häufigsten Fehler zum Thema Website-Bilder. Wenn du Fragen hast oder wenn dir der Artikel gefallen hat, freue ich mich über einen Kommentar von dir 🙂
Bevor es mit dem Bau einer Website losgeht, müssen wir überlegen: Mit welchem CMS bauen wir die Website? Meine erste Wahl: WordPress. Das heißt: Auf einem Webspace muss WordPress zunächst installiert werden. Auf den meisten Hostern ist WordPress vorinstalliert. Falls nicht oder wenn du – wie ich – lieber die volle Kontrolle haben möchtest über deine Installation, dann kannst du WordPress sehr gut und einfach selber installieren. Wie das geht, erkläre ich hier in 6 Schritten.
WordPress installieren: 6 einfache Schritte zu deiner perfekten WordPress-Website
Vielleicht hast du mal gelesen, dass kaum jemand ohne Fehlermeldungen WordPress installieren kann. „WordPress ist viel zu kompliziert“ höre ich auch immer wieder. Neulich sagte mir jemand, „dass man für WordPress programmieren können muss“.
Das ist Unsinn. Glaub mir, solche Aussagen sind Mythen. Sie entstehen, weil Anwender aus Unkenntnis Fehler gemacht haben beim WordPress installieren und dann enttäuscht waren, weil es nicht weiterging.
WordPress zu installieren ist nicht schwer. Aber ich gebe es zu: Wenn man nicht aufpasst sind Fehler möglich. Damit gerade Anfänger nicht unnötig enttäuscht werden, habe ich diese kleine Anleitung geschrieben. Mit diesem Fahrplan installierst du ruckzuck und ohne Stress dein WordPress.
Was brauche ich, um WordPress installieren zu können?
Wahrscheinlich hast du mindestens eine Grundvoraussetzung: einen PC oder ein Notebook. Der PC sollte einigermaßen modern sein. Das heißt: Er sollte aktuelle Programme und ein relativ aktuelles Betriebssysteme haben. Arbeitsspeicher sollte auch genügend drauf sein. Dann hast du es später einfacher. Der Browser, das ist das Programm, das dir Internetseiten anzeigt, sollte die neueste Version sein. Natürlich brauchst du auch eine gute Internetverbindung. Je schneller die Verbindung ist, desto mehr Spaß macht die Arbeit an der Website.
Nun kommt das, was du dir zusätzlich holen musst:
Hoster:
Natürlich brauchst du noch einen Hosting-Anbieter. Das ist die Firma, die dir Speicherplatz zur Verfügung stellt. Denn du brauchst einen Platz, auf dem deine Website-Daten „lagern“. Der Hoster bietet dir die Infrastruktur, damit deine Website im Internet gesehen werden kann. Achte hier beim Buchen des Hosters auf Mindestvoraussetzungen: genügend Speicherplatz, PHP, SSL-Zertifikat, Datenbank.
Domain:
Deine Website braucht einen Ort, an dem sie im Internet zu finden ist. Dafür ist die Domain da: Die Domain ist Adresse und Name für deine zukünftige Website. Bei jedem Hoster kannst du deine Domain bestellen.
Datenbank
Eine Datenbank brauchst du, wenn du ein Content Management System (CMS) installierst. WordPress ist so ein System. Andere CMS sind Joomla, Typo 3, Redaxo usw., auch sie funktionieren im Zusammenhang mit einer Datenbank. Aber keine Sorge, du musst dafür nichts großartig machen. Die Datenbank muss lediglich einmal – mit einem Klick – angelegt und später mit WordPress verbunden werden.
Datenzugang – ein FTP-Programm:
Du brauchst eine Möglichkeit, die Daten auf deinen Hoster hochladen zu können. Dafür gibt es sogenannte FTP-Programme. Eine Alternative ist das Web-FTP: Das bieten manche Hoster an. Damit kannst du ohne eigenem FTP-Programm deine Daten hochladen. Sicherer und bequemer ist allerdings ein FTP-Programm wie FileZilla.
WordPress
WordPress ist eine Software, mit der du deine Website erstellen kannst. WordPress ist die technische Grundlage für deine Website. Natürlich gibt es viele weitere Systeme und auch Baukästen wie Wix, Jimdo oder Squarespace, allerdings bevorzuge ich WordPress. Du bekommst WordPress vollkommen kostenlos unter dieser Adresse: wordpress.org.
Zusammengefasst brauchst du:
ein PC oder ein Notebook
Hoster
Domain
Datenbank
FTP-Programm
WordPress
Auf dem Hoster eine Datenbank anlegen
WordPress funktioniert nur mit einer Datenbank
Eine Datenbank speichert all die Texte, die du auf deiner WordPress-Website schreibst. Auch dein Zugang zu deiner WordPress-Website und andere Passwörter werden in der Datenbank gespeichert. Davon merkst du nichts, denn das Speichern spielt sich im Hintergrund ab. Und du musst auch nichts an der Datenbank machen.
Alles was du machen musst: Einmal eine Datenbank anlegen. Doch keine Sorge: Das Anlegen der Datenbank ist mit einem Klick erledigt.
Über die Benutzeroberfläche deines Hosters wählst du deine Datenbank aus. Wo genau du die Datenbank findest und aktivierst, sieht bei jedem Hoster anders aus. Ich erkläre das am Beispiel von Allinkl, einer meiner Hoster:
Du loggst dich im Kundencenter bei Allinkl ein.
Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung.
Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
Du siehst eine neue Ansicht mit einem neuen senkrechten Menü auf der linken Seite. Hier klickst du auf -> Datenbanken
Nun siehst du das Fenster -> Datenbanken > Übersicht
Rechts oben findest du ein kleines Symbol mit einem roten Pluszeichen (+). Und die Option daneben: „neue Datenbank anlegen“..
Hier klicken und es erscheint ein neues Fenster, in dem du die Beschreibung und das Passwort deiner Datenbank eingeben kannst.
Speichern
Nun kommst du automatisch auf die Datenbank-Übersicht mit deiner 1. Datenbank.
Hier findest du rechts den Datenbanknamen und den Nutzernamen deiner Datenbank.
Datenbankname, Nutzername und dein Passwort musst du sorgfältig notieren.
Tipp: Lege alle Zugangsdaten in einer Excel- oder Google-Tabelle an.
WordPress von wordpress.org herunterladen
WordPress ist ein Open Source System
Das heißt: WordPress ist kostenlos und kann einfach von der offiziellen WordPress-Website heruntergeladen und für jeden Zweck eingesetzt werden.
Dazu gehst du einfach auf wordpress.org und klickst auf den blauen Button oben rechts.
Falls dir englisch nicht so liegt, gibt es eine deutschsprachige Version der Seite -> de.wordpress.org.
Deine Datenautobahn zu deinem Hoster
Nun hast du WordPress auf deinen Rechner runtergeladen.
Der nächste Schritt ist: WordPress muss nun auf deinen Hoster hochgeladen werden. Dafür brauchst du einen sogenannten FTP-Zugang, die Datenautobahn zu deinem Hoster. Jeder Hoster bietet so einen FTP-Zugang an – du musst nur noch die „Autobahnzufahrt“ anlegen. Also Passwort und Zugangscode. Um im Bild zu bleiben.
Im nächsten Schritt (Schritt 4) erkläre ich dir 2 unterschiedliche Wege, auf welche Art du deine Daten auf deinen Hoster lädst. Aber egal welchen Weg du wählst: Als erstes muss der FTP-Zugang angelegt werden.
Doch keine Sorge: Das Anlegen des FTP-Zugangs ist simpel.
Was ist FTP?
Das Kürzel FTP bedeutet File Transfer Protocoll. Auf deutsch und in einfachen Worten: FTP bedeutet schlicht den Vorgang zur Übertragung von Daten.
Und so gehst du bei Allinkl vor:
Du loggst dich (du kennst das bereits) im Kundencenter bei Allinkl ein.
Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung (kennst du auch schon).
Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
In dem neuen Fenster klickst du im linken, senkrechten Menü auf -> FTP.
Es öffnet sich das Fenster -> FTP > Zugang
Dort siehst du oben auf der rechten Seite ein kleines Seiten-Symbol mit einem roten Pfeil und der Option daneben -> „Neuen FTP-Nutzer anlegen“.
Diese Option klickst du an.
Es öffnet sich ein neues Fenster.
Hier kannst du wie bei der Datenbank eine Beschreibung deines FTP-Zugangs notieren (optional). Ein Passwort ist Pflicht — nimm hier ein sicheres Passwort, möglichst 12-stellig und mit Sonderzeichen und Ziffern (ohne Umlaute)
Das Feld Pfad kannst du leer lassen, dann siehst du beim Einwählen auf deinen Webspace immer alle Verzeichnisse, die du angelegt hast (du bist dann im sogenannten Rootverzeichnis, dem obersten Verzeichnis).
Abschließend wie immer -> Speichern.
Du kommst dann zurück auf das Übersichtsfenster.
Dort siehst du nun deine FTP-Verbindung in einer kleinen Tabelle angelegt.
Den Benutzernamen musst du dir gut notieren, ebenso dein gewähltes Passwort und den FTP-Server
Den FTP-Server nennt dir dein Hoster. Auf Allinkl findest du die Bezeichnung des Servers, wenn du in deiner FTP-Tabelle auf das rechte, kleine, rote Seitensymbol mit dem roten Pfeil klickst: Es öffnet sich ein Fenster mit all den Daten, die du für deinen FTP-Zugang brauchst. Hier kannst du auch dein Passwort ändern.
Hinweis: Auf der Tabellenansicht deines FTP-Zugangs findest du einige grüne Haken. Wenn die Buchstaben R, W, L, V jeweils einen grünen Haken haben, dann ist bei dir alles richtig eingestellt.
Deinen WordPress-Ordner auf den Hoster hochladen
Zwei Wege, um Daten per FTP hochzuladen
Möglichkeit 1
Hochladen mit dem Web-FTP
Du kannst den WordPress-Ordner mit den Web-FTP deines Hosters hochladen. Viele Hoster bieten diese Möglichkeit an. Web-FTP bedeutet: Über das Login deines Hosters kannst du Daten direkt mit dem Browser wie Firefox oder Chrome (oder jeden beliebigen Browser) hochladen.
Und so geht das bei Allinkl:
Wenn du das noch nicht getan hast, legst du zunächst deinen FTP-Zugang an. Wie das geht, hab ich in Schritt 3 erklärt.
Dann gehst du wieder in das KAS.
Im KAS klickst du wieder im linken, senkrechten Menü auf -> FTP.
Jetzt bist du wieder im Fenster: FTP > Übersicht.
Dort steht unten in der Tabelle dein angelegter FTP-Zugang.
Du klickst auf das linke Symbol mit den 2 kleinen roten Kästchen (wahrscheinlich sollen das Rechner sein)
Es öfffnet sich ein neues Fenster in deinem Browser: Du siehst nun die Verzeichnisstruktur auf deinem Hoster.
Dein Verzeichnis mit dem Namen deiner Domain klickst du an, es öffnet sich ein neues Fenster.
Hier siehst du oben ein horizontales Menü. Dort auf -> Upload klicken.
Nun kannst du auf -> Durchsuchen klicken.
Nun wählst du deinen gezippten WordPress-Ordner aus, der auf deinem PC liegt. Wichtig: Es kann nur der gezippte WordPress-Ordner hochgeladen werden.
Wenn der gezippte Ordner hochgeladen ist, muss er noch entzippt werden.
Dazu klickst du das kleine weiße Auswahlkästchen links neben dem Symbol der gezippten WordPress-datei aus.
Dann gehst du auf > Aktionen.
Es öffnet sich ein Auswahlfeld, hier klickst du auf > Archiv entpacken.
Mit > ok bestätigen.
Nun wird der WordPress-Ordner entpackt. Das dauert ein paar Minuten, einfach abwarten.
Wenn alles entpackt ist, kannst du wieder auf > ok klicken.
Möglichkeit 2
Hochladen mit einem FTP-Programm
Ich nutze zum Hoch- und Runterladen von Dateien immer ein FTP-Programm. Der Grund ist ganz einfach: Hier kann ich sämtliche Zugänge zu allen möglichen Hostern zentral anlegen. Ich brauche dazu nicht jeden Hoster extra aufrufen, alle Zugänge habe ich in meinem FTP-Programm gespeichert. Falls du nur einen Hoster hast, reicht auch das Web-FTP für dich aus. Wenn du mehrere unterschiedliche Zugänge verwalten möchtest, ist das FTP-Programm komfortabler. Außerdem hast du mit dem Programm noch einige zahlreiche Möglichkeiten.
Gute und kostenlose FTP-Programme sind FileZilla und CyberDuck.
Damit du mit einem FTP-Programm deine Daten hoch- oder runterladen kannst, musst du bei deinem Hoster zunächst einen FTP-Zugang einrichten. Wie das geht, hab ich oben in Schritt 3 erklärt.
Das FTP-Programm musst du vorher noch einrichten. Dort trägst du die Daten ein, die du erhalten hast, als du den FTP-Zugang bei Allinkl angelegt hast.
Verzeichnisstruktur anpassen
Ein wichtiger Schritt, der oft vergessen wird.
Hierauf musst du achten, damit es nicht zu Fehlermeldungen kommt.
Wenn du dein WordPress-Ordner hochgeladen hast, muss du sehr wahrscheinlich die Verzeichnisstruktur auf deinem Hoster anpassen. Was es damit auf sich hat erkläre ich hier:
Du kennst es ich von deinem PC oder Mac: Jedes deiner Dokumente ist in einem „Ordner“ angelegt. Deine Apps (Programme) sind ebenfalls in einem „Ordner“, dem Ordner „Programme“. Und so weiter. Nun wunderst du dich, dass ich „Ordner“ in Tüddelchen gesetzt habe… Natürlich sind die Ordner nicht wirkliche Ordner, wie wir sie aus dem analogen Leben kennen, sondern Verzeichnisse. Und genau solche Verzeichnisse befinden sich auf deinem Hoster.
Wenn du eine Domain hast bei Allinkl, dann kannst du beim Einloggen über FTP sehen, dass dort ein Verzeichnis steht, das den Namen deiner Domain hat. Beispiel: Wenn du eine Domain hast, die „sabinemeier.de“ heißt, dann liegt in deinem FTP-Bereich ein Verzeichnis mit dem Namen sabinemeier.de.
Du kannst das Verzeichnis öffnen, darin befindet sich die Datei index.htm. Das ist eine voreingestellte Standarddatei, die immer in neuen und damit leeren Verzeichnissen liegt. Sie sorgt dafür, dass du eine Platzhalterseite mit dem Logo von Allinkl siehst, wenn du deine noch leere Domain sabinemeier.de aufrufst (um im Beispiel zu bleiben).
Wenn du nun in dieses Verzeichnis deinen Ordner WordPress hochgeladen hast, dann steht dort immer noch diese index.htm von Allinkl. Aber du möchtest natürlich, dass dein neues WordPress aufgerufen wird, wenn du deine Domain in den Browser eintippst. Und nicht die index.htm.
Wie das geht?
Du musst ein interne Umleitung einrichten. Damit sagst du dem System: Im Browser des Besuchers soll nicht die Platzhalterseite index.htm von Allinkl angezeigt werden, sondern die Startseite, die in deinem hochgeladenen WordPress-Ordner liegt.
Das machst du so:
Du loggst dich wieder bei Allinkl ein.
Wieder auf technische Verwaltung.
Dann gehst du wie gehabt auf KAS Login.
Hier im linken senkrechten Menü klickst du auf Domain.
Du erhältst eine Übersicht all deiner Domains.
In der Zeile, in der deine Domain gelistet ist, klickst du auf das linke, kleine Symbol, das rote Dokumentsymbot mit dem roten Pfeil.
Es öffnet sich ein neues Fenster.
Hier kannst du ein Ziel angeben für deinen Webspace.
Damit die Inhalte in deinem WordPress-Ordner angezeigt werden, gibst du in das Feld bei Ziel einfach den Namen deines Ordners an. Das ist in der Regel eben „wordpress“. Wenn du den Ordner umbenannt hast in „meinetolleseite“, dann muss dein Ziel natürlich „meinetolleseite“ heißen. Natürlich immer ohne Tüddelchen und hinter einem Slash (/).
Nun wird beim Aufruf deiner Domain auf den Inhalt deines WordPress-Ordners verwiesen – und nicht mehr auf die index.htm.
WordPress mit der Datenbank verbinden
WordPress installieren heißt: mit der Datenbank verknüpfen
Dieser Schritt ist die eigentliche Installation. Du hast dein WordPress zwar hochgeladen – aber damit ist noch nichts erreicht. WordPress funktioniert nur in Verbindung mit einer Datenbank. Darum musst du im nächsten Schritt WordPress mitteilen, wie die Datenbank heißt und welches Passwort sie hat. Erst dann kann WordPress mit der Datenbank kommunizieren.
Den Installationsprozess startest du, indem du deine Domain in die Adresszeile deines Lieblingsbrowsers eingibst (Firefox, Chrome, Safari – was du willst).
Hinter der Domain tippst du ein Slash (/).
Und direkt hinter dem Slash tippst du „wpadmin“ oder einfach „admin“ ein – ohne Anführungszeichen natürlich.
Beispiel: sabinemeier.de/wpadmin
Dann Entertaste drücken.
Es öffnet sich ein Fenster, in dem du weiterklicken kannst zum nächsten Schritt.
Nun erscheint ein großes weißes Formularfenster.
Hier gibst du die Daten zu deiner Datenbank ein, die du vom Hoster erhalten hast.
Für das Feld „localhost“ kannst du probieren: Häufig passt „localhost“ und du musst nichts ändern. Bei Allinkl bleibt es bei localhost. Andere Hoster aber könnten einen anderen Datenbankhost haben. Das erfährst du bei deinem
Hoster. Du findest diese Angaben im Kundenlogin deines Hosters. Falls das nicht zu finden ist: einfach beim Hoster anrufen.
Das Feld Tabellenpräfix kannst du unverändert lassen.
Damit ist die Installation fertig.
Wenn alles geklappt hat und du dich nicht vertippst hast, erhältst du von WordPress eine Erfolgsmeldung.
Außerdem: 5 Fehler, die du beim Aufbau deines Menüs vermeiden solltest
Du möchtest die Besucher sicher durch deine Website führen? Du möchtest ein WordPress Menü erstellen? Dann brauchst du nicht nur eine gute Navigation. Du brauchst mehrere Menüs an verschiedenen Stellen deiner Website. Die schlechte Nachricht: In WordPress ein Menü erstellen kann verwirrend sein. Je nach Theme hast du mehrere Möglichkeiten, wie und wo du Menüs auf deiner Website einsetzt. Die gute Nachricht: Eine durchdachte Navigation anzulegen ist technisch einfach. Ich zeige dir hier, wie du Menüs in WordPress erstellst.
Welche Menüs gibt es?
WordPress selber bietet von Haus aus drei Menüpositionen an. Wo die Menüs stehen, wie genau sie aussehen – das hängt von deinem Theme ab. Denn jedesWordPress- Theme bietet unterschiedliche Menüpositionen an. Deshalb ist als 1. Frage sinnvoll: Wo soll deine Navigation stehen? Für die Antwort darauf musst du folgendes wissen:
Welche Menüs gibt es überhaupt?
Welche Menüs bietet dein Theme?
Welche Positionen können Menüs auf der Website haben?
In WordPress arbeite ich mit dem Theme Divi. Mit WordPress + Divi sind die gängigsten Menüs mit den gängigsten Positionen möglich. Falls du ein anderes Theme benutzt, kann es sein, dass das ein oder andere Menü anders aussieht. Aber ich bin sicher: Meine Anleitungen werden dir weiterhelfen.
Hauptmenü – ein Must-have und das Leitsystem deiner Website
Mit dem Hauptmenü ist die Navigation gemeint, die auf einer Website die erste Geige spielt. Hier werden die wichtigsten Seiten deiner Website angesteuert. Was du wissen solltest: Das Hauptmenü kann verschiedene Positionsmöglichkeiten haben. In dieser Anleitung zeige ich dir, wie ein horizontales Menü am Kopf der Seiten in WordPress erstellt wird.
Footermenü: das Menü am „Fuß“ der Seiten
Das Footermenü findest du im untersten Bereich einer Website. Eben im Footer. Das ist der Bereich, der die einzelnen Seiten deiner Website abschließt und dem Besucher sagt: Weiter kannst du nicht scrollen. Ein Footermenü ist sinnvoll, weil damit die Besucherin ohne scrollen zu müssen weitere Unterseiten findet. Wenn du im Footer ein WordPress Menü erstellen möchtest, hast du mehrere Möglichkeiten. In dieser Anleitung zeige ich dir, wie du ein vertikales Footermenü und wie du ein horizontales Footermenü erstellst.
Sekundäres Menü — eine Linkleiste im Headerbereich
Das Sekundäre Menü steht im Headerbereich oberhalb vom horizontalen Hauptmenü. Dieses Menü ist eher auf großen Portalen sinnvoll. Auf Shopseiten oder mehrsprachigen Seiten kann diese Leiste sinnvoll sein, wenn Warenkorb, Login oder die Sprachauswahl untergebracht werden sollen. Weitere mögliche Elemente sind die Such-Lupe, Social-Icons, deine Telefonnummer oder die Mailadresse.
DropDown-Menü — die Erweiterung des Hauptmenüs
Wenn du ein nicht sichtbares WordPress Menü erstellen möchtest, wählst du das Das DropDown-Menü. Es wird auch Untermenü oder Submenü genannt. Der Name sagt es bereits: Es ist ein „Klappmenü“. Das heißt: Die Besucher klicken zuerst ein Link im Hauptmenü an, damit das Untermenü aufklappt. Sinnvoll ist das DropDown-Menü, weil in der horizontalen Menüleiste nicht mehr als sieben Links angeordnet sein sollten. Je weniger Links im Hauptmenü, desto übersichtlicher ist die Navigation. Der Rest kommt ins DropDown.
Horizontales WordPress Menü erstellen im Header
Eine einzelne Webseite wird in verschiedene Bereiche eingeteilt:
Header
Body
Footer
Der zuerst sichtbare Bereich ist der Header. Der Header ist der Kopfbereich einer Webseite. Deshalb wird hier in der Regel das Hauptmenü angebracht. Gut zu wissen: Die Seiten können so eingestellt werden, dass die Navigation auch beim Scrollen oben stehen bleibt. Und so kommst du zum wichtigsten Menü deiner Website:
Schritt 1
Seiten in WordPress anlegen
Damit du überhaupt ein Menü in WordPress sehen kannst, möchte WordPress zunächst Seiten haben. Der umgekehrte Weg – erst Menü, dann Seiten – ist zwar auch denkbar und technisch möglich, aber umständlich. Der erste Schritt also: Seiten anlegen. Auch inhaltlich ist das sinnvoll, denn dann machst du dir vor dem Anlegen der Website Gedanken über deine Inhalte.
Ich erlebe es immer wieder, dass Websitebetreiber zuerst an das Menü denken. Ohne bereits Seiten zu haben. Das ist, als würden sie erst den Sattel kaufen und dann das Pferd… Apropos: Hast du ein Konzept für deine Website? Das ist nämlich sehr sinnvoll und erleichtert dir die Arbeit. Falls du Tipps brauchst, lies gern meine Anleitung, wie du ein Konzept für deine Website erstellst > klick hier
Schritt 2
Bereich „Menüs“ im Dashboard von WordPress öffnen
Du loggst dich wie gewohnt in deine WordPress-Installation ein. Standardmäßig öffnet sich das Dashboard deiner Installation. Hier siehst du links die vertikale Menüleiste mit den Optionen, die du zum Aufbau deiner Website ansteuern kannst. Diese vertikale Menüleiste beginnt oben mit
> Dashboard, dann
> Beiträge, dann
> Medien, dann
> Seiten
Weiter unten findest du den Link Design. Dieser Menüpunkt enthält den Punkt Menüs. Es gibt 2 Möglichkeiten, zum Bereich Menüs zu kommen.
Möglichkeit 1:
Du „schwebst“ mit dem Mauscurser über den Begriff Design (ohne zu klicken!).
Es öffnet sich nach rechts ein Kontextfenster
Hier findest du unter den aufgeführten Links wie Themes, Customizer, Widgets den Punkt Menüs
Menüs anklicken.
Möglichkeit 2:
Diesmal klickst du auf Design
Das vertikale Hauptmenü in deinem Dashboard öffnet sich nach unten.
Nun siehst du im Menü unter Design dieselben Menüpunkte wie in Möglichkeit 1)
Schritt 3
Den Namen des Menüs eintragen
Wenn du auf Menüs geklickt hast, dann öffnet sich im Dashboard ein neuer Bereich. Das ist der Menübereich. Im Bereich Menüs kannst du deine Navigationen definieren, anlegen und ändern. Links im Bereich findest du einen Kasten Menüeinträge hinzufügen und rechts den Kasten Menü-Struktur. So gehst du vor:
im Kasten Menü-Struktur findest du das Feld Name des Menüs
hier trägst du einen beliebigen Namen für dein Menü ein
dabei ist es sinnvoll, einen eindeutigen Namen zu wählen
anschließend klickst du auf den blauen Button Menü erstellen.
Schritt 4
Seiten auswählen und dem Menü hinzufügen
Wenn du noch keine Seiten angelegt hast, dann ist das Feld Menüeinträge hinzufügen grau. Ansonsten ist das Feld wie der Kasten Menü-Struktur weiß. Nun kannst du Seiten auswählen. Standardmäßig ist hier der Tab Zuletzt erstellt vorausgewählt. So gehst du vor:
Gewünschte Seite in der Checkbox links neben der Seitenbezeichnung auswählen
du kannst auch mehrere Seiten auswählen -> dann mehrere Checkboxen anklicken
auf den Button klicken: Zum Menü hinzufügen
anschließend werden die Seiten rechts unter Menü-Struktur als Button dargestellt.
Diese Button kannst du wie erwähnt aufklappen. Im Feld Angezeigter Name kannst du den Namen der Seite ändern. Wichtig: Wenn du hier den Seitennamen änderst, dann ändert sich nicht die URL der Seite! Es wird lediglich die Linkbezeichnung innerhalb des Menüs geändert. Du kannst den Seiten also nach Herzenslust an dieser Stelle neue Namen vergeben.
Schritt 5
So ordnest du dem Hauptmenü eine Position im Theme zu
Nun muss WordPress noch mitgeteilt werden, an welcher Stelle der Website dein neues Menü stehen soll. Soll es im Header stehen? Oder im Footer? Auch das ist kein Hexenwerk: Du setzt einfach einen Haken. Das machst du so: Im selben Feld – im Feld Menü-Struktur – findest du die Option Menü-Einstellungen. Darunter 4 Auswahlfelder, die du jetzt anklicken kannst. Da dein neues Menü als Hauptmenü erscheinen soll, muss die Checkbox Hauptmenü angeklickt werden. Ganz simpel. Oder?
Dasselbe wird später mit dem horizontalen Footermenü und dem Sekundären Menü gemacht.
Seiten automatisch hinzufügen: Diese Auswahlbox kann ebenfalls angeklickt werden. Ich lass diese Box immer deaktiviert, denn es gibt immer mal Seiten, die nicht hinzugefügt werden sollen (wie das Impressum). Zum Abschluss speichern nicht vergessen.
5 Fehler, die du beim Erstellen eines Menüs vermeiden solltest
1. Das Menü hat zu viele Links
Wenn das horizontale Hauptmenü zu viele Menüeinträge hat, wird es unübersichtlich für deine Besucher. Denn die Leser haben keine Zeit zu raten, wo genau was sein könnte… Ein anderer Punkt ist die geringe Aufmerksamkeit für Details: Die Besucher wollen sich auf die Inhalte konzentrieren. Bedienelemente wie Menüpunkte sollten deshalb schnell verstanden werden. Es gibt Untersuchungen, wonach bis zu 7 Links noch gut in Erinnerung bleiben. Je besser Elemente im Gedächtnis bleiben, desto schneller kann sich die Besucherin durch die Website navigieren: Sie muss nicht ständig suchen und überlegen.
2. Die Navigationsleiste läuft zu breit
Manchmal sehe ich horizontale Navigationen, die zwar eine übersichtliche Anzahl an Links haben, aber zu breit laufen. Zu breit laufende Menüs sind natürlich genauso problematisch. Passieren kann das, wenn für die Links im Menü Wörter gewählt werden, die einfach zu lang sind. Bei kleinen Monitoren wie Tablets in der Queransicht oder Notebooks reicht dann der Platz nicht mehr aus – das Menü erhält einen Umbruch. In einem Menü mit Umbruch kann man schlimmstenfalls nicht mehr navigieren, weil sich die Links überlagern oder weil das Submenü nicht mehr angeklickt werden kann. Deshalb: Die Website auch immer auf kleinen Displays ausprobieren.
3. Unwichtige Links im Hauptmenü
Klar, das Impressum ist wichtig. Aber nicht für deine Besucher. Jedenfalls in der Regel. Das Impressum und andere rechtliche Angaben wie der Datenschutzhinweis sind gesetzliche Vorgaben. Es sind Seiten, die die meisten Besucher eher selten bis gar nicht besuchen. Warum also sollten ausgerechnet gesetztliche Pflichtangaben im Hauptmenü stehen? Schließlich ist dort am wenigsten Platz. Mein Tipp: Stell solche Links ganz nach unten. In die unterste Footerleiste.
4. Die Schrift der Links ist schlecht zu lesen
Zu kleine Schrift oder ein schlechter Kontrast: Wenn die Schrift im Hauptmenü nur undeutlich gelesen werden kann, dann muss mehr Zeit investiert werden, um die einzelnen Seiten zu finden. Die Besucher werden unnötig aufgehalten und springen unter Umständen entnervt ab. Mach es deinen Lesern so einfach wie möglich, deine Seiten zu finden. Ein wichtiger Schritt dahin ist eine gut lesbare Navigation.
5. Stumme Links: Menüpunkte, die nichts aussagen
Anbahnung, Mag ich, Katzenliebe… Was mag sich wohl hinter diesen Menüpunkten verbergen? Schwachpunkte eines Menüs sind Linkeinträge (Menüpunkte), die man nicht versteht. Mach es auch hier deinen Besuchern so einfach wie möglich. Lass sie nicht raten, sondern wähle „sprechende“ Links. Gut sind Begriffe, bei denen ohne zu überlegen sofort klar ist, welche Seiten man dahinter findet. „Über mich“? Klar, hier schreibt jemand über sich, was ihn oder sie ausmacht oder ihr Werdegang. „Kontakt“? Versteht sich von selbst, was dort zu finden ist. Auch wenn’s mal langweilig wirkt – du tust deinen Besuchern einen Riesengefallen, wenn du dich an anderer Stelle kreativ austobst.
