Technik und Tools – Frau König Webdesign-Studio https://fraukoenig.de Websites für Selbstständige und Unternehmerinnen Tue, 18 Aug 2026 17:33:38 +0000 de hourly 1 https://wordpress.org/?v=7.1 https://fraukoenig.de/wp-content/uploads/2023/07/cropped-fraukoenig-website-icon-2023-32x32.png Technik und Tools – Frau König Webdesign-Studio https://fraukoenig.de 32 32 Wie komme ich in die Google KI-Suchergebnisse? https://fraukoenig.de/ki-suchergebnisse/ https://fraukoenig.de/ki-suchergebnisse/#respond Fri, 14 Nov 2025 11:18:48 +0000 https://fraukoenig.de/?p=55239

Wie komme ich in die Google KI-Suchergebnisse?

So machst du deine Website fit für die Google AI Overviews.

Du kommst in die Google KI-Suchergebnisse, wenn deine Website konkrete Fragen direkt beantwortet, klar strukturiert ist und deine Erfahrung und Expertise als vertrauenswürdige Quelle sichtbar macht. Klassisches SEO bleibt wichtig, reicht allein aber nicht mehr aus: Deine Inhalte müssen so verständlich und eindeutig sein, dass Google sie erfassen, zusammenfassen und als Teil einer Antwort empfehlen kann.

Ich sag’s, wie es ist: Im Herbst 2025 habe ich 54 % weniger Traffic auf meine Startseite bekommen. 😳 Autsch, das tut richtig weh. Aber gleichzeitig ist etwas Spannendes passiert: Meine Blogbeiträge sind nach oben geschossen, einige um bis zu 300 %. Und dennoch: Mein Traffic geht langsam aber sicher zurück.

Das ist eine Entwicklung, die gerade überall passiert. Denn was sich fundamental verändert hat, ist die Art und Weise, wie Inhalte gefunden und empfohlen werden.

In diesem Beitrag erfährst du, wie sich klassische Suchergebnisse und Google AI Overviews unterscheiden, worauf KI-Systeme bei Websites achten und mit welchen konkreten Schritten du deine Inhalte für die KI-Suche optimierst.

Alle wollen in die KI-Suchergebnisse!

Seitdem bei Google die KI-Übersicht in der Regel vor den klassischen Suchergebnissen steht, sind meine Kundinnen und Programm-Teilnehmerinnen ganz heiß darauf, genau dort zu erscheinen. In einem internen Live-Training haben wir uns ergänzend zum Thema SEO (Search Engine Optimization) mit GEO (Generative Engine Optimization) und hier vor allem mit Googles AI Overviews (AIO) beschäftigt.

Sicher ist: Googles „Übersicht mit KI“ oder auch Perplexity, Bing/Copilot-Search auf der einen und KI-Assistenten wie ChatGPT, Claude, Grok oder Gemini auf der anderen Seite werden nicht mehr weggehen.

Wenn du mit deinem Content in Googles KI-Ergebnissen angezeigt werden willst, brauchst du mehr als das klassische SEO.

Reicht eine gute SEO nicht aus?

Die Aussage „Artikel, die gut bei Google laufen, die laufen auch gut mit ChatGPT & Co.“ übersieht, dass Google (= klassisches SEO) und KI nicht identisch vorgehen, wie es eine Studie der Ruhr-Universität Bochum und des Max-Planck-Instituts für Softwaresysteme aus Oktober 2025 zeigt.

In dieser Studie wird gezeigt, dass die KI häufig Quellen nutzt, die in den klassischen Suchergebnissen nicht auf den prominenten vorderen Plätzen sichtbar sind. Das klassische Google-Ranking bringt dich also nicht auch automatisch in die AI Overviews.

Es ist daher höchste Zeit, an deiner Website zu arbeiten und deine Content-Strategie anzupassen. Und auch ich habe bereits angefangen, meine Seiten und meinen Content für die AI Overviews zu optimieren. 

Worin unterscheiden sich die klassischen Google-Suchergebnisse von der neuen KI-Übersicht AIO?

Der entscheidende Unterschied lautet: Google zeigt Ergebnisse, KI baut Antworten.

Etwas ausführlicher:

Die klassische Suchemaschine

  • bewertet Websites, 
  • misst Keywords und Struktur,
  • fragt „Wer hat das Wort?“

Hier ist das Ergebnis eine Liste von Websites und darin suchst du dir das beste Ergebnis für dich heraus.

Die KI-Suchmaschine

  • fasst zusammen, was sie gerade online findet,
  • misst Expertise und Vertrauen,
  • fragt „Wer versteht das Thema?“

KI bewertet keine Website. Sie bewertet Quellen und empfiehlt diese.

Was genau zeigen Googles "AI Overviews"?

In den AI Overviews bekommst du zunächst eine konkrete, kurz zusammengefasste Antwort. Danach wird diese Antwort präziser dargestellt und eine Liste mit Hinweisen oder Schritt für Schritt-Anleitungen. Das hängt tatsächlich vom Thema ab.

Am Ende des Hinweises oder der Anleitung steht ein Link-Icon, das eine Link-Box zu einer Website oder einem YouTube-Video öffnet.

Ein Beispiel:
Gibst du in die Google Suche „Yoga-Übung gegen Rückenschmerzen“ ein, erhältst du eine kurze Zusammenfassung, welche Übungen gegen Rückschmerzen helfen und warum.

Weiter werden die empfohlenen Übungen Schritt für Schritt dargestellt.

Im rechten Bereich und auch unterhalb der Ergebnisse stehen die passenden Links mit Titel, Veröffentlichungsdatum und Vorschaubild in einer anklickbaren Box:

ki ergebnis bei google yoga

Wie funktioniert die KI-Suche?

Über die KI-Suche bekommst du keine Liste, woraus du dir die für dich beste Antwort suchst. Du bekommst direkt eine Antwort.

Hierzu aggregiert Googles KI-Suche AI Overviews (AIO) Wissen, indem sie Informationen aus vielen verschiedenen Quellen kombinieren und komprimieren. Das Ergebnis ist eine fertige Antwort.

🚨 Kleiner Spoiler: Genau so gehen KI-Assistenten wie ChatGPT oder Claude vor. Nur dass sie eben keine klassischen Suchmaschinen sind und du sie auch nicht als Suchmaschinen behandeln solltest.

Ihre Stärken bestehen im Verbinden von Ideen, Erkennen von Mustern, Entwickeln von Strategien.

Weil z.B. ChatGPT ein Sprach- und Denkmodell ist, kann es ohne Web arbeiten. Zudem kommt sein Wissen nicht automatisch in Echtzeit aus dem Internet und ist damit eventuell gar nicht aktuell.

Was ist der Unterschied zwischen SEO und GEO?

SEO hat das Ziel, die suchende Person auf eine Website zu führen. GEO optimiert Inhalte dagegen so, dass diese direkt als Antwort erscheinen.

Das klassische Ranking einer Website (SEO) hängt ab von vielen Faktoren wie

  • Keywords, 
  • Meta-Tags und Title-Tags,
  • gut strukturierten Inhalten mit einer sauberen Überschriftenstruktur von H1 bis H6, 
  • einer schnellen Ladezeit,
  • der mobilen Optimierung deiner Website,
  • den klassischen Autoritäten wie Backlinks, Domainalter und Klickhistorien.

Und ja: Dieses System funktioniert immer noch. 

Damit du in den Google AI Overviews empfohlen wirst, müssen deine Inhalte klar zuzuordnen sein und zeigen wer du bist, was du machst und wofür du stehst.

Keywords allein reichen also nicht mehr aus. Der KI geht es darum:

  • Ist der Content konkret und verständlich?
  • Kann aus dem Content zitiert werden?
  • Ist der Content vertrauenswürdig?
  • Passt der Content in einen größeren Zusammenhang (= Kontext)?

Warum verlieren Websites gerade Sichtbarkeit – obwohl alles „technisch okay“ aussieht?

Viele Websites verlieren gerade enorm an Sichtbarkeit und Reichweite, weil sie noch auf die alten Strategien setzen:

  1. Mehr Content = mehr Sichtbarkeit
  2. Viele Keywords = besseres Ranking
  3. Schöne Bilder + gute User Experience = enormer Erfolg

Diese Faktoren zählen weiterhin, aber sie sind keine automatischen Türöffner mehr.

Was fehlt, ist: eine klare Positionierung, eine unverwechselbare Stimme, Erfahrung, greifbare Ergebnisse.

Wenn du als Yoga-Lehrerin unterwegs bist, reicht es nicht zu schreiben:

„Ich begleite Frauen auf ihrem Weg zu mehr Wohlbefinden.“

Dieser nicht greifbare Satz ist zu oberflächlich und macht dich leider übersehbar.

Du brauchst ein stärkeres Statement, wie:

„Ich helfe Frauen mit chronischen Rückenschmerzen, über Yoga ihre Beweglichkeit und Schmerzfreiheit zurückzugewinnen – auch wenn sie schon alles versucht haben.“

Siehst du den Unterschied?

Im zweiten, ausführlichen Satz macht dich die klare Ansage und der direkt sichtbare Nutzen empfehlbar.

pin ki suchergebnisse

Wonach suchen KI-Suchmaschinen wie die Google AI Overviews?

1. Erkennbarkeit statt Vielseitigkeit

Deine Website und dein Content müssen sofort diese Fragen beantworten:

  • Wer bist du?
  • Wen unterstützt du?
  • Wie tust du es?
  • Warum bist du anders?

Klingt wie die klassischen Fragen zur Positionierung? Ja, absolut richtig. Denn eine klare Botschaft ist kleiner im Umfang, aber größer in ihrer Wirkung.

2. Struktur ist Pflicht

KI-Systeme lieben Struktur. Deine Website-Besucher übrigens auch, denn so können sie schnell die für sie relevante Antwort finden. 

Strukturiere deine Website insgesamt klar und gib deinen Inhalten eine verständliche Struktur. 

Achte auf eine sinnvolle (maschinenlesbare) Struktur mit

  • Zwischenüberschriften,
  • Bulletpoints,
  • Schritt für Schritt-Anleitungen,
  • Listen
  • Fragen-Antwort-Abschnitte,
  • FAQ-Blöcke.

3. Erfahrung und Kontext

Erzähle deine Geschichte. Zeig deinen Weg. Deine Fehler. Deine Erfolge. Die Erfolge deiner Kunden.

Das ist kein Nice to Have-Beiwerk. Das ist der Kernbestandteil deiner Sichtbarkeit.

4. Saubere Technik

Die Technik spielt natürlich auch für die KI eine wichtige Rolle: Sie ist der Boden, nicht das Dach. 

Wie im klassischen SEO auch zählen vor allem

  • schnelle Ladezeiten
  • mobile Optimierung
  • sprechende URL (/yoga-uebung anstatt /post=74294)
  • optimierte Bilder mit Alt-Titeln
  • strukturierte Daten, wie Schema Markup für Artikel, Rezepte, FAQ, Produkte, etc.

Die Technik steht für die KI-Suche nicht mehr im Hauptfokus. Viele verlieren gerade Sichtbarkeit und Reichweite, weil sie in erster Linie die Technik optimiert und nicht an ihrer Botschaft gearbeitet haben.

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Wie optimiere ich meine Website für die Google AI Overviews?

Hier sind 5 Punkte, wie du deine Website für die Übersicht mit KI optimierst:

  1. Mach auf jeder Seite deine zentrale Botschaft gleich am Anfang deutlich.
  2. Formuliere Überschriften und Zwischenüberschriften als Fragen
  3. Baue mehr Struktur-Elemente ein
  4. Schreib so, wie du sprichst.
  5. Baue Storytelling und deine Expertise ein.

Und jetzt schauen wir uns die 5 Punkte ausführlicher an.

1. Mach auf jeder Seite deine zentrale Botschaft gleich am Anfang deutlich!

Im ersten Schritt beginnst du bei deinen wichtigsten Seiten und Beiträgen.

Für deine Startseite bedeutet das, dass du dich jetzt endgültig vom „Herzlich willkommen auf meiner Homepage. Schön, dass du da bist“ verabschieden musst. Diese „nett gemeinte“ Begrüßung ist schon seit Jahren nicht nur der Conversion-Killer schlechthin, sondern sagte auch den klassischen Suchmaschinen nichts.

2. Formuliere Überschriften und Zwischenüberschriften als Fragen

Ein Beispiel:

„Welche Yoga-Übungen helfen bei Rückenschmerzen?“

Diese Form spricht Nutzer an und wird von KI erkannt.

Beantworte die Frage direkt darunter und stelle dar, warum es relevant ist: mit einer verständlichen und zitierbaren Zusammenfassung, einer Auflistung, einer Schritt für Schritt-Anleitung.

Nutze diese Frage-Antwort-Logik wie Einträge in einem Lexikon überall auf deiner Website:

  • auf deiner Startseite
  • auf Angebotsseiten
  • in Beiträgen
  • bei deinen Produkten
  • in deinem FAQ-Bereich

Wenn du dir diesen Beitrag aufmerksam durchliest, siehst du, dass ich auch hier verschiedene Fragen untergebracht habe, die ich direkt beantworte. Erst nach der zentralen Antwort wird es ausführlicher.

3. Baue mehr Struktur-Elemente ein

Je klarer du deine Inhalte gliederst, desto leichter versteht KI, worum es geht. Und desto eher tauchst du in den Antworten auf.

Überarbeite also deine Seiten und Beiträge und füge Struktur-Elemente ein:

  1. Bulletpoints,
  2. Aufzählungen,
  3. Checklisten,
  4. Zwischenüberschriften,
  5. FAQ-Blöcke.

Du brauchst Beispiele? Hier sind sie:

FAQ-Bereich: „Ist Yoga auch was für mich, wenn ich Rückenschmerzen habe?“

Schritt für Schritt-Anleitung: „So richtest du deine Haltung in der Kobra richtig aus.“

Checkliste: „Die 5 wichtigsten Tipps für dein Home-Yoga ohne Fehlhaltung.“

4. Schreib so, wie du sprichst

Viele verkünsteln sich in ihren Website-Texten und schreiben plötzlich wie Uschi von Behörde. Komplizierte Texte mit vielen Fachbegriffen verstehen aber weder deine Besucher, noch die KI, die einen Kontext braucht, aber keine wissenschaftliche Abhandlung.

Wenn du in deinem Yoga-Kurs sagst: „Wenn du hier wackelst, ist das perfekt! Das zeigt, dass du arbeitest“, dann schreib das auch so. Denn KI erkennt Originalstimmen. Und Texte ohne Charakter verschwinden im Nirwana der Austauschbarkeit.

An dieser Stelle kannst du übrigens auch das Überoptimieren deiner Seiten und Beiträge auf DAS EINE KEYWORD zu den Akten legen. 

5. Baue Storytelling und deine Expertise ein

Deine Besucher und die KI sind stark an deiner Expertise und an deiner Haltung interessiert.

Erzähle:
„Ich habe in den letzten 10 Jahren gesehen, wie Frauen …“
„Eine meiner Kundinnen kam mit …“

Vor allem deine Beiträge, deine Über mich-Seite und deine Angebotsseite werden mit Storytelling und deiner Expertise greifbarer für deine Leser. Für die KI übrigens auch, denn sie will sehen, welchen Unterschied du im echten (Business-)Leben du machst.

Wie zeige ich meine Expertise auf meiner Website?

Nutze auf deiner Website unbedingt das E-E-A-T Prinzip von Google. Also:

  1. Experience = Erfahrung
  2. Expertise = Fachwissen
  3. Authoritativeness = Autorität
  4. Trustworthiness = Vertrauenswürdigkeit

Wenn du klar positioniert bist, 

  • nutze eindeutige Statements und Aussagen (Thought Leadership!).
  • erzähle auf deiner Über mich-Seite, wie du zu deinem Thema gekommen bist bzw. wie du dahin gekommen bist, wo du jetzt stehst.
  • schreib auf deiner Angebotsseite, wie du selbst mit dem Thema gekämpft hast und was dir geholfen hat, dein Ziel zu erreichen.
  • binde in deinen Beiträge eine Autoren-Box mit deiner Autorität und einem Bild von dir ein.
  • zeige Kundenstimmen und Testimonials mit Bildern oder in Videos (Social Proof).
  • erstelle ein Portfolio (Pflicht für alle aus den Bereichen Grafik und Design, Webdesign, Kunst, Fotografie, Social Media)
  • veröffentliche Case Studies von echten Projekten und konkreten Ergebnissen.
  • gib die Quellen an, auf die du dich beziehst.
  • halte deine Inhalte aktuell.

Schritt für Schritt-Anleitung: So machst du deine Website fit für die Google AI Overviews

Schritt 1: Mach einen Website-Check:

Prüfe, welche Inhalte für viele Klicks (und Conversions) sorgen, welche Inhalte nicht mehr aktuell oder über alle Maße mit Keywords vollgestopft sind.

Schritt 2: Überarbeite deine Seiten und Beiträge

  • Nutze Fragen in den Überschriften und beantworte diese direkt.
  • Binde weitere Struktur-Elemente ein.
  • Binde Beispiele ein.
  • Binde FAQs ein.
  • Platziere eine Autoren-Box in deinen Beiträgen.

Schritt 3: Plane neuen Content

Schau auf die Fragen deiner Zielgruppe/Community und beantworte sie in den Beiträgen auf deiner Website direkt.

Übrigens: Damit hast du auch direkt Stoff für viele Social Media-Posts.

Schritt 4: Mach deine Expertise sichtbar

Überarbeite deine Über mich-Seite (und schreib auch wirklich über dich!), deine Autoren-Box und binde Testimonials ein.

Schritt 5: Optimiere die Technik

