Webdesign – One Step Webdesign

Barrierefreie Website nach BFSG: Wer betroffen ist und was jetzt zu tun ist

Benjamin Bode — Tue, 25 Aug 2026 08:11:00 +0000

Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen zu barrierefreien Websites. Betroffen bist du vor allem dann, wenn Verbraucher auf deiner Website kaufen, buchen oder Termine vereinbaren können. Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen. Technischer Maßstab ist die WCAG 2.1 in der Stufe AA, bei Verstößen drohen Bußgelder bis 100.000 €. In diesem Beitrag erfährst du, ob du handeln musst und wie du am besten vorgehst.

Die gute Nachricht vorweg: Das BFSG ist kein Grund zur Panik, aber ein Grund zum Handeln. Die Schonfrist im Kopf vieler Unternehmer („das dauert doch noch“) ist vorbei. Die Marktüberwachung kontrolliert seit Ende 2025 aktiv, und die Zahl der Abmahnungen steigt. Gleichzeitig ist Barrierefreiheit keine reine Pflichtübung: Sie macht deine Website für alle Besucher besser bedienbar und zahlt nebenbei auf deine Sichtbarkeit bei Google ein.

Ein wichtiger Hinweis zur Einordnung: Ich bin Webdesigner, kein Rechtsanwalt. Dieser Beitrag fasst den Stand August 2026 sorgfältig recherchiert zusammen, ersetzt aber keine Rechtsberatung im Einzelfall. Für die technische Umsetzung auf deiner Website bin ich dagegen der richtige Ansprechpartner.

Was ist das BFSG? Kurz erklärt

Das Barrierefreiheitsstärkungsgesetz setzt den European Accessibility Act der EU (Richtlinie 2019/882) in deutsches Recht um. Es gilt seit dem 28. Juni 2025 und verpflichtet erstmals auch private Unternehmen zur Barrierefreiheit. Vorher betrafen solche Pflichten in Deutschland fast nur öffentliche Stellen.

Der Gedanke dahinter: Millionen Menschen können viele Websites nicht nutzen, weil Texte zu kontrastarm sind, Formulare nicht mit der Tastatur bedienbar oder Bilder für Screenreader unsichtbar. Das BFSG soll sicherstellen, dass digitale Produkte und Dienstleistungen für alle zugänglich sind: für Menschen mit Sehbehinderung genauso wie für ältere Nutzer oder Menschen mit motorischen Einschränkungen.

Wichtig zu verstehen: Das Gesetz knüpft nicht an „Website haben“ an, sondern an das, was deine Website tut. Genau da entscheidet sich, ob du betroffen bist.

Wer ist betroffen und wer nicht?

Für Websites ist der zentrale Begriff die „Dienstleistung im elektronischen Geschäftsverkehr“. Gemeint sind digitale Angebote, die elektronisch und auf individuelle Anfrage eines Verbrauchers erbracht werden, um einen Vertrag anzubahnen oder abzuschließen. Übersetzt heißt das:

Das BFSG gilt in der Regel für dich, wenn:

du einen Online-Shop betreibst, egal wie klein, sobald Verbraucher dort bestellen können
deine Website eine Online-Terminbuchung oder Reservierung anbietet, etwa für Friseur, Praxis, Restaurant oder Werkstatt
du Buchungen, Gutscheine oder kostenpflichtige Anmeldungen direkt über die Website abwickelst
du zu den ausdrücklich genannten Branchen gehörst: Banken, Telekommunikation, Personenverkehr, E-Book-Anbieter

Nicht betroffen bist du in der Regel, wenn:

deine Website eine reine Informations- und Visitenkarten-Website ist: Leistungen, Referenzen, Anfahrt, Telefonnummer
du ausschließlich Geschäftskunden (B2B) ansprichst, denn das Gesetz schützt nur Verbraucher
du als Kleinstunternehmen Dienstleistungen anbietest: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Bilanzsumme

Bleibt die Grauzone, über die Juristen aktuell am meisten diskutieren: das Kontaktformular. Ein einfaches Formular für allgemeine Anfragen gilt überwiegend als unkritisch. Sobald darüber aber gezielt konkrete Leistungen angefragt werden, etwa eine verbindliche Angebotsanfrage mit Terminwunsch, ist die Einordnung nicht abschließend geklärt. Höchstrichterliche Urteile dazu stehen noch aus. Mein pragmatischer Rat: Wer sich in dieser Grauzone bewegt, fährt mit einer barrierefreien Website auf der sicheren Seite und profitiert nebenbei von den Vorteilen für alle Besucher.

Die Ausnahmen im Detail

Kleinstunternehmen: die wichtigste Ausnahme

Kleinstunternehmen, die Dienstleistungen erbringen, sind von den BFSG-Pflichten befreit. Dafür müssen beide Bedingungen gleichzeitig erfüllt sein: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Ein Betrieb mit 4 Mitarbeitern und 3 Millionen Euro Umsatz ist also nicht befreit.

Der häufigste Denkfehler dabei: Die Ausnahme gilt nur für Dienstleistungen. Wer als Kleinstunternehmen Produkte herstellt oder verkauft, muss die Produktanforderungen trotzdem erfüllen. Für den kleinen Online-Shop heißt das in der Praxis: Der Verkauf über die Website ist eine Dienstleistung im elektronischen Geschäftsverkehr, hier greift die Ausnahme, solange die Schwellen eingehalten werden. Im Zweifel lohnt der Blick auf die offiziellen FAQ der Bundesfachstelle Barrierefreiheit oder eine kurze rechtliche Beratung.

Unverhältnismäßige Belastung und grundlegende Veränderung

Daneben kennt das Gesetz zwei Härtefall-Ausnahmen: Wenn die Umsetzung eine unverhältnismäßige Belastung darstellen würde (§ 17 BFSG) oder das Produkt beziehungsweise die Dienstleistung grundlegend verändern würde (§ 16 BFSG), kann davon abgesehen werden. Verlass dich darauf aber nicht leichtfertig: Beide Ausnahmen musst du selbst prüfen, dokumentieren und auf Verlangen der Marktüberwachung belegen. Für eine normale Unternehmenswebsite wird eine unverhältnismäßige Belastung nur selten begründbar sein.

Fristen und Übergangsregeln: Wie viel Zeit bleibt dir?

Die kurze und unbequeme Antwort: Für Websites gibt es keine allgemeine Schonfrist. Der Stichtag war der 28. Juni 2025. Die Übergangsregeln in § 38 BFSG schützen nur ganz bestimmte Altfälle:

Konstellation	Frist	Was das praktisch heißt
Website oder Shop mit laufendem B2C-Angebot	seit 28.06.2025	Muss barrierefrei sein, keine Übergangsfrist
Dienstleistungsverträge von vor dem 28.06.2025	bis Vertragsende, längstens 27.06.2030	Altverträge dürfen unverändert auslaufen
Produkte, die vor dem 28.06.2025 rechtmäßig im Einsatz waren	bis 27.06.2030	Dürfen für die Dienstleistung weiter genutzt werden
Selbstbedienungsterminals (z. B. Ticket- und Geldautomaten)	Ende der Nutzungsdauer, maximal 15 Jahre	Bestandsgeräte genießen den längsten Schutz

Der Punkt, der oft missverstanden wird: Deine Website ist kein „Altvertrag“. Ein Online-Shop oder eine Terminbuchung ist ein laufendes Angebot, das sich täglich an neue Verbraucher richtet. Die Pflicht gilt hier also schon jetzt, nicht erst 2030.

Was verlangt das BFSG konkret von deiner Website?

Das Gesetz selbst bleibt technisch vage, die Details regelt die zugehörige Verordnung (BFSGV). In der Praxis ist der Maßstab die europäische Norm EN 301 549, die für Webinhalte auf die WCAG 2.1 in der Konformitätsstufe AA verweist. Eine aktualisierte Fassung der Norm, die die WCAG 2.2 einbezieht, ist bereits in Arbeit. Wer heute sauber nach WCAG 2.1 AA umsetzt und die wenigen neuen 2.2-Kriterien mitdenkt, ist auf beides vorbereitet.

Hinter den technischen Kürzeln stehen vier einfache Prinzipien. Deine Website muss sein:

Wahrnehmbar: Alt-Texte für Bilder, ausreichende Farbkontraste, Untertitel für Videos, Inhalte nicht nur über Farbe unterscheidbar
Bedienbar: Alles funktioniert per Tastatur, der Fokus ist sichtbar, nichts blinkt unkontrolliert, Zeitlimits sind fair
Verständlich: Klare Sprache, beschriftete Formularfelder, hilfreiche Fehlermeldungen, konsistente Navigation
Robust: Sauberer Code, den auch Screenreader und andere Hilfstechnologien zuverlässig auslesen können

Die Pflicht, die fast jeder übersieht: die Barrierefreiheitserklärung

Neben der Technik verlangt § 14 BFSG von Dienstleistern eine Information zur Barrierefreiheit, oft Barrierefreiheitserklärung genannt. Darin beschreibst du deine Dienstleistung, erklärst, wie die Barrierefreiheitsanforderungen erfüllt werden, und nennst die zuständige Marktüberwachungsbehörde. Diese Informationen müssen selbst barrierefrei, gut auffindbar und dauerhaft verfügbar sein: als eigene Unterseite oder in den AGB. Ausgerechnet diese vergleichsweise einfach umsetzbare Pflicht ist einer der häufigsten Auslöser für Abmahnungen, weil sie mit einem Blick von außen prüfbar ist.

Bußgelder, Abmahnungen, Kontrollen: die Lage im August 2026

Seit Herbst 2025 gibt es eine zentrale Kontrollinstanz: die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) mit Sitz in Magdeburg. Sie prüft auf zwei Wegen: aktiv durch eigene, teils automatisierte Kontrollen und reaktiv auf Beschwerden von Verbrauchern und Verbänden. Im Fokus stehen dabei zunächst Angebote mit großer Reichweite und Anbieter, die bereits negativ aufgefallen sind.

Stellt die Behörde Verstöße fest, fordert sie zunächst zur Nachbesserung auf. Wer nicht reagiert, riskiert Zwangsgelder, im Extremfall die Untersagung des Angebots und Bußgelder: bis zu 100.000 €, wenn eine Dienstleistung ohne die erforderliche Barrierefreiheit erbracht wird, bis zu 10.000 € bei Verstößen gegen Informationspflichten. Erste Bußgeldverfahren laufen, öffentlich dokumentierte Einzelfälle mit konkreten Summen gibt es bislang nicht.

Parallel dazu ist die Abmahnszene aktiv geworden: Seit Ende 2025 steigt die Zahl wettbewerbsrechtlicher Abmahnungen deutlich, häufig wegen fehlender Barrierefreiheitserklärungen. Ob und in welchem Umfang solche privaten Abmahnungen rechtlich durchsetzbar sind, ist allerdings umstritten, erste veröffentlichte Urteile dazu werden für die zweite Jahreshälfte 2026 erwartet. Falls du eine Abmahnung erhältst: nicht vorschnell zahlen oder unterschreiben, sondern anwaltlich prüfen lassen. Daneben können Verbraucher und anerkannte Verbände über die kostenlose Schlichtungsstelle BGG Verstöße geltend machen.

Vorsicht bei „Overlay-Tools“

Anbieter von Overlay-Widgets versprechen Barrierefreiheit per einzeiligem Code-Schnipsel. Die Realität: Solche Tools beheben die Barrieren im Code nicht, gelten unter Fachleuten als unzureichend und stören Screenreader-Nutzer teilweise sogar. Als alleinige Maßnahme schützen sie weder vor der Marktüberwachung noch vor Abmahnungen. Echte Barrierefreiheit entsteht im Code, im Design und in den Inhalten.

So gehst du jetzt vor: der 6-Schritte-Fahrplan

Egal ob du klar betroffen bist oder dich freiwillig verbessern willst: Der Weg zur barrierefreien Website ist planbar. So sieht er in der Praxis aus:

Bei den Quick Wins in Schritt 3 holst du mit wenig Aufwand am meisten heraus. Genau diese Punkte tauchen in Prüfberichten am häufigsten auf: fehlende Alt-Texte, zu schwache Farbkontraste, Formularfelder ohne Beschriftung, ein unsichtbarer Tastatur-Fokus und eine unsaubere Überschriften-Struktur. Auch die Seitenbereiche selbst brauchen Struktur: Wie du Header, Navigation und Inhalt mit sogenannten Landmarks korrekt auszeichnest, zeige ich dir Schritt für Schritt im Beitrag Barrierefreies Webdesign: Landmarks in WordPress richtig nutzen.

Für den ersten Überblick helfen kostenlose Tools wie Lighthouse im Chrome-Browser oder die WAVE-Browsererweiterung. Verlass dich aber nicht allein darauf: Automatische Tests finden erfahrungsgemäß nur einen Teil der Barrieren. Ob ein Formular wirklich per Tastatur bedienbar ist und ob Alt-Texte inhaltlich Sinn ergeben, zeigt erst der manuelle Test.

Fazit: Pflicht für viele, Chance für alle

Das BFSG betrifft deutlich mehr Websites, als viele Unternehmer denken, aber auch weniger, als manche Panik-Schlagzeile suggeriert. Entscheidend sind drei Fragen: Richtet sich dein Angebot an Verbraucher? Kann man online kaufen, buchen oder Termine vereinbaren? Und greift die Kleinstunternehmen-Ausnahme? Wenn du danach zu den Betroffenen gehörst, führt an der Umsetzung kein Weg vorbei, denn die Kontrollen laufen und die Abmahnungen nehmen zu.

Und selbst wenn das Gesetz dich (noch) nicht verpflichtet: Eine barrierefreie Website erreicht mehr Menschen, ist besser bedienbar, lädt meist schneller und wird von Google besser verstanden. Von sauberem, strukturiertem Code profitieren alle Besucher, nicht nur die mit Einschränkungen.

Wenn du wissen willst, wo deine Website steht: Mit meiner Webseiten-Analyse und Beratung prüfe ich deine Website strukturiert, auch auf die typischen BFSG-Stolperstellen, und du bekommst eine klare Prioritätenliste, was sich mit welchem Aufwand beheben lässt. Und wenn eine neue Website ansteht, baue ich sie dir mit meinem WordPress-Webdesign von Anfang an barrierefrei auf, das ist deutlich günstiger als jedes Nachrüsten.

Jetzt Website auf BFSG prüfen lassen

FAQ: Häufige Fragen zum BFSG und barrierefreien Websites

Nein. Das BFSG greift bei Websites vor allem, wenn Verbraucher dort kaufen, buchen oder Termine vereinbaren können, dem sogenannten elektronischen Geschäftsverkehr. Reine Informations-Websites ohne solche Funktionen und reine B2B-Angebote fallen in der Regel nicht darunter. Für öffentliche Stellen gelten eigene, schon länger bestehende Regeln.

Ein einfaches Kontaktformular für allgemeine Anfragen gilt nach überwiegender Einschätzung nicht als Dienstleistung im elektronischen Geschäftsverkehr. Umstritten ist die Lage, wenn über das Formular gezielt konkrete Leistungen oder Termine angefragt werden. Gerichtlich geklärt ist das noch nicht. Wer auf Nummer sicher gehen will, setzt die wichtigsten Barrierefreiheits-Grundlagen trotzdem um.

Nicht für Websites. Die Frist bis zum 27. Juni 2030 gilt nur für Altfälle: Dienstleistungsverträge, die vor dem 28. Juni 2025 geschlossen wurden, und Produkte, die vorher schon rechtmäßig im Einsatz waren. Ein laufender Online-Shop oder eine Terminbuchung richtet sich täglich an neue Verbraucher und muss deshalb schon heute barrierefrei sein.

