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.
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 🙂
WordPress ist das Programm, mit dem du eine Website baust. Dafür hat WordPress alle grundlegenden Funktionen „an Bord“.
Das Theme legt das Design und die Optik deiner Website fest und beeinflusst einige Funktionen von WordPress.
Ein Pagebuilder ist ein Tool, das den Aufbau einer Website leichter macht. Manche Themes haben einen Pagebuilder integriert (so wie „Divi“)
Plugins erweitern WordPress um zusätzliche Funktionen. Manche Funktionen sind wichtig. Sie sorgen u.a. für die Sicherheit und Ladegeschwindigkeit der Website.
Keine besonders originellen Antworten.
Und irgendwie etwas trocken und abstrakt.
Nichts für visuell denkende Menschen.
Deshalb hab ich eine Art Übersetzung überlegt.
Eine, die das Thema verständlich macht, ohne mit Technik zu langweilen.
Falls du jetzt die Stirn runzelst: Keine Sorge, der Titel diese Artikels soll dich nicht in die Irre führen. Am Ende der Geschichte sage ich dir, mit welchem Theme ich arbeite und welche Plugins du WIRKLICH brauchst.
Lass mich dir ein Bild malen
Stell dir drei neu gebaute Häuser vor.
In eines der Häuser möchtest du einziehen.
Dazu schaust du dir Haus für Haus an.
Du schließt die Haustür von Haus Nummer eins auf.
Schon im Flur siehst du, dass mit dem Haus etwas nicht stimmt:
Der Fußboden ist ein grauer, kalter Betonboden.
Das Haus ist kalt, denn im Haus gibt es keinen einzigen Heizkörper.
Die Küche ist leer. Aus den nüchternen Wänden ragen die nackten Wasserrohre. Wasseranschluss, Stromanschluss und Rohre sind zwar verlegt, aber die Einrichtungen und Anschlüsse fehlen: Spülbecken, Herd, Kühlschrank und Schränke gibt es nicht.
Auch das Bad hat nur die offenen Wasseranschlüsse und einen Ablauf für die Toilette. Waschbecken, Dusche und ein WC: Fehlanzeige.
Licht gibt es natürlich auch nicht: An der Decke baumeln die nackten Stromkabel.
Ziemlich unwohnlich also.
Du ahnst es vielleicht:
Dieses leere Haus ist WordPress, genauer deine WordPress-Installation.
Ohne Theme, ohne Plugins.
Nur das nackte WordPress.
Du kannst dich in diesem Haus aufhalten, du hast sogar einen Schlüssel für die Haustür, die du abschließen kannst. Du kannst deine Sachen mitbringen und in den Räumen ablegen.
Aber wohnen kann man diesen Aufenthalt nicht nennen.
Diesem Haus fehlt die Grundausstattung:
Heizkörper, Küchenschränke, Herd, Spülbecken, WC, Dusche, Waschbecken.
Erst mit dieser Grundausstattung kann das Haus als „Wohnung“ bezeichnet werden.
Das sagt sogar Wikipedia 😉
So machst du WordPress „wohnlich“: mit einem Theme
Also schaust du dir das zweite Haus an.
Du schließt wieder die Tür auf.
Dieses Haus sieht schon ganz anders aus:
Auf dem Fußboden wurde ein einfaches, aber schickes Klicklaminat verlegt. Das macht einen warmen und gepflegten Eindruck.
Die Küche ist vollständig eingerichtet. Mit Küchenschränken, Arbeitsplatte, Spüle, Herd und sogar einen Kühlschrank gibt es. In den Schränken findest du Tassen, Gläser und Teller.
Auch das Bad ist vollständig: Darin findest du eine Dusche mit Schiebetüren, ein Waschbecken und nebenan ein Stand-WC. Die Wände und der Fußboden sind mit weißen Fliesen bedeckt.
Und natürlich hat das gesamten Haus moderne Flachheizkörper unter den Fenstern.
Die Grundausstattung einer Wohnung ist also schon mal da.
Doch nicht nur das: Mittlerweile dämmert es und du siehst keine Details mehr. Du tippst auf den Lichtschalter und siehe da: Licht. In diesem Haus hängt in jedem Raum eine flache Deckenleuchte. Elegant geht anders, aber du kannst alles sehen. Das ist ja die Hauptsache.
Du gehst weiter:
In einem Raum findest du ein Bett und daneben ein Nachttisch mit einer kleinen LED-Lampe drauf. Im nächsten Raum stehen zwei Sessel, ein kleiner Hocker als Beistelltisch und eine Stehlampe. Im dritten Raum steht ein kleiner Esstisch mit zwei Stühlen.
Zwar ist dieses Haus immer noch nicht der Knaller. Aber wenn du Purist bist, reicht diese Einrichtung völlig: Du kannst dir einen Tee machen, dich auf dem Sessel ausruhen, im Bett die Nächte verbringen und für’s Frühstück setzt du dich an den Tisch.
So, jetzt kommt das Theme ins Spiel:
Dieses rudimentär eingerichtete Haus ist dein kostenloses Standard-Theme.
Nicht besonders schick und sehr einfach gestrickt.
Wenn du dein individuelles Design hinbekommen möchtest, brauchst du Zeit, Geduld und musst vielleicht etwas Technikkenntnisse haben, denn das Theme ist nicht so einfach zu handhaben.
Aber es reicht völlig aus, um damit einen einfach gestalteten Blog zu starten.
Jetzt denkst du sicher: Da geht natürlich mehr.
Und, weil wir ja malen wollen:
Du möchtest nicht nur „irgendwie“ wohnen.
Du möchtest es gemütlich haben, du möchtest deine Wohnung geniessen!
Also gehst du ins Haus Nummer drei.
In diesem Haus findest du das, was eine Wohnung erst so richtig behaglich macht: Teppiche auf den Fußböden, Bilder an den Wänden, Vorhänge an den Fenstern, passend zu den Sesseln eine gemütliche Coach, eine Musikanlage, um richtig schön zu chillen, weiche Kissen und ein hübsches Plaid auf dem Sofa, damit du dich wohlig zurücklehnen und dich einkuscheln kannst, während du dein Lieblingsbuch liest.
An der Wand steht ein cooles Echtholzregal für deine Bücher. Und gegenüber steht eine schicke Landhaus-Kommode, auf der eine stylische Tischlampe steht, die deinen Raum in warmes und gemütliches Licht taucht.
Die Wände haben einen Farbanstrich. Im Esszimmer steht ein einladender, großer Holztisch mit sechs gepolsterten Stühlen. Der Tisch bietet viel Platz und lädt dazu ein, mit Freunden stundenlang gemütlich zu brunchen.
Auch Küche und Bad sind tippitoppi: In der Küche sind moderne Einbaumöbel mit Schubladenelemente, in denen alles seinen festen Platz hat und die beim Schließen wie von Zauberhand leise zufahren. Hier findest du Küchenhelferchen, mit denen du ruckzuck deine Lieblingssachen machen kannst: Kaffee, Smoothies, Toast, Tee oder Kuchen. Eine Spülmaschine ist natürlich ebenfalls vorhanden – damit du deine Zeit nicht mit dem lästigen Abwasch verschwenden musst.
Diese Wohnung hat alles, wonach du dich sehnst, wenn du kaputt von der Arbeit kommst und dich einfach nur in den Kissen rekeln willst, um Vivaldis Vierjahreszeiten zu lauschen.
Das ist dein Premium-Theme, das viele zusätzliche Funktionen hat. Mit diesem Theme bekommst du deine Website schneller und einfacher nach deinem Geschmack hin als mit einem kostenlosen Standard-Theme.
Mit dem Pagebuilder baust du ruckzuck deine Seiten
Doch dieses 3. Haus hat noch mehr zu bieten.
Zu diesem Haus gehört ein Team von Helfern.
Du hast also nicht nur eine exquisite Wohnungseinrichtung, sondern zusätzlich Hilfe für deinen Haushalt:
eine Köchin, die dein Mittagessen zubereitet,
eine Haushaltshilfe, die deine Wohnung in Schuss hält und
eine Fachkraft, die deine Fenster putzt
Du hast endlich mehr Zeit für deine Hobbys.
Du brauchst keine lästige Hausarbeit machen.
Das ist dein Theme mit Pagebuilder
Der Pagebuilder nimmt dir viel Aufbau-Arbeit ab und hilft dir, Zeit zu sparen.
Die Entscheidung ist gefallen:
Haus Nummer 3 ist es. Hier ziehst du ein.
Nun fehlt dir fast nichts mehr zum Glück in deiner Wohnung.
Oder?
Plugins bringen wichtige Funktionen mit
Fast.
Denn dir fällt ein, dass du ein paar Erweiterungen für dein schickes Haus brauchst:
Du möchtest dich vor Einbruch absichern. Und du brauchst einen Schutz vor Sonneneinstrahlung, damit es im Sommer nicht zu heiß wird in der Wohnung. Also lässt du dir eine Aussenjalousie installieren.
Ein Gartenhäuschen fehlt dir auch noch. Damit du Rasenmäher, Werkzeuge und Fahrräder unterstellen kannst. Deshalb holst du dir vom Baumarkt eines der netten Holzhäuschen, die es als Bausatz gibt.
Außerdem fehlt noch ein gut sichtbares Nummerschild am Garteneingang, damit Besucher dich schnell finden und ein großer Briefkasten, damit der Postbote mit einem Blick sieht, wo er deine Briefe einwerfen darf.
Und schwups: Schon hat deine WordPress-Installation 4 Plugins bekommen.
Du siehst: Es ist gar nicht soooo kompliziert 😉
Mit diesem Theme arbeite ich
Ich arbeite seit Jahren mit dem Theme Divi.
Divi stammt vom Anbieter „Element Themes“. Divi ist ein Theme mit integriertem PageBuilder und wird ständig weiterentwickelt.
Mit so einem PageBuilder kannst du die einzelnen Elemente einer Seite ruckzuck zusammen bauen. Denn der Pagebuilder hat fertig programmierte Module, die du nur noch „zusammenstecken“ brauchst. Wie die Steine eines Lego-Hauses.
Übrigens: Viele sagen mir, dass sie Divi getestet haben und damit nicht zurecht gekommen sind.
Ich fand die Arbeit am Divi zu Anfang auch holperig. Immer wieder bin ich gestolpert. Und tatsächlich: Noch vor wenigen Jahren war Divi etwas sperrig – Anfänger konnten schon mal ihre liebe Not mit dem Divi haben.
Inzwischen ist das Theme richtig gut geworden. Es wurde schneller und es wurden Funktionen eingebaut, die richtig Gold wert sind. Einmal das Theme kennengelernt, können Laien ihre Seitenelemente ohne Probleme ruckzuck zusammenbauen.
Diese 4 Plugins brauchst du wirklich
Was ist ein Plugin?
Ein Plugin ist eine technische Erweiterung der Grundprogrammierung von WordPress.
Leider stellen Plugins immer wieder DIE Schreckgespenster von WordPress dar. Ganz zu unrecht. Denn im Gegensatz zu anderen Systemen kannst du auswählen, welche Plugins du installierst und welche nicht. Das ist ein riesiger Vorteil. Denn je mehr Plugins im System installiert werden, desto „schwerer“ wird das System – die Ladezeit der Website wird immer länger. Das stört den Besucher der Website und ist deshalb auch ein Rankingfaktor von Google. Außerdem: Die Website wird anfälliger für Störungen.
Viele Websitebetreiber nutzen leider zu viele Plugins.
Hier also meine Empfehlungen für die wichtigsten Plugins.
Du brauchst vor allem:
Etwas zum Verkürzen der Ladezeit: Damit deine Website schnell lädt, gibt es gute Plugins.
Ein Plugin, um Spams zu minimieren, falls du ein Kontaktformular hast.
Regelmäßige Backups: ein Plugin für deine BackUps ist super wichtig.
Sicherheit: ein PlugIn für die Sicherheit deiner Installation ist wichtig.
SEO: Sinnvoll ist immer ein Plugin zur Suchmaschinenoptimierung.
Bei Google Schriften: Die müssen aus rechtlichen Gründen lokal geladen werden. Dafür gibt es Plugins.
Vielleicht noch das ein oder andere Plugin zusätzlich. Als Beispiel: Falls du viele Bilder auf deiner Website hast, lohnt sich noch ein Plugin, das den Ladevorgang von Bildern optimiert.
So nutzt du Google Fonts DSGVO-konform – einfach und schnell umsetzbar
Eine Anleitung, wie du Google Fonts auf deiner Website lokal einbindest und Abmahnungen verhinderst
Nutzt du Google Fonts?
Falls du jetzt mit den Achseln zuckst:
„Öh – was sind Google Fonts?“
Oder wenn du nicht weißt, ob du Google Fonts für deine Website nutzt:
Dann wird es höchste Zeit.
Zeit, daß du dich um das Thema „Schriften auf deiner Website“ kümmerst.
Der Hintergrund: Laut eines Urteils des LG Münchens vom Januar 2022 ist die Nutzung von Google Fonts unter bestimmten Umständen rechtswidrig. Die Folge: In den letzten Wochen wurden etliche Abmahnungen an Websitebetreiber verschickt. Weil sie die Google Fonts nicht DSGVO-konform nutzen.
Aber keine Sorge:
In diesem Artikel zeige ich dir:
wie du Google Fonts lokal – also DSGVO-konform – einbindest,
welche Möglichkeiten außer Google Fonts du hast, Schriften auf deiner Website zu nutzen.
Google Fonts ist ein Verzeichnis von mehr als 1400 Schriftarten, die wir für unsere Website nutzen dürfen. Fonts ist ein anderer Begriff für Schriften.
Google Fonts sind sogenannte Webfonts. Diese Art der Schriften wurde entwickelt, damit Texte auf Internetseiten oder Apps einheitlich dargestellt werden können.
Jetzt nerve ich etwas. Mit einem kleinen Ausflug in die Geschichte:
In den Anfangsjahren des Internets hat man nur eine Handvoll Schriften gehabt: Arial, Tahoma, Times und Palatino waren solche Kandidaten. Über die Schönheit der Schriften kann man streiten — aber sie waren zu 99,9 Prozent aller Rechner vorinstalliert. So konnten die Websitebetreiber sicher sein, dass die Texte der Website vernünftig angezeigt werden.
Überall auf der Welt.
Tja, lang ist’s her. Das war im Internet-Steinzeitalter.
Inzwischen sind Websites anspruchsvoller geworden. Und mit den mobilen Geräten sind neue Anforderungen gekommen. Deshalb werden heute auf den meisten Websites und in Apps Webfonts eingesetzt.
Für Websitebetreiber sind diese Schriften eine schicke Sache: Es ist ziemlich einfach, mit schönen Schriften eine Website aufzupeppen. Websites können mit Webfonts einen individuellen Stil bekommen. Selbst Scriptschriften sind möglich. Scriptschriften sind Schriften, die aussehen wie von Hand geschrieben.
Was wäre eine DIY-Seite oder eine Kosmetik-Seite ohne Scriptschriften.
Natürlich gibt es noch andere Hersteller bzw. Vertreiber von Webfonts – wie Linotype, Adobe oder Typekit. Hier bezahlst du für die Schriften die Lizenzen. Dafür hast du unter Umständen eine Schrift, die seltener auf anderen Websites zu sehen ist. Womit du deiner Website eine noch individuellere Note gibst.
Unter welchen Umständen ist die Nutzung von Google Fonts problematisch?
Google Fonts können lokal oder dynamisch auf Websites genutzt werden. Problematisch ist die Verwendung von Google Fonts, wenn du sie dynamisch in deine Website einbindest.
Was bedeutet dynamische Nutzung?
Bei der dynamischen Nutzung von Google Fonts liegen die Schriftdateien auf dem Server von Google. Bei jedem Besuch einer Website, die die Schriften dynamisch nutzt, geht eine Anfrage an den Google Server. Dazu werden Daten des Besuchers der Website an den Google Server in den USA gesendet.
Das Urteil des Landgerichts München von Januar 2022 zur dynamischen Nutzung von Google Fonts auf einer Website.
Und genau DAS ist das Problem: Beim Öffnen einer Website, die Google Fonts dynamisch nutzt, wird die IP-Adresse des Website-Besuchers an den US-Server gedendet. Für viele wohl keine große Sache. Dumm nur: Die IP-Adresse zählt zu den personenbezogenen Daten. Und personenbezogene Daten dürfen nur mit einer „qualifizierten Einwilligung“ des Besuchers der jeweiligen Website in die USA übermittelt werden. So heißt es im Juristendeutsch.
So kam es, wie es kommen musste: Gegen die Übermittlung seiner IP-Adresse hat ein Besucher einer Website gegen deren Websitebetreiberin geklagt. Das Landgericht München hielt die Klage „ganz überwiegend für begründet“. Die Betreiberin der Website wurde dazu verurteilt, an den Kläger 100 Euro Schadenersatz zu zahlen.
In den Entscheidungsgründen des Urteils heißt es unter anderem:
„Die unterlaubte Weitergabe der dynanischen IP-Adresse des Klägers durch die Beklagte an Google stellt eine Verletzung des allgemeinen Persönlichkeitsrechtes in Form des informationellen Selbstbestimmungsrechts nach § 823 Abs. 1 BGB dar. Das Recht auf informationelle Selbstbestimmung beinhaltet das Recht des Einzelnen, über die Preisgabe und Verwendung seiner personenbezogenen Daten zu bestimmen.“
Quelle: LG München, Urteil vom 20.01.2022 – Az. 3 O 17493/20
Abmahnungen bei dynamischer Nutzung von Google Fonts
Das Urteil des Landgerichts zeigt, dass die „simple“ dynamische Einbindung von Schriften auf einer Website keine Bagatelle ist. Denn: Die dynamische Einbindung von Schriften ohne Einwilligung des Websitebesuchers ist ein Verstoß gegen das Datenschutzgesetz.
Vielleicht hast du davon gehört oder gelesen. Denn das Thema wurde bereits in diversen Newslettern beschrieben: In den letzten Wochen haben einige Websitebetreiber Abmahnungen erhalten, weil sie Google Fonts dynamisch nutzen.
So nutzt du Google Fonts DSGVO-konform
Du kannst natürlich einen entsprechenden Banner für so eine Einwilligung einrichten. Das aber hat einige Nachteile.
Ich halte es für sinnvoller, die Schriften lokal einzubinden. Vor allem deshalb, weil das relativ einfach machbar ist. Bei dieser Einbindung sind alle auf der sicheren Seite: die BesucherInnen deiner Website und du.
Was ist eine lokale Einbindung?
Die Schrift, die auf deiner Website angezeigt wird, befindet sich dort, wo auch deine Website gespeichert ist. Also auf deinem (angemieteten) Webspace. So können keine Daten an den Google Server übertragen werden.
Was kannst du tun, wenn du wegen der Nutzung von Google Fonts abgemahnt wirst?
Eine schlechte Idee ist: nichts tun. Denn mit Sicherheit hat der Abmahner ein Screenshot deiner Website angefertigt.
Rausreden ist also nicht. Und auch wenn „nur“ gemahnt wurde: Eine anschließende Klage ist immer noch möglich.
Was du als erstes machen solltest:
Prüfe, ob deine Schriften tatsächlich dynamisch eingebunden sind.
Wenn du feststellst, dass bei der Einbindung der Schriften Daten der Besucher übertragen werden können: Jetzt solltest du schnell handeln, um den Schaden zu begrenzen.
Dann ist der nächste Schritt: Das Laden der Schriften vom Google Server deaktivieren. Wie das geht, erkläre ich unten. Außerdem erkläre ich, wie du deine Lieblingsschrift lokal einbindest.
Wie gehst du mit dem Abmahnschreiben um?
Zunächst: Meine Einschätzung ist keine Rechtsberatung. Die kann und darf ich nicht leisten. Hier gebe ich lediglich wieder, wie ich mich verhalten würde.
Ich würde dann das Schreiben ignorieren, wenn zu dem Zeitpunkt, als der Abmahner deine Website besucht haben will, die Schriften bereits lokal eingebunden waren.
Wenn der Abmahner recht hat, wenn die Schriften tatsächlich dynamisch eingebunden waren: Auf keinen Fall würde ich den geforderten Geldbetrag zahlen. Denn: Aus meiner Sicht sind Seitenbetreiber nicht verpflichet, lediglich auf eine Aufforderung wegen eines Verstoßes der DSGVO eine Geldzahlung zu leisten. Denn der Vorwurf müsste zunächst juristisch geprüft werden. So jedenfalls meine Kenntnis. Heißt: Der Anspruchsteller müsste zunächst klagen.
Das kann er zwar wie gesagt immer noch. Doch so einfach ist das nicht. Denn der Kläger trägt vor Gericht die Beweislast. Der Kläger muss also zunächst gut argumentieren. Zudem müssen die Gerichtsgebühren im Voraus bezahlt werden.
Man kann über die Abmahnungen bestimmt unterschiedlicher Meinung sein. Mit Sicherheit haben die Abmahner recht: Personenbezogene Daten müssen geschützt werden. Die Frage ist aber, ob man unbedingt klagen muss. Ich vermute, dass mit der Abmahnwelle nicht wenig Leute versuchen, sich auf möglichst schnellem Weg ein kleines Taschengeld zu verdienen. Dabei spielen sie mit der Verunsicherung, Angst oder Unkenntnis mancher Websitebetreiber.
So prüfst du, welche Schriften auf deiner Website aktiv sind
Die Schriftart und die Art der Einbindung ist bei jeder Website anders. Bei WordPress wird das vom Theme oder dem Childtheme erledigt. Und wo genau die Schrift zu finden ist, das kann bei jedem Theme anders aussehen. Deshalb kann ich hier keine allgemein gültige Antwort geben, an welcher Stelle du in deinem WordPress deine Schrift findest.
Mach es einfach: Du kannst mit deinem Browser feststellen, welche Schrift du nutzt.
Dafür öffnest du deine Website im Browser Chrome oder Firefox. Ich nutze Chrome, weil ich die Handhabung dort einfacher finde. Im Browser nutzt du einfach die Entwicklerkonsole (heißt so, ist aber nicht kompliziert).
Öffne deine Website in Chrome.
Wenn deine Website im Browser angezeigt wird, klicke mit der rechten Maustaste auf einen beliebigen Bereich der Website
Dort, wo du klickst, öffnet sich ein Kontextfenster
Klicke im Kontextfenster auf „Untersuchen“
Dein Browserfenster wird geteilt und in einem Bereich wird ein Fenster mit dem Elementangaben deiner Webside angezeigt. Das ist die Entwicklerkonsole.
Klicke oben in der horizontalen Leiste auf den Reiter „Quellcode“ (oder Sources)
In dem weißen Feld siehst du verschiedene Angaben. Wenn du dort die Angabe „fonts.gstatic.com“ findest, dann weißt du: Google Fonts werden vom Google Server geladen. Im selben Fenster kannst du die Schriften erkennen, die vom Google Server auf deine Website geladen werden.
Klick auf den kleinen Pfeil vor fonts.gestatic.com
Darin findest du einen Ordner mit der Bezeichnung „s“
Den Ordner kannst du auch öffnen, darin befinden sich die Schriften.
Anleitung: So bindest du Google Fonts DSGVO-konform lokal in deine WordPress-Website ein.
Schritt 1:
Schriften überprüfen
Überprüfe wie oben beschrieben, welche Schriften du auf deiner Website geladen hast.
Schritt 2:
„google-font-helper“ ist dein Helferchen:
Schriften aussuchen und laden
CSS kopieren
Schriften aussuchen, auswählen und Downloaden:
Der google-webfont-helper ist wunderbar übersichtlich aufgebaut und selbsterklärend: In der linken Spalte wählst du deine Schrift, auf der rechten Seiten werden die verschiedenen Schriftschnitte angezeigt. Hier kannst du die Schrift runterladen.
Um die Schrift zu finden, kannst du entweder scrollen oder oben links den Namen der Schrift eingeben.
Wähle auf der rechten Seite deine gewünschten Schriftstärken aus. Wichtig sind die Einstellungen in dem Feld:
Select charsets Select styles
Unter Select charsets ist „latin“ vorausgewählt. Diese Einstellung wird in den meisten Fällen richtig sein – sofern du keine anderen Sprachen auf deiner Website anbietest.
Unter „Select styles“ wählst du die Schriftstärken, die du für die Texte auf deiner Website vorgesehen hast. Nicht jede Schrift hat alle Styles: Die Roboto als Beispiel hat 12 Styles, die Lato nur 10 Styles. Ich finde, dass 3 Styles ausreichen. Sonst wird die Gestaltung schnell chaotisch. Schau gern in meinem Artikel zum Thema Gestaltung der Website.
CSS kopieren:
Wenn du die Schriftstärken ausgewählt hast, werden dir im grauen Feld darunter die CSS-Angaben und Verlinkungen zur Schrift automatisch angelegt. Für diesen Schritt wählst du die Option „Best Support“ (ist in der Regel voreingestellt).
Falls du dich wunderst, dass die Schriften mehrfach angezeigt werden: Die Schriftdateien werden in verschiedenen Formaten erstellt. Das ist wichtig, damit alle unterschiedlichen Browser auf diversen Systemen die Schriften richtig anzeigen können.
Diese CSS-Angaben kopierst du in deine Zwischenablage.
Download der Schriften:
Die Schriften kannst du unter Punkt 4. auf der Seite downloaden. Die Schriften landen dann in einem gezippten Ordner auf deinem PC. Wie der Ordner heißt, wird auch auf dem Download-Button angezeigt.
Schritt 3:
Plugin laden und Schriften lokal einbinden
Es gibt verschiedene Plugins, mit denen du deine Schriften lokal einbinden kannst. Ich nutze „Fonts-lokal“ von Sonia Rieder (www.webtimiser.de). Fonts-lokal ist ein kleines, aber sehr feines Plugin.
Fonts-lokal
Schritt 4:
Schrift und CSS ins Plugin setzen
Das Plugin entzippst du nach dem Download. Wichtig für dich sind jetzt die beiden Ordner
fonts css
In dem Ordner „fonts“ liegen bereits Schriften als Beispielschriften. Diese Schriften löscht du einfach und ersetzt sie durch deine Schriften. Wähle alle deine Schriftformate aus deinem geladenen Schriftordner und schiebe sie in den Ordner „fonts“ innerhalb des Plugin-Ordners „Fonts-lokal“.
Deine kopierten CSS-Angaben (die du noch in der Zwischenablage hast) musst du noch in die Datei „local-fonts-style.css“ im Ordner „css“ des Plugins einsetzen. Die Datei enthält bereits CSS-Code. Dieser Code steht dort nur als Beispiel und du kannst auch dies löschen und durch deinen Code ersetzen (den du vom google-webfont-helper hast).
Wichtig! Was du zur Datei local-Fonts-style.css wissen musst:
Die Datei local-fonts-style.css ist eine einfache Textdatei, die du mit einem Texteditor öffnen kannst. Achtung: Du kannst die Datei nicht mit einem Schreibprogramm wie Word öffnen und bearbeiten.
Tipp: Als Windows-Nutzer kannst du „Editor“ oder „Notepad“ nehmen.
Mac-Nutzer nutzen „TextEdit“. Ich nutze dafür das Codeprogramm „CotEditor“.
Schritt 5:
Plugin installieren
Sind Schriften und CSS-Code in deinem Plugin? Dann kannst du das Plugin einfach über das Backend von WordPress unter „Plugins“ installieren. Wichtig: Dazu musst du das Plugin vorher als Zip-Datei packen.
Alternativ kannst du das fertige Plugin (den Ordner Fonts-lokal mit deinen Schriften) per FTP in den Ordner plugins in deinem WordPress-Verzeichnis hochladen („wp-content“ > „plugins“).
Und wieder aufpassen: Über FTP darfst du das Plugin nicht zippen!
Falls du nicht weißt, wie du ein FTP-Zugang einrichtest oder falls du wissen möchtest, wie du per FTP Dateien in deine WordPress-Installation laden kannst: Ich hab dazu eine schöne Anleitung am Beispiel des Hosters „Allinkl“ geschrieben, lies hier.
Schritt 6:
Google Fonts in WordPress deaktivieren
Das Plugin hat zwar den Befehl programmiert, dass Google Schriften nicht geladen werden sollen.
Aber sicher ist sicher: Die Google Fonts solltest du noch deaktivieren. Im Divi kannst du ganz einfach über einen Button Google Fonts deaktieren.
Dazu gehst du in deinem WordPress-Dashboard auf den Menüpunkt
Divi
Theme-Optionen
Google Schriftarten verwenden >
Google Fonts => hier den Button deaktivieren.
Welche anderen Möglichkeiten gibt es, Schriften auf einer Website zu nutzen?
Puh, das war jetzt doch ganz schön viel.
Aber vielleicht stellst du ja eine ganz andere Frage:
Muss ich unbedingt Google Fonts nehmen?
Nö.
Du kannst andere Webfonts nehmen.
Oben hab ich schon andere Schriftenhersteller erwähnt. Fonts von anderen Anbietern zu kaufen kann sich durchaus lohnen, wenn du Wert legst auf eine besonders gestaltete Schrift.
Wenn dir wichtig ist, dass die Schrift dieselbe ist, die du auch für dein Logo und dein gesamtes Corporate Design nutzt, kann eine gekaufte Schrift sinnvoll sein. Schriften sind wichtige Gestaltungsmerkmale deines Brandings, deiner Marke als UnternehmerIn.
Ein völlig entgegengesetzter Ansatz ist, überhaupt keine Schriften zu kaufen oder zu laden.
Wie das geht? Du nutzt einfach Systemschriften.
Was sind Systemschriften?
Wie der Name schon sagt: Systemschriften gehören zum System (wer hätte das gedacht).
Ob PC oder Smartphone: Jedes Computersystem braucht Schriften, damit der Mensch das System bzw. die Programme darin anwenden kann. Dabei hat jedes System seine eigene Schrift: Windows-Rechner nutzen Segoe UI, Android-Geräte nutzen Roboto, Ubunto nutzt Ubunto und so weiter.
Das bedeutet für deine Website natürlich, dass die Texte auf deiner Website je nach System ein wenig anders aussehen.
Ist aber nicht wirklich ein Problem.
Sofern du keine ausgefallene Schrift nutzen möchtest, sind die Unterschiede der einzelnen Schriften nicht so gravierend, dass sie die Gestaltung deiner Website völlig über den Haufen schmeißen. Und wenn du in der Hinsicht eher Purist bist, kann es sich lohnen, die Texte deiner Website mit den Systemschriften anzeigen zu lassen.
Noch ein Vorteil: Die Ladezeit der Website wird beschleunigt.
Wie wende ich Systemschriften an?
Das ist ganz einfach: Schritt 1 ist natürlich, dass du die Verwendung von Google Fonts auf deiner Website deaktiviert hast. Wie das beim Divi funktioniert, habe ich oben beschrieben. Anschließend bindest du in deinen Stilangaben einfach den Code ein, der dafür sorgt, dass die jeweiligen Systemschriften geladen werden. Im Theme Divi setzt du den Code direkt im style.css deines Child-Themes ein oder einfach im >
Divi > Theme Optionen > ganz unten im schwarzen Feld „Eigene CSS“.
Diesen Code setzt du dort ein:
body { font-family: -apple-system,BlinkMacSystemFont,“Segoe UI“,Roboto, Oxygen-Sans,Ubuntu,Cantarell,“Helvetica Neue“,sans-serif; }
Übersicht: Nützliche Plugins und Links, mit denen du Google Fonts DSGVO-konform lokal einbindest
WhatFont Fontanello
Beide Tools sind schöne Helfer, wenn man auch zwischendurch wissen möchte, welche Schrift in welcher Stärke und Größe auf einer Website genutzt werden. WhatFont ist eine Erweitung für den Browser Chrome, Fontallo ist die Erweiterung für Firefox.
Google web font helper
Eine hilfreiche Plattform, um Google Fonts mit den dazugehörigen CSS-Dateien zu laden. Hier kannst du die Schriften in allen notwendigen Formaten erhalten (eot, svg, ttf, woff, woff2).
Fonts-lokal
Ein schönes Plugin von Sonia Rieder (webtimizer.de), wenn du deine Schriften lokal hosten möchtest.
Google Fonts Checker
Hier kannst du prüfen, ob du Google Fonts auf deiner Website nutzt und welche Schriften auf deiner Website geladen werden,
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.