Eine gute User Experience ist immer noch das A und O. Prüfe und optimiere also

  • die Ladezeiten,
  • die mobilen Ansichten auf dem Smartphone und Tablet,
  • die URLs und Permalinks (und hier auch, ob es eventuell 404-Fehler gibt).

Brauche ich eine llms.txt?

Zu diesem Thema scheiden sich die Geister. Die einen feiern diese Datei, die anderen belegen, dass die llms.txt nichts bringt.

Udo Raaf schreibt in seinem Beitrag auf Sistrix:

„Google lehnt llms.txt derzeit als nicht zielführend ab. Auch OpenAI hat sich bisher nicht offiziell dazu bekannt, obwohl in Logfiles Hinweise auf Crawling durch den OAI-SearchBot zu finden sind.“

In dem Beitrag siehst du auch ein Beispiel einer llms.txt mit dem wichtigen Hinweis, diese für Google auf „noindex“ zu stellen, um ihr Auftauchen in den Suchergebnissen zu verhindern.

Die llms.txt ist also kein Must-have?

Ich selbst habe schon vor Monaten eine llms.txt-Datei erstellt und diese in meinem internen Webdesignerinnen-Zirkel vorgestellt.

Ob sie mir Traffic bringt, kann ich aktuell nicht sagen. Denn so, wie ich seit über 24 Jahren im Netz schreibe und wie ich SEO immer verstanden und betrieben habe, bin ich sowieso schon sehr nah an dem, was für die AI Overviews und KI-Tools grundsätzlich empfohlen wird:

  • Ich nutze Struktur-Elemente, da wo sie sinnvoll sind.
  • Ich schreibe, wie ich spreche.
  • Ich baue Storytelling und meine Expertise ein.
  • Ich zeige Beispiele, Use Cases oder Case Studys.
  • Ich gebe Quellen an, auf die ich mich beziehe.
  • Meine Inhalte aktualisiere ich regelmäßig.

Die Sache mit der konkreten Frage-Antwort-Logik ist allerdings neu. Das schaue ich mir für meine Seiten und Beiträge jetzt ganz genau an und binde sie für meine Besucher und die KI nach und nach ein. 

Zeichen, dass die llms-txt relevant ist

Nach und nach wird die llms.txt-Datei jetzt in verschiedenen Tools abgefragt bzw. integriert. In SEO-Plugins wie Rank Math oder Yoast SEO kannst du sie auf einen Klick generieren. Und in Google PageSpeed Insights ist die llms.txt ein Faktor, um Punkte beim Punkt „Agentisches Browsing“ zu erhalten.

Das sind aus meiner Sicht mehr als deutliche Hinweise, dass die llms.txt doch relevant sein könnte. 

Darum ist dieser Wandel deine Chance

Veränderungen machen in der Regel erstmal Angst. Aber sie bieten gerade ein enormes Potenzial: Wenn deine Expertise klar ist, deine Inhalte gut strukturiert, deine Stimme erkennbar, dann wirst du empfohlen, nicht nur gelistet.

Deine Sichtbarkeit wächst durch mehr Klarheit, Struktur und Charakter.

Ich schätze das Ganze so ein:

Bisher wurden wir über unseren organischen Content gefunden, haben Vertrauen zu unserem Besucher und Leser aufgebaut und ihn so Schritt für Schritt weiter in der Customer Journey bewegt: 

  1. vom ersten Besuch der Website, 
  2. über die Anmeldung zum Newsletter, 
  3. bis zum Produktkauf, der Buchung einer Dienstleistung, etc.

Die KI wird zum Doormen oder Gatekeeper

In Zukunft wird die KI als eine Art Pförtner dazwischengeschaltet: Alle Fragen, die ein potenzieller Kunde beantwortet haben muss, um den nächsten Schritt zu gehen, beantwortet die KI und zieht die dafür notwendigen Informationen von deiner Website, sofern sie dort vorhanden sind.

Hat der Interessent alle Informationen, die er braucht, empfiehlt die KI ihm eine passende Lösung. Diese Lösung bist dann im Idealfall du und dein Angebot, weil du für die KI als verlässliche Quelle und Expertin bekannt bist.

In Zukunft wird es also noch mehr darum gehen, sich als Autorität in der jeweiligen Nische zu positionieren, sodass KI-Suchen wie Google AI Overview und auch LLMs wie ChatGPT dich als solche erkennen, anerkennen und weiterempfehlen. Genauso wie deine Wunschkunden!

FAQ - Häufig gestellte Fragen zu KI-Suchergebnissen

Habe ich mit einer neuen Website die Chance, in die AI Overviews zu kommen?

Ja, denn die KI-Suche bewertet deine strukturierten Inhalte und deine Expertise, nicht das Alter deiner Domain.

Brauche ich Blogbeiträge, um in der KI-Suche aufzutauchen?

Mit Blogbeiträgen erhöhst du die Wahrscheinlichkeit in KI-Suchergebnissen angezeigt zu werden, da du dort sowohl Mehrwert lieferst, Fragen beantwortest, als auch deine Expertise und deine Erfahrungen zeigst.

Wie schreibe ich Beiträge, die in den AI Overviews angezeigt werden?

Strukturiere deinen Content ganz klar für deine Leser und die KI. Nutze klare Fragen und gib direkt genaue Antworten. Binde außerdem Storytelling und deine Erfahrungen ein.

Ist das klassische SEO tot?

Nein, denn Google dominiert mit etwa 90 % Marktanteil weiterhin den Suchmarkt. Auch wenn ChatGPT zunehmend als Suchmaschine genutzt wird – obwohl es keine Suchmaschine ist – ist die Verbreitung noch meilenweit vom Gebrauch von Google entfernt.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

Website planen in 3 Schritten

Website planen in 3 Schritten

Als Riesenfan der "Einfach mal machen"-Strategie fällt es mir schwer dir zu sagen, dass dieses Mindset in Sachen Website-Aufbau leider nicht funktioniert. Im Gegenteil. Erfahre hier, wie du deine Website strategisch und in 3 einfachen Schritten planst, damit du deine Zielgruppe erreichst und Kunden gewinnst.
weiterlesen
So kommen mehr Leser auf deine Website und deinen Blog

45 Tipps für mehr Leser auf Website und Blog

Auf deiner Website herrscht gääähende Leere? Die tollste Website bringt dir nichts, wenn sie nicht gefunden wird und deine Leser schnell wieder wegklicken. Mit diesen einfachen SEO-Strategien steigerst du den Traffic auf deiner Website und machst aus Lesern begeisterte Kunden.
weiterlesen
Unterschiede WordPress.com vs. WordPress.org

WordPress.com oder WordPress.org?

Eigentlich ist es doch nur ein klitzekleiner Unterschied in der Domain. Doch was dahinter steckt, ist enorm. Damit du weißt, warum du bei WordPress voll auf .org setzen solltest und für wen .com die bessere Wahl ist und was sich dahinter verbirgt, erfährst du in diesem Beitrag.
weiterlesen
]]> https://fraukoenig.de/ki-suchergebnisse/feed/ 0 Diese Bildgrößen brauchst du auf deiner Website https://fraukoenig.de/bildgroessen-website/ https://fraukoenig.de/bildgroessen-website/#comments Sun, 12 Oct 2025 10:00:00 +0000 https://ba22ko1.myraidbox.de/?p=37774

Diese Bildgrößen brauchst du auf deiner Website

- inklusive Übersicht der optimalen Bildgrößen zum Download!

Bei Fotos, Bildern, Grafiken und Icons für deine Website sind zwei Werte wichtig: die Bildgröße, also die Maße in Pixeln, und die Dateigröße. Beides solltest du vor dem Hochladen optimieren, damit deine Website schnell lädt und deine Bilder trotzdem scharf und professionell aussehen.

In diesem Beitrag erfährst du, welche Bildgrößen du für deine Website wirklich brauchst und wie du sie einfach ausrechnest – inklusive Übersicht der optimalen Bildgrößen zum Download.

Bilder sind das A und O auf deiner Website. Sie vermitteln ein bestimmtes Gefühl, untermauern deinen Website-Stil und illustrieren deinen Content. Du zeigst dich und dein Business. Das weckt Vertrauen. Daher sollten deine Bilder qualitativ hochwertig sein.

Damit wir uns verstehen: In diesem Artikel geht es eher um die technischen Eigenschaften deiner Fotos und Bilder auf deiner Website. Was gute Fotos inhaltlich ausmacht, liest du im Beitrag „7 Tipps für persönliche Fotos auf deiner Website„.

Warum sind die richtigen Bildgrößen auf der Website so wichtig?

Sowohl zu große als auch zu kleine Bilder tun deiner Website überhaupt nicht gut.

Wenn du zu große Bilder einfügst, muss dein System sie für die Anzeige verkleinern. Das wirkt sich negativ auf die Ladezeit deiner Website aus.

Ist dein Bild zu klein für den Bereich, in dem es angezeigt werden soll, wird es unscharf bzw. pixelig dargestellt. Und das ist nichts, was du auf deiner Website sehen willst.

Und auch hier muss dein System rechnen, damit das Bild eingepasst wird.

Daraus ergibt sich:

Lade deine Bilder in der Größe hoch, in der sie auf der Website angezeigt werden sollen.

Damit du das umsetzen kannst, musst du zunächst herausfinden, wie groß der entsprechende Platz auf deiner Website ist. Mit Bildgröße ist hier das eigentliche Format – also die Breite und Höhe deines Fotos – in Pixeln gemeint. 

Bildgrößen für die Website

Monitor- bzw. Display-Größen

22 bis 49 Zoll große Desktop-Monitore, 13, 14, 16 Zoll große Laptop- oder MacBook-Monitore, Tablet- und Smartphone-Displays … 

Es gibt sooo viele Monitor- und Display-Größen der unterschiedlichen Hersteller. Nicht zu verwechseln mit der Bildschirmauflösung, denn diese ist in der Regel viel höher.

Das Gerät, mit dem du die Website aufrufst, hat jeweils eigene Anforderungen. Wichtig ist, dass deine Bilder auf allen Endgeräten, also auf dem Desktop als auch mobil auf dem Tablet und dem Smartphone, optimal angezeigt werden.

Das sind die Bildgrößen für die volle Breite auf den verschiedenen Geräten (Stand 2026)

Desktop: 1920 x 1200 bis 1024 x 768 px
Laptop: 1280 x 900 bis 1024 x 768 px
Tablet: 800 x 1280 bis 601 x 962 px
Mobil: 414 x 896 bis 360 x 640 px

Bei diesen Angaben ist der erste Wert jeweils die Breite des Bildes. 

Du siehst, die Standardwerte für mobile Geräte geht von einer Nutzung im Hochformat aus.

Bildgrößen auf dem Desktop
Bildgrößen auf dem Laptop oder MacBook
Bildgrößen auf dem Tablet
Bildgrößen auf dem Smartphone

Wonach richtet sich die optimale Bildgröße auf der Website?

Die optimale Größe deiner Website-Bilder richtet sich nach der größten Monitor-Größe.

Wenn du ein Bild in voller Seitenbreite einbindest, sollte es 1920 px breit sein. So stellst du sicher, dass es auf dem großen Monitor scharf angezeigt wird.

Willst du ein Bild oder mehrere Bilder in einem begrenzten Abschnitt einbinden, kannst du über die Inhaltsbreite genau bestimmen, wie groß das Foto maximal sein darf. 

So rechnest du deine Bildgröße aus:

Hast du eine Inhaltsbreite von 1200 px festgelegt und willst drei Fotos nebeneinander einfügen, sollte jedes Foto 360 px breit sein:

1200/3 = 400 px abzüglich 40 px Rand (20 px auf jeder Seite). 

Du kannst auch mit mehr Abstand rechnen, dann hängen die Bilder nicht so dicht aufeinander.

In deinen Blogbeiträgen hast du eine fest definierte Breite für deinen Content. Bindest du hier ein Bild ein, gibt die festgelegte Inhaltsbreite die maximale Bildbreite vor.

Das sind die optimalen Bildgrößen für deine Website:

Bild in voller Breite (full width), z.B. als Hintergrundbild:

1920 px Breite (oder passend zur Bildschirmbreite)

Bild in voller Breite bei eingerückter Inhaltsbreite (boxed):

1080-1200 px Breite (je nach festgelegter Inhaltsbreite)

Bild im eingerückten Textbereich (z.B. Blogbeitrag):

750 px Breite (siehe auch den Beitrag zur Inhaltsbreite für ideale Lesbarkeit)

2 Bilder nebeneinander (z.B. in einem Grid-Layout mit 2 Spalten):

500-560 px Breite (je nach Inhaltsbreite)

3 Bilder nebeneinander (z.B. in einem Grid-Layout mit 3 Spalten):

320-360 px Breite (je nach Inhaltsbreite)

4 Bilder nebeneinander (z.B. in einem Grid-Layout mit 4 Spalten):

240-260 px Breite (je nach Inhaltsbreite)

kleines Bild/Icon in einem Grid-Layout mit 5 Spalten:

140-220 px Breite (je nach Layout)

Lade dir die Übersicht der Bildgrößen kostenlos als PDF herunter:

Übersicht Bildgrößen für deine Website 2026

Optimiere deine Website und natürlich deine Bilder für die mobile Ansicht und beachte hier unbedingt deine Bildgrößen.

Je nach Thema, werden deine Besucher deine Website aber gar nicht am Desktop besuchen. In vielen Nischen, z. B. Ernährung mit Rezepten oder Sport mit Übungen und Workouts, wird die Website von bis zu 98% der Besucher mit dem Smartphone besucht.

Vor allem Bilder in voller Seitenbreite, die in der Desktop- und in der Tablet-Ansicht sehr gut funktionieren, kannst du auf dem Smartphone eventuell nicht optimal darstellen.

  • Ein Bild im Querformat (z.B. 1920 x 800 px) erreicht proportional eingepasst nicht die notwendige Höhe und sieht auf dem schmalen Smartphone-Display „mickrig“ aus.
Bildgrößen: Unterschiedliche Proportionen auf dem Desktop und dem Smartphone
  • Hintergrundbilder mit darauf platziertem Text lassen sich kaum für die Ansicht auf dem Smartphone optimieren und das Wesentliche des Bildes ist gar nicht sichtbar.
Hintergrundbilder mobil optimieren

In beiden Fällen kannst du für die mobile Ansicht auf dem Smartphone ein anderes Bild einsetzen. Mit einem guten Pagebuilder, wie z.B. Elementor, ist das ganz leicht. 

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

So prüfst du deine Website auf verschiedenen Endgeräten

Lass mich raten: Du hast einen Desktop-Monitor, ggf. ein Notebook, ein Tablet und ein Smartphone? Eventuell gibt es in deinem Haushalt noch ein weiteres Tablet und ein Smartphone mit anderen Display-Größen?

Du musst nun nicht alle diese Geräte zur Optimierung deiner Website benutzen. Du kannst im Chrome-Browser mit den sogenannten Google Entwickler-Tools die Größe des Bildes auf verschiedenen mobilen Endgeräten ermitteln.

  • Klicke dazu mit der rechten Maustaste auf dein Foto.
  • Wähle in dem geöffneten Fenster „Untersuchen“ aus.
  • Klicke ggf. mit der Maus auf das Icon ganz oben links mit dem Pfeil, um die rechte Seitenleiste aufzuklappen.

Hier erkennst du, ob dein eingefügtes Bild zu groß oder zu klein ist.

bildgroesse ermitteln

Was ist neben den Bildmaßen noch zu beachten?

Neben der eigentliche Größe des Bildes (die Maße) ist auch die Dateigröße wichtig. Denn je größer das Bild in seinen Abmessungen ist, desto größer ist auch die Bilddatei.

Auch die Bildinhalte haben einen Einfluss auf die Größe der Datei: Die Datei wird umso größer, je mehr Farben dein Bild enthält.

Grundsätzlich solltest du keine Bilder von deiner Kamera oder deinem Smartphone unbearbeitet und direkt auf die Website laden. Auch Stockfotos (z.B. von Unsplash & Co.) sind zu groß. Ein unbearbeitetes Bild kann schon mal 5404×3606 px bei bis zu 6 GB auf die Waage bringen.

Das ist eine viel zu große Datenmenge.

Das Gute: Bilder in dieser Größe kannst du gar nicht in WordPress hochladen. Wenn du es dennoch versuchst, erhältst du eine Fehlermeldung, dass dein Bild maximal 2560 px breit sein darf. 

Wenn du zunächst deine Bilder auf das richtige Maß verkleinert hast, komprimierst du sie im nächsten Schritt für die Anzeige im Web.

Beim Komprimieren reduzierst du die Bildqualität und damit die Dateigröße.

Deine Bilddatei sollte nicht größer als 150 KB sein.

Dies ist nur ein Richtwert. Sei hier nicht „päpstlicher als der Papst“. Deine wichtigen Fotos, die über die gesamte Breite deiner Website gehen, sind natürlich größer als Fotos, die im Fließtext eingebunden sind.

Sobald du ein Bild in WordPress hochgeladen hast, werden dir entsprechenden Daten wie Dateityp, Dateigröße und Abmessungen angezeigt.

Wenn du bei den Dateigrößen deiner hochgeladenen Bilder hohe MB- oder sogar GB-Werte findest, solltest du unbedingt handeln!

Neben der Bildgröße ist auch die Dateigröße wichtig

Wie komprimiere ich meine Bilder für die Website?

Es gibt verschiedene (kostenlose) Tools, die du zum Bearbeiten deiner Bilder nutzen kannst.

Profis nutzen Photoshop und es gibt kein besseres Tool, um Bilder u.a. zu bearbeiten, zurechtzuschneiden und zu komprimieren.