Die Marktüberwachungsstelle (MLBF) fordert bei Verstößen zunächst zur Nachbesserung auf. Bleibt die aus, drohen Zwangsgelder, Bußgelder bis 100.000 € und im Extremfall die Untersagung des Angebots. Daneben steigt seit Ende 2025 die Zahl der Abmahnungen durch Wettbewerber und spezialisierte Kanzleien, häufig wegen fehlender Barrierefreiheitserklärungen.

Nein. Overlay-Widgets legen nur eine Bedienschicht über die Website, beheben die Barrieren im Code aber nicht. Fachleute und Behindertenverbände bewerten sie als unzureichend, teils sogar als zusätzliche Barriere für Screenreader-Nutzer. Als alleinige Maßnahme bieten sie keinen verlässlichen Schutz vor Bußgeldern oder Abmahnungen. Barrierefreiheit muss im Code, Design und Inhalt umgesetzt werden.

Betroffene Dienstleister müssen nach § 14 BFSG Informationen zur Barrierefreiheit veröffentlichen: eine Beschreibung der Dienstleistung, wie die Anforderungen erfüllt werden und welche Marktüberwachungsbehörde zuständig ist. Die Erklärung muss selbst barrierefrei und leicht auffindbar sein, üblich ist eine eigene Unterseite „Barrierefreiheit“ im Footer oder die Aufnahme in die AGB.

Das hängt stark vom Zustand der Website ab. Quick Wins wie Alt-Texte, Kontraste und Formular-Beschriftungen sind oft mit wenigen Stunden Aufwand erledigt. Eine technisch veraltete Website nachzurüsten kann dagegen teurer werden als ein sauberer Neuaufbau. Am günstigsten ist Barrierefreiheit immer dann, wenn sie von Anfang an mitgeplant wird. Eine Analyse vorab schafft Klarheit über den tatsächlichen Aufwand.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Website erstellen lassen oder selbst machen: Was rechnet sich?

Benjamin Bode — Fri, 21 Aug 2026 10:23:00 +0000

Selbermachen lohnt sich, wenn deine Website wenig kosten darf und Zeit keine große Rolle spielt. Sobald sie aber Kunden gewinnen soll, rechnet sich das Erstellenlassen: Kalkulierst du deine eigene Arbeitszeit ehrlich mit, ist der Profi ab 1.499 € meist günstiger als 50 bis 100 Stunden Eigenbau. In diesem Beitrag bekommst du die komplette Rechnung mit echten Zahlen.

Die Werbung macht es dir nicht leicht: Baukästen versprechen die fertige Website in 30 Minuten, YouTube ist voller WordPress-Tutorials, und gleichzeitig hörst du von Website-Projekten für fünfstellige Beträge. Irgendwo dazwischen stehst du mit einer einfachen Frage: Was ist für mich der klügere Weg?

Zur Transparenz: Ich erstelle beruflich Websites, habe also eine Perspektive in dieser Frage. Genau deshalb rechne ich hier mit offenen Karten: mit echten Preisen, ehrlichen Stundenzahlen aus Kundenprojekten und einer klaren Ansage, in welchen Fällen du besser selbst baust und dein Geld sparst.

Die kurze Antwort: Wann sich welcher Weg rechnet

Die Entscheidung hängt weniger von der Technik ab als von zwei Fragen: Was soll die Website leisten, und was ist deine Zeit wert? Wenn du beides ehrlich beantwortest, ist die Wahl meist in einer Minute getroffen:

Selbermachen passt zu dir, wenn:

die Website ein Hobbyprojekt, eine Vereinsseite oder ein Testballon ist
dein Budget unter etwa 1.000 € liegt und das auch so bleiben muss
du 50 bis 100 Stunden Zeit hast und Lust, dich in Technik einzuarbeiten
die Seite keine Kunden gewinnen muss, weil Aufträge über andere Wege kommen

Erstellen lassen rechnet sich für dich, wenn:

die Website Anfragen und Kunden bringen soll, also ein Geschäftswerkzeug ist
deine Arbeitszeit in deinem Geschäft mehr wert ist als im Website-Basteln
du bei Google gefunden werden willst und Design, SEO und Recht nicht selbst beurteilen kannst
die Website schnell live gehen soll statt in drei bis sechs Monaten
du einen Ansprechpartner willst, der auch nach dem Livegang erreichbar bleibt

Der unterschätzte Posten: deine eigene Arbeitszeit

Beim Vergleich der Wege wird fast immer nur Geld gegen Geld gerechnet: ein paar Euro Baukasten-Abo gegen ein Agentur-Angebot. Der größte Kostenblock fehlt in dieser Rechnung komplett, nämlich deine Arbeitszeit. Eine Website entsteht nicht durch das Abo, sondern durch die Stunden, die jemand hineinsteckt.

Aus Kundenprojekten und aus Gesprächen mit Selbermachern sehe ich immer wieder dieselbe Größenordnung: 50 bis 100 Stunden vergehen, bis eine kleine Firmenwebsite wirklich fertig ist. Nicht am Stück, sondern verteilt über Wochen und Monate, in Abenden und Wochenenden. So verteilen sich diese Stunden typischerweise:

Der tückische Teil daran: Die ersten 80 Prozent gehen schnell und machen sogar Spaß. Die letzten 20 Prozent kosten die meiste Zeit, also genau die Dinge, die eine Website professionell machen: saubere mobile Darstellung, Ladezeit, Texte, die verkaufen, und die rechtlichen Pflichtangaben. Viele Selbstbau-Projekte bleiben genau an dieser Stelle monatelang auf 80 Prozent stehen, und so lange bringt die Website keinen einzigen Kunden.

Das Rechenbeispiel: Vollkosten über drei Jahre

Rechnen wir es durch. Damit deine Arbeitszeit in der Rechnung auftaucht, braucht sie einen Preis. Ich setze bewusst vorsichtige 50 € pro Stunde an: Das ist der untere Rand dessen, was Webdesign-Freelancer in Deutschland üblicherweise berechnen, und für die meisten Selbstständigen eine realistische Untergrenze des eigenen Stundensatzes. Verdienst du mehr, fällt die Rechnung noch deutlicher aus.

Die Geldkosten stammen aus meinem großen Vergleich zwischen WordPress und KI-Baukästen (Preise: Stand August 2026): Werbefreie Baukasten-Tarife kosten über drei Jahre etwa 400 bis 1.070 €, selbst gehostetes WordPress rund 360 €, und eine professionell erstellte Website gibt es bei mir ab 1.499 € zzgl. USt. plus Hosting. So sieht die ehrliche Gesamtrechnung aus:

Weg	Geldkosten in 3 Jahren	Deine Arbeitszeit	Arbeitszeit in Euro (50 €/h)	Vollkosten
KI-Baukasten (werbefreier Tarif)	ca. 400 bis 1.070 €	ca. 40 Stunden	2.000 €	ca. 2.400 bis 3.100 €
WordPress selbst gemacht	ca. 360 €	ca. 60 Stunden	3.000 €	ca. 3.360 €
Erstellen lassen (ab 1.499 €)	ca. 1.860 € inkl. Hosting	ca. 8 Stunden Zuarbeit	400 €	ca. 2.260 €

Das Ergebnis überrascht die meisten: Sobald die eigene Zeit einen Preis bekommt, ist der vermeintlich teure Profi-Weg der günstigste. Dabei liegen die 60 Stunden für den Eigenbau bewusst im unteren Bereich der Spanne: Wer seine Stunden ehrlich aufschreibt, landet oft deutlich höher, und die Rechnung kippt noch klarer. Und dabei ist noch nicht berücksichtigt, dass am Ende zwei sehr unterschiedliche Websites herauskommen: In einem Fall das erste Werk eines Anfängers, im anderen das Ergebnis von jemandem, der das jede Woche macht. Eine detaillierte Aufschlüsselung aller Kostenpunkte findest du im Beitrag zu den Kosten einer WordPress-Website.

Zeit oder Geld: Eines von beiden investierst du immer

Es gibt keine Website zum Nulltarif. Entweder du bezahlst mit Geld oder mit deiner Zeit. Die einzige wirklich teure Variante ist die halbe Investition: viele Stunden hineinstecken und trotzdem mit einer Website leben, die keine Kunden bringt. Entscheide dich für einen Weg und geh ihn dann konsequent.

Die versteckten Kosten, die auf keiner Rechnung stehen

Die Vollkosten-Rechnung oben ist schon ehrlicher als die üblichen Vergleiche. Vollständig ist sie trotzdem nicht, denn drei Posten lassen sich schwer in Euro fassen und entscheiden in der Praxis oft mehr als der Preis:

Entgangene Aufträge während der Bauzeit

Jede Stunde am Website-Projekt ist eine Stunde, die nicht in dein Geschäft fließt: keine Angebote, keine Kundentermine, keine Akquise. Und solange die Website nicht fertig ist, wirbt sie auch nicht für dich. Drei bis sechs Monate Bauzeit sind drei bis sechs Monate ohne Anfragen über die Website. Dieser Posten taucht in keiner Kalkulation auf, kostet aber real am meisten.

Das Ergebnis wirkt, bevor du ein Wort sagst

Besucher entscheiden in wenigen Sekunden, ob sie dir vertrauen. Eine selbst gebaute Website mit unscharfen Bildern, uneinheitlichen Abständen und Texten, die um den heißen Brei schreiben, kostet dich Anfragen, ohne dass du es je erfährst: Die Besucher kommen, schauen und gehen wieder. Dazu kommen die unsichtbaren Baustellen Ladezeit, mobile Darstellung und SEO-Grundlagen, an denen sich entscheidet, ob dich überhaupt jemand findet.

Recht und Datenschutz ohne Sicherheitsnetz

Impressum, Datenschutzerklärung, Cookie-Einwilligung, DSGVO-konforme Formulare: Für all das bist du als Betreiber verantwortlich, auch wenn du es nicht kennst. Bei Kundenprojekten sehe ich regelmäßig übernommene Selbstbau-Websites mit fehlender Einwilligung im Kontaktformular oder veralteter Datenschutzerklärung. Das sind vermeidbare Risiken, die im schlimmsten Fall teurer werden als die ganze Website.

Und noch ein Muster aus der Praxis: Viele Selbstbau-Projekte landen nach ein bis zwei Jahren doch beim Profi, weil die Website nicht liefert. Dann wurde doppelt gebaut und doppelt bezahlt, erst mit Zeit, dann mit Geld. Wer absehbar wachsen will, spart mit dem direkten Weg zum Profi genau diese zweite Runde.

Was du bekommst, wenn du deine Website erstellen lässt

Damit die Rechnung fair bleibt, gehört auch die andere Seite auf den Tisch: Was steckt eigentlich in einem Website-Projekt vom Profi? Zur Einordnung der Marktpreise: Webdesign-Freelancer in Deutschland rechnen üblicherweise mit Stundensätzen ab etwa 50 €, erfahrene deutlich mehr, und Business-Websites liegen im Markt häufig zwischen 2.000 und 8.000 €. Bei mir startet eine professionelle WordPress-Website bei 1.499 € zzgl. USt., eine umfangreichere Business-Website bei 2.999 €.

In diesem Preis steckt weit mehr als das Zusammenklicken von Seiten: ein Konzept, das von deinen Kunden aus gedacht ist, ein Design, das zu deinem Unternehmen passt, saubere Technik mit ordentlicher Ladezeit, die SEO-Grundlagen für die Sichtbarkeit bei Google, rechtssichere Pflichtseiten und Formulare und ein Ansprechpartner, der auch nach dem Livegang erreichbar ist. Als Webdesigner aus der Region Hannover arbeite ich dabei mit vielen Kunden auf kurzem Draht, persönlich oder remote.

Deine Rolle dabei ist überschaubar und trotzdem wichtig: Du lieferst das Wissen über dein Geschäft, Bilder und Feedback in zwei bis drei Abstimmungsrunden. Das sind die rund 8 Stunden Zuarbeit aus der Tabelle oben. Den Rest übernimmt der Profi, und genau dafür bezahlst du ihn.

Wann Selbermachen die richtige Wahl ist

Jetzt die versprochene ehrliche Ansage: Es gibt Fälle, in denen ich vom Beauftragen abrate. Wenn deine Website ein Hobbyprojekt ist, ein Verein dahintersteht oder du schlicht keine 1.500 € übrig hast, dann bau selbst. Eine selbst gebaute Website, die online ist, schlägt jede professionelle Website, die am Budget scheitert. Auch wer echtes Interesse an Webtechnik hat und die Stunden gern investiert, fährt mit dem Selbstbau gut, denn das Gelernte bleibt.

Für den Selbstbau hast du zwei Wege: einen KI-Baukasten für den schnellen, einfachen Start oder WordPress, wenn die Seite wachsen soll. Welcher der beiden zu dir passt, klärt mein ausführlicher Vergleich WordPress oder KI-Baukasten. Und wenn du mit WordPress starten willst, ohne dich allein durchzubeißen: In meinen WordPress-Schulungen lernst du den Umgang mit deiner Website an deinem eigenen Projekt.

Fazit: Rechne ehrlich, dann fällt die Entscheidung leicht

„Website erstellen lassen oder selbst machen?“ ist am Ende keine Technikfrage, sondern eine Rechenaufgabe mit zwei Währungen: Geld und Zeit. Für Hobbyprojekte, Vereine und kleine Budgets gewinnt das Selbermachen, und das völlig zu Recht. Sobald die Website aber Kunden gewinnen soll, kippt die Rechnung: Mit ehrlich bewerteter Arbeitszeit ist der Profi ab 1.499 € meist die günstigste Variante, und die einzige, bei der ein professionelles Ergebnis garantiert herauskommt.

Denn darum geht es bei einer Unternehmenswebsite am Ende: Sie ist kein Selbstzweck und kein Technikprojekt, sondern dein Werkzeug, um Kunden zu gewinnen. Die entscheidende Frage ist deshalb nicht, welcher Weg weniger kostet, sondern welcher mehr zurückbringt.

Wenn du den Profi-Weg gehen willst, schau dir mein WordPress-Webdesign ab 1.499 € an. Und wenn du unsicher bist, wo du stehst, oder eine bestehende Selbstbau-Website hast, die nicht liefert: Mit einer Webseiten-Analyse finden wir gemeinsam heraus, ob sich ein Neuaufbau lohnt oder gezielte Verbesserungen reichen.

Website jetzt erstellen lassen

FAQ: Häufige Fragen zu Website erstellen lassen oder selbst machen

Im deutschen Markt liegen kleine Business-Websites vom Freelancer meist zwischen 1.500 und 5.000 €, Agenturprojekte häufig darüber. Bei One Step Webdesign startet eine professionelle WordPress-Website bei 1.499 € zzgl. USt., eine umfangreichere Business-Website bei 2.999 €. Dazu kommen laufende Hosting-Kosten von etwa 10 € pro Monat.

Für eine kleine Firmenwebsite solltest du 50 bis 100 Arbeitsstunden einplanen: Einarbeitung, Design, Texte, Bilder, Recht und Fehlersuche. Da diese Stunden neben dem Tagesgeschäft anfallen, ziehen sich Selbstbau-Projekte in der Praxis oft über drei bis sechs Monate, bis die Website wirklich fertig ist.

Ja, mit Gratis-Tarifen von Baukästen. Der Preis dafür sind Werbeeinblendungen, eine Subdomain des Anbieters statt einer eigenen Domain und stark eingeschränkte Funktionen. Für private Projekte kann das reichen. Für ein Unternehmen wirkt es unprofessionell und schadet mehr, als es spart: Deine Website ist dein digitales Aushängeschild.

Sobald die Website Kunden gewinnen soll: ja. Rechnet man die eigene Arbeitszeit ehrlich mit, etwa zu 50 € pro Stunde, ist die professionelle Erstellung ab 1.499 € über drei Jahre meist günstiger als 50 bis 100 Stunden Selbstbau. Dazu kommt das bessere Ergebnis bei Design, SEO, Recht und Ladezeit.