Deine Bilder zuschneiden und verkleinern kannst du aber ebenso gut mit dem kostenlosen Tool gimp. Bei Konrad Paul von „Fotografieren lernen“ erfährst du alles zur „Bildbearbeitung mit gimp“.

Auch mit Canva kannst du Bilder, Fotos, Grafiken und Icons beim Herunterladen im jpg-Format komprimieren.

Eines von vielen kostenlosen Online-Tools, das beides kann, ist Squoosh. Dieses Tool ist genial:

Du lädst das zu bearbeitende Foto hoch, um das Foto zu verkleinern und die Bilddatei direkt zu komprimieren. Die zu erreichende Dateigröße (in kb) wird dir dabei direkt angezeigt.

Und das Beste:

Du siehst in einer Vorschau auf deinem Bildschirm, wie das Bild nach der Komprimierung aussieht und kannst evtl. nachjustieren.

Squoosh: Tool zum Komprimieren von Bildern
Ein Pro-Tipp zum Komprimieren deiner großformatigen Bilder:

Je größer dein Bild in Pixel, desto stärker kannst du es komprimieren. Vor allem dann, wenn du es als Hintergrundbild ggf. mit Farbüberlagerung zur Darstellung von Text oder anderen Inhalten nutzen willst. Dann kannst du dein Bild gut und gerne auf 20 % des eigentlichen Dateiformats bringen.

Wenn du Fotografin, Designerin, etc. bist, sind hochauflösende Bilder und Fotos dein Business. Hier solltest du dann abwägen, was dir wichtiger ist: Hammerscharfe Fotos oder eine schnelle Website.

Für welches Dateiformat entscheidest du dich?

Schließlich wäre es ja zu einfach, wenn du nicht auch hier eine Auswahl hättest. Bitte beachte, dass die folgende Aufzählung nur eine Auswahl der gängigsten Formate darstellt und keinen Anspruch auf Vollständigkeit erfüllt. Da gibt es noch viel mehr – aber wir bleiben hier mal pragmatisch.

  • JPEG/JPG (Joint Photographic Expert Group)

    Dies ist eines der am weitesten verbreiteten Formate im Internet für das Hochladen von Fotos. JPG-Fotos sind komprimiert und haben eine geringe Dateigröße. Allerdings werden sie manchmal verpixelt dargestellt.

  • PNG (Portable Networks Graphics)

    Dieses Format hat eine eingebaute Transparenz und wird für Bilder/Fotos mit einem transparenten Hintergrund genutzt. PNGs eignen sich besonders gut für Grafiken oder auch für dein Website-Logo.

  • GIF (Graphics Interchange Format)

    Dieses Format benötigst du hauptsächlich für animierte Fotos und Grafiken. Auch dieses Format lässt sich gut komprimieren.

Es gibt noch ein weiteres Format, das du unbedingt kennen solltest:

Was ist WebP?

WebP, Weppy gesprochen, komprimiert deine Bilder noch effektiver. Die Dateien werden noch kleiner, aber die Qualität bleibt gleich. Und deine Seite wird (im Regelfall) noch schneller …

Dieses Format kann sowohl Bilder mit transparentem Hintergrund als auch animierte Grafiken darstellen. Mit dem Online-Tool „Squoosh“ kannst du deine Bilder auch in dieses Format umwandeln. Am besten testest du es einfach mal.

WebP wird aktuell von folgenden Browsern unterstützt: Chrome, Microsoft Edge, Firefox, Opera und Safari. 

Um zu entscheiden, ob dieses Format für deine Bilder geeignet ist, schaust du am besten in deine Statistiken, um herauszufinden, mit welchen Browsern deine BesucherInnen auf deine Website kommen.

Aber das ist ein anderes Thema.

FAQ: Häufige Fragen zu Bildgrößen auf Websites

Welche Bildgröße ist für meine Website optimal?

Die optimale Bildgröße hängt davon ab, wo das Bild auf deiner Website angezeigt wird. Ein Bild über die volle Breite sollte 1920 px breit sein. Bilder im Blogbeitrag brauchen meist nur ca. 750 px Breite, mehrere Bilder nebeneinander entsprechend weniger.

Warum sollte ich Bilder vor dem Hochladen optimieren?

Zu große Bilder machen deine Website langsam, weil sie unnötig viel Datenvolumen laden muss. Zu kleine Bilder können dagegen unscharf oder pixelig wirken. Deshalb solltest du Bilder vor dem Hochladen auf die passende Pixelgröße bringen und anschließend komprimieren.

Was ist der Unterschied zwischen Bildgröße und Dateigröße?

Die Bildgröße beschreibt die Maße eines Bildes in Pixeln, zum Beispiel 1920 × 800 px. Die Breite wird immer zuerst genannt. Die Dateigröße gibt an, wie viel Speicherplatz die Datei braucht, zum Beispiel 150 KB oder 2 MB. Für deine Website sind Maße und Dateigröße wichtig.

Wie groß darf die Dateigröße eines Website-Bildes sein?

Als grober Richtwert sollten Website-Bilder möglichst nicht größer als 150 KB sein. Bei großen Bildern über die volle Breite kann die Datei auch etwas größer sein. Wichtig ist: Die Qualität soll gut bleiben, aber die Ladezeit darf nicht darunter leiden.

Welches Dateiformat ist für Website-Bilder sinnvoll?

Für Fotos ist JPG oft eine gute Wahl, weil die Dateien relativ klein sind. PNG eignet sich für Grafiken, Logos oder Bilder mit transparentem Hintergrund. WebP kann eine sehr gute Alternative sein, weil es Bilder stark komprimiert und dabei die Qualität erhält.

Was passiert, wenn ich Bilder direkt vom Smartphone oder aus der Kamera hochlade?

Dann sind sie fast immer viel zu groß für deine Website. Das belastet die Ladezeit unnötig und kann deine Seite spürbar langsamer machen.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

ki suchergebnisse 2025

Wie komme ich in die Google KI-Suchergebnisse?

So entwickelst du deinen Website Stil

So enwickelst du deinen Website-Stil

Schriften kombinieren auf der Website

So kombinierst du Schriften

]]> https://fraukoenig.de/bildgroessen-website/feed/ 12 Google Fonts in Elementor lokal einbinden https://fraukoenig.de/google-fonts-in-elementor-lokal-einbinden/ https://fraukoenig.de/google-fonts-in-elementor-lokal-einbinden/#comments Thu, 20 Feb 2025 10:32:38 +0000 https://fraukoenig.de/?p=51031

Google Fonts in Elementor lokal einbinden

So geht es nach dem Elementor-Update in zwei Klicks!

Google Fonts kannst du direkt in Elementor lokal einbinden, indem du die Funktion „Google Fonts lokal laden“ aktivierst. Das umständliche Herunterladen, Konvertieren und Hochladen der einzelnen Schriftdateien kannst du dir damit sparen. Die Funktion steht auch in der kostenlosen Version von Elementor zur Verfügung und ist mit wenigen Klicks eingerichtet.

In diesem Mini-Tutorial zeige ich dir Schritt für Schritt, welche Einstellungen du aktivieren musst und wie du anschließend prüfst, ob deine Google Fonts wirklich lokal geladen werden.

2022 ging eine massive Welle durchs Netz, als es ein Urteil zur Nutzung der Google Fonts direkt über den Google Server gab. Klicke hier zu meinem Beitrag zu den Google Fonts aus 2022 …

Dieser alte Beitrag ist trotzdem relevant für dich, denn darin erfährst du, was passiert, wenn du Google Fonts direkt über den Google Server in den USA lädst und was das technisch und rechtlich bedeutet.

Außerdem können Google Fonts noch über dein Theme oder weitere Dienste auf deiner Website aktiv sein. Deshalb musst du das unbedingt prüfen!

Darum sind Google Fonts so genial

In Googles Schriften-Bibliothek auf fonts.google.com findest du 1798 Schriftfamilien (Stand Februar 2025), die du kostenlos und lizenzfrei nutzen kannst – für deine Dokumente auf dem Computer, deine Social Media-Posts und natürlich auf deiner Website.

Das Geniale: Du kannst die Schriften hier auf Herz und Nieren prüfen. Die Größe anpassen, eigenen Text eintragen, um zu sehen, wie einzelne Worte bzw. Buchstaben der gewählten Schrift wirken.

Du glaubst gar nicht, wie oft ich schon eine Schrift nicht genutzt habe, weil das „W“ wie Website hässlich aussah 😂.

In diesem neuen Mini-Tutorial erfährst du, wie du mit Elementor die Google Fonts easy peasy lokal auf deine Website bringst.

Das Beste: Die neue Möglichkeit, Google Fonts lokal in Elementor zu nutzen, steht dir auch in der kostenlosen Version des Pagebuilders zur Verfügung.

Und damit hat Elementor ein wirklich geniales Feature geschaffen, das dir deine Arbeit erleichtert. Denn mal ehrlich: Das Konvertieren der Schriften war schon mehr als nervig – vor allem, wenn die Onlinetools tagelang nicht erreichbar bzw. überlastet waren.

Apropos Arbeit erleichtern: Mit Elementor Pro* machst du dir das Gestalten deiner Website nicht nur richtig leicht, du sparst dir auch viele weitere Plugins, die du für eine geniale Business-Website brauchst.

So bindest du die Google Fonts auf zwei Klicks in Elementor ein:

Stelle sicher, dass du die aktuellste Version von Elementor installiert hast. Zeigt dein Elementor-Plugin ein Update an, klicke auf „Jetzt aktualisieren“.

Schritt 1: Google Fonts in Elementor aktiveren

  1. Gehe in deinem WordPress Backend in den Elementor-Einstellungen zum Unterpunkt „Erweitert“.
  2. Klicke beim Punkt „Google Fonts“ ins Dropdown-Feld und wähle „Aktivieren“.
  3. Klicke beim Punkt „Google Fonts laden“ ins Dropdown-Feld und wähle „Tauschen“ bzw. „Swap“.
  4. Speichere die Änderungen.
Screenshot aus den Elementor Einstellungen: Google Fonts aktivieren.

Schritt 2: Binde die Google Fonts lokal ein

  1. Gehe jetzt in den Elementor-Einstellungen zum Unterpunkt „Leistung“.
  2. Hier klickst du beim Punkt „Google Fonts lokal laden“ ins Dropdown-Feld und wählst „Aktivieren“.
  3. Speichere deine Änderung.
Screenshot aus den Elementor Eigenschaften: Google Fonts lokal einbinden.

Die Google Fonts sind jetzt in Elementor lokal eingebunden.

Gehe in die Elementor Website-Einstellungen und schaue unter dem Punkt „Typographie“ nach:

Du findest dort jetzt alle Google Fonts sowie auch Neuheiten über „Early Access“ und kannst sie jetzt für deine Schriften nutzen.

Screenshot aus den Elementor Website-Einstellungen im Bereich Typographie: Auswahl der Google Fonts.
10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Hattest du bereits Google Fonts über ein Plugin oder direkt in Elementor Pro hochgeladen?

Prüfe zunächst in deinem Quellcode, ob die Google Fonts lokal geladen werden. Wie das geht, erfährst du in meinem alten Beitrag „So bindest du deine Google Fonts DSGVO-konform auf deiner Website ein„.

Werden keine Google Fonts über den US-Server geladen, z. B. über dein Theme oder weitere Tools, kannst du die hochgeladenen Schrift-Dateien aus deinen Medien löschen und das eventuell zum lokalen Einbinden der Fonts genutzte Plugin löschen.

Wie kommen gekaufte Schriften in den Elementor?

Auch hier gibt es inzwischen eine Abkürzung und die heißt „Variable Fonts“ (nur in Elementor Pro*) – noch so ein geniales Feature!

Hier lädst du deine gekaufte Schriftdatei direkt bei Elementor hoch und Elementor erledigt den Rest. D.h. dass du alle Größen, Schriftschnitte und Auszeichnungen (z. B. kursiv) mit nur einer Schriftdatei nutzen kannst.

Grundsätzliches zur Nutzung von Schriften auf deiner Website:

Auch wenn dir jetzt ALLE Google Fonts zur Verfügung stehen, heißt das nicht, dass du dich hier austoben sollst, indem du wahllos Schriften auf deiner Website nutzt.

Wähle zwei Schriften aus, die du konsequent nutzt – eine Schrift für deine Überschriften, eine Schrift für deinen Fließtext.

Erfahre hier, wie du Schriften auf deiner Website und in Social Media kombinierst.

FAQ - Häufige Fragen zu Google Fonts in Elementor lokal einbinden

Wie kann ich Google Fonts in Elementor lokal einbinden?

Aktiviere in den Elementor-Einstellungen unter „Leistung“ die Funktion „Google Fonts lokal laden“. Elementor speichert die verwendeten Schriften anschließend auf deinem eigenen Webserver und lädt sie nicht mehr direkt von Google.

Brauche ich Elementor Pro, um Google Fonts lokal zu laden?

Nein. Du kannst Google Fonts auch mit der kostenlosen Version von Elementor lokal einbinden. Ein zusätzliches Plugin ist dafür ebenfalls nicht notwendig.

Warum sollte ich Google Fonts lokal einbinden?

Beim lokalen Laden werden die Schriftdateien von deinem eigenen Server bereitgestellt. Dadurch muss beim Aufruf deiner Website keine direkte Verbindung zu den Google-Servern hergestellt werden. Das ist insbesondere im Hinblick auf Datenschutz und Ladezeit sinnvoll.

Muss ich die Google Fonts vorher herunterladen und hochladen?

Nein. Mit der integrierten Elementor-Funktion musst du die Schriftdateien nicht selbst herunterladen, konvertieren und hochladen. Elementor übernimmt die lokale Bereitstellung automatisch.

Wie kann ich prüfen, ob meine Google Fonts wirklich lokal geladen werden?

Öffne deine Website in einem privaten Browserfenster und kontrolliere über die Entwicklerwerkzeuge oder einen Google-Fonts-Checker, von welcher Domain die Schriftdateien geladen werden. Es sollten keine Anfragen mehr an Domains wie fonts.googleapis.com oder fonts.gstatic.com gesendet werden.

Werden automatisch alle Google Fonts lokal gespeichert oder nur die tatsächlich verwendeten?

Elementor erkennt, welche Google Fonts auf deinen Seiten verwendet werden, und stellt diese lokal bereit. Nicht verwendete Schriften werden daher nicht pauschal geladen. Auch die zugehörigen Ressourcen werden grundsätzlich nur auf den Seiten eingebunden, auf denen sie tatsächlich benötigt werden.

Was kann ich tun, wenn eine Schrift nach der Umstellung nicht mehr richtig angezeigt wird?

Leere zuerst den Cache deines Cache-Plugins, deines Hostings und deines Browsers. Prüfe außerdem, ob die WordPress- und Website-Adresse vollständig über HTTPS laufen. Besteht das Problem weiterhin, kannst du in den Elementor Werkzeugen die CSS-Dateien und Daten neu generieren. Nach einem Umzug oder Domainwechsel solltest du zusätzlich kontrollieren, ob noch alte URLs in den Schriftdateien hinterlegt sind.

*Werbe-Link
Der mit * gekennzeichnete Link ist ein Affiliate Link. Das heißt, ich bekomme eine kleine Provision, wenn du dir hierüber Elementor Pro holst. Am Preis für dich ändert das natürlich nichts.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

So bindest du Google Fonts lokal auf deiner Website ein

Google Fonts DSGVO-konform einbinden

Lädt deine Website Google Fonts noch direkt von den Google-Servern? Dann werden möglicherweise Daten deiner Besucherinnen und Besucher übertragen. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du Google Fonts lokal einbindest, unnötige Verbindungen entfernst und anschließend prüfst, ob alles richtig funktioniert.
weiterlesen
So entwickelst du deinen Website Stil

So enwickelst du deinen Website-Stil

Es dauert ganze 3 Sekunden, in denen dein Website-Besucher entscheidet ob er bleibt oder geht. Stellt sich innerhalb dieser kurzen Zeit nicht das richtige Feeling ein, klickt er weg. Für das richtige Gefühl auf deiner Website sorgst du mit deinem Website-Stil.
weiterlesen
Schriften kombinieren auf der Website

So kombinierst du Schriften

Schriften spielen viel zu oft eine untergeordnete Rolle auf Website und Social Media. Dabei komplettieren sie den Look, den Du mit Farben und Bildern herstellst und machen Dein Branding einzigartig. Erfahre hier, welche Schriftpaare auf Website und in Social Media zeitlos und schwer angesagt sind.
weiterlesen
]]> https://fraukoenig.de/google-fonts-in-elementor-lokal-einbinden/feed/ 2 Jahreszahl in WordPress automatisch aktualisieren https://fraukoenig.de/wordpress-jahreszahl-automatisch-aktualisieren/ https://fraukoenig.de/wordpress-jahreszahl-automatisch-aktualisieren/#respond Thu, 02 Jan 2025 14:51:41 +0000 https://fraukoenig.de/?p=49609

So aktualisiert sich die Jahreszahl auf deiner WordPress-Website automatisch

Die letzen Partyspuren sind weggewischt, die Katerstimmung nach den Feiertagen und dem Jahreswechsel ist überstanden. Woran die Wenigsten denken: Die Jahreszahl im Footer der Website umzustellen. Wenn du dir darüber in Zukunft keine Gedanken mehr machen willst, automatisiere die Umstellung der Jahreszahl auf deiner Website.

Die aktuelle Jahreszahl steht auf deiner Website in der Regel im Footer, im Copyright-Bereich. Hast du verschiedene Landingpages im Einsatz und nutzt hier eine manuell erstellte Textzeile mit Copyright und den wichtigen Links zum Impressum und Datenschutz, muss auch hier die Jahreszahl per Hand umgestellt werden.

Jahreszahl manuell oder automatisch anpassen?

Natürlich bleibt es dir überlassen, welchen Weg du gehst. Allerdings geht die Umstellung im trubeligen Alltag schnell unter und wenn das neue Jahr schon einige Wochen oder Monate alt ist, fragen sich deine BesucherInnen eventuell, ob du überhaupt noch am Start bist!?

Bei einer kleinen Recherche habe ich übrigens eine ganze Reihe Websites gefunden, die noch nicht in den 2020ern angekommen sind. 

Dabei ist die Automatisierung zur Umstellung der Jahreszahl auf deiner Website mit wenigen Klicks einzubauen.

Du brauchst:

  1. ein Child Theme,
  2. einen kleinen Code, den du in deiner functions.php-Datei einfügst.

Wenn du beim Stichwort „Code“ denkst, „Hilfeee, das kann ich nicht!“, warte ab, es ist wirklich ganz leicht.

Und wenn du dich fragst, warum du ein Child Theme brauchst: Fügst du den Code in deinem Haupttheme ein, wird er nach dem nächsten Theme-Update überschrieben. Fügst du den Code dagegen im Child Theme ein, bleibt er auf immer und ewig dort stehen.

Ein Child Theme erstellst du z. B. mit dem Plugin „Childify me“ direkt in deinem Customizer. Ist dein Child Theme aktiv, kannst du das Plugin wieder löschen.

So kommt der Code zur Umstellung der Jahreszahl auf deine Website:

theme datei editor

Schritt 1:
Gehe in deinem WordPress Backend zum Punkt „Design“ und klicke auf „Theme-Datei-Editor“. 

Screenshot aus dem WP-Backend Auswahl der Datei functions.php

Schritt 2:
Wähle als zu bearbeitendes Theme dein Child Theme aus und klicke auf die Datei „functions.php“.
Hier fügst du gleich den Code ein.

In der functions.php-Datei siehst du oben /* Write your awesome functions below */
Klicke dahinter und füge eine neue Zeile ein. In diese neue Zeile kopierst du den folgenden Code hinein:

				
					/* Jahreszahl umstellen */
function jahr_shortcode() {
  $jahr = date('Y');
  return $jahr;
}
add_shortcode('jahr', 'jahr_shortcode');

Dann speicherst du den Code über den Button „Datei aktualisieren“ unter dem Code-Feld.

So stellt sich die Jahreszahl automatisch zum Jahreswechsel um:

Mit dem Code hast du einen Shortcode hergestellt. Den Shortcode „jahr“ setzt du nun überall ein, wo die Jahreszahl auf deiner Website angezeigt wird.

Du brauchst hier kein spezielles Widget oder Element, wenn du einen Pagebuilder nutzt. Du kannst den Shortcode in den [eckigen Klammern] direkt in den Text einfügen.

Screenshot Shortcode für "Jahr"

Schau auch auf deinen Landingpages nach, wo du einen reduzierten Copyright-Hinweis mit der Jahreszahl eingefügt hast und setze dort den Shortcode ein.

So stellt sich die Jahreszahl auf deiner Website automatisch um, während du mit deinen Liebsten auf das neue Jahr anstößt. 

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

Übersicht der Bildgrößen für deine Website

Diese Bildgrößen brauchst du auf deiner Website

Welche Bildgrößen braucht deine Website wirklich? Zu große Dateien machen sie langsam, zu kleine Bilder wirken unscharf. In diesem Beitrag erfährst du, wie du Fotos, Grafiken und Icons richtig vorbereitest und welche Maße sich für deine Website eignen. Inklusive Übersicht zum Download.
weiterlesen
Umzug von Elopage auf die eigene Plattform

Von Elopage zur eigenen Kurs-Plattform

In Deutschland ist Elopage der All in One-Anbieter für digitale Produkte. Die verschiedenen Schwachstellen nervten meine Kundin Aleksandra irgendwann so sehr, dass sie nach einer Alternative fragte. Jetzt läuft ihr großer Onlinekurs ohne Drittanbieter über ihre eigene Website! So lief der Umzug ...
weiterlesen
Website planen in 3 Schritten

Website planen in 3 Schritten

Als Riesenfan der "Einfach mal machen"-Strategie fällt es mir schwer dir zu sagen, dass dieses Mindset in Sachen Website-Aufbau leider nicht funktioniert. Im Gegenteil. Erfahre hier, wie du deine Website strategisch und in 3 einfachen Schritten planst, damit du deine Zielgruppe erreichst und Kunden gewinnst.
weiterlesen
10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website
]]> https://fraukoenig.de/wordpress-jahreszahl-automatisch-aktualisieren/feed/ 0 Von Elopage zur eigenen Kurs-Plattform https://fraukoenig.de/von-elopage-zur-eigenen-kurs-plattform/ https://fraukoenig.de/von-elopage-zur-eigenen-kurs-plattform/#comments Sat, 29 Jun 2024 12:03:18 +0000 https://fraukoenig.de/?p=45126

Von Elopage zur eigenen Kurs-Plattform

So gelingt der Umzug deiner Onlinekurse!

Die Zahl der externen Onlinekurs-Plattformen wächst stetig: Elopage bzw. Ablefy, Memberspot, Coachy, ThriveCart, Kajabi, Teachable & Co. hosten Onlinekurse mit unterschiedlichen Services und Zusatzfunktionen. In Deutschland ist Elopage der All in One-Anbieter für digitale Produkte. Aber auch mit verschiedenen Schwachstellen. Diese nervten meine Kundin Aleksandra irgendwann so sehr, dass sie nach einer Alternative fragte. Jetzt läuft ihr großer Onlinekurs ohne Drittanbieter über ihre eigene Website!

Die richtige Kurs-Plattform für seine Onlinekurse zu finden, kann eine Herausforderung sein. Für mich selbst stand ein externer Anbieter nie zur Debatte, da ich die Potenziale von WordPress kenne und auf meine Recherche-Skills vertraue. 

Mein erstes Website-Programm „create & launch“ stampfe ich 2020 auf dieser Website innerhalb von 3 Tagen aus dem Boden – mit eigenem Shopsystem und einem einfachen Membership-Plugin. Als das Programm wächst, weitere Programme und digitale Produkte hinzu kommen, wird mein kleines System etwas unflexibel. Vor allem wenn Kundinnen mehrere Produkte kaufen, muss ich manuell anpassen.

Also baue ich Anfang 2023 auf einer Subdomain einen „richtigen“ Mitgliederbereich mit Kursen, Programmen und einer Community auf – meine Academy!

Die Anforderungen der Kundin an ihre eigene Kurs-Plattform

„Es soll einfach nur funktionieren“, verrät Aleksandra im Planungscall. „Und so aussehen, wie bei Elopage!“ Ich zeige ihr verschiedene Möglichkeiten, Funktionen und das Design an ihre Bedürfnisse anzupassen. Sie ist direkt begeistert. 

Und so bleibt es nicht bei den beiden Anforderungen: Im Laufe des Aufbaus der neuen Kurs-Plattform fließen weitere Wünsche ein – denn wer weiß, was alles möglich ist, möchte kaum darauf verzichten:

  • mehr Verkäufe durch einen auf die Zielgruppe zugeschnittenen und optimal designten Verkaufsprozess – der übrigens nicht auf der Kassenseite endet!
  • höhere Einnahmen durch das Ausschließen bestimmter Zahlungsmittel mit hohen Gebühren.
  • größere Kundenzufriedenheit durch stimmige Prozesse zur Auslieferung der Produkte und zur Nutzung des Kurses auf der E-Learning-Plattform.

Zum Projektstart läuft der Onlinekurs bei Elopage mit einer aktuellen Gruppe. Gleichzeitig bietet die Kundin ein eBook an, das nahtlos erhältlich bleiben muss.

Während Elopage also noch genutzt wird, bauen wir die neue Plattform parallel auf einer Subdomain mit WordPress neu auf.

Von Elopage zur eigenen Kurs-Plattform

Schritt 1: Aufbau der Verkaufsplattform aka Onlineshop

Um vollständig unabhängig zu verkaufen, nutzen wir das beliebte Plugin „WooCommerce“. Hier richten wir als Zahlungsarten PayPal, Kreditkarte, Direkte Banküberweisung und GiroPay ein. 

Über „Germanized for WooCommerce“ lassen wir die Rechnungen automatisch generieren und als PDF-Anhang per E-Mail an die Kunden senden.

Diese digitalen Produkte kommen in den Shop:

  1. das eBook als Download
  2. der große Onlinekurs 
  3. ein in der Platzzahl limitiertes Zusatzmeeting (für die aktuellen Teilnehmenden des Onlinekurses)

Schritt 2: Anpassen des Kaufprozesses

Anders als in einem klassischen Onlineshop, blenden wir den Warenkorb aus, sodass die Kunden von der Landinpage direkt zur Kassenseite kommen. Diese gestalten wir pro Produkt individuell mit jeweils einem abgestimmten großen Bild, weiteren Inhalten (z. B. Kundenstimmen) und dem eigentlichen Zahlungsbereich.

Für das eBook schließen wir die Zahlungsweise „Direkte Banküberweisung“ aus, während PayPal aufgrund der vergleichweise hohen Gebühren als Zahlungsart beim hochpreisigen Onlinekurs ausgeschlossen wird.

Für jedes Produkt gestalten wir außerdem eine individuelle Danke-Seite, die sich nach dem Kauf öffnet und den Kunden wichtige Informationen anzeigt. So finden die Kurskäufer beispielsweise einen Link direkt zur Kursstartseite, die Käufer des Zusatzmeetings alle Informationen zum Ablauf und die eBook-Kunden den Link zum Download.

Das eBook und das Zusatzmeeting gehen als erstes über den neuen Shop in den Verkauf und Aleksandra ist fassungslos: „Das funktioniert ja alles!“

Übrigens: Wenn sie etwas anpackt, dann richtig! Aleksandra hat neben dem Umzug ihrer digitalen Produkte auf ihre eigene Kurs-Plattform gleichzeitig ihr Newsletter-Tool gewechselt. Diesen Umzug von ActiveCampaign zu MailerLite hat Britta übernommen und gemeinsam haben wir die Produktkäufe mit neuen Automationen verknüpft und mehrfach getestet.

Schritt 3: Aufbau des Onlinekurs-Bereichs

Den Wunsch, dass der „Kurs genauso aussieht wie bei Elopage“, realisieren wir mit dem LMS-Plugin LearnDash*. Die Kursseiten gestalten wir mit Elementor Pro*.

Während die Kundin ihre Kursvideos auf der Video-Plattform Vimeo hochlädt, legen wir ihren Kurs mit 8 Modulen und 84 Lektionen in LearnDash an. 

Da wir die LearnDash-Struktur umgehen und mit einem eigenen Design für die Kursseiten arbeiten, legen wir mit Elementor ein Template mit Header, Footer, Kursmenü, Titelbereich und Beitragsinhalt an. Die Kursübersichtsseite gestalten wir mit Kacheln zu den Modulen, ganz Elopage-like.

Zum Einfügen aller Inhalte, und um den Überblick zu behalten, schickt uns die Kundin eine gigantische Inhalts-Tabelle mit allen Videolinks, den Texten, externen Links, etc. Durch einen ausgefuchsten Workflow sind alle Inhalte nach fünf Stunden eingefügt.

BEREIT FÜR DEINE EIGENE VERKAUFS- UND KURSPLATTFORM?

Erstelle, hoste und verkaufe deine digitalen Produkte, Memberships und Onlinekurse direkt über deine eigene Plattform!
Build & Sell Programm für deine eigene Verkaufs- und Kursplattform

Höhere Einnahmen und begeisterte KundInnen:
Build & Sell ist das 6 Monats-Programm zum Aufbau deiner eigenen Verkaufs- und Kursplattform. 

Komm auf die Warteliste!
Build and Sell deine eigene Verkaufsplattform mit WordPress

Schritt 4: Finetuning und testen, testen, testen

Den Login/Logout-Prozess haben wir über einfache Links mit Weiterleitungen im Header realisiert. Als Login dient das Elementor-Widget „Anmeldung“. Die Kunden werden nach ihrer Anmeldung hierüber direkt zu ihrer individuellen Profilseite weitergeleitet und haben von hier Zugriff auf ihr digitales Produkt.

Den Login- und Logout-Prozess haben wir in verschiedenen Browsern intensiv getestet, damit die Weiterleitung für die Kunden einwandfrei funktioniert.

Über Testkäufe – mal mit mal ohne Gutschein-Code – haben wir den gesamten Kaufprozess auf Herz und Nieren getestet – in verschiedenen Browsern und auch mobil. 

Auf den Danke-Seiten nach dem Kauf haben wir die Texte noch einmal geschärft, um den Kunden den Einstieg in die Plattform so einfach wie möglich zu machen. 

Schritt 5: Umzug der Teilnehmenden von Elopage auf die neue Kurs-Plattform

Es gibt zwei Möglichkeiten, die aktuellen Kursteilnehmenden in den neuen Kursbereich zu bringen:

  1. Sie kaufen den Kurs mit einem 100 %-Rabatt-Gutschein.
  2. Sie werden manuell als Benutzer angelegt.

Die Kundin entscheidet sich für Möglichkeit 2 und bereitet die Teilnehmenden mit einer ausführlichen E-Mail auf den Umzug vor. Beim Wechsel legen sie sich über die Login-Seite nur noch ein individuelles Passwort fest und haben direkt wieder Zugriff auf ihren Kurs.

Schritt 6: Kurslaunch

Beim eigentlichen Kurslaunch zeigt sich, dass das System für alle Eventualitäten gerüstet ist und die Kunden sicher durch den Kaufprozess und anschließend zu ihrem Kurs geführt werden.

Die Conversion erhöhen wir über das Zusatztool „Cart Abandonment“: Kaufabbrecher an der Kasse erhalten nach 30 Minuten eine E-Mail mit dem direkten Link zurück zur Kasse. 

Über die ausführliche Statistik des LearnDash-Addons „ProPanel“ sieht die Kundin direkt in ihrem WordPress-Dashboard, wer im Kurs wo steht, wer womöglich noch gar nicht angefangen hat, wer weniger als 20 %, 40 %, 60 % oder 80 % absolviert hat und wer kurz davor ist, den Kurs abzuschließen.

Direkter Vergleich: Elopage vs. eigene Kurs-Plattform

Ein Grund, eine eigene Kursplattform zu nutzen, waren für Aleksandra die monatlichen Kosten und die bei Elopage abhängen von der Anzahl

  • der Produkte
  • der Videos
  • der Teammitglieder

Für ihr Businessmodell brauchte Aleksandra mindestens den Advanced-Tarif zu 69,- € pro Monat bzw. 59,- € bei jährlicher Zahlung = 1.336,- €.

Das ist jetzt keine hohe Business-Ausgabe. Doch wenn der Anbieter nicht das liefert, was du brauchst und nicht launchen kannst, ist das eben verbranntes Geld. Und: Neben dem eigentlichen Tarif wurde ja noch ein gewisser Prozensatz pro Kauf an Elopage direkt einbehalten, was bei einem hohpreisigen Kurs nochmals zu enormen Gebühren führte.

Die jährlichen Kosten für die eigene Kursplattform liegen unter 500,- €. Bei Verkäufen werden lediglich die Gebühren der vom Kunden genutzten Zahlungsart fällig; bei direkter Banküberweisung muss der Kunde zwar im System manuell nach Zahlungseingang freigeschaltet werden, dafür bleibt der Verkaufspreis zu 100 % bei der Verkäuferin.

Die einmalige Investition in den Aufbau hatte die Kundin nach ihrem erfolgreichen Kurslaunch wieder raus.

Dazu kann die eigene Plattform mit unbegrenzt vielen Produkten, Kursen und Videos bestückt werden. Auch bei Teammitgliedern gibt es kein Limit. Und natürlich kann die Plattform weiter ausgebaut werden, z. B. mit

  • weiteren Zahlungsarten
  • der Möglichkeit in Raten zu zahlen oder eine Membership anzubieten
  • einem Forum
  • einer Community
Kursübersicht nach dem Umzug von Elopage auf die eigene Kursplattform
Kursübersicht nach dem Umzug von Elopage auf die eigene Kursplattform

Ein großes Plus gegenüber Elopage ist natürlich, dass alles so gestaltet werden kann, wie es zur Corporate Identity der Kundin passt – und wie sie es für ihre Zielgruppe haben will. 

Ansprechpartnerin bei Fragen ist hier kein externer Support mit langen Antwortzeiten, sondern die Plattformbetreiberin selbst.

Die Vorteile von LearnDash

Das Learn Management System ist vor allem eines: flexibel.

  • Die Kursstruktur ist mit dem „Course Builder“ schnell erstellt.
  • Einmal angelegte Module, Lektionen und Tests lassen sich in verschiedenen Kursen nutzen. Änderungen oder Ergänzungen müssen so nur einmal vorgenommen werden.
  • Pro Kurs kann ein Start- und Enddatum eingerichtet werden. Es ist auch möglich, den Zugriff auf einen bestimmten Zeitraum zu begrenzen.
  • Module und Lektionen können über die Drip-In Funktion nach und nach oder zu einem bestimmten Datum freigeschaltet werden.
  • Das Erstellen von Zertifikaten gelingt mit wenigen Klicks. Ist der Kurs abgeschlossen, erscheint das individuelle Zertifikat zum Download auf der Profilseite des Kunden.
  • Über die WooCommerce-Integration lassen sich einem Produkt auch mehrere Kurse zuordnen, um Bundles anzubieten.
  • Die Kompatibilität mit dem Pagebuilder Elementor ist einfach nur genial, um die Teilnehmenden beim Lernen und Umsetzen auch visuell zu unterstützen.
  • Kursmenü, Fortschrittsbalken und Button-Navigation unterstützen auch Onlinekurs-Newbies bei der Orientierung, was direkt auf die Kundenzufriedenheit einzahlt.