Dein Wissen über dein Geschäft und deine Kunden, vorhandene Bilder oder ein kurzes Fotoshooting sowie Feedback in zwei bis drei Abstimmungsrunden. Rechne mit rund 8 Stunden Zuarbeit über die Projektlaufzeit. Texte, Design, Technik, SEO-Grundlagen und die rechtlichen Pflichtseiten übernimmt der Webdesigner.

Für schnelle, einfache Projekte ohne Wachstumspläne ist ein KI-Baukasten der bequemste Weg. Soll die Website wachsen, dir gehören und bei Google sichtbar werden, lohnt sich die Einarbeitung in WordPress. Den ausführlichen Vergleich mit Preisen und Grenzen beider Wege findest du im Beitrag WordPress oder KI-Baukasten.

Das entscheidest du. Inhalte wie Texte, Bilder oder Neuigkeiten pflegst du nach einer Einweisung problemlos selbst, gerade WordPress ist dafür gemacht. Für Updates, Backups und Sicherheit kannst du eine Wartung dazubuchen oder sie nach einer WordPress-Schulung selbst übernehmen.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Trennlinie animieren

Benjamin Bode — Wed, 19 Aug 2026 18:00:11 +0000

Elementor bietet beim Aufbau einer Webseite Abschnitte, Spalten und Elemente, auf neueren Seiten übernehmen Container diese Rolle. Bearbeitest du einen Abschnitt oder Container, kannst du im Stil-Tab eine sogenannte Trennlinie hinzufügen. Hier gibt es verschiedene Designs, zum Beispiel Berge, Tropfen, Pyramide oder auch Wellen.

Schon einige Male habe ich mich gefragt, wie man diese Elemente animieren kann. Schließlich sieht eine bewegte Welle (als Trennlinie) auf einer maritimen Website ziemlich cool aus.

Die Lösung sind wenige Zeilen CSS: Du fügst dem Abschnitt eine Trennlinie hinzu und animierst sie anschließend mit einer kleinen Keyframe-Animation. Den fertigen Code und die genauen Schritte zeige ich dir in diesem Beitrag, mit und ohne Elementor Pro.

Setup: Plugins und Theme

Für diese Anleitung nutze ich eine WordPress-Installation mit dem Kadence Theme und Elementor. Das Theme spielt für die Animation der Trennlinie keine Rolle, es funktioniert mit jedem klassischen WordPress Theme.

Elementor Trennlinie animieren

1. Webseite mit Elementor öffnen und einen Abschnitt auswählen

Im ersten Schritt öffne ich eine Webseite mit Elementor, damit ich diese bearbeiten kann. Auf der Webseite sollte schon Inhalt sein, der in mehrere Abschnitte gegliedert ist (sonst wird es mit der Trennlinie zwischen den Abschnitten schwer). Nun wählt man den Abschnitt an, dem die Trennlinie hinzugefügt werden soll.

2. Unter Abschnitt bearbeiten auf Stil klicken und Trennlinie hinzufügen

Jetzt in der linken Bearbeiten-Spalte auf den Reiter Stil klicken. Unter Trennlinie Form kann nun ausgewählt werden, ob die Trennlinie den ausgewählten Abschnitt nach oben oder nach unten abgrenzen soll. In meinem Beispiel entscheide ich mich für Trennlinie oben und wähle unter Typ die Trennlinienform Wellen aus. Zudem lege ich noch eine Farbe für die Trennlinie fest.

Hervorragend, die Trennlinie ist angelegt. Nun muss diese noch animiert werden. Hierfür müssen ein paar Zeilen CSS Code ergänzt werden.

3. Für die Animation den CSS Code hinzufügen

Jetzt gilt es den folgenden CSS Code unserer Webseite hinzuzufügen:

body { overflow-x:hidden; }
.elementor-shape-bottom,
.elementor-shape-top
{
    animation: wave 8s cubic-bezier( 0.45, 0.45, 0.63, 0.53) infinite;
    width: 220%;
}
@keyframes wave {
    0% { margin-left: 0; }
    50% { margin-left: -1200px; }
    100% { margin-left: 0px; }
}

Wenn du Elementor Pro verwendest, ist das Hinzufügen des Codes super einfach. Nutzt du Elementor in der kostenfreien Variante, dann können wir den Code auch hinzufügen, allerdings etwas umständlicher, indem wir auf den Customizer zurückgreifen.

CSS Code mit Elementor Pro hinzufügen

Lesetipp

Du möchtest wissen, ob Elementor Pro für deine Zwecke geeignet ist? Dann lies jetzt: Elementor Pro: Wann lohnt sich der Kauf?

Wie schon gesagt, ist das Hinzufügen von zusätzlichem Code mit Elementor Pro ein Kinderspiel. Klicke einfach unter Abschnitt bearbeiten auf den Reiter Erweitert und füge dann unter Eigenes CSS den Code ein.

Voilà, Trennlinie ist animiert.

Da wir den Code direkt eingefügt haben, während der entsprechende Abschnitt ausgewählt ist, wird die Trennlinie ausschließlich für diesen Abschnitt animiert.

CSS Code im Customizer hinzufügen (kostenfreie Elementor Variante)

In der kostenfreien Variante von Elementor ist das Feld für individuelles CSS gesperrt, es bleibt der Pro-Version vorbehalten. Ist aber halb so wild: Wir verlassen Elementor und öffnen den Customizer (Dashboard › Design › Customizer). Bei einem guten WordPress Theme kannst du dort unter Zusätzliches CSS eigenen Code hinterlegen. Füge den Code dort ein. Alternativ funktioniert auch ein Code-Snippets-Plugin, falls dein Theme keinen Customizer mehr anbietet.

Ist dies erledigt, dann klicke im Customizer auf den Button veröffentlichen. Anschließend sollte die Elementor Trennlinie animiert sein.

Da der CSS Code im Customizer hinzugefügt wurde, gilt die Animation nun für alle Trennlinien; soll heißen: Alle Trennlinien deiner Website sind nun gleichermaßen animiert.

Fazit

Mit Elementor ist es wirklich ziemlich einfach, die Trennlinien zu animieren beziehungsweise diese in Bewegung zu versetzen. Gerade bei maritimen Webseiten sorgen bewegte Wellen-Trennlinien für das gewisse Extra, vorausgesetzt es wird mit den Animationen nicht übertrieben. Doch dies liegt bekanntermaßen auch immer im Auge des Betrachters.

Das Schöne: Elementor Pro wird nicht zwingend benötigt, um die Trennlinien zu animieren. Auch mit der kostenfreien Variante von Elementor können Trennlinien mit einer Animation versehen werden, indem der entsprechende CSS Code im Customizer des Themes hinzugefügt wird.

Nichtsdestotrotz macht das Arbeiten mit Elementor Pro an vielen Stellen mehr Spaß und bietet auch deutlich mehr Funktionen als die kostenfreie Variante von Elementor. Sollten dich die Vorteile der Pro-Version interessieren, dann gelangst du hier zur Website von Elementor.

Du wünschst dir solche Design-Details auf deiner Website, möchtest sie aber nicht selbst umsetzen? Dann sieh dir das WordPress Webdesign von One Step Webdesign an: Wir gestalten deine Website mit durchdachten Animationen und einem stimmigen Gesamtbild.

Häufige Fragen zur animierten Elementor Trennlinie

Nein. Die Animation entsteht durch wenige Zeilen CSS. Mit Elementor Pro fügst du den Code bequem direkt am Abschnitt unter Erweitert und Eigenes CSS ein. In der kostenfreien Variante hinterlegst du denselben Code im Customizer deines Themes unter Zusätzliches CSS oder über ein Code-Snippets-Plugin.

Prüfe zuerst, ob der CSS-Code vollständig übernommen und gespeichert wurde, inklusive des @keyframes-Blocks. Danach den Website-Cache leeren und die Seite neu laden. Wichtig ist außerdem, dass deine Trennlinie über den Stil-Tab des Abschnitts angelegt wurde, denn der Code spricht genau diese Trennlinien-Klassen von Elementor an.

Ja. Auch bei den neueren Elementor-Containern fügst du die Trennlinie im Stil-Tab hinzu. Elementor verwendet im Hintergrund dieselben Klassen, daher greift der CSS-Code aus dieser Anleitung unverändert.

Ja, mit Elementor Pro: Fügst du den Code als Eigenes CSS direkt am Abschnitt ein, gilt die Animation nur für diesen Abschnitt. Der Code im Customizer wirkt dagegen auf alle Trennlinien deiner Website.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Link Farbe ändern

Benjamin Bode — Wed, 19 Aug 2026 17:39:02 +0000

Aufgrund der zahlreichen Designoptionen ist Elementor eine großartige Wahl für alle, die eine individuell angepasste Webseite erstellen möchten, ohne dabei selbst Code programmieren zu müssen. Die kurze Antwort vorweg: Global änderst du die Elementor Link Farbe über das Elementor-Logo oben links im Editor unter Website-Einstellungen › Typografie › Link. In diesem Beitrag zeige ich dir die Schritte im Detail, sowohl global als auch für einzelne Abschnitte und Spalten.

Mit dem Page Builder Elementor kann sehr einfach die Linkfarbe angepasst werden. Hierbei kann man einerseits die „normale“ Farbe des Links einstellen, als auch eine Hover-Farbe, also jene Farbe, die der Link haben soll, wenn man diesen mit dem Mauszeiger berührt.

Die Elementor Link Farbe lässt sich auf verschiedenen Ebenen festlegen: Für die gesamte Website, für einen ausgewählten Abschnitt oder für eine ausgewählte Spalte. Dies hat den Vorteil, dass du ganz genau festlegen kannst, wo welche Linkfarbe zum Einsatz kommen soll.

Elementor Link Farbe ändern: Abschnitt oder Spalte

Arbeitest du auf einer bestehenden Seite mit klassischen Abschnitten und Spalten, sind das die Schritte, um die Farbe der jeweiligen Links anzupassen:

Elementor öffnen: Öffne zunächst den Page Builder Elementor und wähle den Bereich aus, in dem die Linkfarbe angepasst werden soll. Hierbei kann entweder ein bestimmter Abschnitt oder eine bestimmte Spalte ausgewählt werden.
Klicke auf das Icon, um den Bereich (oder die Spalte) zu bearbeiten.
Wähle nun den Stil-Tab an. Unten links sollte nun der Bereich „Typografie“ erscheinen.
Hier hast du die Möglichkeit, die Linkfarbe sowie die Linkfarbe bei Mauszeigerkontakt anzupassen.
Klicke auf „Speichern“ und überprüfe das Ergebnis auf der Website.

Baut deine Seite stattdessen auf den neueren Containern auf, findest du dieselben Einstellungen im Stil-Tab des Containers unter Typografie. Das Prinzip bleibt gleich: Bereich anklicken, Stil-Tab öffnen, Linkfarbe festlegen.

Elementor Link Farbe ändern: Globale Einstellung

Die Elementor Link Farbe kann auch global geändert werden. Dies hat den Vorteil, dass man nicht für jeden Abschnitt einzeln die Linkfarbe festlegen muss. Durch das Anpassen der Linkfarbe auf globaler Ebene, werden die Links der gesamten Website angepasst.

Elementor öffnen: Öffne zunächst den Page Builder Elementor.
Klicke oben links in der Leiste auf das Elementor-Logo. (In älteren Elementor-Versionen ist es an gleicher Stelle ein Icon aus drei Balken.)
Wähle nun den Reiter „Website-Einstellungen“ an.
Klicke auf „Typografie„.
Scrolle zur Sektion Link. Über die beiden Tabs Normal und Hover legst du die Linkfarbe und die Farbe bei Mauszeigerkontakt fest.
Klicke abschließend auf „Speichern“ und überprüfe das Ergebnis auf der Website.

Gut zu wissen: Elementor V4 und das Design System

Seit 2026 stellt Elementor schrittweise auf die neue Version 4 um. Neue Seiten bauen dort auf sogenannten Atomic Elements auf, und globale Farben verwaltest du zusätzlich über das Design System (das Tropfen-Icon in der oberen Leiste). Für bestehende Websites ändert sich nichts: Die Website-Einstellungen mit der Typografie-Sektion aus dieser Anleitung bleiben erhalten und steuern weiterhin die Linkfarben deiner klassischen Widgets.

Du interessierst dich für Elementor?

Fazit

Das Anpassen der Linkfarben in Elementor ist super einfach. Du kannst dies entweder für die gesamte Website machen, als auch für jeden Abschnitt oder jede Spalte individuell. Die Einstellungen, die für einen Abschnitt oder eine Spalte getroffen wurden, überschreiben jedoch die globalen Einstellungen. Dementsprechend empfehle ich dir, zunächst die globalen Einstellungen in Elementor anzupassen. Anschließend kannst du (je nach Bedarf) einen Abschnitt auswählen und explizit dort die Elementor Link Farbe ändern.

Du kommst bei Elementor an einer anderen Stelle nicht weiter oder deine Website macht Probleme? Mit der WordPress Soforthilfe von One Step Webdesign bekommst du schnelle Unterstützung, auch bei Elementor-Themen.

Häufige Fragen zur Elementor Link Farbe

Öffne den Elementor-Editor und klicke oben links auf das Elementor-Logo. Wähle Website-Einstellungen, dann Typografie. In der Sektion Link legst du über die Tabs Normal und Hover die Farben für alle Links deiner Website fest.

Meist überschreibt eine speziellere Einstellung die globale: Farben, die direkt am Widget, am Abschnitt oder an der Spalte gesetzt sind, haben Vorrang vor den Website-Einstellungen. Prüfe diese Ebenen und entferne dort abweichende Farben. Danach hilft oft noch ein Leeren des Website-Caches, damit die Änderung sichtbar wird.

Ja. Sowohl in den Website-Einstellungen als auch am Abschnitt gibt es dafür den Tab Hover. Die dort gewählte Farbe erscheint, sobald der Mauszeiger den Link berührt.

Für bestehende Websites ja: Die Website-Einstellungen mit der Typografie-Sektion bleiben in Elementor V4 erhalten. Nur bei neuen Seiten aus Atomic Elements stylst du Links direkt am Element oder über das Design System in der oberen Leiste.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

WordPress Theme Vergleich 2026: Astra, OceanWP oder Kadence?

Benjamin Bode — Tue, 18 Aug 2026 22:21:29 +0000

Astra und OceanWP sind auch 2026 beide eine gute Wahl: Astra ist das schlankere und aufgeräumtere Theme, OceanWP bietet kostenlos den größeren Funktionsumfang, vor allem für WooCommerce. Einen heimlichen Gewinner gibt es trotzdem: Nach vielen Kundenprojekten empfehle ich heute meist Kadence, das im ursprünglichen Vergleich von 2020 noch gar nicht vorkam.

Für diesen Vergleich habe ich die Preisseiten aller drei Anbieter und die aktuellen Zahlen aus dem offiziellen Theme-Verzeichnis von wordpress.org ausgewertet. Dabei hat sich einiges getan: Astra hat seine Preisstruktur komplett auf AI-Pakete umgestellt, Kadence gehört inzwischen zum Hosting-Konzern Liquid Web und hat neue Preisstufen, und OceanWP ist überraschend der günstigste Premium-Einstieg. Alle Details, ehrliche Schwächen und eine klare Empfehlung findest du hier.

Astra, OceanWP oder Kadence: die Kurzvorstellung

Alle drei Kandidaten gehören seit Jahren zu den beliebtesten kostenlosen WordPress Themes und werden bis heute aktiv weiterentwickelt. Die Grundausrichtung ist aber jeweils eine andere:

Das Astra Theme

Astra ist mit über 1 Million aktiven Installationen auf wordpress.org das meistgenutzte Nicht-Standard-Theme der Welt, der Hersteller Brainstorm Force spricht sogar von über 2 Millionen Websites. Es ist extrem schlank gebaut und spielt seine Stärken vor allem zusammen mit Page-Buildern wie Elementor aus. Astra Pro gibt es einzeln ab 69 US-Dollar pro Jahr.

Astra Theme

Das Ocean WP Theme

OceanWP packt so viele Funktionen wie möglich in die kostenlose Version und ist damit besonders bei Betreibern von WooCommerce-Shops beliebt. Rund 500.000 Websites setzen aktiv auf das Theme, das bis heute im Wochenrhythmus gepflegt wird. Die Pro-Version startet bei 52 US-Dollar pro Jahr und ist damit der günstigste Premium-Einstieg der drei Kandidaten.

OceanWP Theme

Das Kadence Theme

Kadence ist der jüngste der drei Kandidaten und konsequent für den WordPress-Block-Editor (Gutenberg) entwickelt. Rund 500.000 Websites nutzen das Theme aktiv, der visuelle Header- und Footer-Builder ist schon in der Gratis-Version enthalten. Die Bezahlpläne starten bei 99 US-Dollar pro Jahr.

Kadence Theme

Die Themes im Vergleich: Zahlen und Fakten

Weil ich heute neben Astra und OceanWP auch Kadence empfehle, habe ich den dritten Kandidaten direkt mit in die Tabelle aufgenommen. Alle Zahlen stammen aus dem offiziellen Theme-Verzeichnis von wordpress.org und von den Preisseiten der Anbieter (Stand: August 2026):

	Astra	OceanWP	Kadence
Anbieter	Brainstorm Force	OceanWP	Liquid Web / Nexcess
Aktive Installationen (wordpress.org)	1.000.000+	500.000+	500.000+
Bewertung auf wordpress.org	4,9 von 5 (6.508 Stimmen)	4,9 von 5 (5.711 Stimmen)	4,9 von 5 (452 Stimmen)
Stärke der Gratis-Version	sehr schlank, große Vorlagen-Bibliothek	größter Funktionsumfang, WooCommerce-Extras	Header- und Footer-Builder, Kadence Blocks
Pro-Einstieg	69 $ / Jahr (Astra Pro, 3 Websites)	52 $ / Jahr (Starter, 1 Website)	99 $ / Jahr (Essentials: Theme Pro + Blocks Pro)
Größere Pakete	99 bis 279 $ / Jahr (AI-Toolkits, Verlängerung teurer)	64 bis 189 $ / Jahr (3 bis 300 Websites)	299 / 499 $ / Jahr (inkl. Security, Backups, Shop-Kit)
Lifetime-Lizenz	ja, ab 279 $	ja, ab 210 $	aktuell nicht angeboten
WooCommerce (gratis)	Basis-Integration	am umfangreichsten	Basis-Integration
Ideal für	Page-Builder wie Elementor	Shops mit kleinem Budget	Gutenberg / Block-Editor

Vorsicht bei den Preisen: Einführungsrabatte sind die Regel

Alle drei Anbieter werben mit reduzierten Einstiegspreisen. Das dicke Ende kommt bei der Verlängerung: Astras Paket „Pro + AI“ kostet im ersten Jahr 99 $, verlängert sich aber für 149 $ pro Jahr, das Essential Toolkit steigt von 199 $ auf 299 $. Auch OceanWP rechnet seine Rabatte gegen reguläre Preise. Kalkuliere deshalb immer mit dem Verlängerungspreis, nicht mit dem Angebotspreis. Alle Preise verstehen sich in US-Dollar.

Astra im Detail: Stärken und Schwächen

Astra verdankt seinen Erfolg einem simplen Rezept: so wenig Ballast wie möglich. Der Hersteller gibt an, dass das Theme weniger als 50 KB eigenen Code lädt, und im Alltag merkt man das. Auch ohne großes Optimieren fühlen sich Astra-Websites flott an. Dazu kommt die wohl größte Vorlagen-Bibliothek am Markt: Über das kostenlose Plugin „Starter Templates“ importierst du komplette Beispiel-Websites mit einem Klick, in den Bezahlpaketen sind über 300 Premium-Vorlagen enthalten.

So präsentiert sich Astra: großer Fokus auf Vorlagen und das eigene Web-Design-Toolkit (Screenshot: wpastra.com)

In der Gratis-Version bekommst du solide Grundlagen: Layout- und Farbeinstellungen im Customizer, eine Basis-WooCommerce-Integration und volle Kompatibilität mit allen gängigen Page-Buildern. Die Funktionen, mit denen Astra wirklich glänzt, stecken allerdings in Astra Pro (69 $ pro Jahr für 3 Websites): der erweiterte Header- und Footer-Builder mit Sticky- und Transparent-Headern, Mega-Menüs, feinere Typografie- und Farbkontrolle sowie zusätzliche Layout-Optionen für Blog und WooCommerce.

Die größte Veränderung der letzten Jahre betrifft die Preispolitik: Astra verkauft inzwischen vor allem AI-Pakete. „Astra Pro + AI“ (99 $ im ersten Jahr, danach 149 $) und die Toolkits (ab 199 $, Verlängerung 299 $) bündeln das Theme mit dem KI-Website-Generator ZipWP, Spectra Pro und Elementor-Addons. Wer nur das schlanke Theme mit Pro-Funktionen will, findet die reine Astra-Pro-Lizenz für 69 $ nur noch etwas versteckt am Ende der Preisseite. Diese Entwicklung solltest du kennen, bevor du dich auf das Ökosystem einlässt.

OceanWP im Detail: Stärken und Schwächen

OceanWP verfolgt die umgekehrte Philosophie: möglichst viel kostenlos mitliefern. 2020 habe ich selbst diverse Kundenprojekte mit OceanWP gebaut, und das Theme wird bis heute in kurzen Abständen weiterentwickelt. Schon die Gratis-Version bringt Funktionen mit, für die andere Themes Geld verlangen, darunter etliche WooCommerce-Extras wie eine Produkt-Schnellansicht. Ergänzt wird das durch ein System aus kostenlosen und kostenpflichtigen Erweiterungen, mit dem du gezielt nachrüstest, was du brauchst.

OceanWP wirbt mit dem Motto „The WordPress Theme that gives you more“ und millionenfachen Downloads (Screenshot: oceanwp.org)

Auch preislich ist OceanWP attraktiv: Das Pro-Bundle mit allen Premium-Erweiterungen startet bei 52 $ pro Jahr für eine Website, 3 Websites kosten 64 $, die Agentur-Lizenz für bis zu 300 Websites liegt bei 189 $ pro Jahr. Dazu gibt es Lifetime-Lizenzen ab 210 $ und regelmäßige Rabattaktionen. Für preisbewusste Shop-Betreiber ist das aktuell das beste Angebot der drei Kandidaten.

Die Kehrseite des Funktionsreichtums: OceanWP wirkt im Customizer schnell unübersichtlich, im Backend begegnen dir spürbar mehr Zusatzoptionen und Hinweise auf Bezahl-Erweiterungen, und ab Werk lädt das Theme mehr Code als Astra oder Kadence. Es bringt zwar eigene Performance-Einstellungen mit, um ungenutzte Skripte abzuschalten, aber genau darum musst du dich dann eben kümmern. Wer nur eine schlanke Firmenwebsite ohne Shop braucht, schleppt hier Funktionen mit, die er nie nutzt.

Performance: Welches Theme ist am schnellsten?

Die kurze Antwort: Alle drei gehören zu den schnellen Themes, und der Unterschied zwischen ihnen ist kleiner, als Marketing-Seiten suggerieren. Astra ist ab Werk am schlanksten, Kadence liegt auf einem ähnlichen Niveau, OceanWP lädt wegen seines Funktionsumfangs zunächst mehr mit, lässt sich über die eingebauten Performance-Optionen aber ebenfalls schlank stellen.

Aus meiner Erfahrung mit Kundenprojekten ist die ehrliche Wahrheit: Über die tatsächliche Ladezeit entscheidet selten das Theme. Viel stärker wirken sich unkomprimierte Bilder, ein schwaches Hosting, fehlendes Caching und vor allem schwergewichtige Page-Builder aus. Genau hier hat Kadence einen strukturellen Vorteil: Weil du mit Kadence Blocks direkt im WordPress-Editor gestaltest, entfällt der komplette Page-Builder-Unterbau, den Astra- und OceanWP-Projekte mit Elementor typischerweise mitschleppen. Das spart oft mehr Ladezeit als jeder Theme-Wechsel.

Der lachende Dritte: warum ich heute Kadence empfehle

Als die erste Version dieses Vergleichs 2020 erschien, habe ich selbst mit OceanWP und Elementor gearbeitet und bin später zu Astra gewechselt. Heute, viele Kundenprojekte weiter, baue ich fast alle neuen Websites mit Kadence, und auch diese Website hier läuft damit.

Kadence wird inzwischen als Teil von Liquid Web vermarktet, mit dem Block-Editor im Mittelpunkt (Screenshot: kadencewp.com)

Der Grund ist ein grundsätzlicher: Kadence ist von Anfang an für den Gutenberg-Editor entwickelt worden, der seit Jahren das Fundament von WordPress ist. Zusammen mit den kostenlosen Kadence Blocks gestaltest du komplette Websites direkt im WordPress-Editor, ganz ohne zusätzlichen Page-Builder. Das bedeutet weniger Plugins, weniger Ladezeit und eine Abhängigkeit weniger. Und anders als bei Astra ist der visuelle Header- und Footer-Builder bei Kadence bereits in der Gratis-Version enthalten. Welche Vorteile die Blocks im Detail bieten, liest du in meinem Beitrag zu Kadence Blocks für WordPress.

Wichtig zu wissen: Kadence gehört inzwischen zum Hosting-Konzern Liquid Web (Nexcess) und wird dort als komplette Plattform vermarktet. Die Bezahlstufen wurden neu geschnürt: „Essentials“ mit Kadence Theme Pro, Blocks Pro und über 200 Starter-Templates kostet 99 $ pro Jahr, die größeren Pakete „Pro“ (299 $) und „Elite“ (499 $) packen Security, tägliche Backups, ein WooCommerce-Shop-Kit und Multi-Site-Verwaltung dazu. Das ist teurer als früher, dafür bekommst du Dinge, für die sonst separate Plugins fällig wären. Die Gratis-Versionen von Theme und Blocks bleiben davon unberührt und reichen für viele Firmenwebsites völlig aus.

Fairerweise: Kadence ist das jüngste der drei Themes und hat auf wordpress.org erst 452 Bewertungen. An den 500.000 aktiven Installationen und der Wertung von 4,9 von 5 siehst du aber, dass es längst kein Geheimtipp mehr ist.

Welches Theme passt zu dir?

Die ehrliche Antwort: Mit keinem der drei machst du etwas grundlegend falsch. Es kommt auf dein Projekt an:

Du arbeitest mit Elementor oder einem anderen Page-Builder: Nimm Astra. Schlanke Basis, riesige Vorlagen-Auswahl, bewährtes Duo.
Du baust einen WooCommerce-Shop mit kleinem Budget: Nimm OceanWP. Die meisten Shop-Funktionen gratis, Pro ab 52 $ pro Jahr.
Du startest ein neues Projekt und willst direkt im WordPress-Editor gestalten: Nimm Kadence. Ohne Page-Builder, dafür schlank und zukunftssicher.
Du betreust als Freelancer oder Agentur viele Websites: Vergleiche die Paketpreise genau. OceanWP Agency (189 $ für 300 Websites) ist deutlich günstiger als Astras Toolkits oder Kadence Elite.
Du willst gar nichts ausgeben: Alle drei Gratis-Versionen taugen für echte Projekte. OceanWP bietet am meisten Funktionen, Kadence den kostenlosen Header-Builder, Astra das größte Vorlagen-Angebot.

Einen Überblick über meine aktuellen Favoriten findest du übrigens in der WordPress Theme Empfehlung. Und wenn du das Theme wechselst, lösche die aussortierten Themes danach vom Server. Wie das geht, zeigt dir meine Anleitung WordPress Theme löschen.

Fazit

Das Duell Astra gegen OceanWP hat auch 2026 keinen klaren Verlierer: Beide Themes sind ausgereift, schnell und werden aktiv gepflegt. Astra bleibt die aufgeräumtere Wahl für Page-Builder-Fans, hat sich aber preislich in Richtung teurer AI-Bundles entwickelt. OceanWP ist das Funktionspaket für preisbewusste Shop-Betreiber und inzwischen der günstigste Premium-Einstieg. Meine Empfehlung für neue Projekte ist trotzdem Kadence, weil es auf den WordPress-eigenen Editor setzt statt auf zusätzliche Page-Builder. Das zahlt sich bei Ladezeit, Wartungsaufwand und Zukunftssicherheit aus.

Du bist unsicher, welches Theme für dein Projekt das richtige ist, oder möchtest den Aufbau lieber in erfahrene Hände geben? Dann wirf einen Blick auf mein WordPress Webdesign: Ich berate dich ehrlich und baue deine Website mit dem Theme, das wirklich zu deinen Anforderungen passt.

FAQ: Astra, OceanWP und Kadence im Vergleich

Beide gehören zu den schnellsten WordPress Themes, Astra ist ab Werk etwas schlanker als OceanWP. In der Praxis ist der Unterschied klein: Hosting, Bildgrößen, Caching und vor allem der eingesetzte Page-Builder haben deutlich mehr Einfluss auf die Ladezeit als die Wahl zwischen diesen beiden Themes.

Ja. OceanWP wird sehr aktiv gepflegt und erhält laufend Updates. Mit rund 500.000 aktiven Installationen und einer Bewertung von 4,9 von 5 auf wordpress.org ist das Theme weiterhin eine sichere Wahl.

Die reine Astra-Pro-Lizenz kostet 69 $ pro Jahr für bis zu 3 Websites. Die beworbenen AI-Pakete starten bei 99 $ im ersten Jahr (Verlängerung 149 $), die Toolkits mit Templates und Zusatz-Plugins bei 199 $ (Verlängerung 299 $). Lifetime-Lizenzen gibt es ab 279 $ einmalig.

Das Kadence Theme und die Kadence Blocks sind kostenlos, inklusive Header- und Footer-Builder. Die Bezahlstufe „Essentials“ mit Theme Pro, Blocks Pro und über 200 Starter-Templates kostet 99 $ pro Jahr. Die größeren Pakete „Pro“ (299 $) und „Elite“ (499 $) ergänzen Security, Backups, WooCommerce-Shop-Kit und Multi-Site-Verwaltung.

Ja, in vielen Fällen. Eine klassische Firmenwebsite mit Startseite, Leistungen und Kontakt lässt sich mit allen drei Gratis-Versionen umsetzen. Die Pro-Versionen brauchst du vor allem für erweiterte Header (sticky, transparent), Mega-Menüs, spezielle WooCommerce-Layouts oder wenn du als Agentur Vorlagen und Support-Ansprüche hast.

Ja, deine Inhalte wie Beiträge, Seiten und Bilder bleiben beim Theme-Wechsel erhalten. Design-Einstellungen aus dem Customizer musst du im neuen Theme allerdings neu vornehmen, und je nach Seitenaufbau ist Nacharbeit am Layout nötig. Plane den Wechsel deshalb mit Backup und etwas Zeit ein.

Astra ist die bewährteste Basis für Elementor, auch OceanWP funktioniert sehr gut damit. Kadence richtet sich dagegen an alle, die ohne Page-Builder direkt im WordPress-Editor (Gutenberg) arbeiten möchten und gar kein Elementor benötigen.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Website mit WordPress oder KI-Baukasten erstellen? Der ehrliche Vergleich 2026

Benjamin Bode — Mon, 17 Aug 2026 09:03:00 +0000

Für einen schnellen Onepager, ein Experiment oder ein Hobbyprojekt reicht ein KI-Baukasten wie Hostinger Horizons, Wix oder Jimdo völlig aus. Soll deine Website aber Kunden gewinnen, bei Google gefunden werden und mit deinem Unternehmen wachsen, ist WordPress die bessere Wahl: Es gehört dir, lässt sich unbegrenzt erweitern und arbeitet auf Wunsch selbst mit KI. In diesem Beitrag bekommst du den ehrlichen Vergleich mit echten Preisen und einer Rechnung über drei Jahre.