Feedback meiner Kundin Aleksandra von der Drehbuchwerkstatt Berlin

„Nachdem ich zu Jahresanfang (sehr entnervt) Elopage verlassen habe, läuft nun mein erster Launch mit dem eigenen Shop & eigenem Kursbereich, den ich von Silke König habe bauen lassen. Was soll ich sagen… Die beste Entscheidung ever! 

Warum ist der eigene Shop und Kursbereich so viel besser?

1. Es funktioniert alles technisch einwandfrei (während es bei Elopage schwere, auch steuerlich relevante, Bugs gab, die monatelang nicht behoben wurden).

2. Die Bedienung aller Features ist so leicht, dass ich keine VA mehr brauche, ich kann alles mühelos selbst einstellen…

3. Ich konnte alles nach meinem Geschmack gestalten, es funktioniert nicht nur besser, sondern sieht auch besser aus.

4. Ich habe Zahlungsmethoden zur Verfügung, die ich vorher nicht hatte, z.B. die „direkte Banküberweisung“, die mir viele Gebühren & viel Streß erspart. Denn gerade Käufer aus dem Ausland haben bei höheren Beträgen Kreditkarten- und PayPal-Limits, die bei Elopage immer wieder zu Problemen und Zahlungsabbrüchen führten. Das alles entfällt nun.

5. Spätestes am Ende des Jahres hat sich die Investition amortisiert, d.h. die eigene Plattform ist für mich deutlich günstiger, als die (mittlerweile sehr hohen) Gebühren bei Elopage.

Mein Resümee: Alles funktioniert viel besser, sieht besser aus und kostet (auf die Dauer) deutlich weniger.“

Aleksandra von der Drehbuchwerkstatt Berlin

Mein Fazit zum Umzug von Elopage auf die eigene Kurs-Plattform

Der Wechsel von einem All in One-Anbieter auf die eigene Kurs-Plattform ist eine weitreichende Entscheidung für dein Business. Du hast es in der Hand, wie du deine Kunden von deiner Landingpage zum Kurs bringst – und kannst dabei jeden Schritt so optimieren, sodass der Prozess für den Kunden so einfach und schlank wie möglich gestaltet ist.

Der Umzug gelingt dann umso leichter, wenn du dir klar über den Verkaufsprozess und das Design deines Kurs-Bereichs bist.

Eine gute Vorbereitung z. B. in Form einer detaillierten Übersicht über alle Inhalte, erleichtert den Umzug und beschleunigt die Fertigstellung.

Dieses Projekt war direkt das Highlight am Anfang des Jahres: Die enge Zusammenarbeit mit Aleksandra hat großen Spaß gemacht, das Umsetzen der Sonderwünsche waren neue Learnings auch für uns. Bei „besonderen Vorkommnissen“ unterstützen wir Aleksandra auch nach Projektabschluss weiterhin.

Kurs-Plattform selbst erstellen oder erstellen lassen?

Du willst deine digitalen Produkte, eBooks, Masterclasses, Workshops, Onlinekurse und Onlineprogramme auch ohne Drittanbieter hosten und verkaufen? 

In meinem Programm „BUILD & S€LL“ baust du deine eigene Plattform Schritt für Schritt selbst auf. Komm auf die Warteliste und erfahre, wann das Programm wieder startet.

Du möchtest den Aufbau in professionelle Hände geben? Dann beauftrage mich und ich erstelle dir

  • deinen Onlineshop für deine digitalen Produkte und Online-Angebote
  • deine Kursplattform, deinen Mitgliederbereich
  • eine integrierte Community-Plattform mit Gruppen und Foren zum Austausch deiner Mitglieder

*Werbe-Links
Der mit * gekennzeichneten Links sind Affiliate Links. Das heißt, ich bekomme eine kleine Provision, wenn du hierüber ein Tool buchst. Am Preis für dich ändert das natürlich nichts.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

Website-Arten - Was brauchst du für dein Online-Business?

Website-Arten – Was brauchst du zum Start ins Business?

Dass du für dein (Online-)Business eine Website brauchst, müssen wir an dieser Stelle nicht mehr diskutieren, oder? Wenn du startest, kommst du sehr schnell an den Punkt, an dem du dich fragst "Was für eine Website brauche ich eigentlich?". Damit du weißt, welche Website-Art für dich und deine Zielgruppe am besten passt, kommt hier der Überblick.
weiterlesen
Vom Website-Besucher zum Newsletter-Abonnenten: So kommen deine User in deine Liste.

Vom Website-Besucher zum Newsletter-Abonnenten

Wenn du mit E-Mail-Marketing richtig durchstarten willst, ist ein "Freebie" mit echter Transformation der richtige Anfang. Der Weg, wie dein Abonnent zum Download deines "Freebies" kommt, will gut überlegt sein. In diesem Beitrag erfährst du, wie du einen professionellen Auslieferungsprozess erstellst und welche Tools du hierzu brauchst. 
weiterlesen
Website vs. Social Media

Website vs. Social Media

Brauchen Selbstständige heute überhaupt noch eine eigene Website? Wo doch die Kommunikation zwischen Personenmarken und ihrer Zielgruppe über Social Media Kanäle wie Facebook, Instagram, TikTok & Co. stattfindet! Erfahre hier, wo die Vorteile und wo die Nachteile liegen.
weiterlesen
]]> https://fraukoenig.de/von-elopage-zur-eigenen-kurs-plattform/feed/ 2 Google Fonts DSGVO-konform einbinden https://fraukoenig.de/google-fonts-dsgvo-konform-einbinden/ https://fraukoenig.de/google-fonts-dsgvo-konform-einbinden/#comments Fri, 04 Feb 2022 19:05:29 +0000 https://ba22ko1.myraidbox.de/?p=31714

So bindest du deine Google Fonts
DSGVO-konform auf deiner Website ein

Mit dieser Anleitung entfernst du die Verbindung zum Google-Server in 8 Schritten

Google Fonts bindest du DSGVO-konform auf deiner Website ein, indem du die verwendeten Schriftdateien lokal auf deinem eigenen Server speicherst und die direkte Verbindung zu den Google-Servern unterbindest. So werden die Schriften beim Aufruf deiner Website nicht von Google geladen und die IP-Adresse deiner Besucherinnen und Besucher wird dabei nicht an Google übermittelt.

In dieser Anleitung zeige ich dir Schritt für Schritt, wie du Google Fonts herunterlädst, lokal einbindest und die Verbindung zum Google-Server vollständig entfernst.

Google Fonts sind genial: Es gibt über 1300 Schriften, die kostenlos und lizenzfrei genutzt werden können – auch auf deiner Website. Themes, Plugins und Pagebuilder wie z. B. Elementor bringen die Schriften standardmäßig mit. Aber wenn du sie nutzt hast du ein Problem. Denn die direkte Einbindung über den Google-Server ist nicht datenschutzkonform und kann bestraft werden. 

Zu 100 Euro Schadenersatz hat das Landgericht München im Januar 2022 einen Website-Betreiber verurteilt, weil er Google Fonts verwendet hat. Ein Website-Besucher hatte geklagt, dass seine persönlichen Daten ohne seine Einwilligung an Google in die USA übermittelt wurden.

Damit gibt es jetzt zum Thema Google Fonts ein Urteil, einen Präzedenzfall in Deutschland, und die berüchtigten Abmahn-Anwälte haben sich wie die Geier darauf gestürzt.

Dabei ist das Thema gar nicht neu: Die Verwendung der dynamischen Google Fonts ist seit dem Inkrafttreten der DSGVO am 25. Mai 2018 verboten.

Was passiert technisch, wenn ich Google Schriften direkt nutze?

Beim Aufruf deiner Website wird die IP-Adresse des Users an den Google-Server gesendet. Dann werden die auf der Website eingebundenen Schriften vom Google-Server geladen und dynamisch in das HTML-Dokument eingebunden, das zum User übertragen wird.

Das passiert so schnell … So schnell kannst du gar nicht gucken.

„Die unerlaubte Weitergabe der dynamischen 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“, so das Gericht. Hier geht’s zum Urteil …

Darf ich Google Schriften jetzt nicht mehr nutzen?

Nein und ja!

Es kommt darauf an, WIE du die Google Fonts auf deiner Website einbindest.

Nein! Denn: Die Nutzung der Google Fonts über dein Theme, deinen Pagebuilder oder verschiedene Plugins erfolgt durch direkte Verbindung zum Google-Server. Hier solltest du jetzt unbedingt handeln!

Ja: Du kannst deine Google Schrift „selbst hosten“. Damit nutzt du deine Schrift ohne direkte Verbindung zum Google-Server und ohne dass die IP-Adresse deines Users in die USA übertragen wird.

Google Fonts datenschutzkonform einbinden

Wie finde ich heraus, ob meine Website mit dem Google-Server verbunden ist?

Über deinen Browser stellst du ganz einfach fest, ob deine Website Google Fonts direkt über den Google Server lädt:

Logge dich aus deiner Website aus und und rufe deine Website mit dem Chrome Browser auf. Durch einen Rechtsklick irgendwo auf deiner Website, kannst du sie „Untersuchen“.

So untersuchst du, ob du auf deiner Website Google Fonts nutzt

Nicht erschrecken: Es öffnen sich die Developer Tools und du siehst erstmal ganz viel Code.

In der oberen Leiste siehst du eine Menü-Leiste. Klicke in dieser Leiste auf „Quellcode“ und schau dir die linke Spalte an.

Sobald hier die Google-Referenzen „googleapis“ und „gstatic“ auftauchen, werden deine Schriften direkt vom Google-Server geladen.

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Hier ist ein Beispiel mit der Verbindung zum Google-Server:

Google Fonts im Chrome Browser

So sieht der Quellcode ohne die Verbindung zum Google-Server für die Google Fonts aus:

Quellcode ohne Google Fonts

So nutzt du deine Google Fonts DSGVO-konform

Es ist überhaupt nicht kompliziert, die Verbindung zum Google-Server zu kappen und die Google Fonts lokal auf deiner Website einzubinden.

Damit du das direkt umsetzen kannst, enthält die folgende Anleitung einfache und kostenlose Tools. Also: No Coding! 

1. Dein erster Klick geht auf fonts.google.com. 

Du findest deine Google Schrift ganz schnell über die Suche.

Neben den enthaltenen Schriftschnitten findest du die Glyphen inkl. Sonderzeichen und die Lizenz-Info, die du unbedingt beachten musst.

2. Downloade deine Schriftdateien

Über den Button „Download Family“ oben rechts, lädst du die Schrift als zip-Datei mit allen enthaltenen Schriftschnitten herunter.

Google Fonts downloaden

3. Schriften entpacken

Wenn du zip-Datei entpackst, erhältst du alle enthaltenen Schrift-Dateien im ttf-Format. Diese „TrueType Fonts“ kannst du auf deinem Computer installieren und auch mit anderen Programmen nutzen (Word, Photoshop, etc.).

Google Font Roboto im TTF-Format

4. Schriften konvertieren

Damit deine Schrift von allen Browsern angezeigt werden kann, brauchst du diese Datei-Formate:

  • WOFF Datei (verwendet von modernen Browsern)
  • WOFF 2 Datei (verwendet von supermodernen Browsern)

Über ein kostenloses Tool wie z. B. fontConverter.io oder onlinefontconverter.com kannst du in wenigen Klicks aus deiner Schrift im ttf-Format die anderen Formate generieren.

Google Fonts konvertieren
  1. Du wählst deine zu konvertierende Schriftdatei aus (hier: Roboto-Regular.ttf).
  2. Du wählst die Dateiformate, die du brauchst.
  3. Du klickst auf „Convert Font“ und erhältst eine zip-Datei mit der Schrift in den verschiedenen Formaten.

5. Google Fonts hochladen

Jetzt kommt es darauf an, welches Theme bzw. welchen Pagebuilder du nutzt.

Im weiteren Verlauf des Beitrags geht es um den Pagebuilder Elementor. Die Vorgehensweise kannst aber auf alle anderen Pagebuilder übertragen.

Fonts in gängiges Theme einbinden

Für die gängigen Themes (z. B. Astra, OceanWP) kannst du deine Fonts über das Plugin Custom Fonts hochladen.

Du fügst im Plugin deine Schrift hinzu, legst eine Fallback Schrift fest und wählst den Schriftschnitt deiner Font.

Dann lädst du nach und nach deine Font-Dateien zu den entsprechenden Dateiformaten hoch.

Um einen weiteren Schriftschnitt hinzuzufügen, klickst du auf den Button „Add Font Variation“.

Wenn du unten auf „Add new font“ klickst, ist deine Schrift angelegt.

Wenn du Elementor nutzt, kannst du jetzt die Google Fonts direkt über den Pagebuilder lokal hosten. Eine Blitzanleitung findest du hier …

Google Fonts über das Plugin Custom Fonts hochladen

Fonts in Elementor Pro einbinden

In Elementor Pro ist das Hochladen von benutzerdefinierten Schriften sowieso vorgesehen. Du brauchst als Pro-Nutzer also kein Extra-Plugin.

Gehe unter Elementor auf „benutzerdefinierte Schriftarten“, klicke oben „Add new“ und lade hier deine Fonts entsprechend den Formaten hoch.

Leg die verschiedenen Schriftschnitte unbedingt auf einer Schriftfamilie an, damit du später die Schriftschnitte direkt im Pagebuilder festlegen kannst.

Anschließend klickst du auf den Button „Veröffentlichen“.

6. Schriften austauschen

Gehe nun in deinen Customizer und tausche die dort festgelegten Google Fonts gegen die jetzt lokal eingebundenen Schriften aus. Du findest diese jetzt unter den Systemschriften.

Wenn du einen Pagebuilder nutzt, ist es wichtig, die Schriften ebenfalls an einem Ort definiert zu haben. Nutzt du das Hello Theme und Elementor, legst du deine Typography unter den Website-Einstellungen fest.

Egal welchen Pagebuilder du nutzt: Jetzt ist es wichtig, dass in keinem eingefügten Element mehr die im System enthaltenen Google Fonts benutzt werden. Am besten wählst du bei den Elementen sowieso immer „Vorgabe“, damit deine Schriften direkt aus der vom Theme erzeugten CSS-Datei geladen werden.

7. Quellcode checken

Wenn du alle Schriften ausgetauscht hast, kannst du den Cache deiner Website einmal löschen, deine Live-Seite aktualisieren und erneut einen Blick in den Quellcode deiner  Website werfen.

Wenn jetzt immer noch eine Verbindung zum Google Server angezeigt wird, kann die Verbindung durch irgendein Plugin oder eingebettete Inhalte hergestellt werden, z. B. HTML-Code deines Newsletter-Anmeldeformulars, YouTube-Videos.

8. Verbindung zum Google-Server endgültig trennen

Vielleicht nutzt du bestimmte Plugins, die ebenfalls Google Fonts direkt vom Google Server laden. Auch diese Verbindung musst du unbedingt trennen.

Verbindung per Plugin trennen

Es gibt verschiedene Plugins, die du einsetzen kannst, um die letzten Reste deiner dynamischen Google Fonts zu entfernen:

Ein beliebtes Plugin ist  Disable and Remove Google Fonts. Diesen kannst du einfach installieren, aktivieren und schon sollten alle Verbindungen zum Google-Server getrennt sein.

Verbindung per Code trennen

Wenn du Elementor nutzt und dir das Plugin sparen willst, kannst du unter „Design“ →  „Theme Datei Editor“ einen einfachen Code in die functions.php deines Child-Themes einbinden:

				
					/* Keine Google Fonts */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Google Fonts DSGVO-konform einbinden

Gibt es auch Nachteile, wenn ich meine Google Fonts lokal hoste?

Neben all den Vorteilen (z.B. verbesserte Ladezeiten), die durch das direkte Einbinden der Google Schriften entstehen, kann es auch Nachteile geben:

  • Es kann passieren, dass dein Favorit aus deinem Theme gar nicht bei den Google Fonts enthalten ist. So erscheint z. B. die Schrift „Content“ bei den Google Fonts nur als Khmer Schrift. In diesem Fall kannst du dir nur eine andere Schrift aussuchen.
  • Je nach Schrift kann es vorkommen, dass sie auf verschiedenen Endgeräten leicht verändert aussieht. Lass dich davon nicht irritieren: Die Lesbarkeit deiner Schrift steht immer noch Mittelpunkt!

FAQ - Häufige Fragen zu Google Fonts und Datenschutz

Darf ich Google Fonts auf meiner Website verwenden?

Ja, du darfst Google Fonts verwenden. Entscheidend ist, wie du sie einbindest. Werden die Schriftdateien lokal auf deinem eigenen Server gespeichert, muss beim Laden deiner Website keine direkte Verbindung zu den Google-Servern hergestellt werden. 

Warum ist das direkte Laden von Google Fonts problematisch?

Beim dynamischen Laden fordert der Browser die Schriftdateien direkt von Google an. Dabei wird unter anderem die IP-Adresse der Website-Besucherin oder des Website-Besuchers an einen Google-Server übermittelt und das ist nicht datenschutzkonform. Durch das lokale Speichern der Schriften kannst du diese direkte Verbindung vermeiden.

Wie finde ich heraus, ob meine Website Google Fonts von Google lädt?