Die Frage ist absolut berechtigt. KI-Baukästen bauen dir heute in wenigen Minuten eine Website, die auf den ersten Blick richtig gut aussieht. Warum also noch WordPress lernen oder eine Agentur bezahlen? Genau diese Frage höre ich aktuell in fast jedem Erstgespräch.

Zur Transparenz: Ich baue beruflich WordPress-Websites, habe aber die KI-Baukästen selbst ausprobiert. Meinen ausführlichen Praxistest mit Hostinger Horizons kannst du hier nachlesen. Dieser Beitrag fasst zusammen, was ich dabei und in Kundenprojekten gelernt habe: wann ein Baukasten wirklich reicht und wann er dich später Geld kostet.

Die kurze Antwort: Wann ein KI-Baukasten reicht und wann nicht

Ein KI-Baukasten ist die richtige Wahl, wenn du schnell und günstig eine einfache Website brauchst und keine großen Ziele mit ihr verfolgst. WordPress ist die richtige Wahl, wenn die Website ein Werkzeug für dein Geschäft sein soll: für Sichtbarkeit bei Google, für Anfragen und für alles, was noch kommt. So lässt sich die Entscheidung in einer Minute treffen:

Ein KI-Baukasten passt zu dir, wenn:

du ein Hobbyprojekt, eine Testidee oder eine temporäre Seite umsetzen willst
dir ein einfacher Onepager ohne Blog und ohne Sonderfunktionen genügt
Google-Rankings für dich keine Rolle spielen, weil Besucher ohnehin über andere Wege kommen
du bewusst mit einem Abo lebst und die Website nicht als langfristige Investition siehst

WordPress passt zu dir, wenn:

deine Website Anfragen und Kunden bringen soll, also Sichtbarkeit bei Google zählt
du Inhalte planst, die wachsen: Blog, Ratgeber, Referenzen, mehrere Leistungsseiten
die Website dir gehören soll, inklusive aller Daten, unabhängig von einem Anbieter
du später erweitern willst: Terminbuchung, Mitgliederbereich, Mehrsprachigkeit, Shop
du auf ein System setzen willst, das nicht verschwindet: WordPress betreibt laut W3Techs 40,8 Prozent aller Websites weltweit (Stand August 2026)

Was KI-Baukästen heute wirklich können

Zuerst das ehrliche Lob: Die Werkzeuge sind beeindruckend. Hostinger Horizons baut dir per Chat eine komplette Website, der KI-Builder von Wix erstellt aus wenigen Fragen Design und Texte, und auch Jimdo setzt seit Jahren auf einen KI-gestützten Einstieg. Du bekommst in Minuten ein Ergebnis, für das früher Tage nötig waren: Hosting inklusive, Design-Grundgerüst brauchbar, Einstiegskosten niedrig.

Genau deshalb habe ich das selbst getestet und eine Kanzlei-Website per Chat erstellen lassen. Das erste Ergebnis sah modern aus, mit schönen Details wie Hover-Effekten in der Leistungsübersicht. Beim genauen Hinsehen zeigten sich aber die typischen Schwächen: Die mobile Ansicht war fehlerhaft, Buttons funktionierten nicht und im Kontaktformular fehlte die Einwilligung zur Datenverarbeitung, die aus rechtlicher Sicht wichtig ist. Den kompletten Test mit allen Screenshots findest du im Beitrag Hostinger Horizons im Test.

Mein Fazit aus dem Test: Der Prototyp ist stark, das fertige Produkt ist es nicht. Die Details, die eine Website zu einem professionellen Vertriebswerkzeug machen, bleiben Handarbeit. Und genau bei diesen Details entscheidet sich, ob Besucher zu Anfragen werden.

Die sechs Grenzen, die im Alltag entscheiden

Die Grenzen eines KI-Baukastens sind selten spektakulär. Sie zeigen sich schleichend, meist erst nach Monaten, wenn die Website eigentlich liefern soll. Diese sechs Punkte sehe ich in der Praxis am häufigsten:

1. Die Website gehört nicht wirklich dir

Beim Baukasten mietest du deine Website. Endet das Abo, ist die Website weg. Ein vollständiger Umzug zu einem anderen Anbieter ist nicht vorgesehen: Bei Wix gibt es keinen Export des Designs, bei Hostinger Horizons ist der Code-Export den größeren Tarifen vorbehalten und funktioniert nur als Einbahnstraße. Deine Inhalte bekommst du meist heraus, das Design und die Funktionen nicht. Bei WordPress gehört dir alles: Du kannst Hosting, Design und jeden Baustein jederzeit wechseln.

2. SEO stößt früh an Grenzen

Die SEO-Grundlagen beherrschen die Baukästen inzwischen. Aber in Tests generierter KI-Websites tauchen immer wieder Basisfehler auf, etwa Seiten ohne H1-Überschrift. Dazu kommt: Für ernsthaftes Content-Marketing fehlen die Werkzeuge. Ein ausgewachsener Blog mit sauberer Struktur, strukturierte Daten nach eigenen Regeln, feine Kontrolle über Ladezeit und Technik: Genau hier spielt WordPress mit Erweiterungen wie Rank Math seine Stärke aus. Wer bei Google vorne mitspielen will, merkt den Unterschied.

3. Recht und Datenschutz bleiben dein Problem

Impressum, Datenschutzerklärung, Cookie-Einwilligung, DSGVO-konforme Formulare: Die KI kennt die Anforderungen an deutsche Unternehmenswebsites nicht zuverlässig. In meinem Test fehlte die Einwilligung zur Datenverarbeitung im Kontaktformular komplett. Dazu sitzen viele Anbieter außerhalb der EU, was die Datenschutz-Bewertung nicht einfacher macht. Wie du das bei WordPress sauber löst, zeige ich im Beitrag zur Datenschutzerklärung für WordPress.

4. Austauschbare Optik, austauschbare Texte

KI-Baukästen erzeugen Websites nach ähnlichen Mustern mit ähnlichen Texten. Was in Minuten entsteht, sieht auch nach Minuten aus, spätestens im direkten Vergleich mit einem Wettbewerber, der dieselbe Technik nutzt. Eine Website, die Vertrauen aufbaut, braucht echte Inhalte: deine Referenzen, deine Sprache, dein Angebot. Das kann dir kein Baukasten abnehmen, egal wie gut die KI wird.

5. Du bekommst ein Ergebnis, aber kein Verständnis

Solange alles läuft, ist das kein Thema. Wenn aber etwas hakt, brauchst du jemanden, der versteht, was die KI gebaut hat. Bei Kundenprojekten sehe ich immer wieder Websites, die schnell erstellt wurden und dann liegen bleiben, weil niemand weiß, wie man sie pflegt, korrigiert oder erweitert. Eine Website ist kein Einmalprojekt, sondern ein Werkzeug, das gepflegt werden will.

6. Sicherheitslücken, für die am Ende du haftest

Der ernsteste Punkt zum Schluss. Wer eine Website oder Web-App per KI zusammenbaut („Vibe Coding“), bekommt Code, den er selbst nicht beurteilen kann. Genau darin liegt das Risiko: Die KI schreibt auch sicherheitsrelevante Funktionen neu, etwa Login, Nutzerkonten oder Datenbankzugriffe. Werden dabei Passwörter nicht oder falsch gehasht, also nicht sicher verschlüsselt abgelegt, liegt ein gravierendes Datenschutzproblem vor, ohne dass du es je bemerkst.

Verantwortlich dafür bist trotzdem du: Als Betreiber der Website musst du nach der DSGVO für die Sicherheit der verarbeiteten Daten sorgen. Ein Datenleck durch schlampig generierten Code kann als fahrlässiger Umgang mit personenbezogenen Daten gewertet werden, mit allen Konsequenzen von der Meldepflicht bis zur Haftung. „Das hat die KI so gebaut“ ist dabei keine Verteidigung. WordPress nimmt dir dieses Risiko nicht komplett ab, aber es verschiebt es massiv: Der Kern wird seit über 20 Jahren von einem eigenen Sicherheitsteam gepflegt, und für Logins, Mitgliederbereiche und Formulare nutzt du erprobte Module statt ungeprüftem Einzelstück-Code.

Die wahre Stärke von WordPress: dynamische Inhalte und erprobte Module

Bis hierhin klang es so, als wäre WordPress nur die sicherere Wahl. Es ist aber vor allem die stärkere. Zwei Eigenschaften machen den Unterschied, und beide kann dir kein KI-Baukasten bieten.

Deine Website als System, nicht als Schaufenster

Ein Baukasten liefert dir im Kern statische Seiten: ein digitales Schaufenster. WordPress ist von Grund auf ein System für dynamische Inhalte. Ein Blog mit Kategorien und interner Suche, filterbare Referenzen, eigene Inhaltstypen wie Projekte, Immobilien, Kurse oder Rezepte, Mitgliederbereiche mit Nutzerkonten, Mehrsprachigkeit: All das gehört bei WordPress zum Fundament. Genau diese dynamischen Inhalte sind es, die bei Google dauerhaft Sichtbarkeit aufbauen. Eine Website, die wachsen soll, braucht ein System, das mitwächst.

Das Rad nicht neu erfinden: über 69.000 erprobte Plugins

Der zweite Punkt ist mir der wichtigste. Wer eine Website per KI zusammenbaut, erfindet bei jedem Feature das Rad neu: Das Kontaktformular, die Terminbuchung, der Login-Bereich, alles entsteht als ungeprüfter Einzelstück-Code. Bei WordPress greifst du stattdessen auf über 69.000 kostenlose Plugins im offiziellen Verzeichnis zurück, dazu kommen etablierte Premium-Erweiterungen. Diese Module sind millionenfach im Einsatz, werden von Entwicklern gepflegt und bekommen Sicherheits-Updates.

Das ist der Kern, warum ich WordPress für Business-Websites empfehle: Du bekommst den besten Fit aus Wert und Kosten. Die Basis ist erprobt und kostenlos, das Geld fließt in das, was deine Website einzigartig macht: Konzept, Inhalte, Design und Sichtbarkeit. Beim Vibe-Coding fließt es in das Nachbauen von Dingen, die es längst fertig und besser gibt.

Was kostet was wirklich? Die Rechnung über drei Jahre

Auf den ersten Blick gewinnt der Baukasten, denn ein paar Euro im Monat klingen unschlagbar. Rechnet man aber über drei Jahre und bezieht die eigene Arbeitszeit ein, sieht das Bild anders aus. Hier die aktuellen Preise (Stand August 2026, Anbieterangaben, meist bezogen auf das Jahresabo):

Lösung	Laufende Kosten	Kosten in 3 Jahren	Deine Arbeitszeit
Jimdo Start	ab 11 € pro Monat	ca. 400 €	hoch (selbst bauen und pflegen)
Hostinger Horizons Starter	ab 13,99 € pro Monat	ca. 500 € plus Extra-Credits	hoch (viele Korrektur-Prompts)
Wix Core	ab 29,75 € pro Monat	ca. 1.070 €	hoch (selbst bauen und pflegen)
WordPress selbst gemacht	ca. 10 € pro Monat Hosting	ca. 360 € plus Lizenzen	sehr hoch (Einarbeitung nötig)
WordPress vom Profi	einmalig ab 1.499 € plus Hosting	ca. 1.900 bis 2.100 €	minimal (du lieferst nur Inhalte zu)

Die ehrliche Einordnung: Über drei Jahre kostet ein werbefreier Business-Baukasten ungefähr so viel wie eine professionell erstellte WordPress-Website. Der große Unterschied steckt in der Spalte rechts. Beim Baukasten baust, textest und pflegst du selbst. Wer dafür 40, 60 oder 80 Arbeitsstunden investiert, zahlt real am meisten, bekommt aber das Ergebnis eines Anfängers. Eine detaillierte Aufschlüsselung aller Posten findest du im Beitrag zu den Kosten einer WordPress-Website.

Die Frage hinter der Frage

„Baukasten oder WordPress?“ ist eigentlich die Frage: „Ist meine Website ein Kostenpunkt oder eine Investition?“ Ein Kostenpunkt soll möglichst billig sein. Eine Investition soll möglichst viel zurückbringen: Anfragen, Kunden, Sichtbarkeit. Sobald du die zweite Antwort wählst, rechnet sich der professionelle Weg fast immer.

WordPress und KI: Du musst dich gar nicht entscheiden

Der wichtigste Punkt zum Schluss: „KI oder WordPress“ ist ein falscher Gegensatz. Seit WordPress 7.0 (erschienen im Mai 2026) stecken die KI-Grundlagen direkt im System: ein AI Client für die Verbindung zu KI-Modellen, die Abilities API und ein MCP Adapter, über den KI-Assistenten wie Claude oder ChatGPT direkt in deiner Website mitarbeiten können. Entwürfe anlegen, Inhalte strukturieren, Seiten aufbauen: Die KI arbeitet in deinem System, nach deinen Regeln.

Genau so arbeite ich selbst: Dieser Blog entsteht mit KI-Unterstützung über eine MCP-Anbindung, die Qualitätskontrolle bleibt bei mir. Das ist der entscheidende Unterschied: eine Website von der KI gegen eine Website mit der KI. Du bekommst die Geschwindigkeit der KI, ohne die Kontrolle, das Eigentum und die Erweiterbarkeit von WordPress aufzugeben. Wie der Weg zur eigenen WordPress-Website abläuft, liest du in den häufigsten Fragen zur Website-Erstellung mit WordPress.

Fazit: Baukasten für den Start, WordPress für den Aufbau

Wenn du heute nur schnell eine einfache Seite brauchst, nimm einen KI-Baukasten und hab keine Angst davor. Die Tools sind gut, der Einstieg ist teils kostenlos, und du kannst dir in einer Stunde ein eigenes Bild machen. Für ein Hobbyprojekt oder einen Testballon ist das eine völlig legitime Entscheidung.

Soll deine Website aber Kunden gewinnen und über Jahre mit deinem Unternehmen wachsen, führt an WordPress kaum ein Weg vorbei: Es gehört dir, es skaliert mit dynamischen Inhalten, es wird von 40,8 Prozent aller Websites weltweit genutzt und arbeitet inzwischen selbst mit KI. Die Rechnung über drei Jahre zeigt: Der Preisvorteil des Baukastens schmilzt, sobald man ehrlich rechnet. Was bleibt, ist der Unterschied im Ergebnis.

Und für ambitionierte Projekte und Business-Websites gilt zusätzlich: Hol dir jemanden mit Erfahrung an die Seite. Ein erfahrener Entwickler stellt deine Website rechtssicher auf, achtet auf Performance und Sicherheit und baut sie von Anfang an so, dass sie ihren eigentlichen Auftrag erfüllt: Kunden für dein Unternehmen zu gewinnen. Eine Website ist kein Selbstzweck.

Wenn du die Geschwindigkeit der KI nutzen willst, ohne auf ein professionelles Ergebnis und einen Ansprechpartner zu verzichten, schau dir mein WordPress-Webdesign an: Websites ab 1.499 € zzgl. USt., erstellt mit WordPress als Fundament und KI als Beschleuniger. Oder du startest mit einer Webseiten-Analyse, wenn du erst einmal wissen willst, wo du stehst.

Jetzt WordPress-Webdesign entdecken

FAQ: Häufige Fragen zu WordPress und KI-Baukästen

Für schnelle, einfache Projekte ja: Ein KI-Baukasten liefert in Minuten ein brauchbares Ergebnis. Für Unternehmenswebsites mit SEO-Anspruch, wachsenden Inhalten und voller Kontrolle über Daten und Design ist WordPress überlegen. Es betreibt 40,8 Prozent aller Websites weltweit und lässt sich beliebig erweitern.

Werbefreie Baukasten-Tarife kosten Stand August 2026 zwischen rund 11 € (Jimdo Start) und 40 € pro Monat (Wix Business), über drei Jahre also 400 bis 1.450 €. Eine professionelle WordPress-Website kostet einmalig ab 1.499 € plus Hosting ab etwa 5 bis 30 € pro Monat. Über drei Jahre liegen beide Wege oft gleichauf, der Unterschied steckt in Arbeitszeit und Ergebnis.

Nur teilweise. Texte und Bilder lassen sich übernehmen, Design und Funktionen nicht. In der Praxis bedeutet der Wechsel einen Neuaufbau der Website. Wer absehbar wachsen will, fährt deshalb günstiger, wenn er direkt auf WordPress startet, statt später doppelt zu bauen.

Die Einstiegshürde ist höher als beim Baukasten, aber deutlich niedriger als früher: Mit dem Block-Editor und modernen Themes wie Kadence pflegst du Inhalte ohne Programmierkenntnisse. Den Aufbau überlässt du einmalig einem Profi oder lernst ihn in einer WordPress-Schulung, danach arbeitest du selbstständig weiter.

Die Grundlagen wie Titel, Beschreibungen und mobile Darstellung beherrschen die Anbieter inzwischen ordentlich. Für ambitioniertes SEO fehlen aber Feinkontrolle und Werkzeuge: strukturierte Daten nach eigenen Regeln, ein vollwertiger Blog, technische Optimierung. Generierte KI-Seiten gehen zudem teils mit Basisfehlern wie fehlenden H1-Überschriften online.

Ja. Seit WordPress 7.0 (Mai 2026) stecken die KI-Grundlagen im Core: der AI Client, die Abilities API und ein MCP Adapter. Damit verbindest du Anbieter wie OpenAI, Google oder Anthropic direkt mit deiner Website, und KI-Assistenten können über MCP in deinem WordPress mitarbeiten, ohne dass du die Kontrolle abgibst.

Du als Betreiber. Nach der DSGVO bist du für die Sicherheit der verarbeiteten Daten verantwortlich, auch wenn der fehlerhafte Code von einer KI stammt. Werden etwa Passwörter von Nutzerkonten nicht sauber verschlüsselt gespeichert, kann das als fahrlässiger Umgang mit personenbezogenen Daten gewertet werden. Deshalb gehören Login-Bereiche und Datenverarbeitung in erprobte Systeme oder in die Hände von jemandem mit Erfahrung.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Lottie Animation in WordPress einbinden: mit und ohne Elementor

Benjamin Bode — Mon, 20 Jul 2026 23:33:46 +0000

Eine Lottie Animation ist eine vektorbasierte Animation im JSON-Format, die direkt im Browser deiner Besucher abgespielt wird. In WordPress bindest du Lottie Animationen am einfachsten über den kostenlosen Lottie-Block von Kadence Blocks, das Lottie-Widget von Elementor Pro oder ein kostenloses Add-on wie ElementsKit ein. Die Dateien sind winzig, bleiben auf jedem Bildschirm gestochen scharf und machen deine Website spürbar lebendiger.

In diesem Beitrag erfährst du, wie Lottie funktioniert, wo du fertige Animationen findest und wie du sie Schritt für Schritt in deine WordPress Website einbaust, mit und ohne Elementor. Außerdem bekommst du Tipps, damit die Animationen deine Ladezeit nicht ausbremsen.

Was ist Lottie und wie funktioniert es?

Lottie ist ein offenes Animationsformat, das ursprünglich vom Entwicklerteam bei Airbnb veröffentlicht wurde. Eine Lottie Datei enthält keine fertigen Bilder, sondern beschreibt die Animation als Vektorgrafik im JSON-Format. Ein kleiner JavaScript-Player liest diese Datei aus und rendert die Animation direkt im Browser, wahlweise als SVG oder auf einem Canvas-Element. Anders als bei GIFs oder Videos entsteht die Animation also live auf dem Bildschirm deiner Besucher und bleibt dadurch in jeder Größe scharf.

Erstellt werden Lottie Animationen klassisch in Adobe After Effects und über das kostenlose Plugin LottieFiles for After Effects (früher als Bodymovin bekannt) exportiert. Inzwischen geht es aber auch ganz ohne After Effects: Mit dem browserbasierten Lottie Creator von LottieFiles oder Tools wie Lottielab erstellst du Animationen direkt im Browser, auf Wunsch sogar mit KI-Unterstützung.

Gut zu wissen: Neben der klassischen JSON-Datei gibt es das neuere dotLottie-Format (Dateiendung .lottie). Es komprimiert die Animation und macht die Datei dadurch bis zu 90 Prozent kleiner. Lottie ist außerdem längst kein Nischenformat mehr: Seit 2023 wird der Standard unter dem Dach der Linux Foundation weiterentwickelt, 2024 erschien die Version 1.0 der offiziellen Spezifikation.

Vorteile von Lottie Animationen

Der größte Vorteil von Lottie ist die Kombination aus geringer Dateigröße und gestochen scharfer Darstellung. Weil die Animation als Vektorgrafik beschrieben und erst im Browser gerendert wird, ist die Datei meist deutlich kleiner als ein vergleichbares GIF oder Video. Trotzdem sieht die Animation auf jedem Display perfekt aus, vom kleinen Smartphone bis zum 4K-Monitor.

Ein weiterer Vorteil: Lottie Animationen können auf Benutzeraktionen reagieren. Sie lassen sich beim Klick, beim Überfahren mit der Maus, beim Scrollen oder erst beim Erscheinen im sichtbaren Bereich abspielen. Das macht deine Website interaktiver und lenkt den Blick gezielt auf wichtige Inhalte.

Lottie Vorteile im Überblick

Kleine Dateien: meist deutlich leichter als GIFs oder Videos, im dotLottie-Format noch einmal bis zu 90 Prozent kleiner
Gestochen scharfe Vektorgrafiken auf allen Bildschirmgrößen und Auflösungen
Kompatibel mit allen modernen Browsern und Geräten
Interaktiv: Abspielen bei Klick, Hover, Scroll oder erst im sichtbaren Bereich
Riesige Auswahl an fertigen Animationen auf Plattformen wie LottieFiles oder IconScout
Erstellung in Adobe After Effects oder direkt im Browser, auch ohne Design-Vorkenntnisse
Offener Standard unter dem Dach der Linux Foundation, also zukunftssicher
Einfache Einbindung in WordPress über Gutenberg, Elementor oder schlanke Plugins

Lottie Animationen finden oder selbst erstellen

Bevor du eine Animation einbinden kannst, brauchst du natürlich eine Lottie Datei. Die größte Anlaufstelle ist LottieFiles: Dort findest du hunderttausende fertige Animationen, die du direkt als JSON- oder dotLottie-Datei herunterladen kannst. Im kostenlosen Tarif sind aktuell 10 Downloads öffentlicher Animationen pro Monat enthalten, für den Einstieg reicht das völlig aus.

Gute Alternativen sind IconScout mit über einer Million Lottie Animationen (viele davon kostenlos, auch für kommerzielle Projekte) und Creattie, wo du kuratierte animierte Icons sogar ohne Anmeldung herunterladen kannst.

Eigene Animationen erstellst du entweder in Adobe After Effects mit dem Export-Plugin von LottieFiles oder komplett im Browser: Der Lottie Creator bringt mit Motion Copilot sogar einen KI-Assistenten mit, der Animationen aus Text-Anweisungen erzeugt. Auch aus Figma heraus kannst du Designs über das LottieFiles-Plugin als Lottie exportieren.

Achte auf die Dateigröße

Nicht jede schöne Animation ist auch eine gute Animation für deine Website. Wirf vor dem Einbinden einen Blick auf die Dateigröße: Bis etwa 500 KB bist du auf der sicheren Seite, deutlich größere Dateien können die Ladezeit spürbar verlängern. Viele Plattformen zeigen die Größe direkt beim Download an.

Lottie Animationen in WordPress einbetten

Jetzt geht es ans Einbauen. Je nachdem, ob du mit Elementor, dem Gutenberg Editor oder einem anderen Setup arbeitest, führen mehrere Wege zum Ziel. Die drei wichtigsten zeige ich dir jetzt.

JSON-Upload in WordPress

WordPress blockiert den Upload von JSON-Dateien in die Mediathek aus Sicherheitsgründen standardmäßig. Das ist aber kein Problem: Die hier vorgestellten Blöcke und Widgets bringen eigene Upload-Wege mit oder akzeptieren eine externe URL. Du musst den JSON-Upload also nicht extra freischalten.

Lottie mit Elementor Pro

Elementor Pro bringt ein eigenes Lottie-Widget mit. Du ziehst das Widget an die gewünschte Stelle, wählst als Quelle entweder eine Mediendatei (die JSON-Datei lädst du dabei direkt über das Widget hoch) oder eine externe URL. Anschließend legst du fest, wie die Animation abgespielt wird: automatisch beim Erscheinen im sichtbaren Bereich, beim Klick, beim Hover oder gesteuert durch das Scrollen. Praktisch: Ein eigener Lazy-Load-Schalter sorgt dafür, dass die Animation erst geladen wird, wenn sie wirklich gebraucht wird.

Das Lottie-Widget ist der Pro-Version vorbehalten. Elementor Pro startet aktuell bei 49 US-Dollar pro Jahr für eine Website (Stand: Juli 2026).

Du interessierst dich für Elementor?

Lottie mit Elementor kostenlos nutzen: ElementsKit und Alternativen

Nutzt du Elementor in der kostenlosen Version, fehlt dir das Lottie-Widget. Diese Lücke schließt ein kostenloses Add-on wie ElementsKit: Das Plugin wird aktiv gepflegt, kommt auf über eine Million aktive Installationen und enthält das Lottie-Widget bereits in der Gratis-Version. Nach Installation und Aktivierung legst du in den Einstellungen fest, welche Widgets du nutzen möchtest, und schaltest dort das Lottie-Widget ein. Die Bedienung ähnelt danach stark dem Pendant aus Elementor Pro.

Mein Tipp: Aktiviere nur die Widgets, die du wirklich benötigst. Je mehr aktiv ist, desto mehr Ressourcen beansprucht deine Website und desto langsamer lädt sie. Das wirkt sich negativ auf die Nutzerfreundlichkeit und auf dein Google Ranking aus, Stichwort SEO.

Auch Premium Addons for Elementor und Royal Elementor Addons bieten jeweils ein kostenloses Lottie-Widget an. Funktional nehmen sich die drei wenig. Nimm also am besten das Add-on, das du ohnehin schon im Einsatz hast, statt ein zusätzliches Plugin zu installieren.

Lottie ohne Elementor: Gutenberg und Kadence Blocks

Arbeitest du mit dem Gutenberg Editor, brauchst du für Lottie kein Elementor. Die Kadence Blocks enthalten schon in der kostenlosen Version einen eigenen Block namens Lottie Animations. Damit lädst du die JSON-Datei direkt über die Plugin-Einstellungen hoch oder bindest sie per URL ein. Anschließend steuerst du Autoplay, Schleifen, Geschwindigkeit, Abspielen beim Hover oder erst im sichtbaren Bereich. Sogar scrollgesteuerte Animationen mit frei wählbarem Start- und Endpunkt sind möglich. Warum ich die Kadence Blocks generell empfehle, liest du in meinem Beitrag Kadence Blocks für WordPress.

Vom offiziellen LottieFiles-Plugin für Gutenberg rate ich aktuell eher ab: Es wird zwar noch aktualisiert, kommt aber nur auf eine Bewertung von 2,3 von 5 Sternen, unter anderem wegen Konflikten mit anderen Plugins. Eine schlanke und sehr gut bewertete Alternative ist AM LottiePlayer, das als eines der wenigen Plugins auch das komprimierte dotLottie-Format unterstützt.

Und für Entwickler gilt: Mit dem offiziellen dotLottie Web Player lässt sich eine Animation auch von Hand per Skript und HTML-Block einbinden. Für die meisten Anwendungsfälle ist das aber unnötig kompliziert, die genannten Blöcke und Widgets decken so gut wie alles ab.

Lottie und die Ladezeit: Darauf solltest du achten

So leichtgewichtig Lottie auch ist: Falsch eingesetzt kann jede Animation deine Website ausbremsen. Mit diesen Regeln bist du auf der sicheren Seite:

Halte die Dateien klein: Bis etwa 500 KB pro Animation bist du im grünen Bereich, das dotLottie-Format spart zusätzlich
Setze Animationen gezielt und sparsam ein, statt jede Sektion zu animieren
Vermeide schwere Animationen im sofort sichtbaren Bereich, sie verschlechtern sonst den LCP-Wert deiner Core Web Vitals
Aktiviere Lazy Loading für Animationen, die weiter unten auf der Seite liegen
Denke an die Barrierefreiheit: Nutzer mit reduzierter Bewegung (prefers-reduced-motion) sollten keine Dauerschleifen sehen

Wie du die Ladezeit deiner Website darüber hinaus verbesserst, erfährst du in meinem Beitrag Ladezeit verbessern mit Caching.

FAQ: Häufige Fragen zu Lottie in WordPress

Eine Lottie Animation ist eine vektorbasierte Animation im JSON-Format. Ein JavaScript-Player spielt sie direkt im Browser ab. Dadurch bleibt sie auf jedem Bildschirm gestochen scharf und die Datei ist deutlich kleiner als ein vergleichbares GIF oder Video.

Bei vernünftigem Einsatz nicht. Lottie Dateien sind meist nur wenige hundert Kilobyte groß. Achte darauf, Animationen unter etwa 500 KB zu verwenden, Lazy Loading zu aktivieren und keine schweren Animationen in den sofort sichtbaren Bereich zu legen.

Ja. Der Lottie-Block von Kadence Blocks ist kostenlos, ebenso die Lottie-Widgets von ElementsKit, Premium Addons und Royal Elementor Addons für Elementor. Auch schlanke Gutenberg-Plugins wie AM LottiePlayer binden Lottie Animationen kostenlos ein.

Die größte Plattform ist LottieFiles. Im kostenlosen Tarif kannst du dort aktuell 10 öffentliche Animationen pro Monat herunterladen. Weitere gute Quellen sind IconScout und Creattie, dort gibt es viele Animationen auch für kommerzielle Projekte kostenlos.

Beide enthalten dieselbe Animation. Die .lottie-Datei (dotLottie-Format) ist eine komprimierte Variante, die bis zu 90 Prozent kleiner ist und mehrere Animationen bündeln kann. Prüfe vor dem Einsatz, ob dein Plugin oder Widget das Format unterstützt. Falls nicht, nimm die klassische JSON-Datei.

Fazit

Lottie Animationen sind eine der elegantesten Möglichkeiten, deine WordPress Website lebendiger zu machen: kleine Dateien, gestochen scharfe Darstellung und volle Kontrolle darüber, wann und wie eine Animation abgespielt wird. Dank kostenloser Lösungen wie dem Lottie-Block von Kadence Blocks oder dem ElementsKit-Widget für Elementor brauchst du dafür nicht einmal ein Budget.

Wichtig ist nur das richtige Maß: Gezielt eingesetzte Animationen lenken den Blick auf deine Inhalte und werten das Design auf. Zu viele Animationen wirken dagegen schnell unruhig und kosten Ladezeit.

Du wünschst dir eine Website, die nicht nur schön animiert ist, sondern auch Kunden gewinnt? Dann sieh dir mein Angebot für WordPress Webdesign an oder melde dich direkt bei mir.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Onepager erstellen: Was du beachten solltest

Benjamin Bode — Mon, 20 Jul 2026 23:33:21 +0000

Ein Onepager ist eine Website, die aus einer einzigen Seite besteht: Alle Inhalte stehen untereinander, die Navigation springt per Klick direkt zu den jeweiligen Abschnitten. Das Format eignet sich für klare Angebote mit überschaubarem Inhalt. Beachten solltest du vor allem die eingeschränkten Möglichkeiten bei der Suchmaschinenoptimierung und die begrenzte Erweiterbarkeit.