Öffne deine Website in einem privaten Browserfenster und rufe über einen Rechtsklick die Entwicklerwerkzeuge auf. Suche dort im Quellcode nach Verbindungen zu fonts.googleapis.com oder fonts.gstatic.com. Werden diese Domains angezeigt, lädt deine Website noch Schriftdateien direkt von Google.

Wie kann ich Google Fonts lokal auf meiner Website einbinden?

Lade die benötigte Schriftfamilie herunter und speichere die verwendeten Schriftdateien auf deinem eigenen Webserver. Anschließend legst du die lokale Schrift in deinem Theme oder Pagebuilder an und ersetzt die bisher dynamisch geladenen Google Fonts. Prüfe danach erneut, ob alle Verbindungen zu den Google-Servern entfernt wurden.

Brauche ich Programmierkenntnisse, um Google Fonts lokal einzubinden?

Nein. Viele Themes und Pagebuilder bieten eigene Einstellungen für lokale oder benutzerdefinierte Schriften. Erfahre hier, wie du Google Fonts lokal in Elementor nutzt. Alternativ kannst du ein geeignetes WordPress-Plugin verwenden. 

Nur wenn sich einzelne Verbindungen darüber nicht entfernen lassen, kann eine zusätzliche technische Anpassung erforderlich sein. Das können wir gerne zusammen im Mini-Mentoring machen.

Welche Dateiformate brauche ich für lokal eingebundene Schriften?

Für moderne Websites reicht in der Regel das Format WOFF2 aus. Es ist stark komprimiert und wird von allen aktuellen Browsern unterstützt. WOFF kannst du zusätzlich verwenden, wenn du auch ältere Browser berücksichtigen möchtest. Formate wie TTF oder OTF sind für die Einbindung auf Websites meist nicht notwendig.

Muss ich alle Schriftschnitte einer Google Font hochladen?

Nein. Lade nur die Schriftschnitte und Schriftstärken hoch, die du auf deiner Website tatsächlich verwendest, zum Beispiel Regular 400, Medium 500 oder Bold 700. Jeder zusätzliche Schriftschnitt vergrößert die zu ladende Datenmenge und kann die Ladezeit deiner Website unnötig erhöhen.

Ich bin keine Anwältin und das hier ist keine Rechtsberatung. Wenn du in Fragen rund um Datenschutz & Co. auf Nummer sicher gehen willst, lässt du dich juristisch beraten.

Lies hier weiter:

Google Fonts in Elementor lokal einbinden

Google Fonts in Elementor lokal einbinden

Google Fonts lokal einzubinden klingt komplizierter, als es ist. In Elementor kannst du die Schriften mit wenigen Klicks direkt auf deinem eigenen Server laden. In diesem Mini-Tutorial zeige ich dir Schritt für Schritt, welche Einstellung du aktivieren musst und wie du anschließend prüfst, ob alles richtig funktioniert.
weiterlesen
Schriften kombinieren auf der Website

So kombinierst du Schriften

Schriften spielen viel zu oft eine untergeordnete Rolle auf Website und Social Media. Dabei komplettieren sie den Look, den Du mit Farben und Bildern herstellst und machen Dein Branding einzigartig. Erfahre hier, welche Schriftpaare auf Website und in Social Media zeitlos und schwer angesagt sind.
weiterlesen
Lesbarkeit Website-Texte

Lesbarkeit deiner Website-Texte verbessern

Texte spielen auf deiner Website die Hauptrolle. Der Inhalt, was du schreibst, ist dabei genauso wichtig wie die Gestaltung des Textes auf deiner Website. Die Typographie sorgt für den ersten Eindruck. Und damit dafür, ob der User bleibt. Erfahre, wie du die Lesbarkeit deiner Texte verbesserst.
weiterlesen
]]> https://fraukoenig.de/google-fonts-dsgvo-konform-einbinden/feed/ 8 Vom Website-Besucher zum Newsletter-Abonnenten https://fraukoenig.de/vom-website-besucher-zum-newsletter-abonnenten/ https://fraukoenig.de/vom-website-besucher-zum-newsletter-abonnenten/#comments Sat, 27 Feb 2021 17:23:00 +0000 https://ba22ko1.myraidbox.de/?p=2692

Vom Website-Besucher zum
Newsletter-Abonnenten

So startest du mit E-Mail-Marketing und lässt deine Liste wachsen

Wenn du mit E-Mail-Marketing richtig durchstarten willst, ist ein „Freebie“ mit echter Transformation der richtige Anfang. Der Weg, wie dein Abonnent zum Download deines „Freebies“ kommt, will gut überlegt sein. In diesem Beitrag erfährst du, wie du einen professionellen Auslieferungsprozess erstellst und welche Tools du hierzu brauchst. 

Was ist ein "Freebie"?

Ein „Freebie“ ist ein „Werbegeschenk“, so die Übersetzung laut Google Translation für das sogenannte „Freebie“. Du kannst es zum Preis von 0 Euro herausgeben, wenn sich ein Besucher deiner Website mit seiner E-Mail-Adresse für deinen Newsletter einträgt.

Somit ist das „Freebie“ nicht gratis: Die Währung ohne echten Geldfluss lautet „persönliche Daten“ und als das gelten auch E-Mail-Adressen. Und Bezeichnungen wie „Freebie“, „gratis“ oder „kostenlos“ sind aus diesem Grund auch nicht erlaubt. Unten im Beitrag erfährst du, worauf du in Sachen Datenschutz und Koppelungsverbot achten musst …

Anders als ein Kugelschreiber mit Werbeaufdruck, hilft das „Freebie“ deinem Website-Besucher bei der Lösung eines Problems. Und das erwartet er von deinem „Freebie“ auch.

Denke bei der Erstellung deines "Freebies" also immer aus der Sicht des Nutzers.

Was interessiert den Besucher deiner Website wirklich? Wobei hat er ein kleines Problem, das du lösen kannst?

Zugleich ist dein „Freebie“ deine Arbeitsprobe, die dein Wissen und deine Expertise in deinem Themenbereich aufzeigt.

Beispiele für „Freebies“, die du per Download anbieten kannst, sind:

  • Checkliste
  • Arbeitsblätter
  • Schritt für Schritt-Anleitung
  • Arbeitsplan
  • Worksheet
  • Dateivorlage
  • Grafik
  • Template

Es vereinfacht z. B. den Workflow, liefert wertvolle Informationen, nach denen dein Website-Besucher schon lange gesucht hat, dient ihm als Vorlage, mit der er besser arbeiten kann, zeigt ihm Schritt für Schritt, wie er bei einer konkreten Frage vorgehen muss, motiviert ihn, in die Umsetzung zu kommen, etc. Kurz:

So bekommst du mehr Newsletter-Anmeldungen

Das "Freebie" macht das Leben deines Website-Besuchers schnell schöner, besser, leichter.

Bei deinem „Freebie“ gibt es fast keine formalen und inhaltlichen Grenzen. Achte aber darauf, dass es leicht zu konsumieren ist und den Abonnenten nicht mit seinem Umfang erschlägt. Außerdem musst du es in einem gängigen Dateiformat anbieten, damit der Abonnent es auch öffnen und weiter damit arbeiten kann.

Zum Zeitpunkt der Anmeldung für deinen Newsletter und damit für dein „Freebie“, muss der gesamte Prozess bis zur Auslieferung fertig sein. Denn der Besucher deiner Website, der jetzt zum Abonnenten geworden ist, will nicht auf sein „Freebie“ warten.

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Diese Tools brauchst du, damit dein neuer Abonnent dein "Freebie" als Download bekommt:

1. ein Tool, um Landingpages zu erstellen
2. einen Anbieter für E-Mail-Marketing

Deine Landingpages erstellst du am besten mit einem Pagebuilder. Hier gibt es eine große Auswahl und Qualitätsunterschiede.

Wichtig ist, dass der Pagebuilder mit deinem Theme kompatibel ist. Schau einmal in der Beschreibung deines Themes nach, welcher Pagebuilder hier empfohlen wird.

Ein Pagebuilder, der mit nahezu jedem Theme kompatibel ist, ist Elementor*.

Der weltweit meistgenutzte Pagebuilder bringt als kostenloses Plugin schon eine Menge Tools zum Bau von Landingpages mit. In der PRO-Version (Advanced) für 84 € pro Jahr ist der Pagebuilder unschlagbar.

Anbieter für E-Mail-Marketing gibt es ebenfalls wie Sand am Meer.

Über den Newsletter-Dienstleister erstellst du Anmeldeformulare, verwaltest die E-Mail-Adressen der Abonnenten, versendest automatische E-Mails an neue Abonnenten, schickst deinen regelmäßigen Newsletter an alle Abonnenten und sehr viel mehr.

Ich selbst nutze ActiveCampaign*.
Nach vielen Wochen des Testens von unterschiedlichen Anbietern bin ich davon überzeugt, dass dies der beste E-Mail-Marketing-Anbieter ist.

Egal mit welchem Pagebuilder und welchem E-Mail-Marketing-Anbieter du arbeitest, jetzt nutzt du beides parallel.

So baust du die Anmeldung für dein "Freebie":

1. Erstelle eine Landingpage zur Bewerbung deines Newsletters mit dem "Freebie"

Auf dieser Landingpage bewirbst du dein „Freebie“. Stelle das Ergebnis dar, das erreicht werden kann, zeige die Vorteile, zeige das „Freebie“ als Mockup. Und weil du hier neue Abonnenten gewinnen willst: Stelle dich vor. Binde ein Foto von dir ein und erzähle, wer du bist und was du machst.

Stelle außerdem den Nutzen deines Newsletters dar und erkläre, wie oft deine Abonnenten mit welchen Inhalten rechnen können.

2. Baue ein Anmeldeformular für deine Newsletter-Liste

Dein Anmeldeformular sollte 3 Elemente enthalten:

1. Feld zum Eintrag der E-Mail-Adresse
2. Checkbox zum Einverständnis, die Daten zum Versand des Newsletters und des „Freebies“ zu speichern und zu verarbeiten
3. Abo-Button

Du kannst auch noch ein Feld zur Abfrage des Namens hinzufügen. So kannst du später in deinen E-Mails deinen Abonnenten persönlich ansprechen. Dieses Namensfeld darf aber kein Pflichtfeld sein.

3. Erstelle zwei Landingpages für das Double Opt-In

Die erste Landingpage öffnet sich in dem Moment, wenn der User das ausgefüllte Anmeldeformular abgeschickt hat. Das ist die Danke-Seite.

Auf dieser Seite erklärst du ihm, dass dies der erste Schritt zur Anmeldung war und er eine E-Mail in seinem Postfach vorfindet, worüber er seine Anmeldung bestätigen muss.

Die zweite Landingpage ist die sogenannte Bestätigungsseite. Das ist die Seite, die sich automatisch öffnet, nachdem der User sein Abonnement in der Double Opt-In-Mail bestätigt hat.

Hier gratulierst du ihm, dass sein Abonnement erfolgreich war und er jetzt regelmäßig deinen Newsletter von dir erhält. Baue hier auf jeden Fall einen Call to Action ein. Vielleicht lädst du ihn auf die Warteliste deines Onlinekurses, zu einem Workshop (ebenfalls ein „Freebie“) oder zu einem günstigen Minikurs ein, der das „Freebie“ super ergänzt.

PRO-Tipp:
Halte beide Landingpages möglichst allgemein. Dann kannst du sie auch für weitere Funnel verwenden.

Die URLs von diesen beiden Landingpages brauchst du im nächsten Schritt.

4. Füge die Danke-Seite und die Bestätigungsseite zum Anmeldeformular hinzu

Mit den URLs deiner Danke- und deiner Bestätigungsseite erweiterst du nun das Anmeldeformular um das wichtige Double Opt-In.

Schaue dir an, an welchen Stellen bei deinem Anbieter die jeweilige URL „bei Absendung“ und „Bestätigungsaktion“ einzutragen ist und füge dort die URLs deiner Landingpages ein.

Um einen wirklich professionellen Auslieferungsprozess zu erstellen, nutzt du für das Double Opt-In nicht die Vorlagen deines Newsletter-Anbieters.

5. Schreibe und gestalte die Opt-In-Mail

Verknüpft mit deinem Anmeldeformular ist eine E-Mail, die nach der Anmeldung des Users automatisch an die entsprechende E-Mail-Adresse versendet wird.

Bei einigen Newsletter-Anbietern kannst du nur vorgefertigte Textbausteine verwenden. Bei ActiveCampaign* hast du die Möglichkeit, die Opt-In-Mail individuell mit Foto, Hintergrundfarbe, Schriftarten, Button, etc. zu gestalten.

Wichtigstes Element ist hier der eingebettete Bestätigungs-Button oder Link, worüber der User zum Abonnenten wird.

Achte darauf, dass du nicht nur den Standard-Text, sondern auch den Betreff der Opt-In-Mail anpasst.

6. Verbinde das Anmeldeformular mit deiner Newsletter-Liste

Nur so kommt der neue Abonnent überhaupt auf deine Liste.

Mein Tipp: Arbeite mit nur einer Liste und vergib für verschiedene Aktionen „Tags“. „Tags“ kannst du dir vorstellen wie Post-Its, die du deinen Abonnenten auf die Stirn klebst, damit du weißt, wofür sie sich interessieren. Ein „Tag“ wäre dann z. B. der Name deines „Freebies“.

7. Füge das Anmeldeformular auf deiner Landingpage zur Bewerbung des Newsletters ein

Wenn das Anmeldeformular mit dem gesamten Double Opt-In-Verfahren fertig und mit der richtigen Liste verknüpft ist, kannst du es über einen Code auf deiner zuerst erstellten Landingpage einbauen.

Bei Elementor* nutzt du hierzu das Element „HTML“.

Achte darauf, dass die wichtigsten Infos und das Anmeldeformular inklusive Absende-Button im sichtbaren Bereich deiner Website erscheinen, ohne dass der User scrollen muss – auch auf dem Smartphone und dem Tablet. Diesen Bereich nennt man „Above the fold“.

Oder du erstellst ein Popup mit dem Anmeldeformular und baust auf deiner Landingpage an den strategischen Stellen Buttons ein, worüber sich das Popup öffnet.

8. Erstelle eine Landingpage zum Download deines "Freebies"

An dieser Stelle wirst du zum Profi:
Liefere dein „Freebie“ nicht per E-Mail an deinen neuen Abonnenten aus, sondern biete es zum Download auf einer weiteren, schön gestalteten Landingpage ein.

Der Vorteil: So holst du den Abonnenten wieder auf deine Website zurück – und hier willst du ihn schließlich haben! Du kannst ihn von dieser Landingpage weiter zu den für ihn interessanten Blogbeiträgen oder zu deinem Angebot führen.

Lade dein „Freebie“ unter „Medien“ hoch und kopiere dir den Link zur Datei.

Auf der Download-Page fügst du nun einen kurzen Text zum „Freebie“, ein schönes Foto und einen großen Button ein, den du mit dem Link zur hochgeladenen Datei verknüpfst.

Binde unterhalb des Download-Buttons weiterführende Links ein.

9. Setze die Download-Page und die Landingpages des Double Opt-In auf NoIndex.

Damit niemand diese Seiten über die Suchmaschinen finden kann, musst du ihnen eine unklare URL verpassen. So verhinderst du, dass ein User durch Zufall oder Ausprobieren, auf deine Landingpages kommt.

Über dein SEO-Plugin (z. B. Rank Math oder Yoast SEO) kannst du über Noindex definieren, dass diese Landingpages nicht von Suchmaschinen indiziert und auf den Ergebnisseiten angezeigt werden.

Wenn du auf deiner Website eine interne Suche anbietest, solltest du diese Seiten mit dem Plugin „Search Exclude“ markieren. So werden sie nicht in deinen Suchergebnissen angezeigt.

10. Erstelle eine Automation

Damit der Abonnent zu seinem Datei-Download kommt, legst du bei deinem E-Mail-Anbieter eine Automation an. Das geht entweder über einen separaten Bereich „Automation“, über die Liste oder über das Anmeldeformular.

Bei ActiveCampaign* stehen dir alle drei Möglichkeiten zur Verfügung.

Du kannst in deiner Automation einstellen, dass du über einen neuen Abonnenten per Mail informiert wirst.

Dann erstellst du die erste reguläre E-Mail, die dein neuer Abonnent von dir bekommt.

Hier kannst du dich vorstellen, einen Ausblick auf deinen Newsletter geben und den Link oder Button zur Download-Seite an prominenter Stelle einbauen.

11. Teste den Anmelde- und Auslieferungsprozess

Bevor du die Landingpage zur Bewerbung des Newsletters mit dem „Freebie“ in dein Hauptmenü aufnimmst und auf deiner Startseite platzierst, teste den gesamten Anmeldeprozess einmal durch.

Nutze hierzu unbedingt eine andere E-Mail-Adresse, als diejenige, die beim Newsletter-Anbieter als deine Absende-Adresse eingetragen ist.

Wenn alles funktioniert und du als Abonnent am Ende auf der Download-Seite das „Freebie“ herunterladen kannst, kannst du den gesamten Prozess starten.

"Freebie" gegen E-Mail-Adresse - geht das mit dem Koppelungsverbot überhaupt noch?

Jein.

Du darfst an keiner Stelle verschleiern, dass der Abonnent mit der Anmeldung für das „Freebie“ deinen Newsletter erhält.

Hole dir über eine Checkbox das Einverständnis zur Speicherung der Daten für den Newsletter und das „Freebie“.

Stelle bei der Bewerbung den Newsletter in den Mittelpunkt und erkläre, dass das „Freebie“ 0 Euro bzw. „nur“ die E-Mail-Adresse kostet.

Informiere den User darüber, dass er sich jederzeit vom Newsletter abmelden kann und stelle sicher, dass der Abmeldelink in jeder versandten E-Mail enthalten ist. Das sollte über den Newsletter-Anbieter in der Regel automatisch geschehen.

Verlinke deine Datenschutzerklärung unterhalb deines Anmeldeformulars.

Erkläre in deiner Datenschutzerklärung detailliert, wie die Verarbeitung der Daten von Newsletter-Abonnenten über welchen Anbieter stattfinden.

Und jetzt kommst du:
Hast du schon ein Starter-Produkt? Erzähl doch mal, was du anbietest!

*Werbe-Links
Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Für dich verändert sich am Preis nichts. Infos zu Affiliate-Links findest du in der Datenschutzerklärung. Grundsätzlich bewerbe ich nur Tools und Anbieter, die ich selber nutze und von deren Qualität ich absolut überzeugt bin.

Lies hier weiter:

Bessere Texte schreiben

So schreibst du bessere Texte

Du hast eine tolle Idee für einen Beitrag. Oder der nächste Social-Media-Post drängt. Du schreibst und schreibst, aber dein Content klingt steif und will einfach nicht rund werden! Mit diesen 7 einfachen Schreibtipps formulierst du klarer, lebendiger und verständlicher.
weiterlesen
ki suchergebnisse 2025

Wie komme ich in die Google KI-Suchergebnisse?

Google liefert immer häufiger direkte Antworten, statt nur zehn blaue Links anzuzeigen. Doch wie schaffst du es mit deiner Website in diese KI-Suchergebnisse? In diesem Beitrag erfährst du, worauf Google und KI-Tools achten und wie du deine Inhalte so optimierst, dass deine Expertise sichtbar und zitierfähig wird.
weiterlesen
Übersicht der Bildgrößen für deine Website

Diese Bildgrößen brauchst du auf deiner Website

Welche Bildgrößen braucht deine Website wirklich? Zu große Dateien machen sie langsam, zu kleine Bilder wirken unscharf. In diesem Beitrag erfährst du, wie du Fotos, Grafiken und Icons richtig vorbereitest und welche Maße sich für deine Website eignen. Inklusive Übersicht zum Download.
weiterlesen
]]> https://fraukoenig.de/vom-website-besucher-zum-newsletter-abonnenten/feed/ 4 Website erstellen in 10 Schritten https://fraukoenig.de/website-erstellen/ https://fraukoenig.de/website-erstellen/#respond Wed, 04 Dec 2019 14:51:00 +0000 https://ba22ko1.myraidbox.de/?p=1980

Website erstellen

So bringst du deine WordPress-Website in 10 Schritten online.

In dieser Schritt-für-Schritt-Anleitung lernst du, wie du mit WordPress deine eigene Website an den Start bringst. Du erfährst, welche Einstellungen du vornehmen musst, wo du ein passendes Theme findest, welche Plugins wichtig sind und wie du deinen ersten Blogbeitrag veröffentlichst. Am Ende steigt deine Launchparty! 

Wer ernsthaft ein Online-Business mit einer eigenen Website betreiben möchte, kommt an WordPress nicht vorbei. Auch ohne technische Vorkenntnisse kannst du mit einigen Handgriffen deine eigene Website an den Start bringen. Mit der Schritt-für-Schritt-Anleitung kannst du dir dein Business digital einrichten und schon bald mit genialem Content auf deiner Blogseite durchstarten.

Warum du bei WordPress unbedingt auf WordPress.org setzen solltest, erfährst du hier→ 

Baue deine Website in 10 Schritten auf

Erstelle deine eigene Website ohne Technikfrust und Gedöns! 

Um die volle Kontrolle über Design und Inhalt zu haben, sollte deine Website auf einer Internetadresse (= Domain) laufen, die dir gehört. Vergiss die Baukastensysteme, blogspot.com oder wordpress.com. Wenn du mit deiner Seite wachsen willst, musst du die Chefin sein! Hierfür eignet sich das selbst gehostete WordPress in der .org-Variante.

Den Unterschied zwischen WordPress.com und WordPress.org erfährst du hier … 

Für deinen Start brauchst du keine Programmierkenntnisse. Wichtig ist nur eine ruhige Umgebung, so dass du dich voll und ganz auf deine Website konzentrieren kannst.

Schon bei der Einrichtung von WordPress und den ersten Schritten bis zu deinem ersten Beitrag wirst du viele der wichtigen Funktionen kennen lernen. Mit der Zeit kommen weitere Funktionen und Einstellungen hinzu und du wirst immer sicherer. Das ist dann der Zeitpunkt an dem du feststellst, dass WordPress richtig Spaß macht!

Außerdem: Was soll passieren? Du kannst nichts kaputt machen! Größere „Probleme“ tauchen erst später auf, wenn du weiter in die Tiefen des Systems vordringst. Dann bist du längst Profi und weißt dir zu helfen.

Überblick: Website erstellen in 10 Schritten

  1. Finde deine Domain und sichere sie dir
  2. Installiere WordPress
  3. Passe die Einstellungen an
  4. Wähle dein Theme
  5. Installiere die wichtigsten Plugins
  6. Lege ein Child-Theme an
  7. Passe dein Theme an
  8. Erstelle die wichtigsten Seiten
  9. Lege deine Menüs an
  10. Schreibe deinen ersten Blogbeitrag

Die einzelnen Schritte schauen wir uns jetzt mal genauer an.

1. Finde deine Domain und sichere sie dir!

Der schönste Name wird dir nichts bringen, wenn er als Domain nicht mehr verfügbar ist. Mach dir also eine Liste mit Namen, die in Frage kommen und checke, ob ein Name frei ist.

Vermeide es, beim Namen einen Kompromiss zu machen: Entweder du verwendest deinen eigenen Namen, kreierst einen Markennamen oder verwendest einen Namen der auf das Thema und den Inhalt deiner Webseite hinweist – oder kombinierst alles miteinander!

Welche Domains noch frei sind, kannst du bei einem Webhoster checken. Der Webhoster stellt dir außerdem den Platz für deine Website im Internet zur Verfügung.

Beim Webhoster kannst du dir auch gleich für deinen Start ein einfaches Basis-Paket mit passender E-Mail-Adresse, WordPress-Installation und SSL-Zertifikat zur wichtigen Verschlüsselung deiner Seite buchen.

Worauf du bei der Auswahl eines guten Webhosters achten solltest, erfährst du im Artikel „So findest Du einen guten Webhoster für deine Website und deinen Blog„.

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

2. Installiere WordPress

WordPress ist das weltweit beste und beliebteste Content Management System. Mit der sogenannten 1-Click-Installation deines Webhosters dauert es keine fünf Minuten und Du hast Zugang zu deiner WordPress-Installation.

Nach der Anmeldung landest du im Backend, der Schaltzentrale deiner Website. Hier wirst du ab sofort alle Einstellungen vornehmen, deine Seiten erstellen, Blogartikel schreiben, Fotos hochladen, usw.

Schaue direkt nach der Installation in deinem WordPress-Menü unter „Startseite“ nach, ob WordPress in der aktuellsten Version installiert wurde.

Falls du zu einer Aktualisierung aufgefordert wirst, führe diese direkt durch, bis die Meldung „Du benutzt die aktuelle Version von WordPress“ erscheint.

3. Passe die Einstellungen an

Unter „Einstellungen“ passt du die Grundeinstellungen von WordPress an:

Gehe in deinem WordPress-Backend in der linken Spalte auf „Einstellungen“. 

Unter dem Punkt „Allgemein“ gibst du Titel und Untertitel deiner Website ein, legst die Sprache und die Datums- und Zeitformate fest.

In der Kategorie „Lesen“ kannst du festlegen, ob deine Startseite eine immer gleich bleibende, also statische Seite sein soll oder ob hier deine neuesten Blogbeiträge angezeigt werden sollen.

Um zu definieren, dass deine Leser kommentieren können, musst du unter „Diskussion“ verschiedene Anpassungen vornehmen. Nimm hier unbedingt das Häkchen „Avatare anzeigen“ heraus, denn diese Anzeige ist nicht datenschutzkonform.

Besonders wichtig ist deine Beitrags-URL. Wähle unter „Permalinks“ die Einstellung „Beitragsname“. Damit werden deine Beitragstitel „sprechend“ in die URL übernommen und es erscheinen dort nicht noch irgendwelche Ziffern oder Daten.

4. Wähle dein Theme

Das Gerüst und quasi das Herzstück deiner Website ist dein Theme. Klicke auf „Design“ und „Themes“. Drei Standard-Themes sind bereits von WordPress vorinstalliert, ein Theme ist aktiv.

Um ein anderes Theme auszuwählen, suche dir unter „Hinzufügen“ (oben in der Leiste) aus der Vielzahl kostenloser Vorlagen eines aus.

Hier kannst du mal testen, was zu deiner Nische passt. 

Und: Wenn du dich für ein Theme entschieden hast, kannst du die anderen Themes löschen  – bis auf ein Standard-Theme von WordPress, z. B. Twenty Twenty-Five.

5. Installiere die wichtigsten Plugins

Mit Plugins erweiterst du die Funktionen von WordPress. Sie machen deine Seite sicherer, datenschutzkonform, schneller und schöner.

Bei den Plugins ist die Liste grenzenlos. Es kommt aber vor allem darauf an, welche Features eventuell schon von deinem Webhoster übernommen werden. Wird das Caching vom Hoster übernommen, brauchst du hierzu kein Plugin. Auch wenn dein Hoster täglich Backups erstellt, kannst du dir ein Plugin zur Datensicherung sparen.

Folgende Plugins empfehle ich dir für den Anfang:

  • Antispam Bee hält dir Kommentar- und Trackback-Spam vom Hals.
  • Elementor und Elementor Pro*, damit du alle Bereiche deiner Website easy gestalten kannst.
  • Enable Media Replace, um hochgeladene Medien einfach ersetzen zu können.
  • Rank Math SEO liefert tolle Tools zur Optimierung deiner Inhalte, wie z. B. bis zu 5 Keywords/Keyphrases, die automatisch über Google eingestellt werden können.
  • Search Exclude, wenn du bestimmte Seiten oder Beiträge von der internen Suche ausschließen willst.
  • Shariff Wrapper für datenschutzkonforme Social Media Buttons.
  • Smush optimiert deine Bilder beim Hochladen.
  • UpdraftPlus – Backup/Restore zum Sichern und Wiederherstellen deiner Website zu bestimmten Zeitpunkten.

Du brauchst außerdem ein Opt-In-Cookie-Banner zur Einhaltung der europäischen Datenschutzbestimmungen (DSGVO). Ich empfehle das Borlabs Cookie Plugin*.

Mehr zu diesem Thema erfährst du im Beitrag „Cookies, Pixel, Like-Buttons & Co“

6. Lege dein Child-Theme an

Dein Theme bekommt regelmäßig Updates und die von dir vorgenommenen Anpassungen am Design werden damit überschrieben.

Damit das nicht passiert, und du nicht immer wieder von vorn anfangen musst, hilft dir ein sogenanntes Child-Theme. Hier bleiben alle ursprünglichen Einstellungen des Hauptthemes erhalten. Du musst das Child-Theme aber anlegen, bevor du anfängst, die ersten Designanpassungen vorzunehmen.

Und: Das Child-Theme muss das aktive Theme sein.

7. Passe Dein Theme an

Wenn du deine Website aufrufst, sieht sie längst nicht so aus, wie das in der Vorschau des von dir ausgesuchten Themes versprochen wurde. Du musst erst verschiedene Anpassungen vornehmen, Bereiche definieren, Farben und Schriften festlegen.

Unter „Design“ kannst du im „Customizer“ alle zur Verfügung stehenden Einstellungen vornehmen. Probiere einfach ein bisschen herum. Die Änderungen, die du vornimmst, kannst du sofort auf deiner Website sehen.

8. Erstelle deine wichtigsten Seiten

Als Websitebetreiberin bist du zu einem Impressum und einer Datenschutzerklärung verpflichtet. Diese erstellst du unter „Seiten“.

Wenn du schon dabei bist, verfasse doch gleich auch eine umwerfende „Über mich“-Seite. Darin stellst du dich und dein Thema vor, sprichst deine Zielgruppe direkt an und kannst einige amüsante Fakten über dich erzählen.

Erstelle die Seiten für dein Angebot, eine Kontaktseite und direkt eine Seite für dein Starter-Produkt für 0 Euro (früher „Freebie“), womit du deinen Newsletter aufbaust.

Erfahre hier, wie du aus einem Website-Besucher einen Newsletter-Abonnenten machst.

9. Lege deine Menüs an

Du brauchst mindestens zwei Menüs: ein Menü für deinen Header und ein Menü für deinen Footer. 

Gehe dazu in dein Backend auf „Design“ und wähle hier „Menüs“ aus. Du kannst aus deinen erstellten Seiten oder aber auch aus Kategorien, Beiträgen oder individuellen Links Menüpunkte definieren.

Um dein Menü zu stylen und auf mobilen Endgeräten als „Hamburger Menü“ anzuzeigen, nimmst du im Customizer die entsprechenden Anpassungen vor.

10. Schreibe deinen ersten Blogbeitrag

Du wirst sehen, dass unter „Beiträge“ der WordPress Standard-Artikel „Hello World“ gespeichert ist. Diesen Beitrag kannst du entweder löschen oder aber in deinen ersten Artikel umändern. Ändere unbedingt auch die voreingestellte URL dieses Beitrags.

Auch hier gilt die Devise: Probiere ein bisschen herum. Teste den Gutenberg Editor mit seinen Blöcken auf Herz und Nieren. Du kannst auch hier nichts kaputt machen!

Und wenn dir das Schreiben am Anfang noch schwer fällt: Hier erfährst du, „wie du besseren Content erstellst“.

Launche deine Website mit einer Party

Launche deine Website mit einer Party

Du hast das Gefühl, dass deine Website fertig ist und du bist bereit, sie der Welt zu zeigen? Super: Dein Launch will gefeiert werden! Lade deine besten Freundinnen ein, öffne eine Flasche Sekt. Oder zwei oder drei? Zeige ihnen deine Website und erzähle ihnen, was du damit vorhast.

Aber nicht nur das: Erzähle vor allem auch auf Deinen Social Media-Kanälen von deiner neuen Website. Verlinke sie in deinen Profilen und erzähle auch hier, was du vorhast!

* Die markierten Links sind Affiliate Links. Wenn du hierüber ein Tool kaufst oder ein Abo buchst, erhalte ich eine kleine Vermittlungsprovision. Am Preis für dich ändert sich nichts.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies auch diese Beiträge:

Website-Arten - Was brauchst du für dein Online-Business?

Website-Arten – Was brauchst du zum Start ins Business?

Dass du für dein (Online-)Business eine Website brauchst, müssen wir an dieser Stelle nicht mehr diskutieren, oder? Wenn du startest, kommst du sehr schnell an den Punkt, an dem du dich fragst "Was für eine Website brauche ich eigentlich?". Damit du weißt, welche Website-Art für dich und deine Zielgruppe am besten passt, kommt hier der Überblick.
weiterlesen
Webhoster finden

Webhoster für deine Website

Wenn du deine Website oder deinen Blog an den Start bringen willst, brauchst du einen guten Webhoster. Dieser stellt dir den Speicherplatz für deine WordPress-Installation zur Verfügung und weitere wichtige Tools. Wenn du Angebote vergleichst, wirst du sehen, dass es große Unterschiede beim Webhosting gibt.
weiterlesen
Unterschiede WordPress.com vs. WordPress.org

WordPress.com oder WordPress.org?

Eigentlich ist es doch nur ein klitzekleiner Unterschied in der Domain. Doch was dahinter steckt, ist enorm. Damit du weißt, warum du bei WordPress voll auf .org setzen solltest und für wen .com die bessere Wahl ist und was sich dahinter verbirgt, erfährst du in diesem Beitrag.
weiterlesen
]]> https://fraukoenig.de/website-erstellen/feed/ 0 Website-Aufbau ist wie Gartenarbeit https://fraukoenig.de/website-aufbau-ist-wie-gartenarbeit/ https://fraukoenig.de/website-aufbau-ist-wie-gartenarbeit/#respond Sun, 08 Sep 2019 13:18:00 +0000 https://ba22ko1.myraidbox.de/?p=2667

Website-Aufbau ist wie Gartenarbeit

Von WordPress und Würmern!

Wahrscheinlich weißt du von mir noch nicht, dass ich Gartenarbeit über alles liebe. Es ist der perfekte Ausgleich nach einem langen Tag am Schreibtisch. Die Verspannungen in den Schultern verschwinden von allein, der Kopf wird frei und das Ergebnis vom Unkraut jäten siehst du sofort.

Das war aber nicht von Anfang an so.

Als wir vor fünf Jahren in unser Haus mit Garten zogen, haben wir uns bestens ausgerüstet mit dem stärksten Rasenmäher und dem neuesten Vertikutierer, einer riesigen Heckenschere, einem Häcksler, Gartenschläuchen. Wir kauften natürlich auch Spaten, Harken, Schubkarre, Astschere, Rosenschere, Gartenhandschuhe und vieles mehr.

An meinem ersten Gartentag nahm ich mir ein kleines, komplett von Unkraut zugewachsenes Beet vor. Ganz vorsichtig, nein übervorsichtig arbeitete ich mich von außen an die riesigen Disteln heran.

Mit spitzen Fingern, die in den dicken Handschuhen steckten, nahm ich mir jedes einzelne Blatt vor – gaaaanz vorsichtig und auch ein wenig ängstlich.

Ich schüttelte mich angesichts der dicken Spinnen, die mir über Weg liefen. Ich sah Käfer, die wirklich fies aussahen und von deren Existenz ich bis zu diesem Tag nichts wusste.