Richtig eingesetzt ist ein Onepager prägnant, visuell ansprechend und leicht zu erfassen. Deine Besucher finden alle wichtigen Informationen an einem Ort und werden gezielt zu einer Handlung geführt, zum Beispiel zur Kontaktaufnahme.

In diesem Beitrag erfährst du, was ein Onepager ist, welche Vor- und Nachteile er hat und für wen er sich eignet. Außerdem zeige ich dir Schritt für Schritt, wie du einen Onepager mit WordPress erstellst und mit welchen Tipps er trotz einer einzigen Seite gut bei Google gefunden wird.

Was ist ein Onepager?

Ein Onepager ist eine einseitige Website. Der Begriff leitet sich davon ab, dass die gesamte Website aus einer einzigen Seite besteht (ausgenommen rechtliche Seiten wie Impressum und Datenschutzerklärung).

Alle Informationen über dein Unternehmen oder Produkt stehen auf dieser einen Seite: ein Überblick über deine Leistungen, dein Team, Referenzen und deine Kontaktdaten. Statt über Unterseiten zu navigieren, scrollen deine Besucher einfach nach unten oder nutzen ein Menü, das direkt zu den einzelnen Abschnitten springt.

Die Vorteile eines Onepagers

Alles auf einen Blick: Deine Besucher erhalten alle Informationen auf einer Seite und können sich sofort einen Überblick verschaffen.
Klare Nutzerführung: Der lineare Aufbau führt gezielt zu einer Handlung, etwa zur Kontaktaufnahme. Das kann die Conversion-Rate spürbar erhöhen.
Ideal für mobile Geräte: Scrollen funktioniert auf dem Smartphone intuitiv, komplexe Menüstrukturen entfallen.
Schnell umgesetzt und leicht zu pflegen: Eine Seite ist schneller erstellt und aktualisiert als eine komplette Website mit vielen Unterseiten.

Die Nachteile eines Onepagers

Doch wie so oft gilt: Wo Licht ist, ist auch Schatten. Diese Punkte sprechen gegen einen Onepager:

Eingeschränkte Suchmaschinenoptimierung: Ein Onepager kann realistisch nur für ein Hauptkeyword ranken, denn es gibt nur eine Seite, einen Seitentitel und eine Meta-Beschreibung.
Nicht für umfangreiche Inhalte geeignet: Komplexe Themen, viele Leistungen oder ein Blog lassen sich auf einer einzigen Seite kaum sinnvoll abbilden.
Begrenzte Erweiterbarkeit: Wächst dein Angebot, stößt der Onepager schnell an seine Grenzen. Eine Erweiterung läuft oft auf einen Neuaufbau als mehrseitige Website hinaus.
Lange Scrollstrecken: Wird die Seite zu voll, müssen sich Besucher durch alle Inhalte scrollen, um die gewünschte Information zu finden.

Onepager, Landingpage oder mehrseitige Website: Was ist der Unterschied?

Ein Onepager ist eine vollständige Website auf einer einzigen Seite. Eine Landingpage ist dagegen eine einzelne Zielseite, die meist zu einer größeren Website gehört und Besucher aus Werbeanzeigen oder Kampagnen zu genau einer Handlung führen soll. Eine mehrseitige Website verteilt ihre Inhalte auf eigene Unterseiten pro Thema.

Die Übergänge sind fließend: Vom Aufbau her ist ein Onepager die perfekte Form für eine Landingpage. Der Unterschied liegt im Zweck. Der Onepager ersetzt die komplette Website, während die Landingpage eine bestehende Website für eine bestimmte Kampagne ergänzt.

Sobald du mehrere Leistungen anbietest oder über verschiedene Suchbegriffe gefunden werden willst, führt kaum ein Weg an einer mehrseitigen Website vorbei. Welche Kostenpunkte dabei auf dich zukommen, liest du in meinem Beitrag WordPress: Kosten für eine Website.

Für wen eignet sich ein Onepager?

Ein Onepager eignet sich für Selbstständige, Freelancer und kleine Unternehmen mit einem klar umrissenen Angebot: als digitale Visitenkarte, für ein einzelnes Produkt, eine Dienstleistung oder eine Veranstaltung. Kurz gesagt: immer dann, wenn eine klare Botschaft im Mittelpunkt steht und wenig Inhalt nötig ist.

Bei Kundenprojekten sehe ich immer wieder: Gerade für den Start reicht ein guter Onepager oft völlig aus. Wichtig ist, dass du dir vorher überlegst, wohin sich deine Website entwickeln soll. Planst du weitere Leistungen, einen Blog oder einen Shop, solltest du von Anfang an auf eine erweiterbare Struktur setzen. Die folgende Übersicht hilft dir bei der Entscheidung:

Im folgenden Video erkläre ich dir außerdem in wenigen Minuten, wann ein Onepager sinnvoll ist und wann nicht:

Was solltest du bei einem Onepager beachten?

Bevor du mit der Erstellung beginnst, solltest du dir überlegen, welche Botschaft deine Website vermitteln soll. Eine einzelne Seite bietet nicht viel Platz für detaillierte Informationen. Wenn du sehr viele Inhalte darstellen möchtest oder mehrere Produkte und Dienstleistungen anbietest, ist eine klassische Website mit Unterseiten meist die bessere Wahl.

Hast du dich für einen Onepager entschieden, solltest du bei der Umsetzung auf folgende Punkte achten:

Das Design: Setze auf ein klares, einfaches Design. Nutze Leerraum, um die Abschnitte voneinander zu trennen und die Inhalte übersichtlich zu halten.
Der Inhalt: Bring deine Inhalte prägnant auf den Punkt. Füge nur die wichtigsten Informationen über dein Unternehmen oder Produkt ein und gliedere sie in klar erkennbare Abschnitte.
Der Call-to-Action: Definiere ein klares Ziel, zum Beispiel die Kontaktaufnahme. Platziere die Handlungsaufforderung mehrfach: einmal weit oben und einmal am Ende der Seite.
Die Navigation: Verwende ein Ankermenü, das beim Klick direkt zum passenden Abschnitt springt. Die Menüpunkte sollten selbsterklärend sein.
Die Ladezeit: Auf einer einzigen Seite sammeln sich schnell viele Bilder. Komprimiere sie (zum Beispiel als WebP) und nutze Caching, damit die Seite schnell lädt.
Die mobile Darstellung: Ein Großteil deiner Besucher kommt über das Smartphone. Teste alle Abschnitte auf mobilen Geräten, bevor die Seite online geht.
Das Rechtliche: Impressum und Datenschutzerklärung gehören auf separate Seiten, die du im Footer verlinkst. Sie zählen nicht als inhaltliche Unterseiten.

SEO für Onepager: So wirst du trotzdem gefunden

Ein Onepager kann bei Google ranken, in der Regel aber nur für ein Hauptkeyword und deinen Firmennamen. Konzentriere dich deshalb auf einen zentralen Suchbegriff, optimiere Seitentitel, Meta-Beschreibung und Überschriften darauf und sorge für schnelle Ladezeiten. Für lokale Unternehmen ist zusätzlich ein gepflegtes Google Unternehmensprofil Gold wert.

Strukturiere deine Abschnitte mit aussagekräftigen Zwischenüberschriften: So erkennt Google die Themen deiner Seite. Optimiere außerdem deine Bilder mit sprechenden Dateinamen, Alt-Texten und komprimierten Formaten. Wie du die Ladezeit deiner Website verbesserst, zeige ich dir im Beitrag Ladezeit verbessern mit Caching. Weitere grundlegende Maßnahmen findest du in meinen 5 Tipps zur SEO-Optimierung.

Wenn du merkst, dass du über mehrere Suchbegriffe gefunden werden willst, führt der Weg meist über zusätzliche Unterseiten oder einen Blog. Warum Blogbeiträge ein wichtiger SEO-Bestandteil sind, erkläre ich dir in einem eigenen Beitrag.

Realistische Erwartungen

Mit einem Onepager wirst du für umkämpfte Suchbegriffe kaum auf Seite 1 ranken. Für deinen Firmennamen und dein Hauptkeyword in Kombination mit dem Ortsnamen funktioniert er aber gut. Wer langfristig über viele Suchbegriffe Kunden gewinnen will, plant besser von Anfang an eine mehrseitige Website.

Welche WordPress Themes eignen sich für Onepager?

Grundsätzlich brauchst du kein spezielles Theme, um einen Onepager zu erstellen: Jedes flexible WordPress Theme eignet sich dafür. Daneben gibt es Themes, die auf Onepager spezialisiert sind und fertige Vorlagen mitbringen. Zwei bekannte Vertreter, die beide weiterhin gepflegt werden (Stand: Juli 2026):

One Page Express

Dieses kostenfreie Theme ist auf Onepager spezialisiert. Per Drag-and-drop und mit vielen fertigen Inhaltsblöcken erstellen auch Einsteiger schnell eine ansehnliche Seite, ganz ohne Programmierung.
onepageexpress.com

Parallax (Themify)

Das Premium-Theme von Themify setzt auf Parallax-Effekte und Scroll-Animationen und bringt über 60 vorgefertigte Layouts mit. Es eignet sich für visuell auffällige Onepager, etwa Portfolios oder Produktseiten.
themify.me/themes/parallax

Du benötigst aber nicht zwingend ein Theme, das speziell für Onepager konzipiert ist. Stattdessen kannst du ein Mehrzweck-Theme (Multi-Purpose Theme) verwenden und einfach nur die Bereiche aufbauen, die du brauchst. Meine persönlichen Favoriten sind Kadence, Astra und Hello Elementor. Wann sich welches dieser drei Themes am besten eignet, liest du in meinem Beitrag Diese 3 WordPress Themes sind die Besten.

Onepager mit WordPress erstellen: Schritt für Schritt

Im Folgenden zeige ich dir, wie du mit WordPress einen Onepager erstellst. Dabei verwende ich das Theme Kadence: ein Mehrzweck-Theme, das sich ebenso für klassische Webseiten eignet.

Außerdem nutze ich Kadence Blocks. Das ist eine Erweiterung für den WordPress-eigenen Gutenberg Editor, also den Standard-Editor, der bei jeder WordPress Website mit dabei ist. Sowohl das Theme als auch das Plugin kannst du kostenfrei nutzen, beide bieten eine Vielzahl nützlicher Funktionen.

Mehr zu Kadence Blocks

Warum ich bei den meisten Projekten auf Kadence Blocks setze und welche Funktionen das Plugin bietet, erfährst du im Beitrag Kadence Blocks für WordPress: Das sind die Vorteile.

Sind Theme und Plugin installiert und aktiviert, kann die Erstellung der Webseite beginnen.

Schritt 1: Seite in WordPress anlegen

Navigiere in der linken Spalte des WordPress Dashboards zum Menüpunkt Seiten und klicke auf Erstellen. Vergib anschließend einen Titel für die Seite (zum Beispiel „Start“).

Schritt 2: Inhalte hinzufügen und gliedern

Nun füllst du die Seite mit Inhalt. Inhalte, die zusammengehören und einen Abschnitt ergeben (beispielsweise die Über-uns-Sektion), gruppierst du jeweils in einem Row Layout. Diesen Block stellt dir Kadence Blocks zur Verfügung.

Platziere anschließend den jeweiligen Inhalt in dem Row Layout. So entsteht Abschnitt für Abschnitt dein Onepager.

Schritt 3: Jedem Abschnitt einen HTML-Anker geben

Jetzt solltest du mehrere Row Layouts auf deiner Seite haben. Vergib nun für jedes Row Layout einen individuellen HTML-Anker (wird oft auch id genannt). Individuell heißt: Jeder Anker darf nur einmal vorkommen. Dem Abschnitt „Über uns“ kannst du zum Beispiel den Anker ueber-uns zuweisen. Leerzeichen und Umlaute wie ä, ü, ö sind in der Bezeichnung nicht erlaubt.

Wofür die Anker gut sind

Die HTML-Anker ermöglichen ein Menü, das beim Klick auf einen Menüpunkt automatisch an die passende Stelle der Seite scrollt.

Schritt 4: Menü erstellen und verknüpfen

Zum Schluss passt du das Menü deiner Website an. Ziel ist ein Menü, dessen Punkte beim Anklicken automatisch zur jeweiligen Sektion scrollen. Speichere dafür deine Seite und navigiere im WordPress Dashboard zu Design und dort zu Menüs. Hier legst du dein Menü an. Der Weg ist auch im aktuellen WordPress 7 unverändert, das Backend sieht seit diesem Update nur etwas frischer aus.

Danach definierst du die Menüpunkte über Individuelle Links. Unter Link-Text gibst du den Namen an, den der Menüpunkt tragen soll (zum Beispiel „Über uns“). In das Feld URL trägst du den HTML-Anker mit vorangestelltem # ein, also beispielsweise #ueber-uns.

Füge auf diese Weise alle Menüpunkte hinzu und achte auf die exakte Schreibweise der Anker. Klicke anschließend auf Menü speichern. Teste danach deine Website: Sollte ein Menüpunkt nicht funktionieren, prüfe den HTML-Anker und die Schreibweise im Menü.

Das Aussehen des Menüs passt du je nach verwendetem Theme in den Theme-Einstellungen oder im Customizer an. Bei Kadence findest du die Einstellungen im Customizer unter dem Reiter Header.

Startseite nicht vergessen

Prüfe deine grundlegenden WordPress-Einstellungen: Die Seite, die du angelegt hast, sollte unter Einstellungen im Bereich Lesen als statische Startseite festgelegt sein. Weitere Grundeinstellungen zeige ich dir im Video Grundlegende WordPress Einstellungen.

Fazit

Ein Onepager kann eine gute Lösung für Unternehmen sein, die eine einfache, übersichtliche Website mit einer klaren Botschaft brauchen. Die Nachteile bei der Suchmaschinenoptimierung und der Erweiterbarkeit solltest du aber vor der Entscheidung sorgfältig abwägen. Das Theme spielt dabei eine untergeordnete Rolle: Mit einem flexiblen Theme wie Kadence oder Astra setzt du sowohl Onepager als auch mehrseitige Websites um.

Du bist unsicher, ob ein Onepager für dein Unternehmen ausreicht, oder du möchtest deinen Onepager lieber professionell erstellen lassen? Dann wirf einen Blick auf mein Angebot rund um WordPress Webdesign oder melde dich gerne unverbindlich bei mir.

Jetzt WordPress Webdesign ansehen

Weitere Infos

FAQ: Häufige Fragen zum Onepager

Ein Onepager ist eine Website mit nur einer Seite. Der Vorteil dieser Art von Website ist, dass sie sehr einfach und leicht zu bedienen ist. Hierbei muss man sich nicht durch verschiedene Seiten klicken, um die gesuchten Informationen zu finden: Alles befindet sich auf einer Seite und man muss lediglich nach unten scrollen, um alle Inhalte zu sehen.

Auf einem Onepager kann jede Art von Inhalt veröffentlicht werden. Das können Informationen über ein Unternehmen, Produkte, Dienstleistungen oder alles andere sein. Allerdings eignen sich Onepager nur begrenzt für detaillierte und lange Inhalte, denn es steht nur eine einzige Seite zur Verfügung. Wenn sehr viel Inhalt dargestellt werden soll, ist eine klassische Website mit Unterseiten meist die bessere Lösung.

Einer der häufigsten Fehler ist der Versuch, zu viele Informationen auf eine Seite zu packen. Denke daran, dass weniger manchmal mehr ist. Halte deine Onepager-Webseite einfach und leicht zu navigieren. Ein weiterer Fehler ist die Nichtnutzung von Leerraum. Verwende Leerraum, um den Inhalt aufzulockern und ihn übersichtlicher zu gestalten.

Onepager haben zwar viele Vorteile, aber es gibt auch einige Nachteile zu beachten. Einer der größten Nachteile ist, dass es schwierig sein kann, mit einer Onepager-Webseite in den Suchmaschinen weit oben zu ranken, denn alle Inhalte teilen sich eine einzige Seite. Außerdem stößt ein Onepager schnell an seine Grenzen, wenn dein Angebot wächst und mehr Inhalte dazukommen.

Nur bedingt. Ein Onepager hat nur eine Seite, einen Seitentitel und eine Meta-Beschreibung und kann deshalb realistisch nur für ein Hauptkeyword und den eigenen Firmennamen ranken. Für lokale Unternehmen mit einem gepflegten Google Unternehmensprofil kann das ausreichen. Wer über viele Suchbegriffe gefunden werden will, braucht eine mehrseitige Website oder einen Blog.

Das hängt vom Umfang und der Umsetzung ab. Erstellst du den Onepager selbst mit WordPress, fallen im Wesentlichen Kosten für Hosting und Domain an. Bei einer professionellen Erstellung ist ein Onepager meist günstiger als eine große Website, da der Aufwand geringer ist. Einen Überblick über alle Kostenpunkte findest du im Beitrag WordPress: Kosten für eine Website.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Elementor Button animieren – Button mit CSS anpassen

Benjamin Bode — Mon, 20 Jul 2026 22:39:32 +0000

Elementor Buttons animierst du mit ein wenig eigenem CSS. Die eingebauten Hover-Effekte von Elementor decken nur Standards wie Vergrößern oder Pulsieren ab, individuelle Animationen sind damit nicht möglich. In Elementor Pro fügst du den CSS-Code direkt am Button im Tab „Erweitert“ unter „Eigenes CSS“ ein. In diesem Beitrag findest du drei fertige Button-Animationen zum Kopieren.

Der klassische Elementor Button ist bewusst schlicht gehalten: Du kannst Farben, Schatten und Rahmen anpassen und ein paar vorgefertigte Hover-Effekte aktivieren. Damit hört der Spaß aber auch schon auf. Genau so ist dieser Beitrag entstanden: Ich wollte für ein Projekt animierte Buttons, die die Bordmittel von Elementor in keiner Weise abdecken. Die Lösung war eigenes CSS.

Deshalb zeige ich dir zuerst, wie du eigenes CSS in Elementor einfügst, mit und ohne Pro-Version. Danach stelle ich dir drei animierte Buttons vor, jeweils mit Vorschau und komplettem CSS-Code zum Kopieren. Im Video siehst du alle drei Animationen in Aktion.

Eigenes CSS in Elementor einfügen

Mit Elementor Pro ist das Einfügen sehr komfortabel: Klicke deinen Button an, öffne den Tab „Erweitert“ und trage den Code im Abschnitt „Eigenes CSS“ ein. Dort arbeitest du mit dem Platzhalter selector. Elementor ersetzt ihn automatisch durch den CSS-Selektor genau dieses Elements. Der Code wirkt dadurch nur auf den Button, an dem du ihn hinterlegst, und nicht auf andere Buttons deiner Website. Alle drei Code-Beispiele in diesem Beitrag sind für diesen Weg geschrieben.

Du nutzt die kostenlose Version von Elementor? Dann fügst du den Code stattdessen im WordPress-Customizer unter „Design“ und „Zusätzliches CSS“ ein. Das funktioniert mit jedem klassischen WordPress-Theme, beachte dabei aber unbedingt den folgenden Hinweis.

Wichtig: Ohne Elementor Pro musst du selector ersetzen

Der Platzhalter selector funktioniert nur im Feld „Eigenes CSS“ von Elementor Pro. Im Customizer musst du ihn austauschen: Vergib deinem Button im Tab „Erweitert“ im Feld „CSS-Klassen“ einen eigenen Namen, zum Beispiel mein-button (dieses Feld gibt es auch in der kostenlosen Version). Ersetze anschließend im Code jedes selector durch .mein-button. Erst dann weiß der Browser, für welchen Button das CSS gelten soll.

Tipp: Elementor Pro

Elementor Pro bietet dir neben dem Feld „Eigenes CSS“ an jedem Element viele weitere Profi-Funktionen, zum Beispiel den Theme Builder, zusätzliche Widgets und erweiterte Formulare. Wenn du regelmäßig mit Elementor arbeitest, lohnt sich ein Blick: Hier geht es zu Elementor Pro *.

* Es handelt sich hierbei um einen Affiliate-Link.

Elementor Button animieren (1): Animierter Farbverlauf

Dieser Button hat einen animierten Farbverlauf aus vier Farben. Sobald du mit dem Mauszeiger über den Button fährst, startet die Animation und der Farbverlauf wandert durch den Button.

Meiner Meinung nach sieht dieser Button richtig gut aus. Besonders schön kommt er auf einem dunklen Website-Hintergrund (Dark-Design) zur Geltung. Die vier Farben passt du über die CSS-Variablen --grad1 bis --grad4 ganz einfach an deine Website an.

:root{
    --grad1: #03a9f4;
    --grad2: #f441a5;
    --grad3: #ffeb3b;
    --grad4: #03a9f4;
}

selector a{
    background: linear-gradient(110deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));
    background-size: 400%;
    z-index: 1;
    position: relative;
}

selector a:hover{
    animation: animate 12s linear infinite;
}

@keyframes animate {
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}

Elementor Button animieren (2): Leuchtende Ecken mit Glow-Effekt

Dieser Button bekommt farbig leuchtende Ecken, sobald der Mauszeiger ihn berührt. Für das Leuchten sorgt ein Blur-Filter, der den Farbverlauf hinter dem Button weichzeichnet.

Farblich ist dieser Button deutlich schlichter als Button 1. Auch hier bin ich der Auffassung, dass die Farben bei einem Dark-Design am besten zur Geltung kommen. Über die CSS-Variablen am Anfang des Codes stellst du die Größe des Buttons, die Hintergrundfarbe und die beiden Verlaufsfarben ein.

selector{
    --btn-width: 180px;
    --btn-height: 50px;
    --btn-background: #1C3161;
    --left-gradient: #F803F8;
    --right-gradient: #03F2FD;
}

selector a {
  position: relative;
  width: var(--btn-width);
  height: var(--btn-height);
}

selector a:before,
selector a:after {
  content: '';
  position: absolute;
  inset: 0;
  transition: 0.5s;
}

selector a:nth-child(1):before,
selector a:nth-child(1):after {
  background: linear-gradient(45deg,var(--left-gradient),var(--btn-background),var(--btn-background),var(--right-gradient));
}

selector a:hover:before {
  inset: -3px;
}

selector a:hover:after {
  inset: -3px;
  filter: blur(10px);
}

selector a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--btn-background);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

Elementor Button animieren (3): Animierte Unterstreichung

Der dritte Button ist ein schlichter Button, unter dessen Inhalt ein kurzer Strich sitzt. Fährst du mit dem Mauszeiger über den Button, wird der Strich breiter und unterstreicht den Text des Buttons.

Ein solcher Button lässt sich vielfältig einsetzen, denn der Effekt ist dezent und passt zu fast jedem Design. Ein Hinweis zur Anpassung: Der Wert top: 34px hängt von der Höhe deines Buttons ab. Sitzt der Strich nicht direkt unter dem Text, passe diesen Wert in kleinen Schritten an.

selector .elementor-button-content-wrapper:after{
    content: "";
    height: 1px;
    display: inline-block;
    background-color: #fff;
    position: absolute;
    top: 34px;
    margin-left: 0px;
    width: 20%;
    transition: width .6s ease;
}
selector:hover  .elementor-button-content-wrapper:after{
    width: 70%;
}

Fazit: Elementor Button animieren

Mit wenigen Zeilen CSS holst du aus dem Standard-Button von Elementor deutlich mehr heraus. Die drei gezeigten Animationen kannst du direkt kopieren und über die CSS-Variablen an die Farben deiner Website anpassen. So lenkst du die Aufmerksamkeit deiner Besucher gezielt auf wichtige Aktionselemente wie „Jetzt anfragen“ oder „Termin buchen“.

Du möchtest deine Buttons und den Rest deiner Website lieber vom Profi gestalten lassen? Dann wirf einen Blick auf unser WordPress Webdesign. Gerne gestalte ich eine Website, die zu deinem Unternehmen passt.

Diese Beiträge rund um Elementor könnten dich ebenfalls interessieren:

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de

Barrierefreies Webdesign: Landmarks in WordPress richtig nutzen

Benjamin Bode — Mon, 20 Jul 2026 15:44:56 +0000

Landmarks sind ausgezeichnete Bereiche einer Website (etwa Header, Hauptinhalt und Footer), an denen sich Screenreader und andere Hilfstechnologien orientieren. Für Menschen mit Beeinträchtigungen sind sie das Navigationsgerüst einer Seite, und damit ein Grundbaustein für barrierefreies Webdesign.

Das Thema ist längst nicht mehr freiwillig: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) viele Unternehmen zu barrierefreien digitalen Angeboten. Höchste Zeit also, die eigene Website darauf abzuklopfen.

Barrierefreiheit ist Pflicht: das BFSG

Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025. Es verpflichtet Unternehmen, die digitale Produkte oder Dienstleistungen für Verbraucher anbieten, zur Barrierefreiheit. Betroffen sind vor allem Websites, über die Verträge angebahnt oder geschlossen werden, also Online-Shops, Buchungs- und Terminfunktionen. Reine Informations-Websites ohne solche Funktionen fallen in der Regel nicht darunter.

Eine wichtige Ausnahme gibt es für Kleinstunternehmen, die Dienstleistungen erbringen: Wer weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz hat, ist von der Pflicht ausgenommen. Als technischer Maßstab gilt die europäische Norm EN 301 549, die auf die WCAG 2.1 in der Stufe AA verweist.

Unabhängig von der rechtlichen Pflicht gilt: Barrierefreiheit vergrößert deine Zielgruppe, verbessert die Bedienbarkeit für alle Besucher und zahlt über sauberen, strukturierten Code auch auf die Suchmaschinenoptimierung ein.

Was sind Landmarks?

Landmarks sind speziell ausgezeichnete Bereiche einer Website, die Screenreadern die Struktur der Seite mitteilen: Hier ist die Navigation, hier beginnt der Hauptinhalt, hier kommt die Fußzeile. Nutzer von Hilfstechnologien können so direkt zwischen den Bereichen springen, statt sich Element für Element durch die Seite zu arbeiten.

Definiert werden Landmarks über semantische HTML-Elemente:

für die Kopfzeile,

Landmarks in WordPress und im Kadence Theme

WordPress selbst nutzt bereits semantische HTML-Elemente, den Rest entscheidet dein Theme. Und da gibt es große Unterschiede: Manche Themes setzen Landmarks vorbildlich, andere lückenhaft. Bei Mängeln kann ein Plugin wie WP Accessibility helfen, besser ist aber ein Theme, das Barrierefreiheit von Haus aus ernst nimmt.

Das Kadence Theme, das ich für die meisten Projekte einsetze, gehört zu den Positivbeispielen: Landmarks werden standardmäßig korrekt gesetzt, und auch weitere Aspekte der Barrierefreiheit sind sauber umgesetzt. Mehr dazu liest du in meinem Beitrag Diese WordPress Themes sind die Besten.

Landmarks mit Elementor setzen (Hello Theme)

Beim Pagebuilder Elementor mit dem Hello Theme musst du die Landmarks den Bereichen manuell zuweisen. Genau das wird leider oft vergessen, ich habe schon viele Elementor-Websites ohne ein einziges korrektes Landmark gesehen. So gehst du vor:

Landmarks für Header und Footer

Navigiere im WordPress Dashboard zu Templates und öffne deinen Header im Theme Builder mit Elementor.

Klicke unten links auf das Zahnrad (Einstellungen) und stelle unter HTML-Tag den Wert header ein. Damit ist das Landmark gesetzt. Beim Footer gehst du genauso vor: Footer-Template öffnen, Zahnrad anklicken, HTML-Tag auf footer stellen.

Landmark für den Hauptinhalt (Main)

Den Hauptinhalt versieht Elementor leider nicht automatisch mit dem main-Landmark. Die Lösung ist ein eigenes Template: Gehe zu Templates, füge ein neues Template vom Typ Single Page hinzu, vergib einen Namen (zum Beispiel „Seite“) und lasse es zunächst leer.

Klicke im Elementor-Editor auf das Zahnrad (Einstellungen) und wähle unter HTML Wert die Option main aus.

Jetzt muss das Template noch für die normalen Seiten aktiviert werden: Klicke auf die Pfeilspitze neben dem Veröffentlichen-Button, wähle Bedingungen anzeigen und setze die Bedingung auf Alle Singular.

Zum Abschluss fügst du in das Template einen Abschnitt in voller Breite ein und platzierst darin das Element Beitrag Inhalt. Speichern, fertig: Der Inhalt deiner Seiten wird nun mit dem main-Landmark ausgegeben.

Weitere Aspekte der Barrierefreiheit

Landmarks sind ein wichtiger Baustein, aber längst nicht alles. Diese Punkte solltest du ebenfalls im Blick haben:

Ausreichende Kontraste: Text muss sich deutlich vom Hintergrund abheben. Welche Wirkung Farben dabei haben, liest du im Beitrag Farbwirkung: Farben für die Webseite.
Alt-Texte für Bilder: Beschreibe in wenigen Worten, was auf dem Bild zu sehen ist, damit Screenreader es vorlesen können.
Lesbare Schrift: ausreichende Schriftgrößen, klare Schriftarten und genügend Zeilenabstand helfen allen Besuchern.
Bedienbarkeit per Tastatur: Alle Funktionen müssen ohne Maus erreichbar sein, inklusive sichtbarem Fokus-Rahmen.
Klare Struktur und Sprache: saubere Überschriften-Hierarchie, verständliche Texte und eine intuitive Navigation.

Fazit

Landmarks kosten kaum Aufwand und bringen enorm viel: Sie geben Menschen mit Beeinträchtigungen die Orientierung, die Sehende visuell bekommen. Mit dem Kadence Theme bekommst du sie geschenkt, bei Elementor musst du selbst Hand anlegen. Und spätestens seit das BFSG gilt, ist Barrierefreiheit für viele Unternehmen keine Kür mehr, sondern Pflicht.

Du möchtest wissen, wo deine Website in Sachen Barrierefreiheit steht und ob das BFSG dich betrifft? Mit meiner Webseiten-Analyse und Beratung gehe ich deine Website strukturiert mit dir durch.

Hinweis: Dieser Beitrag gibt allgemeine Informationen wieder und ersetzt keine Rechtsberatung. Bei konkreten rechtlichen Fragen wende dich an eine Anwältin oder einen Anwalt für IT- und Datenschutzrecht.

FAQ: Häufige Fragen zum barrierefreien Webdesign

Barrierefreies Webdesign bezieht sich auf die Gestaltung von Websites, die für alle Benutzer, einschließlich Menschen mit Behinderungen oder Einschränkungen, zugänglich und nutzbar sind. Dies beinhaltet die Verwendung von Techniken und Standards, die es Benutzern ermöglichen, die Website mithilfe von Hilfsmitteln wie Bildschirmleseprogrammen oder speziellen Tastaturen zu nutzen.

Barrierefreies Webdesign ist wichtig, weil es dafür sorgt, dass alle Benutzer die gleichen Möglichkeiten haben, die Inhalte und Funktionen einer Website zu nutzen. Dies fördert die Inklusion und trägt dazu bei, dass das Internet für alle zugänglich bleibt.

Ja. International maßgeblich sind die Web Content Accessibility Guidelines (WCAG) des W3C. In Deutschland kommt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (BFSG) hinzu: Es verweist über die europäische Norm EN 301 549 auf die WCAG 2.1 in der Konformitätsstufe AA. Diese Stufe ist damit für betroffene Unternehmen der praktische Maßstab.

Benjamin Bode

Die Website kann ein entscheidendes Marketing-Instrument sein, wenn sie entsprechend optimiert und auf dein Unternehmen ausgerichtet ist.

onestep-webdesign.de