Sechs Stunden später war das Beet mehr schlecht als recht hergerichtet. Mir taten alle Knochen weh, denn wann hatte ich schon zuletzt in solch merkwürdiger Haltung körperlich gearbeitet.

Am Abend dieses ersten Gartentages im Herbst 2014 dachte ich tatsächlich, dass es das doch nicht sein kann.

Als dann der Winter kam, hatten mein Mann und ich schon eine ganze Menge im Garten geschafft: Bäume und Sträucher vor die Hecke gepflanzt, neue Beete angelegt, an vielen Stellen Blumenzwiebeln verbuddelt, eine zweite Terrasse gebaut, einen Bereich für den Kompost entrümpelt.

Website-Aufbau gleicht der Gartenarbeit

Ich nutzte die kalte Jahreszeit und las verschiedene Bücher über das Gärtnern. Und über Gartendesign.

Schnell stellte ich fest, dass wir alles, wirklich alles falsch gemacht haben, was man auch nur falsch machen kann:

Wir haben ohne Idee, Konzept und Wissen angefangen!

Und so sah im nächsten Frühling unser Garten auch aus:

Wir konnten die Hecke nicht schneiden, weil die neuen Bäume und Sträucher uns den Platz versperrten. Die Pflanzen und Blumen in den Beeten waren nicht gemäß ihrer Anforderungen an einen Standort platziert. Außerdem passten sie nicht zusammen und nahmen sich gegenseitig den Raum.

Lediglich bei der zweiten Terrasse haben wir einen Zufallstreffer gelandet, denn an dieser Stelle haben wir bis zum Sonnenuntergang Licht.

Ich beschloss, ab jetzt nichts mehr dem Zufall zu überlassen!

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

In jeder freien Minute wälzte ich Bücher und Fachzeitschriften.

Ich lernte, welcher Standort für welche Pflanzen sinnvoll ist und welche Pflanzen gut zusammen passen. Ich ließ mit einem Maßband von Hecke zu Hecke und vermaß unsere Grünflächen. So entstand ein beeindruckender Plan von unserem Garten. Wir machten Fotos von einzelnen Gartenbereichen, die ich dann mit unseren Ideen zur Umgestaltung bekritzelte.

Zu Beginn des Sommers hatten wir dann einen Plan für das große Ganze.

Und: Mein Mann und ich teilten uns die Arbeit in unserem Garten auf, sodass er nicht noch einmal auf die Idee kam, in meinen perfekt geplanten Beeten spontan irgendwelche Blumenzwiebeln zu versenken und ich keine geometrischen Figuren mehr aus den Sträuchern schnitt.

Mein Learning aus dem ersten Gartendesaster:

Es braucht Ideen, Wissen, einen Plan – und Geduld.

Wenn du bis hierher gelesen und noch nicht genervt weggeklickt hast, fragst du dich wahrscheinlich:

WAS WILL MIR DIESE STORY HIER EIGENTLICH SAGEN???

Meine anfänglichen Erfahrungen mit der Gartenarbeit kannst du 1:1 auf deinen Website-Aufbau und dein Online-Business übertragen.

Für deinen Website-Aufbau brauchst du

  • ein Konzept und eine Strategie – sonst wirst du nie fertig und deine Website wird niemals Kunden anziehen.
  • grundlegendes Wissen über dein System und die Tools, die du verwendest und wie sie miteinander verknüpft sind.
  • NICHT alles an Technik, das es gibt.
  • ein Gefühl für die Sprache, die deine Zielgruppe spricht, damit sie dich versteht.
  • eine Idee, besser eine Vision vom großen Ganzen.
  • Geduld, denn du wirst nicht nach ein paar Wochen in den Suchergebnissen bei Google unter den Top-Seiten erscheinen.

Und das sind weitere Parallelen zu meinem Anfang im Garten:

Wenn du mit deinem Website-Aufbau beginnst, weißt du nicht, was deine Handlungen auslösen. Also fasst du die verschiedenen Bereiche mit spitzen Fingern an.

Vor der Arbeit auf dem Server, um Google Analytics oder den Facebook-Pixel einzubinden, hast du Herzklopfen und vielleicht ein wenig Panik – wie ich vor den Spinnen und Käfern.

Wenn Fehler auftreten, bist du aufgeschmissen. Du suchst stundenlang nach dem passenden Video, das dir die Lösung erklärt. Aber dort sieht dann doch alles anders aus, als du es bei dir vorfindest.

Irgendwann, wenn du gelernt hast, wie dein System funktioniert und mit Plan und Strategie am Ball bleibst, wirst du die anfänglichen Berührungsängste mit der Technik und den Tools verlieren. Du wirst erkennen, wodurch Fehler ausgelöst werden und was du dann tun musst.

Du wirst immer weiter in die Tiefen deiner Website, deines Systems vordringen und wenn du es bis auf den Server geschafft hast, wirst du dich ärgern, dass du es nicht schon früher einmal versucht hast.

Genau so ging es mir, als ich vor über 16 Jahren meine erste Website gebaut habe.

Es war ein Lernprozess, den ich 1:1 auf meinen Garten hätte übertragen können. Aber da hatte ich, die Strategin, wohl Tomaten auf den Augen – oder ich war einfach betriebsblind.

Meine Arbeit im Garten sieht heute, 2019, ganz anders aus als zu Beginn:

  • Zur Gartenarbeit ziehe ich die dicken Handschuhe nur noch an, wenn ich die Rosen schneide und die Brennnesseln aus der Hecke herausziehe.
  • Ich wühle mit den bloßen Händen in der Erde und begrüße jeden Käfer, jede Spinne fröhlich.
  • Über den Muskelkater im Frühling freue ich mich sehr, denn ich bearbeite zusammen mit dem Garten auch meine vernachlässigten Körperregionen.
  • Von der angeschafften Ausstattung brauche ich nur einen kleinen Bruchteil. Die meisten Geräte verstauben im Keller.
  • Ich weiß, dass Geduld die wichtigste Eigenschaft ist: Denn ein gepflanzter Baum wird nicht innerhalb von einigen Monaten in den Himmel wachsen.
gartenarbeit 1

Willst du deine Website mit Spaß und Strategie selbst aufbauen?

Wenn du deine umwerfende Website ohne Technikfrust, also ohne Angst vor Spinnen und Käfern, innerhalb von wenigen Wochen launchen willst, hol mich und meine DU KANNST-Methode an deine Seite

Klicke herüber zu meinem Angebot, egal ob

  • du eine komplett neue Website an den Start bringen willst
  • deine Website eine Kernsanierung braucht
  • einzelne Bereiche dich an den Rand des Wahnsinns treiben und du einfach nicht weiterkommst.
Klicke hier zum 1:1 Mentoring

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

Website mit WordPress selbst erstellen

Website mit WordPress selbst erstellen

Wie sieht es mit deiner eigenen Onlinepräsenz aus? Hast Du die Website, die zu 100% zu dir und deiner Nische passt? Mit der du Reichweite aufbauen, deine Angebote im besten Licht zeigen und Kunden anziehen kannst? Erfahre, warum du deine Website selbst erstellen solltest.
weiterlesen
Webhoster finden

Webhoster für deine Website

Wenn du deine Website oder deinen Blog an den Start bringen willst, brauchst du einen guten Webhoster. Dieser stellt dir den Speicherplatz für deine WordPress-Installation zur Verfügung und weitere wichtige Tools. Wenn du Angebote vergleichst, wirst du sehen, dass es große Unterschiede beim Webhosting gibt.
weiterlesen
Unterschiede WordPress.com vs. WordPress.org

WordPress.com oder WordPress.org?

Eigentlich ist es doch nur ein klitzekleiner Unterschied in der Domain. Doch was dahinter steckt, ist enorm. Damit du weißt, warum du bei WordPress voll auf .org setzen solltest und für wen .com die bessere Wahl ist und was sich dahinter verbirgt, erfährst du in diesem Beitrag.
weiterlesen
]]> https://fraukoenig.de/website-aufbau-ist-wie-gartenarbeit/feed/ 0 Cookies, Pixel, Like-Buttons & Co. https://fraukoenig.de/cookies-pixel-like-buttons-co-das-opt-in-ist-pflicht/ https://fraukoenig.de/cookies-pixel-like-buttons-co-das-opt-in-ist-pflicht/#respond Fri, 02 Aug 2019 17:29:00 +0000 https://ba22ko1.myraidbox.de/?p=2088

Cookies, Pixel, Like-Buttons & Co.

Das Opt-In auf deiner Website ist nun Pflicht.

Die DSGVO greift weiter um sich, der Europäische Gerichtshof hat Ende Juli 2019 entschieden: Das einfache Opt-Out ist illegal. Wer seine Website rechtssicher machen will, muss sofort ein Opt-In-Verfahren umsetzen. Die Alternative: Hänge dein Online-Business an den Nagel und werde Ponyzüchter in Island.

Die Sommerpause ist unterbrochen: Während du vielleicht die schönsten Wochen des Jahres verlebst und endlich mal nicht nur ans Business denkst, hat uns der Europäische Gerichtshof Ende Juli einen deftigen Schlag versetzt.

Anwalt und Medien-Experte Dr. Schwenke titelte umgehend:

 

Jetzt mal ehrlich und Hand hoch: Nutzt du den Like-Button? Hast du Instagram und Pinterest auf deiner Website oder deinem Blog eingebunden? Analysierst du den Traffic deiner Seite mit Google Analytics? Liefert dir der Facebook-Pixel wertvolle Hinweise zu deiner Custom Audience und deinen Werbeanzeigen? Laufen bei dir Videos von YouTube oder Vimeo?

Na klar. Schließlich willst du die besten Inhalte zeigen, dich vernetzen, deine Beiträge zum Teilen zur Verfügung stellen, um im Gegenzug auf deiner Website zu zeigen, wie viele Likes deine Beiträge schon eingesammelt haben.

Und vor allem willst du wissen, wer deine Beiträge liest.

Du willst auch wissen, wie alt diese Personen sind, wo sie wohnen und was ihre allgemeinen Interessen sind. Du willst wissen, wie genau der User zu dir kam, wohin er bei dir klickt und an welcher Stelle er deine Website wieder verlässt. Und ob deine Werbeanzeigen ankommen und für Leads oder Conversions sorgen, ist für dich auch wichtig. 

So setzt du das vorgeschriebene Opt-In auf deiner Website um

Es fließen permanent Daten hin und her. Persönliche Daten, so wie das EuGH auch die IP-Adresse eines Internetnutzer seiner privaten E-Mail-Adresse oder seinen Bankdaten gleichsetzt.

Was die Tech-Riesen wie Facebook, Google & Co. mit diesen Daten machen, entzieht sich oft unserer Kenntnis. Na ja, okay, sie zeigen uns Werbung, die aufgrund der über uns angefertigten Nutzerprofile genau auf unsere Interessen abgestimmt werden.

Weil wir als Website-Betreiber mit all den Pixeln und Cookies Daten an sie liefern, sind wir per Gesetz Komplizen, wir sind „gemeinsam verantwortlich“.

Das klingt fast so, als würden wir uns wöchentlich mit Mark Zuckerberg zum Business-Lunch treffen!?

Bevor du jetzt alle Like-Buttons und Pixel von deiner Website wirfst, das hochgefährliche Online-Business an den Nagel hängst und nach Island auswanderst, um Ponys zu züchten …

10K Roadmap zu deiner Website

10K Roadmap

für deine Website, die dir planbar hochwertige Anfragen bringt!

  • Klarheit über Ziel, USP & mehr
  • Reality-Checks statt oberflächlicher Website-Tipps
  • inkl. Prompt für dein Angebot, damit es endlich verkauft

Du kannst dich jederzeit über einen Link in den E-Mails wieder aus dem Newsletter austragen. Weitere Informationen zur Verarbeitung deiner Daten findest du unter Datenschutz.

10K Roadmap zu deiner Website

Du kannst sofort handeln, damit deine Website datenschutzkonform ist!!!

1. Überprüfe deine Datenschutzerklärung, ob du wirklich alle Cookies, Pixel und Social Plugins detailliert aufgelistet hast und detailliert darstellst, wie hier jeweils Daten verarbeitet werden.

2. Tausche deine herkömmlichen Share-Buttons aus und nutze das Plugin „Shariff Wrapper“. Damit kannst du alle gängigen Share-Buttons datenschutzkonform einbauen, denn sie stellen den direkten Kontakt zwischen Social Network und deiner Website erst dann her, wenn der User aktiv auf den Share-Button klickt.

3. Nutze ein Cookie-Banner mit ECHTER Opt-In-Funktion. Hier ist das kostenpflichtige Plugin Borlabs Cookie Banner* (Affiliate Link) zum Preis von 49,- Euro marktführend – und übrigens absolut genial, auch wenn es nicht gerade sexy aussieht. Aber darum geht es beim Datenschutz ja leider nicht.

Du kannst mit dem Plugin deine Cookies in Gruppen verwalten und anzeigen, welche Cookies essenziell sind und welche zu Statistik- und Marketing-Zwecken eingebunden sind.

Zum Einstellen deiner Cookies machst du im Plugin einen Scan, worüber alle Cookies auf deiner Website erkannt werden. Zu den angezeigten Cookies installierst du dann das entsprechende Paket, fügst nur noch deine Tracking-ID ein (und zwar nur hier und sonst nirgendwo!) und kannst datenschutzkonform weiterarbeiten.

Das Plugin beinhaltet außerdem Content-Blocker, sodass externe Inhalte wie z. B. eingebundene Videos von YouTube oder Vimeo, deinen Instagram Feed, Google Maps, Pinterest, Amazon-Produktboxen, etc. erst vom User freigeschaltet werden müssen.

4. Stelle sicher, dass in deiner Datenschutzerklärung ein Widerruf der getroffenen Cookie-Einstellungen enthalten ist, z. B. über einen Button. Damit kann der Besucher deiner Website nach erster Akzeptanz hier das Tracking durch Google, Facebook & Co. wieder abschalten – oder umgekehrt.

5. Baue in ALLEN Formularen Checkboxen ein, um vom User jeweils das ausdrückliche Einverständnis zur Speicherung seiner Daten zu erhalten – bei den Kommentaren , beim Kontaktformular und natürlich der Newsletter-Anmeldung.

Was ist der Unterschied zwischen Opt-In und Opt-Out?

Beim Opt-In wird der Nutzer erst dann getrackt, wenn er dem Tracking aktiv zustimmt. Also wenn jemand auf deine Website kommt, werden erst nach seiner Einwilligung über das Cookie-Banner die Daten an Google, Facebook & Co. übermittelt.

Beim Opt-Out ist es genau umgekehrt. Deine Besucher werden mit dem Aufruf deiner Website sofort getrackt. Wenn sie deine Cookies dann ablehnen, wird das Tracking ausgeschaltet. Das ist nicht datenschutzkonform: Denn das ungewollte Tracking ist bereits erfolgt und die Daten sind bereits von Google, Facebook & Co. gespeichert und verarbeitet.

Dass die Opt-In-Pflicht kommt, war schon im letzten Jahr klar – mit Inkrafttreten der ePrivacy Verordnung steht der Datenschutz bald erneut auf dem Prüfstand.

Wichtig ist Transparenz gegenüber deinen Lesern und Kunden und dass du deine Pixel, Plugins und Buttons mit Bedacht einbaust, einstellst und auf ihre Funktionalität prüfst – immer wieder!

👉 Wie gehst du mit diesem Thema um?

Ich bin keine Anwältin und dies ist keine Rechtsberatung! Dieser Artikel gibt lediglich das wieder, was ich in eigener Recherche zu diesem Thema herausgefunden habe. Ich übernehme keine Gewähr für Richtigkeit, Aktualität und Vollständigkeit meiner Ausführung und keinerlei Haftung für mögliche Rechtsfolgen.

Über die Autorin:

Über Webdesignerin Silke König

Silke König, M.A.

Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 24 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress. Heute unterstützt sie Selbstständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.

Mehr über Silke …

Lies hier weiter:

ki suchergebnisse 2025

Wie komme ich in die Google KI-Suchergebnisse?

Google liefert immer häufiger direkte Antworten, statt nur zehn blaue Links anzuzeigen. Doch wie schaffst du es mit deiner Website in diese KI-Suchergebnisse? In diesem Beitrag erfährst du, worauf Google und KI-Tools achten und wie du deine Inhalte so optimierst, dass deine Expertise sichtbar und zitierfähig wird.
weiterlesen
So erstellst du einen Linktree auf deiner Website

Deine eigene Linkseite für Instagram™

Du bist auf Instagram aktiv und nutzt die beliebte App als Marketing-Kanal? Um deine Follower und User zu deinen besten Inhalten und deinem Angebot zu bringen, steht dir aber nur der eine Link in deiner Bio zur Verfügung. Viele nutzen hier den Dienst Linktr.ee. Doch eine eigene Linkseite für deine Instragram Bio ist mehr als eine Alternative.
weiterlesen
Vom Website-Besucher zum Newsletter-Abonnenten: So kommen deine User in deine Liste.

Vom Website-Besucher zum Newsletter-Abonnenten

Wenn du mit E-Mail-Marketing richtig durchstarten willst, ist ein "Freebie" mit echter Transformation der richtige Anfang. Der Weg, wie dein Abonnent zum Download deines "Freebies" kommt, will gut überlegt sein. In diesem Beitrag erfährst du, wie du einen professionellen Auslieferungsprozess erstellst und welche Tools du hierzu brauchst. 
weiterlesen
]]> https://fraukoenig.de/cookies-pixel-like-buttons-co-das-opt-in-ist-pflicht/feed/ 0