Jedes Jahr, nein, jedes Mal, wenn ich diese Seiten aufrufe und bearbeite, schäme ich mich deswegen. Vor ein paar Tagen war’s dann schließlich genug. Ich habe recherchiert, wie man im Website-Footer die Jahreszahl automatisch ändern lassen kann.

Und das geht – total einfach sogar!

Mit WordPress kannst du automatisch die Jahreszahl ändern lassen. Einmal einrichten muss sein, aber dann ändert sich das Jahr jeden 1.1. von selbst.

Zwei ganz besonders praktische und super fix eingerichtete Lösungen für WordPress stelle ich dir hier vor:

Die Jahreszahl auf der Website automatisch mit den Dynamischen Attributen von Elementor Pro ändern ZU VARIANTE 1

oder mithilfe von Code und einem WordPress-Plugin aktualisieren lassen ZU VARIANTE 2

Los geht’s!

Variante 1: Jahreszahl auf Website mit dynamischen Attributen in Elementor Pro aktualisieren lassen

Diese Variante kannst du nutzen, wenn du Elementor Pro hast. Mit der kostenlosen Elementor-Version geht es leider nicht; dann empfehle ich dir Variante 2.

So geht’s:

1⃣ Öffne dein Fußzeilen-Template im Elementor Bearbeitungsmodus. (Oder eben die Stelle, in der du eine Jahreszahl hast – meist ist das im Copyright-Bereich vom Footer/Fusszeile.)

Das geht entweder, indem du eine beliebige Seite öffnest und über die dunkle Leiste oben -> „Mit Elementor bearbeiten“ deine Fußzeile auswählst.

Oder über die Template-Übersicht unter „Elementor“ –> „Gespeicherte Templates„.

2⃣ Füge an der Stelle, wo du die Jahreszahl haben willst ein neues Text- oder Überschrifts-Element hinzu, ODER klicke in das vorhandene Text-Element, falls schon eins existiert (z. B. mit deinem Copyright-Hinweis).

Egal ob Text oder Überschrift, rechts an der Ecke findest du das Icon für die Dynamischen Attribute. (Ich würde es jetzt mal als Stapel bezeichnen )

Klicke es an.

In der angezeigten Liste, scroll ein Stück runter bis du „Aktuelles Datum und Uhrzeit“ siehst und klicke es an – genau das brauchen wir!

3⃣ In deinem Footer sollte jetzt genau das aktuelle Datum und die Uhrzeit stehen. Um das auf die reine Jahreszahl zu ändern, klicke „Aktuelles Datum und Uhrzeit“ an. Es öffnet sich dieses Fenster mit den Einstellungen.

Stelle Datumsformat auf „Individuell“ und als Individuelles Format trägst du einfach ein Y ein (Y für Year, bzw. Jahr).

Jetzt zeigt es nur die Jahreszahl (z. B. 2026) an – und springt automatisch am nächsten 1.1. auf das neue Jahr um

Variante 2: Das Jahr per Code Snippet und Plugin automatisch ändern

Für den Fall, dass du kein Elementor Pro hast oder einen anderen Pagebuilder nutzt, kannst du die Jahreszahl auch mit ein wenig Code automatisch ändern lassen. Diese Lösung funktioniert für jedes WordPress-Theme.

So geht’s:

1⃣ Installiere dir im Vorfeld das Plugin Code Snippets und aktiviere es.

(Kurz angemerkt: Ja, es würde ohne Plugin gehen, aber dann müsstest du tiefer in deinen Theme-Code eintauchen und die functions.php bearbeiten. Ohne entsprechendes Wissen würde ich da die Finger von lassen, deshalb gehen wir hier den Weg über das Plugin )

2⃣ Über „Snippets“ –> „Neu hinzufügen“ kopiere diesen Code ins Code Snippets Plugin:

add_shortcode('current_year', function () {
    return date_i18n('Y');
});

Klicke Speichern und Aktivieren.

3⃣ Öffne jetzt dein Fusszeilen-Template und füge ein Shortcode-Widget ein. In dieses kopierst du folgenden Code Schnipsel:

[current_year]

Speichern und das wars auch schon – jetzt wird in deiner Fusszeile das aktuelle Jahr angezeigt.

Tipp: Farbe der Jahreszahl ändern

Falls bei dir – wie bei mir – das Jahr schwarz ist, kannst du mit ein wenig CSS-Code die Farbe ändern.
Dafür gibst du dem ShortCode-Element eine CSS-ID (unter „Erweitert“ –> „Layout“ –> CSS-ID) und fügst anschließend diesen Code unter „Individuelles CSS“ ein:

#jahr {
  color: #ffffff;
}

In meinem Beispiel-Code hier ist die CSS-ID #jahr.
Du kannst jeden beliebigen anderne Namen verwenden. Wichtig ist nur, dass du sie auch im CSS-Code selbst richtig benennst. Nur wenn die IDs einheitlich sind, greift der Code.

Anstelle von #ffffff – das ist die Farbe weiß – kannst du auch einen anderen Farbcode im Code hinterlegen.

Mit diesem kleinen Code-Setup wird die Jahreszahl jedes Jahr automatisch neu gesetzt.

So sieht es bei mir mit Variante 2 aus:

Alles schön und gut, aber das soll lieber jemand anderes für dich machen? Ich übernehme! Melde dich einfach und ich setze die Jahreszahl auf deine Website (… oder kümmere mich um deine anderen WordPress und Elementor Probleme)!

Jetzt WordPress Support holen

Für meine eigenen Hobby-Websites ändere ich die Jahreszahl übrigens mit Variante 3, per PHP, weil die nicht auf WordPress basieren.

Egal wie – mit diesen kleinen Tricks hast du ab sofort immer das aktuelle Jahr in der Fusszeile auf deiner Website stehen. Es sind die kleinen Dinge, gell?

Du hast mit meiner Anleitung das Jahres auf deiner eigenen Website ändern können? Mega! Sag doch danke, indem du eine dieser Grafiken bei Pinterest teilst <3

Der Beitrag Jahreszahl auf Website automatisch ändern: So hast du immer das aktuelle Jahr im Footer stehen erschien zuerst auf Chrissi Wagner.

Kein Wunder, dass wir schnell begeistert „Geil, dieses Jahre mache ich meinen eigenen E-Mail-Adventskalender!“ rufen – und dann erstmal die Überforderung kickt.

Damit du bestens vorbereitet bist, habe ich mir die Marketingstrategin – und echte Adventskalender-Expertin – Ulli Anderwald eingeladen, um dir zu zeigen, wie du deinen Online-Adventskalender planen kannst.

Freu dich über einen informativen, „on point“ Beitrag voll mit Tipps und Tool-Empfehlungen für deinen eigenen Online-Adventskalender. Am Ende haben wir auch noch eine Überraschung für dich.

Vorhang auf für Ulli!

Der Countdown bis Weihnachten ist nicht nur für Kinder spannend – auch für Unternehmer:innen bietet der Advent die perfekte Gelegenheit, sichtbar zu werden, Reichweite aufzubauen und Kunden zu begeistern.

Einen Online-Adventskalender zu erstellen, ist heute tatsächlich einfacher denn je.

Dank KI-Tools, Vorlagen, Plugins und Automatisierung kannst du in wenigen Stunden eine komplette Aktion aufsetzen – ganz ohne Technikfrust.

Ob du Leads sammeln, bestehende Kund:innen beschenken oder deinen Umsatz ankurbeln willst – ein digitaler Adventskalender ist ein echter Marketing-Booster zur Weihnachtszeit.

Warum sich ein Online-Adventskalender lohnt

Ein Adventskalender ist mehr als eine nette Geste – er ist ein strategisches Marketinginstrument:

Leadmagnet deluxe: Sammle täglich neue Kontakte mit Spaßfaktor und “haben wollen”

Mehr Interaktion: Erhöhe deine Reichweite auf Social Media durch tägliche Aktionen.

Expertenstatus stärken: Teile wertvolle Tipps, Impulse oder kleine Geschenke, die zeigen, was du kannst.

Mehr Umsatz: Mit Rabattaktionen, Produkt-Highlights oder Gewinnspielen steigerst du gezielt deine Verkäufe.

Kundenbindung: Schenke deinen Follower:innen oder deiner Newsletter Community täglich eine relevante Inspiration – das bleibt im Gedächtnis.

KI & Tools: So einfach war Advents-Marketing noch nie

Früher war ein Online-Adventskalender aufwendig: 24 Türchen gestalten, Inhalte erstellen und planen, Landingpage erstellen, E-Mails versenden…

Heute übernimmt ein großer Teil der Arbeit die KI – und du kannst dich auf die kreative Idee konzentrieren. Und sogar dafür gibt es wertvolle Hilfe.

Hier ein Überblick, wie du mit wenig Aufwand startest:

Ideenfindung & Planung: Lass dir von ChatGPT oder anderen KI-Tools Themen, Titel und Content-Vorschläge generieren.

Design & Vorlagen: Canva bietet zahlreiche vorgefertigte Adventskalender-Templates für Social Media oder Newsletter.

Technische Umsetzung: Plugins wie SantaPress, Pilacom Adventskalender und Promotion Calendar (alle für WordPress) oder Newsletter-Tools (z. B. Active Campaign*, Mailerlite) machen das Aufsetzen spielend leicht.

Automatisierung: Mit Zapier oder integrierten Workflows planst du alle 24 Türchen vor – und sie öffnen sich automatisch.

Du brauchst also keine Agentur oder teure Tools – nur eine gute Idee und Lust auf Sichtbarkeit.

3 Tipps für deinen erfolgreichen Online-Adventskalender

Tipp 1: Wähle den passenden Kanal

Überlege dir, wo du deine Zielgruppe am besten erreichst:

Auf Social Media (Instagram, Facebook, LinkedIn), über deinen Newsletter oder auf deiner Website?

Kombiniere maximal zwei Kanäle – z. B. eine Landingpage mit Newsletter-Anmeldung und tägliche Posts auf Social Media.

So bleibt es übersichtlich, datenschutzkonform und effektiv.

Tipp 2: Integriere ein Gewinnspiel

Menschen lieben Geschenke!

Ein Gewinnspiel erhöht deine Reichweite, sorgt für tägliche Interaktion und macht deine Aktion noch spannender.

Wichtig: Wähle einen Preis, der zu deinem Angebot passt – z. B. einen Gutschein, eine Beratung, ein Produktpaket.

So ziehst du echte Wunschkund:innen an – keine reinen Gewinnspieljäger.

Tipp 3: Sorge für Abwechslung

Kein Tag wie der andere!

Setze auf unterschiedliche Formate, um deine Community bei Laune zu halten:

Videos, Audios, Bilder, Tipps, Mini-Challenges oder kleine Geschenke.

Menschen lieben Überraschungen – und genau das ist der Zauber eines Adventskalenders.

Was du mit einem Online-Adventskalender erreichen kannst

Ein gut geplanter Online-Adventskalender ist weit mehr als eine hübsche Marketingaktion – er kann dein Business nachhaltig verändern.

Viele Unternehmer:innen berichten von überraschenden Erfolgen: von Presseberichten und Folgeaufträgen über 4-stellige Umsätze bis hin zu prall gefüllten Leadlisten für Launches im neuen Jahr. Für manche war der Kalender sogar der Startschuss zu einem eigenen Mini-Produkt oder um überhaupt das Online Business zu starten.

Und nicht selten sorgt er jedes Jahr aufs Neue für begeisterte Kund:innen, starke Öffnungsraten und einen massiven Vertrauensbonus.

Fazit: Dein Adventskalender als Marketing-Turbo

Ein Online-Adventskalender ist kein Hexenwerk mehr, sondern ein cleveres Marketing-Tool, das Spaß macht, Beziehungen stärkt und sichtbar Ergebnisse bringt.

Mit der Unterstützung von KI, Vorlagen & Automatisierung kannst du in kurzer Zeit eine professionelle Kampagne erstellen, die dich und dein Business in die Herzen deiner Zielgruppe bringt.

Wenn du dabei nicht allein tüfteln möchtest, sondern lieber gemeinsam Schritt für Schritt deinen Masterplan entwickelst, dann halte dir unbedingt einen Platz in der nächsten Adventskalender-Challenge frei.

Dort erstellen wir gemeinsam deinen Masterplan für dein bestes Freebie ever – und die Basis für deinen Kalender wird in einer Woche startklar sein.

Anmerkung von Chrissi: Hast du Lust bekommen, gemeinsam mit Ulli deinen Business-Online-Adventskalender zu planen?

Dann sichere dir jetzt über meinen Affiliate-Link deinen Platz – am 15. Oktober geht’s los!

YES! Das will ich

Übrigens, mich wirst du während der Challenge „treffen“ – ich darf nämlich mein beliebtes E-Mail-Adventskalender-Setup für ActiveCampaign als Bonus teilen.

Ich hab da noch was für dich: Wenn du dich über meinen Link zur Challenge anmeldest, bekommst du mit dem Rabattcode

ChrissiW

50% Nachlass auf den Preis!

Ich freu mich auf viele tolle, neue Online-Adventskalender!

Ulli Anderwald ist Gründerin der C.L.E.V.E.R.-Blaupause & Marketingstrategin für einfaches, KI-gestütztes Marketing.

Über die Gastautorin

Wie man das eigene Marketing mit weniger Aufwand und mehr Erfolg gelingt, zeigt sie Selbständigen aus allen Branchen im ganzen DACH Raum. Außerdem ist sie zertifizierte KMU Digital Beraterin in Österreich.

Mehr von Ulli:

www.blau-pause.at || Instagram

Gesucht – Gebucht: „Sichtbar in 3 Stunden“ – Der SEO & KI Umsetzungsworkshop
Schulung zum EU AI Act 2025 für Soloselbstständige & KMU
„Sicher mit KI – Dein Nachweis für rechtssicheren KI-Einsatz“

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!

Transparenzhinweis: In diesem Beitrag sind Ulli Anderwalds Adventskalender-Planungs-Challenge sowie mein „to go“ E-Mail-Marketing-Tool ActiveCampaign verlinkt. In beiden Fällen handelt es sich um Affiliate-Links. Wenn du über diese Links buchst, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten.
Du kannst dir immer sicher sein, dass ich nie etwas empfehlen würde, hinter dem ich nicht zu 100% stehe.

Der Beitrag Online-Adventskalender leicht gemacht – mit KI, Vorlagen & Plugins zum Sichtbarkeits-Booster (Gastartikel von Ulli Anderwald) erschien zuerst auf Chrissi Wagner.

Weißt du, was meiner Meinung nach der wichtigste Bestandteil auf einer Website von Selbstständigen sein sollte? 

Das Kontaktformular.

Ich finde, auf jede professionelle Business-Website gehört ein Kontaktformular. 

Und doch stolpere ich zwischendurch auf Webseiten von Solo-Selbstständigen, auf denen es keins gibt.

Ist mir vor Kurzem wieder passiert, als ich auf der Suche nach einer Business-Fotografin war. Eine halbe Stunde googlen, ca. 15 verschiedene Fotografinnen genauer anschauen – und zwei davon ohne Kontaktformular finden. Das sind 13,3 %! 

(Eine hatte nicht einmal eine Über mich Seite – sorry, neeeext!)

Ich weiß nicht, wie’s dir geht, aber mich müsste ein Angebot so dermaßen ansprechen, dass ich sofort aufgeregtes Herzklopfen bekomme – dann würde ich mich ohne eine Anfrage übers Kontaktformular bei der Person melden. 

Meist klicke ich die Seite aber einfach wieder weg.

Damit du dir das mit deinen InteressentInnen nicht auch passiert, zeige ich dir in diesem Beitrag, wie du ein Kontaktformular bei WordPress kostenlos einrichten kannst.

Über das Inhaltsverzeichnis kommst du sofort zur Schritt-für-Schritt-Anleitung.

Falls es noch ein bisschen Überzeugungsarbeit braucht… Warum solltest du ein Kontaktformular mit WordPress erstellen?

Schnapp sie dir, wenn sie noch heiß sind…

Deine BesucherInnen können dir genau in dem Moment schreiben, wo sie interessiert sind.

Du kennst es vielleicht selbst: Wenn dich ein Angebot interessiert, du „heiß drauf“ bist und am liebsten sofort buchen würdest, weil das genau dein Problem lösen würde und die Person sympathisch wirkt… Dann überlegst du nicht lange, sondern schickst direkt eine Anfrage. 

Am schnellsten geht das nun mal übers Kontaktformular.

Ein Kontaktformular auf der Website ist niederschwellig

Auch wenn’s nach nicht viel Aufwand klingt, eine E-Mail zu schreiben: Du musst erst in dein E-Mail-Programm wechseln, ggfs. nach dem Login suchen, eine neue Mail anlegen, … ah, Mist, und die E-Mailadresse der Empfängerin musst du auch noch aus deren Website heraussuchen…

Ein gutes Kontaktformular gibt dir ein Feld für alle wichtigen Infos vor und du kannst sofort lostippen.

Ein guter Kontaktformular Aufbau schafft Struktur

Mit einem Kontaktformular gibst du deine Anfrage-Struktur vor (sofern das zu deinen Angeboten passt oder für deinen Arbeitsprozess notwendig und praktikabel ist). 

Durch gezielte Felder steuerst du, welche Infos du von deinem Gegenüber brauchst – z. B. 

• Projektart („Wobei genau brauchst du Unterstützung?“), 
• Zeitrahmen („Wann soll XYZ umgesetzt werden?“), 
• gewünschte Kontaktaufnahme („Wie darf ich dich kontaktieren?“),
• vorhandenes Budget („Die Kosten betragen ca. 1.500 € netto. Liegt das in deinem Budget?“) 

Spart dir später zig Rückfragen und hilft auch der Person, die dich gerade für ein Projekt anfragt, sich selbst und die eigenen Wünsche und Erwartungen besser zu strukturieren.

In Elementor kannst du all diese Einstellungen machen. Wie, sehen wir uns gleich an!

Ein Kontaktformular ist datenschutzfreundlicher

Wenn du dein Kontaktformular richtig aufsetzt (mit Checkbox für die Datenschutzerklärung; wie das geht, zeige ich dir gleich!), bist du rechtlich auf der sicheren Seite – im Gegensatz zur reinen E-Mailadresse. 

Meiner Erfahrung nach schätzen das viele Menschen.

Es ist halt einfach cool, persönliche Nachrichten zu erhalten

Auch, wenn noch keine fixe Buchung/Zahlung zustande kam: Die Freude über eine neue Anfrage teilen wir Online-UnternehmerInnen doch alle, oder?

Was braucht es nun, um ein professionelles Kontaktformular mit WordPress erstellen zu können?

Welches Tool für’s Kontaktformular? Elementor? DIVI? Oder doch ein Plugin?

Du ahnst es: Mein To Go Pagebuilder Elementor hat vorgesorgt und die Formular-Funktion schon integriert. 

Du nutzt eh WordPress.org für deine Website und den Elementor Pagebuilder? Perfekt!

Falls du Elementor bislang nicht verwendest, kein Problem! Du kannst dir das Plugin einfach downloaden, es aktivieren und anhand meiner Anleitung weitermachen.

Für ein normales Kontaktformular – also eins, über das dich Interessentinnen und Interessenten anfragen können und du per Mail über eine neue Anfrage benachrichtigt wirst – reicht die kostenfreie Version von Elementor. Du brauchst nicht Elementor Pro. Damit ist dein WordPress-Kontaktformular kostenlos (wär ja noch schöner!).

Tutorial: Kontaktformular erstellen mit WordPress und Elementor

Das Ganze ist in max. 30 Minuten umgesetzt.

Du magst Videoanleitungen lieber? Dann zeige ich dir hier Step by Step, wie du ein Kontaktformular mit WordPress erstellen kannst.

Klicke auf „Inhalt entsperren“, um das Video anzuzeigen.

Übrigens, das ist eins meiner ersten Anleitungsvideos im Blog. Ich möchte zukünftig öfter solche Video-Tutorials posten für diejenigen, die nicht so gerne lesen. Das Ganze soll unkompliziert bleiben, also ohne fancy Effekte und 1A Qualität, sondern einfach ein Screenvideo, das dich ohne viel Gelaber durch den Prozess führt. 

Wenn du dir das Video angeschaut hast: Wie hat es dir gefallen? Fandest du es hilfreich und verständlich? Ich freue mich über dein Feedback per Kommentar!

Hier die Anleitung zum Lesen:

1⃣ Öffne deine Kontakt-Seite in Elementor und füge das Formular-Element in einen neuen Container ein.

2⃣ Jetzt hast du den Formular-Rohling vor dir – und den bearbeiten wir gemeinsam!

Klicke zuerst in der Seitenleiste links auf „Inhalt“ → „Formularfelder“. Hier sind die Felder für Name, E-Mail und Nachricht hinterlegt. 

Wenn du das jeweilige Element anklickst, kommst du zu den Feld-Einstellungen.

Das bedeuten sie:

Feldnamen anzeigen: Hier kannst du die Bezeichnung des jew. Feldes reinschreiben. Er erscheint dann direkt über den Feld.

Platzhalter: Quasi dasselbe wie der Feldname, nur erscheint der Text hier direkt im Formularfeld.

Pflichtfeld: Wenn du den Schalter auf „AN“ setzt, schaffst du ein Pflichtfeld. Solange das nicht ausgefüllt ist, kann das Formular nicht abgeschickt werden.

Die E-Mailadresse ist standardmäßig ein Pflichtfeld. 

Bei allen anderen Feldern kannst du auf die Einstellung verzichten.

Spaltenbreite: 100% ist der Standard; damit geht das Feld über die gesamte Breite. Du kannst aber auch andere Werte einstellen und so z. B. zwei Felder nebeneinander anordnen.

Typ: Hier kannst du den Formulartyp auswählen. 

Typ „Text“ ist die Standardeinstellung und gilt für alle Felder, in die Text geschrieben werden soll.

Einige besonders praktische „Typen“ möchte ich dir gern vorstellen:

• Auswahlliste: via Dropdown verschiedene Optionen auswählen
• Auswahlbox: für die Auswahl verschiedener Optionen via Checkbox/Häkchen
• Datei hochladen: eine oder mehrere Dateien (z. B. Bilder) hochladen und per Kontaktformular übermitteln
• Akzeptanz: für ein Datenschutz-Feld mit Checkbox/Häkchen

Klick dich hier am besten einmal durch und schau dir die einzelnen Möglichkeiten an.

Hast du alle Einstellungen vorgenommen, geht’s weiter in den Abschnitt „Schaltflächen„.

3⃣ Mit „Schaltfläche“ ist der Senden-Button gemeint. Du kannst

• die Button-Größe und -Breite ändern
• den Button-Text anpassen (das mache ich meistens; im Screenshot gelb markiert)
• ggfs. ein Icon in den Button einfügen

Im Grunde musst du hier aber gar nichts einstellen, sondern kannst zum nächsten Abschnitt weitergehen.

4⃣ Die „Aktion nach dem Versenden“ ist wichtig. Damit sagen wir dem Formular, dass es dir die eingegebene Nachricht per E-Mail zuschicken soll.

Dafür stellst du „E-Mail“ ein. Normalerweise ist das voreingestellt.

Falls du Elementor Pro verwendest, wird dir die zusätzliche Aktion „Collect Submissions“ angezeigt (wie im Screenshot). Das ist ein Service von Elementor, der alle Nachrichten im Dashboard unter „Elementor“ → „Submissions“ für dich speichert. Praktisch, falls dein Kontaktformular mal buggt

5⃣ Weiter geht’s mit den „E-Mail“ Einstellungen. Pass hier gut auf, denn ich sehe oft, dass falsche Einstellungen vorgenommen werden und das Kontaktformular dann nicht richtig funktioniert.

Die Felder mit einem Stern-Emoji vorne dran musst du manuell anpassen.

An: Hier kommt deine Empfänger-E-Mailadresse rein. Idealerweise ist das eine Domain-E-Mail, also z. B. wie bei mir hello@chrissi-wagner.de. 

Betreff: Die Betreffzeile der Kontaktformular-Nachricht. Kannst du ändern, musst du aber nicht.

Nachricht: Hier lässt du am besten die Voreinstellung [all-fields] drin. Elementor übermittelt so alle eingegebenen Daten/Texte an dich.

Von E-Mail: Achtung: Hier muss seit Anfang 2025 zwingend eine E-Mailadresse rein, die Bezug auf deine Website-Domain hat. Während du oben im Feld „An“ auch z.B. eine GMX- oder t-online-Adresse angeben kannst, brauchen wir hier den Bezug zu deiner Domain. 

Falls du keine Domain-E-Mail hast oder nicht angeben möchtest, no worries: Du kannst hier einfach eine „Fake“-E-Mail eintragen. Bei mir steht bspw. mail@chrissi-wagner.de drin, obwohl es diese E-Mailadresse gar nicht gibt. 

Es geht nur darum, dass Elementor im Hintergrund eine Verbindung zu deiner Domain herstellen kann.

Von Name: Hier ist nicht dein Name gemeint, sondern der Name der Person, die dein Formular ausgefüllt hat. 
Den einzufügenden Shortcode findest du ganz oben im Abschnitt „Formularfelder“ → Namens-Feld anklicken → Erweitert → Shortcode kopieren.

Diesen Shortcode fügst du ins Feld „Von Name“ ein.

Antwort an: Hier stellst du „E-Mail-Field“ ein, damit du per Mail auf die Kontaktanfrage der anderen Person antworten kannst.

6⃣ Steps Settings kannst du überspringen.

7⃣ Unter „Weitere Optionen“ kannst du einstellen, dass „Eigene Nachrichten“ angezeigt werden, wenn man das Formular ausfüllt. Stelle dafür den Schalter einfach auf AN und passe bei Bedarf die vorgefertigten Texte an.

Klicke jetzt noch rechts oben auf „Veröffentlichen“, bzw. „Aktualisieren“… und du bist fertig! 

8⃣ Ich empfehle dir, dein Kontaktformular jetzt noch zu testen – es soll ja schließlich funktionieren.

Rufe dafür deine fertige Kontakt-Seite in einem Inkognitofenster auf, füll die Felder aus und schicke das Formular ab.

Deine Test-Anfrage sollte jetzt in deinem Posteingang landen. 

Wenn du Elementor Pro nutzt, erscheint die Anfrage außerdem nach wenigen Minuten unter „Submissions“.

War gar nicht so schwer, oder? Am Anfang schrecken die vielen Einstellungen ab, aber wenn du dich Stück für Stück durcharbeitest, hast du in etwa 30 Minuten dein Elementor Kontaktformular eingerichtet.

Technik-Schweiß auf der Stirn, nur weil du 'nen Button verschieben willst?

Gib mir das kurz rüber – ich übernehme die Änderungen für dich und du kannst dich zurücklehnen und freuen.

Jetzt Elementor-Hilfe holen

Kontaktformular Aufbau: Was braucht’s, was nicht?

Wenn du dir beim Aufbau deines Kontaktformulars schon denkst: „Puh, ist das viel auszufüllen“, werden das auch etwaige InteressentInnen tun. Wir wollen das Kontaktformular also so niederschwellig wie möglich halten.

Solltest du in deinem Elementor Kontaktformular Vorname und Nachname abfragen?

• Ja, wenn du eher im B2B-Bereich unterwegs bist und deine KundInnen siezt.
• Nein / nicht unbedingt, wenn du deine Zielgruppe sonst auch duzt und eher mit PrivatkundInnen zu tun hast.

Die E-Mailadresse sollte immer ein Pflichtfeld sein. Klar, denn die brauchst du, um auf die Anfrage zu antworten.

Sofern du mit deinen Kundinnen sonst z.B. auch per Telefon kommunizierst, macht ein Feld für die Telefonnummer Sinn.

Agenturen fragen oft ab, wie man kontaktiert werden möchte – das kannst du prima mit einer Checkbox lösen und die einzelnen Kontaktmöglichkeiten auflisten.

Ich persönlich schwöre drauf, mit einem Dropdown oder einer Checkbox-Auswahlliste abzufragen, wobei Unterstützung benötigt wird. So sehe ich auf einen Blick, worum es in der Anfrage geht.

Alles andere kann, nichts muss. Am Ende zählt für den Aufbau deiner Kontaktformularfelder: So viel wie nötig, so wenig wie möglich.

So machst du dein Elementor Kontaktformular DSGVO konform

… Mit der oben angesprochenen Checkbox für die Datenschutzerklärung. 

Stand heute ist es für Kontaktformulare nicht verpflichtend, diese Checkbox einzufügen. Quelle: eRecht24.

Ich persönlich finde, sie tut nicht weh und ist schnell eingebaut, deshalb machen wir das mit

Anleitung: In 3 Schritten eine DSGVO-Checkbox einfügen

1 Füge ein neues Feld in deinem Formular über „Element hinzufügen“ ein.

2⃣ Stelle als Typ „Akzeptanz“ ein.

In deinem Kontaktformular ist jetzt eine kleine Checkbox aufgetaucht.

3⃣ Im Feld „Text für die Akzeptanz“, füge folgenden Text ein und verlinke das Wort „Datenschutzerklärung“ zu deiner Datenschutz-Seite. 

“Mit Absenden dieses Formulars akzeptiere ich die Verwendung und Speicherung meiner persönlichen Daten gemäß der <a href=“https://deinewebsite.de/datenschutz“ target=“blank“>Datenschutzerklärung</a>.”

Wichtig: Da im Feld keine Links abgebildet werden, gehen wir den Weg über HTML-Code. Du musst lediglich https://deinewebsite.de/datenschutz mit dem tatsächlichen Link zu deiner Datenschutz-Seite ersetzen. Der Rest darf so bleiben.

Du kannst den übrigen Text natürlich umformulieren, sodass er besser zu deiner Zielgruppenansprache passt.

DSGVO und Pflichtfelder

Immer wieder sehe ich bei Selbstständigen, dass sie in ihrem Anfrage-Kontaktformular alle Felder als Pflichtangaben deklarieren (also mit *). 

Das ist nach aktuellem Stand eine Grauzone, weshalb ich dir davon abrate, weitere Felder außer der E-Mailadresse und evtl. dem Namen als Pflichtfeld zu markieren.

Anfragende sollen möglichst frei darüber entscheiden können, welche Angaben sie machen und welche nicht. Wenn du außertourlich weitere Pflichtfelder einfügst, musst du genau nachweisen (z. B. in deiner Datenschutzerklärung), warum und wofür du die Daten abfragst. (Quelle)

Tipp: Spam-Nachrichten vorbeugen: Braucht mein Elementor Kontaktformular ein Captcha?

Nope! 

Seien wir ehrlich: Captcha nervt uns doch alle – selbst ich brauche regelmäßig mehrere Anläufe, um alle Ampeln, Motorräder oder Brücken zu identifizieren. Es nervt. 

Stattdessen kannst du ein Anti-Spam-Plugin wie WP Armour nutzen. Einfach installieren, aktivieren, fertig! 

Es blockt Spam-Nachrichten übers Kontaktformular (und in deinen Blog-Kommentaren, sofern du die Kommentarfunktion aktiviert hast) und ist so „leicht“, dass es WordPress nicht verlangsamt.

Viel Erfolg bei der Umsetzung!

PS: Falls du dir weitere solcher Anleitungen – in Text- und/oder Videoform wünscht, lass mich wissen, zu welchem Thema. Gerne auch übers Kontaktformular

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!

Der Beitrag Kontaktformular in Elementor anlegen für Anfragen – Schritt-für-Schritt-Anleitung erschien zuerst auf Chrissi Wagner.

Das hier ist quasi der Schwestern-Beitrag zu meinem großen Überblick.

Heute schauen wir uns nämlich konkrete Einstellungen für die kostenlose Version des Elementor Pagebuilders an, mit denen du deine Website zugänglicher machen kannst. 

Außerdem habe ich einige typische Website-Elemente gesammelt, mit denen Bedienungshilfen noch Probleme haben.

Du willst gleich zu den Umsetzungs-Tipps? Dann klicke hier.

Für mehr Hintergrundwissen rund um das Barreriefreiheitsgesetz und Elementor, lies einfach weiter.

Was bedeutet „barrierefrei“ eigentlich?

First things first

Barrierefreiheit (oder: “Accessibility”) heißt: Deine Website funktioniert auch für Menschen mit Einschränkungen.

Das betrifft z. B. Menschen, die:

• nicht sehen können (nutzen Screenreader)
• nicht mit der Maus navigieren können (nutzen die Tastatur)
• schnell überfordert sind (nutzen klare Sprache und Strukturen)
• schlecht sehen oder Farben nicht unterscheiden können (brauchen hohe Kontraste)

Lies dir dazu gern diesen Beitrag von mir durch, indem ich das Thema “barrierefreie WordPress Website” verständlich aufbereitet habe.

Klingt erstmal viel, oder? Aber keine Sorge – es gibt einfache Schritte, mit denen du sofort starten kannst!

Für einen schnellen Check, ob du überhaupt vom Gesetz betroffen bist, kannst du den Barrierefreiheits-Check von eRecht24 machen.

Ist Elementor barrierefrei? Was ist Elementor überhaupt?

Ich lobe Elementor, bzw. Elementor Pro* (Affiliate Link) gern übern Klee, weil es für mich der ideale Pagebuilder ist. Intuitiv in der Bedienung, auf dem neuesten Stand, und ja, auch optisch nach meinem Geschmack. (Tools nach der Optik auswählen – wer kennt’s? )

Und ja, für mich ist es der beste Pagebuilder für eine barrierefreie WordPress Website. 

Denn mittlerweile schreiben die Entwickler sich Barrierefreiheit groß auf die Fahne!

Wenn du so wie ich den Elementor Pagebuilder verwendest, hast du viele Vorgaben schon über die Voreinstellungen abgedeckt. Das schauen wir uns gleich noch genauer an. 

Trotzdem möchte ich dir Elementor nicht als DAS Must-have-Plugin verkaufen. 

Sondern dir vielmehr empfehlen: Probier dich aus! Teste verschiedene Pagebuilder und finde das, mit dem du am besten klar kommst, insbesondere, wenn du Virtuelle Assistentin oder Technik-VA bist.  

Ich habe meine Webseiten jahrelang rein mit HTML, CSS und PHP-Includes programmiert und nicht mit WordPress gearbeitet. Viele meiner Hobby-Webseiten basieren heute noch darauf. 

Meine ersten wirklichen Pagebuilder-Erfahrungen habe ich mit Genesis gemacht, dann mit DIVI. Beides sind gute Plugins und vor allem DIVI steht Elementor in nichts nach.

Ich weiß aber auch, dass ein Premium-WordPress-Plugin wie Elementor Pro, DIVI & Co. nicht für jeden leistbar ist.

Deshalb bekommst du hier Tipps für die kostenfreie Version des Elementor-Plugins. Dieses ist genauso barrierefrei und du kannst die meisten Vorgaben aus dem BFSG damit abdecken.

7 Barreriefreiheitstipps für die kostenlose Elementor-Version 

Selbst, wenn du als Solo-Selbstständige nicht zu denjenigen gehörst, die das Barrierefreiheitsgesetz zwingend auf ihrer Website umsetzen müssen: Alle Menschen haben was davon, wenn du deine Website barrierefreier machst.

Und in Elementor kannst du auch ohne die Pro-Version richtig viel dafür tun! (All diese Tipps sind aber auch mit der Pro Version möglich.)

Hier kommen 7 einfach umsetzbare, aber wirksame Tricks für deine barrierefreie Website mit WordPress & Elementor:

Optional: Nutze ein barrierefreies Theme in Elementor

DAS Theme für Elementor ist “Hello”.

Wenn du zum ersten Mal eine Website erstellst oder deine bestehende Website überarbeiten und launchen willst, kannst du auf das Hello Theme umsteigen.

Hier kannst du dir das “Hello” Theme herunterladen.

Du verwendest bereits ein anderes Theme? Dann google doch mal “Themename barrierefrei” (z. B. „Hello Elementor barrierefrei“), um herauszufinden, wie es um die Inklusiviät deines Themes oder Pagebuilders steht.

1. Nutze die Überschriften-Hierarchie korrekt

Das habe ich in meinem großen Beitrag zu einer barrierefreien Website mit WordPress & Elementor abgedeckt, möchte aber kurz drauf eingehen, weil ich immer wieder höre, dass das Thema Überschriften für Fragezeichen bei Selbstständigen und BloggerInnen sorgt:

In Website-Texten gibt es den Fließtext (das ist ganz normaler Text so wie hier) und Überschriften von H1 bis H6. Das ist nicht nur wichtig für die Lesbarkeit und Struktur deiner Texte, sondern auch für deine Auffindbarkeit bei Suchmaschinen.

Merke dir folgende Hierarchie:

• H1 = Hauptüberschrift der Seite (sie kann nur 1x pro Seite vorkommen!)
• H2 = große Zwischenüberschriften
• H3 = Unterpunkte unter der H2
• H4 = Unterpunkte unter der H3
• H5 = Unterpunkte unter der H4
• H6 = Unterpunkte unter der H5
  

Die Überschrift aus diesem Absatz ist z. B. eine H3 Überschrift.

Alle außer H1 können beliebig oft auf einer Seite vorkommen. Ich persönlich komme selten über eine H4 hinaus in meiner Textstruktur. Zu verschachtelt soll es auch nicht sein.

1.1 Überschriften-Hierarchie in Elementor festlegen

Das ist übrigens eine H4.

In Elementor fügst du Überschriften über dieses Element ein:

Wenn du deine Überschrift anklickst, kannst du unter “Layout” im Feld HTML-Tag die gewünschte Überschriften-Hierarchie auswählen.

Manchmal möchte man eine Überschrift optisch anders darstellen, weil’s besser passt. Selbst, wenn du sie über die Stil-Einstellungen veränderst (z. B. die Schriftgröße kleiner machst und die Farbe änderst): Durch den HTML-Tag bleibt die Hierarchie logisch und unverändert.

Stell deshalb immer den HTML-Tag ein. Sonst hast du standardmäßig überall auf der Seite H1 oder H2 eingestellt und das mögen Google & Co. nicht.

2. Für eine bessere Lesbarkeit deiner Website-Texte: Schriftgrößen und Zeilenhöhe anpassen

Wenn ich bedenke, dass es ca. 2010 cool war, Texte so klein wie möglich zu machen – Stichwort: Schriftgröße 10pt – dann bin ich froh, dass sich das geändert hat.

Zwar gibt es keine in Stein gemeißelten Vorgaben, aber als Richtwert für Barrierefreiheit kannst du dir merken:

• Fließtext sollte mind. 16px Schriftgröße haben (warum? Weil 16px die Standardschriftgröße der meisten Browser ist)
• die Zeilenhöhe sollte mind. 1.4em betragen

2.1 So legst du die Schriftgrößen in Elementor fest

In Elementor kannst du seitenübergreifende Stil-Einstellungen in den Website-Einstellungen vornehmen. So geht’s:

1⃣ Logge dich ins WordPress-Dashboard ein und öffne eine beliebige Seite, z. B. deine Startseite.

Oben in der schwarzen Leiste, wähle „Mit Elementor bearbeiten“ → „Website-Einstellungen„.

Alternativ kommst du im Elementor Bearbeitungsmodus über das Symbol mit den Schiebereglern zu den Website-Einstellungen:

2⃣ Unter Themestil → „Typografie“ kannst du die Schriftgröße und die Zeilenhöhe für den „Body“-Bereich deiner gesamten Website festlegen.

Ich empfehle dir, auch den Absatzabstand zu hinterlegen (ebenfalls 1,4 em).

Desweiteren kannst du für Links und Überschriften eigene Schriftgrößen hinterlegen.

3⃣ Individuelle Schrift-Einstellungen nimmst du auf der jeweiligen Seite in dem jeweiligen Element unter „Stil → Typografie“ vor. Das bezieht sich nur auf das gewählte Element und nicht die ganze Seite.

Warum nicht Pixel (px) anstelle von em für die Zeilenhöhe verwenden?

Manche Nutzer stellen ihre Browser-Schriftgröße individuell ein, wodurch von dir gemachte Schriftgrößen „überschrieben“ werden (nicht für alle, sondern nur für diese Person). Mit em skalieren deine Schriften bei solchen Individual-Einstellungen besser als mit Pixeln.

Wenn du nicht weißt, welcher em Wert passt, kannst du diesen Rechner zu Hilfe nehmen. Einfach im 1. Feld deine aktuelle Schriftgröße in px eingeben, im 2. Feld wählen, welche Schriftgrößen du umgerechnet haben willst und das Tool spuckt dir dir den jeweiligen Wert in em aus.

3. Hinterlege einen Alt-Text bei deinen Bildern

Auch das habe ich in dem anderen Blogpost ausführlich angesprochen, deshalb nur kurz:

Um einen Alt-Text einzufügen, rufe das gewünschte Bild in deiner WordPress-Mediathek auf und trage den Text im Feld „Alternativer Text“ ein.

Beschreibe möglichst genau, was auf dem Bild zu sehen ist. 

Z. B. 

• „Technik-VA Chrissi Wagner mit Laptop am Fenster sitzend“
• „Screenshot meines Asana-Boards, in dem ich Kundenprojekte verwalte“
• „blaues Notizbuch und Kaffeetasse mit dem Spruch ‚Queen of fucking everything‘ daneben stehend“ (Ja, ich besitze diese Tasse.)

Ich habe mir angewöhnt, den Alt-Text zu hinterlegen, sobald ich das Bild in WordPress hochlade. So vergesse ich es nicht.

Nimm dir dafür ein Mal Zeit und geh deine Mediathek durch, dann bist du safe. Und auch hier: Bilder mit Alt-Text sind SEO-freundlich!

Wenn es reine Deko Bilder sind, wie bei mir die Monstera-Blätter, darf das Feld übrigens leer bleiben – oder du beschreibst auch hier einfach, was zu sehen ist.

4. Sorge für eine saubere Darstellung auf Mobilgeräten

Elementor hat zwar eine gute Responsive-Einstellung, trotzdem sehen deine Seiten auf dem Smartphone nicht immer 1:1 aus wie am Laptop-Bildschirm.

Und manchmal nimmst du Einstellungen an der Mobilansicht vor und plötzlich sieht es am Desktop anders aus oder Elemente verschieben sich.

Du kannst hier aber ein wenig tricksen: Mit einem Duplikat des entsprechenden Abschnitts.

4.1 Mein Trick für einfachere Mobil-Optimierung 

Das geht so:

1⃣ Dupliziere den Container oder das Element, das du mobil anders darstellen willst. Mache dafür einen Rechtsklick auf den gewünschten Container und wähle „Duplizieren„.

Du hast jetzt eine genau gleiche Kopie.

2⃣ Einen der beiden Abschnitte/Elemente (egal welchen) blendest du für mobil aus, indem du unter „Erweitert“ → „Responsive“ den Schalter „Auf Mobile Portrait ausblenden“ aktivierst. Wenn er rosa ist und „Verstecken“ zeigt, passt es.

Dieser Abschnitt wird dadurch nur noch in der Desktop- und Tablet-Ansicht angezeigt.

3⃣ Bei dem anderen Abschnitt machst du es genau anders herum und stellst den Schalter für Desktop & Tablet auf „Verstecken“ und lässt nur den Mobil-Schalter aus. Dadurch wird der Abschnitt nur am Handy angezeigt.

Der Container ist jetzt ausgegraut.

4⃣ Jetzt kannst du in dem gewünschten Abschnitt/Container deine Anpassungen vornehmen. Die andere Version wird davon nicht beeinflusst.

Und hey, mach dir keine Sorgen: Du kannst hier nix kaputt machen! Solltest du merken, dass du ein Element auf dem falschen Gerät ausgeblendet hast, kannst du den jeweiligen Schalter einfach wieder umstellen.

Du brauchst Unterstützung? Ich bin für dich da!

WordPress- und Elementor-Support

Warte nicht, bis deine Website dir komplett die Nerven raubt

Du hast keine Lust mehr, stundenlang bei Google nach einer Lösung zu suchen – ich versteh das. Mit meinem WordPress-Elementor-Support kriegst du schnelle und kompetente Hilfe. Buch jetzt deine Supportstunde!

Jetzt Elementor-Hilfe holen

Sichere Abrechnung via Ablefy

5. Setz Seitenabstände gleichmäßig und großzügig

Mehr Abstand = besser klickbar = mehr Barrierefreiheit/ Inklusivität

Abstände sind ein unterschätzter Hebel. Sie sorgen dafür, dass deine Website leichter bedienbar wird – gerade für Menschen, die auf Touch-Geräten surfen, motorische Einschränkungen haben oder per Tastatur navigieren.

Zu eng gesetzte Elemente können versehentlich angeklickt werden oder sind mit der Tab-Taste schwer erreichbar.

In Elementor kannst du jedem Element individuelle Abstände geben. Das geht unter „Erweitert“ → „Außenabstand“ bzw. „Innenabstand“.

Der Außenabstand beschreibt, wie viel Abstand außen um ein Element herum besteht.

Der Innenabstand, wie viel Abstand innerhalb des Elements ist.

Falls du die englische Version von Elementor nutzt:

• Margin = Außenabstand
• Padding = Innenabstand

Es gibt keine Vorgabe, wie viel Abstand du wo einfügen solltest. Probier dich hier am besten aus. Alles zwischen 10 – 25px ist gut.

Über die Website-Einstellungen von Elementor kannst du die Abstände zudem seitenübergreifend einstellen.

Achtung: Seitenabstände, die du in der Desktop-Version einstellst, werden auch in der Mobil-Ansicht übernommen und das sieht oft nicht gut aus. Schau dir deshalb unbedingt auch immer die Mobil-Ansicht an, wenn du Abstände einfügst und passe sie individuell an.

5.1 Tipp: Schaffe zusätzlich Luft mit Abständen

Wenn du an einzelnen Stellen flexibel Luft schaffen willst (z. B. bei einem CTA-Block zwischen zwei Textbereichen), kannst du zusätzlich das Abstand-Element von Elementor einfügen …

… oder im Gutenberg-Editor den Abstandshalter. Ich nutze den in meinen Blogbeiträgen oft.

6. Setze unterschiedliche Design-Elemente ein für bessere Übersichtlichkeit

Klare Strukturen helfen bei der Orientierung – nicht nur optisch, sondern auch für Bedienungshilfen wie Screenreader.

Nutze auf deinen Seiten und in deinen Blogposts z. B.

Trennlinien

… für eine dezente visuelle Trennung:

Hintergrundfarben, -pattern oder -bilder

Du kannst hier je nach Abschnitt durchwechseln.

Box Schatten

Setze Box-Schatten für Blöcke oder Call-to-Action-Buttons.

Wie so oft empfehle ich dir, dich hier einfach auszuprobieren und zu schauen, was gut aussieht.

7. Baue Ankerlinks ein, um direkt zu wichtigem Inhalt springen zu können

Ankerlinks (oder „Anchor Links“, „Sprungmarken“), sind unheimlich praktisch, um deine Website leichter zu navigieren.

Damit erstellst du einen Link oder Button, der bei Klick direkt an die gewünschte Stelle springt.

Sie machen z. B. in langen Blogposts (so wie diesem ) Sinn, um deine Leserinnen und Leser sofort zum „Filetstück“ deines Beitrags hüpfen zu lassen.

Auch bei Sales- und Landingpages sind Anker Links eine bequeme Möglichkeit, die Leute zu den interessanten Inhalten – z. B. den Infos zum Inhalt und Preis deines Angebots oder Produkts – springen zu lassen.

Solche Sprungmarken helfen dir dabei, deine Website barrierefreier zu machen, weil sie auch mit der Tastatur (Tab-Taste) erreichbar sind. 

Wie du Ankerlinks auf deinen Elementor Seiten und im Gutenberg Editor von WordPress für deine Blogbeiträge anlegst, zeige ich dir in diesem Blogpost.

Wenn du diese Tipps nach und nach umsetzt, bist du mehr als gerüstet und kannst dich über eine inklusive Website freuen.

Das kommt nicht so geil in Sachen Barrierefreiheit

Die folgenden Punkte sind keine No Go’s, sondern mehr als Überblick gedacht. 

Du musst nicht jeden Slider sofort aus deiner Website entfernen – ich kann mir gut vorstellen, dass die Elementor Entwickler (und andere Pagebuilder ebenso) zukünftig nachbessern.

Trotzdem hier eine kleine Übersicht typischer Website-Elemente, die noch nicht (ganz) inklusiv sind:

Overlays

Problematisch sind vor allem Text-Overlays, also Text auf einem halbtransparenten Hintergrund, der auf einem Bild liegt. Weil’s einfach nicht so gut zu lesen ist. Nicht nur für’s normale Auge, sondern vor allem für Screenreader.

barrierefreiere Alternative: Nimm stattdessen lieber einen neutralen Hintergrund mit Farbe anstelle eines Bildes oder Videos und achte auf einen guten Kontrast zwischen der Hintergrundfarbe und dem Text. 

Zudem kannst du das Overlay nicht oder kaum transparent machen.

Slider 

Slider, also diese „beweglichen“ Elemente, bei denen Texte, Bilder oder Videos durchlaufen, sind schick und sehr beliebt. Ich mochte sie lange auch – bis ich gemerkt habe, dass sie mobil oft „buggy“ sind. 

Bedienungshilfen wie Screenreader tun sich schwer, sie zu erfassen und das macht die Bedienung deiner Website für Menschen mit Einschränkungen schwieriger.

barrierefreiere Alternative: Steig lieber auf ein statisches Element um, z.B. im Header. 

Wenn du einen Slider nutzt, um deine Kundenstimmen zu präsentieren, kannst du überlegen, sie stattdessen untereinander oder nebeneinander darzustellen, anstelle eines automatisch durchlaufenden Sliders.

„Leere“ Links

Das sehe ich öfter in Hauptmenüs mit ausklappbaren Unterpunkten (dem sogenannten „Dropdown“): Der „oberste“ Link würde leer gelassen oder ein # (Hashtag) als URL gesetzt, damit dieser Menüpunkt nicht klickbar ist.

Joke’s on me, denn ich mache das auch.  

barrierefreiere Alternative: Um ehrlich zu sein, habe ich noch keine gefunden!  

Klar, du kannst einfach darauf verzichten, einen leeren Link zu setzen. Aber gerade für Dropdown Menüs ist es praktisch. 

Wenn du hierfür einen guten Tipp hast, lass es mich gerne in den Kommentaren wissen!

Fazit zur Barrierefreiheit: Elementor kann mehr, als du denkst

Du merkst: Vieles ist bei Elementor schon im Plugin integriert, anderes lässt sich easy umsetzen. Mit ein bisschen Übung verinnerlichst du solche Dinge wie eine saubere Überschriften-Struktur, Abstände und Trenn-Elemente. 

Brauchst du dennoch Erste Hilfe bei der Umsetzung? Ich bin als Technik-Joker für dich da! 

Schreib mir gern und wir schauen, ob ich dir helfen kann.

… oder schau dir hier meinen Elementor-WordPress-Support an.

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!

Transparenzhinweis: In diesem Beitrag ist ein Affiliate Link zu Elementor Pro verlinkt. Wenn du eine Elementor Pro Lizenz über diesen Link kaufst, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten.

Du kannst dir bei all meinen Tool-Empfehlungen sicher sein, dass ich nie etwas empfehlen würde, hinter dem ich nicht zu 100% stehe.

Der Beitrag Mit diesen 7 schnellen Einstellungen machst du Elementor barrierefrei erschien zuerst auf Chrissi Wagner.

Deine Besucher können sich leichter durch lange Blogbeitrage navigieren und schneller den Teil finden, der sie interessiert. Das macht es nicht nur nutzerfreundlicher, sondern auch barrierefreier, weil Anker Links sich per Tab-Taste ansteuern lassen.

Was ist ein Anker-Link (oder „Anchor Link“)?

Ankerlinks oder Sprungmarken sind dafür da, um Links innerhalb einer Seite setzen. Im Gegensatz zu einem normalen Link, der dich von einer Seite auf eine andere Seite leitet.

Du hast vielleicht schon von dem Begriff „Sprungmarke“ gehört. Das ist dasselbe – du klickst auf einen Link und „springst“ innerhalb derselben Seite an eine andere Stelle.

Das klappt auch Responsive, also am Tablet und Smartphone!

Praxis-Beispiel gefällig? Klick mal hier, um direkt zum Tutorial zu springen.

Aus meiner Sicht sind Anker-Links ein Must-Have für jede gute Salespage! Anstatt hinter jedem Button den Link zu deinem Warenkorb zu hinterlegen, kannst du eine Sprungmarke setzen, die InteressentInnen direkt an die Stelle auf deiner Salespage schickt, bei dir sie alle Infos auf einen Blick (Inhalt, Preis) – und natürlich den Verkaufslink – finden.

Wichtig: Sie funktionieren nicht seitenübergreifend über mehrere Seiten. das ist eine häufige Frage, die ich dazu bekomme.

Die Einrichtung von Anker Links in WordPress ist aber suuuper easy, versprochen!

Anleitung: So fügst du einen Anker Link auf einer Elementor Seite ein

Egal, ob du einen Textlink oder einen Button mit einer Sprungmarke versehen willst: Zuerst musst du die Anker-ID hinterlegen.

Anker-ID in Elementor hinterlegen:

1⃣ Klicke das gewünschte Element oder den Container an, zu dem via Anker gesprungen werden soll.

2⃣ Unter „Erweitert“ –> „Layout“ findest du das Feld „CSS ID„. Hier trägst du die gewünschte ID ein. Am besten nimmst du hier ein Wort, bei dem sofort klar ist, wozu es gehört (so kann man es sich leichter merken, finde ich) und das nicht schon als Anker-ID verwendet wird.

Wunderbar, damit ist der wichtigste Part auch schon abgeschlossen. Jetzt kannst du deinen Text oder Button einfügen, den du verlinken möchtest:

Link in Text verlinken:

Die gängigste Methode ist es, einfach einen Linktext zur Sprungmarke zu machen. So geht’s:

1⃣ Markiere den Text, den du verlinkt haben willst. Wie lang oder kurz er ist, ist egal.

Wichtig: Benenne deinen Ankerlink verständlich, damit deine Besucher sofort wissen, wohin sie geführt werden.

2⃣ Über das Link-Icon fügst du den Link ein. Anker-Links werden immer mit # (= Hashtag) gekennzeichnet. Das ist wichtig, damit es funktionert. In meinem Beispiel lautet der Anker: #live-webinar

That’s it! Nur noch bestätigen, speichern, und fertig!

Button verlinken:

1⃣ Nachdem du deine Anker ID festgelegt hast, klicke deinen Button an (oder füge ihn ein) und gehe zum Abschnitt „Inhalt„.

2⃣ Dein Ankerlink kommt ins Feld „Link„. Im nachfolgenden Screenshot lautet mein Link #support-buchen.

Hashtag vorne nicht vergessen!

Ich empfehle dir, deinen fertigen Anker-Link am Schluss auch noch zu testen. Hier habe ich kurz beschrieben, wie das geht.

Anleitung: So fügst du einen Anker Link in Blogbeiträgen mit dem Gutenberg Editor ein

Spoiler: Das funktioniert fast genau so wie in Elementor!

In meinen Blogposts, die oft sehr, SEHR lang sind, nutze ich gerne Anker Links. Denn bevor jemand genervt die Seite schließt, weil vor dem spannende Inhalt eine lange Einleitung kommt, biete ich meinen BesucherInnen lieber an, per Klick zum „Main Content“ zu springen.

Im Gutenberg Editor von WordPress kannst du Ankerlinks folgendermaßen anlegen:

1⃣ Klicke den Textblock an, zu dem gesprungen (= verlinkt) werden soll. Es kann auch eine andere Art von Block sein, z. B. ein Abstandshalter oder ein Trenner.

2⃣ In der Seitenleiste, navigiere zu Erweitert und trage im Feld „HTML-Anker“ deine ID ein. Auch hier: Such dir eine eindeutige Bezeichnung dafür aus, die nicht schon auf dieser Seite als Anker-ID verwendet wird.

3⃣ Geh jetzt zu dem Text, den du verlinken willst und markiere ihn.

4⃣ Füge einen Link ein und gib anstelle einer URL einfach die ID deines Ankers mit einem Hashtag # vorne dran ein. Speichern nicht vergessen!

Für Buttons in deinen Blogposts funktioniert es übrigens ganz genau so.

Und dann: Testen!

Das gilt für alle Arten von Anker-Links, egal wo du sie eingefügt hast

Um die Funktionalität zu testen, rufe deine Website auf, klicke den Link und prüfe, ob er auch wirklich an die richtige Stelle springt. Oft muss man nämlich noch ein wenig nachjustieren und z.B. schon auf ein Element vorher verlinken.

Viel Spaß beim Umsetzen!

Und falls du solche Sachen lieber komplett auslagern willst – hit me up!

WordPress- und Elementor-Support

Warte nicht, bis deine Website dir komplett die Nerven raubt

Du hast keine Lust mehr, stundenlang bei Google nach einer Lösung zu suchen – ich versteh das. Mit meinem WordPress-Elementor-Support kriegst du schnelle und kompetente Hilfe. Buch jetzt deine Supportstunde!

Jetzt Elementor-Hilfe holen

Sichere Abrechnung via Ablefy

Diese Anleitung hat dir weitergeholfen? Dann pinne doch eine dieser Grafiken bei Pinterest, damit auch andere Selbstständige lernen, wie sie Anker Links in Elementor und WordPress erstellen können!

Der Beitrag WordPress: Anker Link in Elementor erstellen für leichtere Navigation per Sprungmarke erschien zuerst auf Chrissi Wagner.

Ich erinnere mich noch an 2018, als alle Website-BetreiberInnen Panik geschoben haben wegen der DSVGO (ich auch!). Im Gegensatz zu damals spricht diesmal kaum jemand über die anstehenden Gesetzesänderungen, dabei ist das Ganze in meinen Augen viel wichtiger.

Du willst gleich zu den konkreten Tipps? Dann klicke hier für meine Handlungsempfehlungen, wie du als Selbstständige deine Website barrierefrei machen kannst.

Oder nutze das Inhaltsverzeichnis unten, um zu den Parts zu springen, die dich besonders interesssieren.

Disclaimer: Dieser Blogpost richtet sich vorrangig an AnfängerInnen und Selbstständige mit eigener Business-Website, denen das Wissen und die Zeit fehlt, sich tiefer in das Thema einzulesen.

Und: Das ist keine Rechtsberatung. Insgesamt stecken in diesem Beitrags-Monster etwa 15 Stunden Arbeit; ich habe mich über Wochen eingelesen und Informationen zusammengetragen. Trotzdem kann und darf ich keine rechtskräftigen Aussagen treffen. Wenn du also zu einem bestimmten Punkt rechtliche Fragen hast, wende dich an eine Anwältin oder einen Anwalt für Online-Recht.

Eine barrierefreie Website: Was bedeutet das eigentlich?

Das Zauberwort lautet “Zugänglichkeit”.

Deine Website ist für möglichst viele Menschen verständlich, bedienbar und zugänglich – unabhängig von persönlichen Einschränkungen.

Während Barrierefreiheit im Grunde selbstverständlich sein sollte, ist sie es in der Realität weder im öffentlichen Raum (we’re talking Ampelanlagen mit Blindensignal und Hinweiston, rollstuhlgerechte Bahnhöfe, einfache Sprache, Ruhezonen für Menschen mit sensorischen Problemen, usw.), noch in der digitalen Welt. 

Beide sind vorrangig für Menschen ohne Einschränkungen und Behinderungen gemacht und schließen einzelne Personengruppen aus oder machen ihnen den Alltag draußen oder online schwerer.

Ich kann deine Website vielleicht problemlos aufrufen und durchklicken, doch für Menschen mit

• Sehbehinderungen, 
• motorischen Einschränkungen,
• neurodiversen Bedürfnissen,
• und Menschen, die vielleicht aus anderen Gründen Screenreader oder die Tastatur-Navigation nutzen,

stellen sich ganz andere Hindernisse dar, wie:

• schwierige (oder gar keine) Lesbarkeit von Texten,
• fehlende Möglichkeiten, sich durch das Menü und die Inhalte einer Seite zu klicken, wenn z. B. die Tastatur-Navigation nicht richtig arbeiten kann
• oder Überforderung, weil nicht verständlich ist, was gewisse Menüpunkte bedeuten.

Die 4 Prinzipien für Barrierefreiheit

Die Grundlage der Barrierefreiheit ist die sogenannte WCAG 2.1-Richtlinie (Level AA). Klingt fancy, ist aber im Kern ganz simpel. Es geht um diese vier Prinzipien:

• Wahrnehmbar die Inhalte deiner Website sind sichtbar, hörbar oder lesbar
• Bedienbar deine Website ist auch mit Tastatur oder Screenreader gut nutzbar
• Verständlich In deinen Texten gibt es keine verwirrende Sprache oder Struktur. Wie deine Website-Texte aktuell abschneiden, kannst du z.B. über https://rechtschreibpruefung24.de/ testen.
• Robust deine Website ist kompatibel mit Hilfstechnologien wie z. B.  die schon erwähnten Screenreader (I’m sorry, aber das klingt wie ein Wesenstyp aus Pokémon)

Im Vergleich zu den “early years of Internet” hat sich zum Glück eh schon eine Meeenge rund um die Accessibility getan. Als ich 2003 meine erste Website erstellt habe, war es cool, alles mit blinkenden Gifs zuzuklatschen, Musik abzuspielen ohne die Möglichkeit, sie abzustellen und knallige Farbkombinationen wie grüne Schrift auf orangem Hintergrund einzusetzen. Gru.Se.Lig.

Je besser deine Seite funktioniert, desto mehr Menschen können deine Angebote wahrnehmen.  

Und hey: Google liebt barrierefreie Seiten auch.

So viel zu den Hintergründen. Lass uns jetzt kurz zu den “harten Fakten” hüpfen und schauen, ob du das Gesetz überhaupt zwingend umsetzen musst: 

Was ist das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das Barrierefreiheitsstärkungsgesetz (kurz BFSG) soll dafür sorgen, dass digitale Angebote wie Websites, Shops oder Apps auch für Menschen mit Einschränkungen zugänglich sind.

Das deutsche Bundesministerium für Arbeit und Soziales nennt es “die gleichberechtigte und diskriminierungsfreie Teilhabe von Menschen mit Behinderungen, Einschränkungen und älteren Menschen.“ (Quelle)

Heißt konkret:
Nicht nur Menschen ohne Einschränkungen sollen deine Inhalte nutzen können – sondern alle.

Ab wann gilt das Gesetz?

Ab dem 28. Juni 2025 müssen Websites und Online-Angebote barrierefrei sein, sonst können rechtliche Konsequenzen drohen. 

Wen betrifft das BFSG?

Erstmal: Die Chancen stehen gut, dass du als Kleinstunternehmen wie z.B. VA, BeraterIn, Small Business Online-Shop-BetreiberIn, Coach, FotografIn und Co. gar nicht betroffen bist.

Vom Gesetz betroffen bist du, wenn du

• HerstellerIn oder HändlerIn technischer Geräte wie Smartphones, Tablets, eReader, etc. bist,
• oder KEIN Kleinstunternehmen, das Dienstleistungen anbietet,

Du solltest deine Business-Website barrierefrei machen.

Nicht betroffen bist du als Kleinstunternehmen. eRecht24 definiert den Begriff so:

„Zu den Kleinstunternehmen gehören Unternehmen, die weniger als zehn Personen beschäftigen und die entweder einen Jahresumsatz von höchstens 2 Millionen Euro erzielen oder deren Jahresbilanzsumme sich auf höchstens 2 Millionen Euro beläuft.“

Sprich: Du bist EinzelunternehmerIn und liegst unter einem Jahresumsatz von 2 Mio. Euro oder einer Jahresbilanzsummer von max. 2 Mio. Euro? Dann ist das BSFG keine Pflicht für dich.

Es wird empfohlen, die Barrierefreiheit trotzdem auf deiner Website umzusetzen, allein schon, weil so alle deine BesucherInnen was davon haben. Wenn du dich also freiwillig an die Umsetzung machen willst und

• Produkte oder Dienstleistungen online anbietest,
• KundInnen über deine Website gewinnst,
• Rechnungen schreibst und
• ein Gewerbe angemeldet hast,

dann ist dieser Blogbeitrag für dich.

So oder so: Keine Panik; das klingt wilder als es ist. Mit WordPress und Pagebuildern wie Elementor gebaute Webseiten sind zum Glück schon ganz gut unterwegs, was barrierefreiheit betrifft. 

Wie nun also das Barrierefreiheitsstärkungsgesetz für deine WordPress Website umsetzen?

Erste Hilfe für mehr Barrierefreiheit mit WordPress

Hier kommen 10+ gewohnt praktische Tipps, die du direkt umsetzen kannst – auch als Technik-EinsteigerIn.

1. Plugins und Online-Tools, die dir Arbeit abnehmen

Es gibt mittlerweile viele Plugins und Tools, um die Barrierefreiheit einer Website checken zu lassen.

Hier meine Empfehlungen, die ich am benutzerfreundlichsten und praktischsten finde.

1.1 Plugins für Barrierefreiheit

Einmal installieren, einrichten – fertig. 

Zum Thema Plugins von mir wie immer der Hinweis: Zu viele Plugins machen deine Website langsamer und bedeuten mehr Wartungsaufwand. Deshalb überleg dir gut, ob du wirklich ein zusätzliches Plugin installieren willst oder ein Online-Tool reicht.

• Accessibility Checker: Zeigt dir direkt beim Schreiben Hinweise zu möglichen Problemen in Sachen Barrierefreiheit. Die kostenlose Version reicht für einen einmaligen Check aus.
  
• WP Accessibility: Aktiviert z. B. Tastatur-Navigation, “Skip to content”-Links, Kontrast-Hilfe & mehr. Achtung, wenn du Elementor Pro als Pagebuilder verwendest, kannst du auf dieses Plugin verzichten, weil Elementor das alles schon abbildet.
  
• Simple Skip Links für Menüs: Fügt einen Link zum “Überspringen” von Hauptmenü & Co. ein – hilfreich für Tastatur-NutzerInnen.
  

Wenn du keine Lust auf ein weiteres Plugin hast, oder nur ab und zu mal checken willst, wie barrierefreundlich deine Seite ist, gibt’s auch richtig gute Online-Tools. Hier ist keine Installation nötig – gib einfach deinen Website-Link ein. 

1.2 Online-Tools 

1. WAVE Web Accessibility Evaluation Tool: Das beste Tool in meinen Augen. Es visualisiert Barrieren auf deiner Website direkt im Browser und ist dabei super anfängerfreundlich.
   
2. Contrast Checker von WebAIM: Prüft den Kontrast zwischen Text und Hintergrund und feedbackt dir, ob alles gut sichtbar/lesbar ist. Dazu später mehr.
   
3. Experte.de Accessibility Check: Ein deutsches Tool, das schnell und übersichtlich zeigt, wo es hakt, z. B. bei Bildern, Formularfeldern, Kontrasten.
   
4. Tota11y Bookmarklet: AddOn für den Google Chrome Browser. Ein praktisches Overlay, das dir live auf deiner Seite zeigt, wo Alt-Texte fehlen, Überschriften durcheinander sind oder Labels nicht stimmen. So kannst du die Stellen gezielt angehen und verbessern. 

1.3 Optional: Nutze einen barrierefreien Pagebuilder und ein passendes Theme

Auch die Wahl deines Pagebuilders und Themes kann die Barrierefreiheit deiner Website beeinflussen und dir einiges an Arbeit abnehmen. 

Die großen Pagebuilder wie Elementor, DIVI Astra, Genesis oder Bakery haben bereits von Haus aus barrierefreie Standards eingebaut. 

Auch der vorinstallierte Gutenberg Editor in WordPress läuft barrierefrei.

Wenn du dich jetzt fragst, wie geht eine barrierefreie Website mit WordPress und Elementor – ich hab einen Blogpost dazu geschrieben!

Im Gegensatz dazu ist bei Weitem nicht jedes WordPress-Theme barrierefrei. Wenn du gerade erst anfängst oder sowieso dein Website-Design ändern wolltest, nimm ein barrierefreies Theme wie:

• Hello Elementor 
• Astra
• GeneratePress
• Blocksy

Die vorinstallierten jährlichen Themes von WordPress (TwentyTwentyFive & Co.) entsprechen großteils ebenfalls den aktuellen Accessibilty Standards.

2. Barrierefrei schreiben & strukturieren

Deine Texte sind genauso wichtig wie dein Design. Ich glaube, das wird oft unterschätzt; zumindest von Menschen, die nicht gerne schreiben/texten. 

Mit ein paar Regeln kannst du deine Website-Texte sehr viel zugänglicher machen:

1⃣ Schreibe kurze Sätze und halte sie klar verständlich.

Als ich mal als Texterin gearbeitet habe, war die Vorgabe: Ein Absatz sollte maximal 5 – 6 Zeilen Text haben. Wenn du merkst, es wird länger: Mach nen neuen Absatz. Das nur als kleine Orientierung am Rande – ich habe nicht herausfinden können, ob das eine in Stein gemeißelte Vorgabe ist.

2⃣ Zu viele Fremdwörter Fachbegriffe versalzen die Suppe – wer nicht aus deiner Branche ist und nicht deinen Fachwissensstand hat, wird sich beim Lesen schwer tun.

3⃣ Nutze Zwischenüberschriften für einen übersichtlichen Lesefluss.

4⃣ Verwende Aufzählungs-Listen, wo es passt; auch das macht einen langen Text angenehmer zu lesen.

5⃣ Sofern du in deinen Texten genderst: Gendere möglichst inklusiv und gut lesbar. 

Ich habe anfangs mit Sternchen (*) gegendert, aber damit tun sich Screenreader schwer. Nutze stattdessen den Doppelpunkt (:) oder gendere ohne Sonderzeichen, so wie ich (= “TeilnehmerInnen” oder “Kundinnen und Kunden”).

3. Überschriften/Headlines in der richtigen Reihenfolge

Das ist ein absoluter Quick Win und die mag ich eh immer

Achte darauf, dass deine Überschriften-Hierarchie logisch aufgebaut ist:

H1

H2

H3

H4

H5

H6

H1 ist dabei immer die “Größte” und ganz oben, z. B. als Seitentitel. Pro Seite gibt es immer nur eine H1.

Darunter folgt H2 (z. B. Zwischenüberschrift), darunter ggf. H3, usw.
In diesem Blogbeitrag ist der Titel beispielsweise die H1. Alle Zwischenüberschriften sind H2 und die Überschriften darin H3 und teils H4.

Merke:

No: Ein durchmischter Aufbau von H1 → H4 → H2, nur weil die H4 optisch „besser aussieht“. Das wollen weder wir noch Google.

Yes: Nutze stattdessen die richtige Struktur und style die Optik separat über die Stil-Einstellungen deines Themes oder Pagebuilders.

4. Bilder & Medien richtig einsetzen

Wird oft unterschätzt, dabei kann das einen riesen Unterschied machen:

• Gib jedem Bild einen passenden Alt-Text (dazu gleich mehr)
• erstelle keine reinen Texte als Grafik. Ich sehe das hin und wieder auf Impressums-Seiten, auf denen die Adresse der Website-Betreiberin als Grafik dargestellt ist. Das ist meist für die persönliche Sicherheit (jemand könnte die Adresse rauskopieren und finden ), aber auch das ist leider nicht barrierefrei ohne Alt-Text.
• habe ich oben schon kurz erwähnt: Videos stellst du am besten immer mit Untertiteln oder Transkript auf deine Website. 
• Dasselbe gilt für Audios wie Podcast-Folgen.

5. Alt-Texte für Bilder

Diesen Punkt schauen wir uns gesondert an, weil er aus meiner Sicht eins der wichtigsten und zugleich am einfachsten umzusetzenden Punkte in Sachen barrierefreie WordPress Website ist.

Bei dem Alt-Text handelt es sich entweder um eine genaue Beschreibung, was auf dem Bild zu sehen ist… oder einen SEO-Text, der dein Keyword/deine Keyphrase enthält. Alt-Texte sind nämlich auch für die Suchmaschinenoptimierung enorm wichtig!

5.1 So fügst du Alt-Texte über deine Medien-Bibliothek ein:

• suche das gewünschte Bild in deiner WordPress-Mediathek und klicke es an, um es groß zu sehen
• im Feld “Alternativer Text” fügst du deinen Alt-Text ein

Tipp: Vermeide es, das Bild einfach mit “Screenshot” oder “Bild1” zu beschriften – das hilft niemandem.

Fun Fact am Rande: Der richtige Einsatz von Alt-Texten war eins der ersten Dinge, die ich ~2003 gelernt (und verinnerlicht!) habe, als ich mir selbst die Programmiersprachen HTML und CSS beigebracht habe. Den dazugehörigen Code <img src=”bild-url” alt=”Der Alt-Text”> kann ich im Schlaf

6. Menü-Struktur optimieren für eine barrierefreie Navigation

Dein Hauptmenü sollte:

• logisch strukturiert und die einzelnen Menülinks eindeutig benannt sein
• nicht zu viele Links enthalten (~ 6 sind normal) und bei Dropdowns nur max. 2 – 3 Ebenen ausklappen. Sonst wirds zu viel und gerade auf Mobilgeräten unübersichtlich.
• sich mit der Tabulator-Taste navigieren lassen
• und von Screenreadern erkannt werden. Über das oben schon erwähnte, kostenfreie Tool WAVE kannst du prüfen, wie deine Website auf Screenreadern abschneidet.
• Setze Menüpunkte nicht einfach leer oder nur mit „#“ als Link, wenn du sie nicht klickbar machen willst.

Tipp zur Menüstruktur: So verlockend es manchmal sein mag: Vermeide möglichst außergewöhnliche Bezeichnungen für deine Menülinks wie “Heimathafen”, “Meine Reise zur Selbstverwirklichung”, “Schreibstube”, etc. Da frag ich mich nur: Was bedeutet das?!

Halte dich beim Aufbau deines Hauptmenüs besser an die klassische Struktur und eine klare, kurze Benennung, z. B. Start, Über mich, Angebote, Blog, Kontakt. Klingt banal, hilft aber.

(PS: Die Beispiele hab ich mir grad aus den Fingern gesaugt. Wenn du einen dieser Begriffe in deinem Menü verwendest und dich angesprochen fühlst, mach dir gerne mal Gedanken, ob du das nicht kürzer und eindeutiger formulieren könntest.)

Tipp zur Tab-Taste (Tabulator-Taste): Du kannst ganz einfach testen, ob sich deine Website gut nur mit der Tastatur navigieren lässt: Rufe deine Website auf und drück mal nur die Tab-Taste oder nutze die Pfeiltasten. Die Tab-Taste ist die mit dem Pfeil nach rechts (⇥ ) über der Feststell- und der Großschreibtaste auf deiner Tastatur. 

Wenn alles schön barrierefrei ist, springst du automatisch von oben nach unten von Element zu Element und Button zu Button.

7. Sprache, Lesbarkeit & Struktur deiner Website-Texte verbessern

Auch Content ist ein Barrierefreiheits-Thema! 

So kannst du deine Website-Texte zugänglicher machen – und sie zugleich für Suchmaschinen optimieren:

• Verwende im Fließtext mindestens eine Schriftgröße von 16px
• Achte auf gute Zeilenabstände, damit deine Texte nicht zu gequetscht oder zu weit auseinander stehen; 1.4 EM ist mein To Go
• Setze gut lesbare Schriftarten ein wie Open Sans, Quicksand, Lato, Arial, Nunito, Raleway, etc.
  • Es ist völlig in Ordnung, wenn du eine Schreib- oder Schnörkelschrift als Eyecatcher einsetzt, solange es sparsam bleibt (z.B. nur in H1 Überschriften).
• Verwende eindeutige (Perma-)Links: Der Link zu diesem Blogpost lautet www.chrissi-wagner.de/barrierefreie-wordpress-website – das ist kurz, auf den Punkt und verständlich. Wenn deine Beitragslinks nicht so in der Art aussehen, schau dir mal deine Permalinks an (in WordPress-Dashboard unter “Einstellungen” → “Permalinks”): “Beitragsname” ist eine gute und lesbare Option!

8. Farbkontraste anpassen

Hellgrauer Text auf weißem Hintergrund sieht zwar schon aufgeräumt aus – ist aber eine Zumutung für die Augen

Nutze Tools wie WebAIM Contrast Checker, um die Lesbarkeit deiner Farb-Kombi zu prüfen. Dort gibst du einfach den Hex-Code deiner Hintergrund- und Schriftfarbe an und das Tool zeigt dir, ob die Kombination gut lesbar ist. 

Den Hex-Code kannst du dir mithilfe des Color Picker AddOns in Google Chrome aus deiner Website kopieren.

Tipp für AnfängerInnen: Wenn es dir schwerfällt, Kontraste zu sehen oder überhaupt einen Blick für gute Farbkombinationen zu entwickeln, schau dir mal diese Tabelle an: 

9. Icons & Buttons mit eindeutiger Bezeichnung einsetzen

Benenne den “Senden”-Button deines Kontaktformulars wirklich mit “Senden” anstatt “Lass uns deinen Traum wahr machen” oder so. 

Noch besser für deine BesucherInnen mit Screenreader und Tastaturnavigation ist es, wenn du den Button nach Funktion benennst, also z. B. “Kontaktformular senden” oder “Anfrage senden”. So können sich Bedienungshilfen leichter auf deiner Website zurechtfinden. Im Marketing bezeichnet man das einen “sprechenden Link”.

Der CTA-Button in deinem Newsletter-Anmeldeformular sollte genauso deutlich bezeichnet werden: Lieber was „Einfaches“ wie “Jetzt zum Newsletter anmelden” oder “kostenfreie Checkliste erhalten”, anstatt irgendwelcher undurchsichtiger Floskeln. 

Wenn du z. B. ein Symbol allein verwendest (z. B. für „Suche“), füge einen erklärenden Text oder einen ARIA-Label hinzu – gerade bei Icons wie „Play“ oder „X“ (Schließen). 

Das gilt meiner Meinung nach übrigens nicht nur in Sachen Barrierefreiheit deiner Website, sondern als Kundenservice. Klare, verständliche Ansagen und ethisches Marketing sind immer besser als geblümte Worte, die im schlimmsten Fall etwas verschleiern.

Auch ich versuche, meine Buttons so verständlich und eindeutig wie möglich zu beschriften. Achte mal drauf!

10. Responsives Design nicht vergessen

Was meine ich damit? Die mobile Darstellung deiner Website, also am Handy/Smartphone und am Tablet. Am großen Laptop-Bildschirm sieht es immer anders aus als am kleinen Handy-Display – wir möchten aber natürlich, dass deine Inhalte überall gut lesbar, übersichtlich dargestellt und funktional sind.

Tipps für deine barrierefreie Mobil-Version:

• Teste deine Mobil-Ansicht; vor allem, wenn du Änderungen an deiner Website gemacht oder neue Seiten hinzugefügt hast: Sieht noch alles gut aus? Ist nichts verschoben? Werden mehrspaltige Inhalte nebeneinander oder untereinander dargestellt? Sind Überschriften nicht zu groß? Ist der Text überall gut lesbar? Ist erkennbar, was auf Bildern zu sehen ist?
• Schau, dass speziell Buttons und Links nicht zu klein angezeigt werden, sonst können Bedienungshilfen sie nicht richtig erkennen.
• Achte darauf, dass Bilder oder Texte nicht abgeschnitten sind oder ineinander übergehen, weil sie auch sonst nicht richtig erkannt werden können. Sorge in so einem Fall lieber für größere (Zeilen-)Abstände.

Wenn du einen Pagebuilder wie Elementor nutzt, ist deine Website schon sehr mobilfreundlich eingestellt und du kannst auch selbst Anpassungen vornehmen über den Responsive-Modus.

Checkliste für dich: Das braucht eine barrierefreie Website

Hier nochmal zusammengefasst, wie du deine Website zugänglicher machen kannst:

deine Überschriften sind logisch von H1 bis H6 durchstrukturiert (H1 → H2 → H3 usw.)

deine Bilder enthalten sinnvolle Alternativtexte (Alt-Text)

du verwendest gute Farbkontraste zwischen Text und Hintergrund in deinem Branding

in deinen Texten nutzt du eine klare, verständliche Sprache

die Navigation deiner Website ist auch per Tastatur möglich (z. B. mit der Tab-Taste)

du bindest keine blinkenden Elemente oder Autoplay-Videos ein

wenn du Videos im Einsatz hast, haben sie Untertitel oder ein Transkript

du hast Links und CTA-Buttons mit sprechendem Text („Mehr erfahren zu Thema XY“ statt „Hier klicken“)

deine Website ist mobilfreundlich gestaltet

Hier gibt’s das Ganze auch noch als Grafik, die du speichern, teilen oder ausdrucken kannst.

Fazit: Jeder Schritt zählt!

Barrierefreiheit ist kein “Projekt für später”, sondern – finde ich – eine Haltung. Und da dürfen die meisten von uns noch dazulernen. 

Ich hab mir selbst jahrelang keine Gedanken darum gemacht – es war ja auch nie Thema. Aber nur, weil mich etwas selbst nicht negativ beeinflusst oder beeinträchtigt, heißt das nicht, dass es sonst niemanden betrifft. 

Diese Dinge machen auch für deine nicht eingeschränkten BesucherInnen den Unterschied!

Und die gute Nachricht: Du musst kein Technik-Profi sein, um jetzt loszulegen. Auch musst du nicht alles perfekt machen. Fang mit den einfachen Sachen an und arbeite dich Schritt für Schritt voran.

Wenn du allein schon

• deine Texte verständlicher machst,
• Alt-Texte ergänzt,
• Farben & Kontraste prüfst
• und vielleicht ein paar der empfohlenen Accessibility-Tools testest
  

… dann bist du schon auf einem richtig guten Weg – und machst das Netz ein Stück zugänglicher für alle.

Teil gerne per Kommentar, was du aus diesem Beitrag für dich mitgenommen hast! 

Und falls du eigene Tipps für eine barrierefreie WordPress Website (oder generell!) hast: Erzähl sie mir!

PS: Wenn du Elementor nutzt und wissen willst, was du dort alles barrierefreundlicher machen kannst, dann lies diesen Beitrag.

PPS: Ich glaub, meine Schreibblockade aus dem letzten Beitrag ist überwunden, yesss!

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest, damit auch andere Selbstständige die Tipps für mehr Barrierefreiheit umsetzen können!

Der Beitrag Deine barrierefreie WordPress Website – was du jetzt zum Barrierefreiheitsstärkungsgesetz wissen (und tun) solltest erschien zuerst auf Chrissi Wagner.

Ich sitze im Coworking Space und blicke nach unten auf die “Shibuya Crossing” – auf keiner anderen Straßenkreuzung der Welt bewegen sich angeblich mehr Menschen. Oder mehr Regenschirme, so wie heute.

Obwohl ich Tokyo im Regen seltsam beruhigend finde – rausgehen und etwas unternehmen mag ich auch nicht. Deshalb wird die Zeit anderweitig genutzt. Mit etwas, das ich schon zu lange aufschiebe: Meine Website bei WordPress warten.

Meine wichtigste Mitarbeiterin will umsorgt werden!

Allerdings wird sie von mir, wie auch von vielen anderen (Solo-)Unternehmerinnen und -Unternehmern, gerne vergessen. Oft liegt es an Unwissenheit, Angst vor der Technik oder schlicht Überforderung.

Das wollen wir heute ändern und kümmern uns um ein Glow-up für deine WordPress-Website, inkl. Wartung und Updates – einem Frühjahrsputz quasi.

Warum es so wichtig ist, regelmäßig deine WordPress-Website zu warten

Safety first! 

Nein, wirklich. “Sicherheit” ist der wichtigste Grund. Eine Website, die auf dem aktuellen Stand ist, ist am besten vor Angriffen durch Bots oder Hacker geschützt.

Ein Auto oder ein Fahrrad wartest du ja auch. Du lässt die Reifen wechseln, den Ölstand prüfen und auf eventuelle Sicherheitslücken checken.

Alle diese Aufgaben helfen dabei, die Sicherheit und Leistung deiner WordPress-Webseite zu verbessern und sind auch für AnfängerInnen gut durchführbar.

Deinen Website-Glow-up kannst du an einem Nachmittag erledigen oder auf ein paar Tage verteilen. Plane insgesamt etwa eine Stunde Zeit dafür ein. Auch, wenn du bislang keine Ahnung hast, wie du eine WordPress-Website warten sollst: Das ist gar nicht so schwer! Dieser 6-Schritte-Fahrplan leitet dich genau durch den Prozess.

Am Schluss gebe ich dir noch einen Bonus-Tipp mit und stelle dir meinen allerersten Minikurs vor (waaah! ), der dir dabei hilft.

Mini-Disclaimer: Ich beschreibe hier die anfängerfreundlichsten Optionen, welche kein Coding voraussetzen. Es gibt für alles mehrere Vorgehensweisen und das waren auch längst nicht alle Wartungs-Aufgaben; mir ist aber wichtig, dass du die Punkte liest und dir denkst: “Okay, das krieg’ ich auch als Laie hin.” #ohneÜberforderung

… falls du noch einen extra Motivationsschub brauchst: Dieses Video hilft.  

Lass uns loslegen mit unserem Website-Glow-up!

Schritt 1: Ein (automatisches) Backup erstellen

SO wichtig und doch oft unterschätzt und vergessen: Regelmäßige Backups (Sicherungen) deiner Website. 

Auch, wenn WordPress sehr sicher ist: Es schadet nie, aktuelle Sicherungen deiner gesamten Website in der Hinterhand zu haben – das umfasst u. a. die Datenbank, deine Plugins, Themes, Medien, Seiten und Blogbeiträge. 

Du kannst sie in Notfällen (z.B. wenn bei einem Theme-Update etwas schiefgelaufen ist) wieder einspielen und deine Website so in den vorherigen Zustand zurücksetzen.

Backups sind dein Sicherheitsnetz. Deshalb ist dein erster Schritt im Website-Frühjahrsputz, ein Backup durchlaufen zu lassen.

Dabei spielt es übrigens keine Rolle, ob du nur eine kleine Seite mit wenigen Unterseiten hast oder eine super umfangreiche Website samt Onlineshop, Mitgliederbereich, usw..

Kurz gesagt: Ein Backup ist immer wichtig!

Plugin-Empfehlung: Updraft Plus* (das ist ein Affiliate-Link: Solltest du dir die Premium-Version des Plugins über meinen Link gönnen, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten.)
Updraft Plus ist in der Standardausführung kostenlos – und die reicht vollkommen aus.

Du hast noch nie ein Backup gemacht? In diesem Blogpost zeige ich dir genau, wie du Updraft Plus installierst und deine erste Sicherung durchgeführt – in nur wenigen Minuten!

Sicherungen deiner Website solltest du nicht nur 1x im Jahr erstellen lassen, sondern regelmäßig. Damit du den Prozess nicht jedes Mal manuell anstoßen musst, richte doch gleich die automatische Sicherung mit ein. 

Hier geht’s zu meiner Schritt-für-Schritt-Anleitung.

Sobald das Backup fertig ist, lade dir die vollständigen Sicherungsdateien auf deine Festplatte herunter oder in einen Cloud-Speicher wie Google Drive oder die Dropbox.

Deine Aufgabe: Mache ein Backup deiner Website und lade dir die Sicherungsdateien herunter.

Schritt 2: Plugins updaten

Wenn du deine WordPress Website warten willst, sollte dieser Punkt keinesfalls fehlen. 

Von Kundinnen höre ich oft: “Ich habe Angst, meine Plugins zu aktualisieren – nicht, dass was schief geht…”.

Verstehe ich!

Oft genug habe ich selbst unbedarft “Plugin aktualisieren” geklickt und wurde mit einem “kritischen Fehler” oder einer Website, in der nichts mehr so aussah wie vorher, begrüßt…

Ja, Plugins updaten kann zu Problemen führen – die du ohne ein Update nicht hättest.

Warum du um Plugin-Updates trotzdem nicht herum kommst? Weil eine veraltete Website mit veralteten Plugins Sicherheitslücken aufweisen kann. Das macht es für Schadsoftware oder Hacker leichter, deine Website anzugreifen. 

Ganz wichtig: Ich setze das bewusst an die 2. Stelle unseres Website-Frühjahresputzes. Zuerst solltest du immer, IMMER, ein Backup deiner Website machen und die dir Sicherungsdateien herunterladen, damit du sie im Fall der Fälle greifbar hast.

Ich empfehle dir, ein Plugin nach dem anderen upzudaten. Ja, das dauert länger als alle zeitgleich aktualisieren zu lassen, aber so behältst du die Kontrolle und kannst reagieren, sollte etwas schiefgehen.

Plugins updaten – so geht’s:

1. Für das Plugin-Update in unserem Frühjahrsputz, klicke in deinem WordPress Dashboard auf “Plugins” → “Installierte Plugins”. 

Finde das erste zu updatende Plugin (du erkennst es an dem gelben Hinweis-Text) und klicke “Jetzt aktualisieren”.

1. Leere deinen WordPress-Cache, rufe deine Website auf und mache einen kurzen Check: Sieht alles gut aus? 

Wenn ja, kannst du das nächste Plugin aktualisieren.

Wenn nein, mach das Update rückgängig, indem du dein Backup wiederherstellst.

Automatische Aktualisierungen und warum ich davon abrate

“Warum kann ich nicht die Automatischen Aktualisierungen für alle Plugins aktivieren? Dann müsste ich mich doch nicht mehr um händische Updates kümmern ”

Automatische Aktualisierungen klingen verlockend, ich weiß. 

Sie haben aber einen großen Nachteil: Vielleicht loggst du dich nur selten in dein WP Dashboard ein. Stell dir vor, in der Zwischenzeit aktualisieren sich diverse Plugins von selbst – und du merkst es gar nicht, weil du nicht auf deine Website, bzw. in dein Backend schaust. 

Das könnte fatal sein, wenn ein Plugin-Update z.B. zu Darstellungsfehlern auf deiner Website führt! Deine Besucher sehen eine Website, die “nicht richtig” aussieht oder auf der etwas nicht funktioniert, und klicken schneller weg, als du “Plugin-Update” sagen kannst. 

Indem du Plugins bei deiner Website-Wartung händisch aktualisierst, behältst du die Kontrolle und kannst bei Fehldarstellungen sofort reagieren und ein Backup einspielen.

Deine Aufgabe: Aktualisiere nacheinander alle deine Plugins. 

(Solltest du in Schritt 1 noch kein Backup deiner Website gemacht haben, hol das nach, BEVOR du die Plugins installierst.)

Schritt 3: Themes ausmisten

Während ich diesen Blogpost schreibe, habe ich meine Website-Wartung parallel mit gemacht. Damit ich ja nichts übersehe

(Der Tages-Pass im Coworking-Space will schließlich auch ausgenutzt werden, ha!) 

Ich gestehe, ich hatte ganze 12 ungenutzte Themes installiert, die ich jetzt gelöscht habe.

Auch, wenn sie nicht extrem viel Speicherplatz auf deinem Webspace wegnehmen – jeglicher ungenutzter Ballast darf während unseres Großreinemachens weg.

Deshalb wirf mal einen Blick in deine Theme-Übersicht und lösche ungenutzte Themes.

So löscht du ungenutzte Themes

1. Navigiere in deinem WordPress Dashboard zu “Design” → “Themes”. Das ist deine Theme-Übersicht.
   
2. Fahre mit der Maus über das Theme, das du löschen willst. Die Theme-Vorschau wird ausgegraut und es erscheint ein Button “Theme-Details”. Diesen klickst du an.

3. Dein Theme öffnet sich in einem separaten Fenster. Ganz unten findest du die Option, das Thema zu “Löschen”. Klicke darauf. 

3. WordPress fragt dich jetzt, ob du sicher bist, dass du das Theme löschen willst – bestätige mit OK.

4. Dein Theme wird jetzt vollständig aus deiner WordPress-Installation gelöscht! Wiederhole den Vorgang für alle weiteren Themes, die du im Zuge entfernen möchtest.

Tipp: Abseits deines Haupt-Themes solltest du noch ein weiteres Theme installiert lassen. Sollte es einmal Probleme mit deinem Theme geben, kann WordPress so auf das andere Theme ausweichen (solange, bis du dein Backup einspielst ) 

Nimm dir einfach das aktuelle Standard-Theme von WordPress (2024 ist es “TwentyTwentyFour”).

Deine Aufgabe: Checke deine Theme-Übersicht und lösche alle, die nicht in Verwendung sind.

Schritt 4: PHP-Version anpassen

PHP wird dazu verwendet, um dynamische Inhalte auf deiner Website und ihrer Datenbank zu erstellen. Die PHP-Version auf deinem Webhosting-Paket sollte auf dem aktuellen Stand sein, weil ältere Versionen Sicherheitslücken aufweisen und die Funktionalität deiner Website einschränken können. 

Es ist wichtig, dass du weißt, welche Version du nutzt. Die einzelnen Versionen unterscheiden sich nämlich erheblich voneinander, deshalb gilt: Verwende die aktuell gültige PHP-Version!

Wenn du dir jetzt denkst “… das klingt so nach Programmierung ” – keine Sorge, da gibt’s eine anfängerfreundliche Lösung! 

Doch zuerst…

So findest du heraus, welche PHP-Version du nutzt

1. Navigiere in deinem WordPress-Dashboard zu “Werkzeuge” → “Website-Zustand”.

2. Oben mittig findest du den Reiter “Bericht”. Klicke darauf. Es kann ein bisschen dauern, bis der Bereich geladen ist, schließe das Fenster also nicht.

3. Scrolle ein Stück nach unten bis zum Punkt “Server”. Hier findest du die PHP-Version. In meinem Beispiel ist sie auf Version 7.4. eingestellt. 

Zum Stand dieses Blogposts ist PHP 8.3 die aktuell gültige Version. 

Ups. Das müssen wir ändern.

Eine Anpassung ist unumgänglich, weil ich meine Website so nicht nur an die neuesten Sicherheitsstandards anpasse, sondern auch die Ladegeschwindigkeit erhöht wird – was wiederum Google mag.

PHP auf die neueste Version aktualisieren – so geht’s

Deine PHP-Version ist ebenfalls veraltet und muss aktualisiert werden? 

Im Regelfall findest du die PHP-Einstellungen bei deinem Webhosting-Anbieter. Bei meinem Anbieter all-inkl.com kann ich sie z.B. direkt im Bereich “Domains” umstellen.

Da ich weiß, dass sowas durchaus Berührungsängste verursacht, habe ich einen heißen Tipp für dich: Du musst das gar nicht selbst machen. Lass die Umstellung von deinem Webhoster übernehmen!

Wende dich dafür einfach per Mail oder Anruf an den Support und bitte sie, die PHP-Version zu erhöhen.

Du kannst diese E-Mail-Vorlage verwenden:

Hallo Support-Team,

meine WordPress-Website läuft aktuell noch auf die PHP-Version [##hier deine PHP-Version einfügen##]. Bitte stellen Sie die PHP-Version auf die aktuellste Version um und prüfen Sie meine Website auf Funktionalität.

Vielen Dank!

Meiner Erfahrung nach machen die meisten Webhoster das schnell und kostenlos für dich. Sollte dein Anbieter eine Gebühr verlangen, werden sie dich im Normalfall vorab informieren und erst nach deinem OK loslegen.

Deine Aufgabe: Check deine PHP-Version. Falls ein Update nötig ist, schreib deinem Webhoster und bitte sie, die PHP-Version für dich zu erhöhen.

Du willst die Aktualisierung der PHP-Version doch lieber auslagern?

… oder hast allgemein ein Problem mit deiner WordPress-Website, das du eeendlich mal gelöst haben willst? Gib’s einfach ab!

WordPress- und Elementor-Support

Warte nicht, bis deine Website dir komplett die Nerven raubt

Du hast keine Lust mehr, stundenlang bei Google nach einer Lösung zu suchen – ich versteh das. Mit meinem WordPress-Elementor-Support kriegst du schnelle und kompetente Hilfe. Buch jetzt deine Supportstunde!

Jetzt Elementor-Hilfe holen

Sichere Abrechnung via Ablefy

Schritt 5: Medienbibliothek aufräumen

Wir kennen es wohl alle: Ein Bild wird mal eben in 3 verschiedenen Versionen bei WordPress hochgeladen, alte Beispiel-Bilder aus dem Theme sind noch irgendwo in den Untiefen versteckt… die Medienbibliothek in WordPress gleicht einer Rumpelkammer. 

Sortier’ mal wieder aus und lösche ungenutzte Bilder und Dateien in deiner Mediathek. Damit sparst du Speicherplatz und verbesserst die Ladezeiten deiner Webseite.

Ein Plugin wie Media Cleaner kann dir helfen, nicht verwendete Medien zu identifizieren und zu entfernen. Da wir WordPress jedoch nicht mit zu vielen Plugins zumüllen wollen, um die Leistung deiner Website hoch zu halten, empfehle ich dir hier die unkompliziertere Variante:

1. Gehe deine Mediathek durch (im WordPress Dashboard unter “Medien” → “Mediathek”) und lösche manuell, was du nicht mehr brauchst. 

2. Du findest die “Endgültig löschen” Option entweder, indem du die gewünschte Medien-Datei anklickst, ganz unten:

3. Oder du nutzt den “Mehrfachauswahl” Button ganz oben, um mehrere Dateien gleichzeitig zu löschen:

Wähle die Bilder aus, die du löschen willst, indem du ein Häkchen setzt und klicke den “Endgültig löschen” Button oben links, um sie zu entfernen.

Tipp: Falls du versehentlich etwas gelöscht hast, kannst du die gelöschte Mediendatei im Papierkorb wiederfinden.

Mach es dir zur Gewohnheit, deine Medienbibliothek regelmäßig zu überprüfen und aufzuräumen. Denn – du ahnst es vielleicht – ungenutzte Bild- und Mediendateien nehmen unnötig Speicherkapazitäten weg und sorgen für längere Ladezeiten. 

Deine Aufgabe: Räum deine Medienbibliothek auf!

Schritt 6: Kaputte Links prüfen und reparieren

Hast du schon mal auf einer Website einen Link zu einem Angebot oder einem Freebie angeklickt, zu dem du unbedingt mehr erfahren wolltest… nur um auf einer 404-Fehlerseite zu landen? Argh.

Damit das deinen BesucherInnen nicht passiert, gehört zu deinem “Website warten” Plan ein Check deiner Links. Gibt es kaputte (= nicht funktionierende / ins Leere führende) Links?

Mit dem Broken Link Checker Plugin kannst du deine Website auf defekte Links überprüfen. Das Plugin benachrichtigt dich, wenn es kaputte Links findet, die du dann leicht reparieren oder entfernen kannst.

Warum das wichtig ist? Aus SEO-Gründen! Google schätzt es, wenn auf einer Website keine kaputten Links sind und bevorzugt sie im Ranking.

Außerdem ist es für deine BesucherInnen (und potenzielle KundInnen) angenehmer, wenn sie finden, was sie suchen. Das trägt zur Professionalität und Glaubwürdigkeit deiner Website bei.

Kaputte Links prüfen und reparieren mit dem Broken Links Checker Plugin

1. Gehe zu Plugins → Installieren, suche “Broken Link Checker” und installiere das Plugin. So sieht es aus (Stand: Juli 2024):

2. Klicke nach der Installation auf Aktivieren.

3. Nach der Aktivierung findest du das Plugin links in der Seitenleiste als “Link Checker”.

4. Du hast zwei Auswahloptionen: “Cloud (neu)” und “Lokal (alt)”. Lass dich vom Umfang der “Cloud” nicht verunsichern – für unseren Zweck reicht “Lokal”. Klicke darauf.

5. Das Plugin startet automatisch eine Überprüfung nach defekten Links. Dieser Vorgang kann je nach Größe deiner Website einige Minuten dauern. Wenn die Überprüfung abgeschlossen ist, siehst du eine Liste der fehlerhaften Links.

6. Klicke auf den jeweiligen Link, um ihn zu bearbeiten oder zu entfernen.

1. Nimm deine Anpassungen vor. Wenn ein Link nicht mehr relevant ist, z.B. weil es sich um eine nicht mehr existierende Landingpage zu einem früheren Angebot von dir handelt, kannst du auf Link entfernen klicken.

Das war’s!

Auch hier: Sobald du das Plugin verwendet hast, deaktiviere und deinstalliere es wieder, um keine “Plugin-Leichen” auf deinem Server zu haben.

Wenn du nächstes Mal deine WordPress Website warten möchtest, kannst du es wieder installieren.

Deine Aufgabe: Finde kaputte Links und passe sie an.

Bonus-Schritt: Bei der VG Wort anmelden…. mit meinem neuen Minikurs

Gehört zu deiner Website ein Blog, der (regelmäßig oder nur ab und an mal) mit Content gefüttert wird und deren UrheberIn du bist?

Reichst du deine Blogbeiträge denn auch jährlich bei der VG Wort ein, um eine Auszahlung dafür zu erhalten?

Wie? Wo? Was?

Erreicht ein Blogbeitrag die vorgegebenen Mindestaufrufe, bekommst du dafür 30 – 40 € an Tantiemen ausgezahlt. Einfach so, weil du VerfasserIn eines öffentlich im Internet veröffentlichten Textes bist.

Einmal im Jahr füge ich diesen Schritt bei meiner Website-Wartung an und reiche meine Beiträge ein. Einmal angemeldet, läuft das Ganze immer gleich ab… nur vergesse ich regelmäßig, was zu tun ist. 

Weil es meinen KundInnen genauso geht, habe ich unser aller Leben erleichtert, indem ich eine anfängerfreundliche Schritt-für-Schritt-Anleitung zur VG Wort erstellt habe – in praktischer Minikurs-Form mit kurzen Videoanleitungen.

Wenn du willst, dass deine Blogposts bei der Ausschüttung im nächsten Jahr berücksichtigt werden, hol dir den Minikurs “Content Reward ” jetzt zum Einführungspreis von 39 € zzgl. MwSt. 

Auf dieser Seite findest du alle Details.

Deine Aufgabe: Informier dich über die VG Wort und registriere dich, damit du deine Blogposts im nächsten Jahr einreichen kannst. Mein neuer Minikurs zeigt dir kompakt und hands-on, wie!

Real Talk: Abgesehen von den Videos habe ich alle Kursinhalte ebenfalls hier in Tokyo erstellt. Eigentlich wollte ich schon vor Monaten fertig sein, doch der dämliche Perfektionismus hatte mich fest im Griff. Jetzt aber! 

Die Flatrate an Matcha Tee hat geholfen.

Damit sind wir durch! 

Ich reiche gleich noch meine eigenen Blogposts bei der VG Wort ein. Und dann klopfe ich mir ordentlich auf die Schulter – und dir auch! Du hast – vielleicht als Technik-Neuling – deiner Website ein Glow-up in Form von besseren Ladezeiten und aktuellen Sicherheitsstandards verpasst und kannst stolz auf dich sein!

Tipp: Speichere dir diesen Blogpost gerne ab und hole ihn alle paar Monate (oder wenigstens 1x im Jahr wieder raus, wenn du wieder deine Website warten willst. So hast du eine verlässliche Checkliste. 

Wie viele der Schritte hast du umgesetzt? Hat alles geklappt? Erzähl es mir in den Kommentaren!

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!

Der Beitrag 6 Schritte, um deine WordPress Website zu warten (auch, wenn du das bisher noch nie gemacht hast) erschien zuerst auf Chrissi Wagner.

• das Theme deiner Website völlig zerschossen ist,
• ein Plugin, das vorher einwandfrei funktioniert hat, nicht mehr läuft, 
• kryptische Fehlermeldungen angezeigt werden, 
• oder, unser aller Liebling: anstelle deiner Website nur noch ein “kritischer Fehler” auf weißem Hintergrund zu sehen ist.

Auch ich habe das alles schon durch.

Mittlerweile stehe ich dem ziemlich entspannt gegenüber. Denn ich weiß: Ich habe eine aktuelle Sicherung (“Backup”) meiner Website vorliegen, welche ich jederzeit einspielen und den vorherigen Stand wiederherstellen kann. Und ich will, dass du dieses Sicherheitsgefühl ebenfalls hast.

Denn: Backups sind echte Lebensretter!

Das Plugin meiner Wahl für WordPress ist seit Jahren Updraft Plus* (Affiliate-Link; Infos siehe unten).

Es ist kostenfrei, sicher, hervorragend bewertet und vor allem intuitiv und einfach in der Verwendung.

Weil ich es nicht leiden kann, wenn eine Anleitung erst nach ewigem Scrollen und einer halben Lebensgeschichte an Text versteckt ist – looking at you, Rezept-Blogs! – legen wir direkt los. Die Umsetzung dauert nur 5 Minuten!

Schritt-für-Schritt Anleitung: Website Backup erstellen mit Updraft Plus* in 5 Minuten

1. Logge dich in deinem WordPress Dashboard ein und klicke links auf “Plugins” → “Neues Plugin hinzufügen”.
   
2. Gib im Suchfeld rechts oben “Updraft Plus” ein. 
   
3. Suche in den Suchergebnissen nach diesem Plugin (es sollte ziemlich weit oben angezeigt werden) und klicke auf den Button “Jetzt installieren”.

4. Aktiviere das Plugin. Du findest es jetzt ganz oben in der schwarzen Leiste sowie unter “Einstellungen” in deinem WordPress-Backend.

Hervorragend – dein Backup-Plugin ist installiert und ready to go!

Lass uns gleich mal dein erstes Website Backup mit Updraft Plus erstellen:

Dein erstes Website Backup mit Updraft Plus erstellen

1. Klicke oben in der schwarzen Leiste in deinem Dashboard auf “UpdraftPlus” → “Sicherung / Wiederherstellen”.

2. Du landest jetzt in deiner Start-Ansicht von Updraft Plus. Klicke auf den blauen Button “Jetzt sichern”.

3. Im Fenster, das sich öffnet, kannst du die Einstellungen so lassen, wie sie sind. Klicke erneut auf “Jetzt sichern”, um den Sicherungsprozess zu starten.

Das dauert seine Zeit, deshalb hab Geduld.

Sobald das Backup fertig ist, findest du die einzelnen Sicherungsdaten in der Plugin-Startansicht unter “Bestehende Sicherungen”.

Die einzelnen Sicherungsdaten (Datenbank, Plugins, Themes, Uploads, Andere) kannst du dir hier bequem herunterladen.

Klicke dafür auf den jeweiligen Button, damit die ZIP-Datei erstellt wird. Bei einigen Sicherungsdaten wie der Datenbank oder den Uploads kann das eine Weile dauern.
Sobald alles fertig ist, kannst du die ZIP-Datei “Auf deinen Computer herunterladen”.

Nice, damit weißt du jetzt, wie du ein WordPress Website Backup erstellen kannst!

But wait, there’s more!

Hast du nochmal 5 Minuten? 

Regelmäßiges automatisiertes Backup einrichten mit dem Updraft Plus Plugin

Damit du diesen Prozess zukünftig nicht immer manuell anstoßen musst (denn seien wir ehrlich, das vergisst man gerne mal und plötzlich sind 6 Monate ohne ein einziges Backup rum – wollen wir nicht!), empfehle ich dir, ein automatisches Backup einzurichten.

Die Einrichtung dauert ebenfalls maximal 5 – 10 Minuten und sobald einmal alles steht, bist du bestens abgesichert!

1. Navigiere in den UpdraftPlus Reiter “Einstellungen”.

2. Ganz oben findest du folgende Einstellungen:

Datei-Sicherungsplan und Datenbank-Sicherungsplan.
Sie legen fest, wie oft die jeweilige automatische Sicherung durchgeführt werden soll. Wähle hier über das Dropdown-Auswahlmenü deinen gewünschten Sicherungsrhythmus aus.

Ich habe “Weekly” (1x Wöchentlich) eingestellt. 

Welcher Sicherungsrhythmus ist richtig?

Wenn du viel an deiner Website arbeitest, empfiehlt sich ein tägliches (Daily) Backup. 

Ansonsten fährst du mit einem wöchentlichen oder wenigstens 14-tägigen (“Fortnightly”) Backup gut!

Nimm dieselbe Einstellung auch bei der Datenbank-Sicherung vor.

Als nächstes sehen wir uns die Anzahl der aufzubewahrenden geplanten Sicherungen rechts daneben an.

4. Hinterlege hier die gewünschte Anzahl an Backups, die auf der Updraft Plus Startansicht unter “Bestehende Sicherungen” gespeichert werden sollen.

3 – 5 gespeicherte Sicherungen ist hier eine gute Hausnummer!

Zu viele Backups müllen im Laufe der Zeit deinen Webhosting-Speicher zu und sorgen für langsame Ladezeiten.

Zu wenige könnten Probleme verursachen, wenn du ein Backup wiederherstellen möchtest.

Beispielszenario: Vielleicht hat deine WordPress-Version sich aktualisiert und deine Website “zerschossen”. Als du es bemerkst, ist bereits ein automatisches Backup durchgelaufen – und hat die „kaputte“ Website gesichert. 

Würdest du nur 1 Sicherung speichern lassen, hättest du nun kein Backup mehr von deiner Website, als noch alles in Ordnung war.

(Auch das ist ein lösbares Problem, weil dein Webhosting-Anbieter i.d.R. ab und an Backups deiner Website macht und speichert. In so einer Situation könntest du dich also immer noch an deinen Webhosting-Anbieter wenden und darum bitten, ein älteres Backup einzuspielen. Das nur am Rande )

Online-Speicher auswählen

Standardmäßig speichert Updraft Plus alle Backup-Dateien auf dem Server deines Webhosting-Anbieters. 

Damit du im Fall der Fälle doppelt abgesichert bist, solltest du hier einrichten, dass deine Backups auf einem Online-Speicher abgelegt werden.

Das kann z.B. ein Google Drive, OneDrive oder die Dropbox sein oder per FTP auf einem anderen Server. Die möglichen Dienste werden dir hier angezeigt.

Da die meisten von uns mittlerweile Dienste wie Google Drive verwenden, zeige ich dir hier, wie du Drive als Online-Speicher einrichtest.

• Wähle Google Drive aus. 
• Unten werden dir dann verschiedene Einstellungsmöglichkeiten angezeigt. Du musst hier gar nicht viel verändern, sondern dich lediglich über den Button “Mit Google verbinden” in deinen Drive-Account einloggen. Das Tool wird automatisch verknüpft.

Für andere Tools wie Dropbox funktioniert es ganz ähnlich.

• Alle weiteren Einstellungen kannst du so lassen!
• Alles erledigt? Dann kannst du ganz nach unten scrollen und “Änderungen speichern” klicken!

Ich gratuliere dir, du hast gerade gelernt, wie du in Website Backup erstellen kannst und damit einen wichtigen Schritt für die Sicherheit deiner Website getan!

So kannst du dein Updraft Plus Backup wiederherstellen

Wenn doch einmal etwas schiefgegangen ist und deine Website beispielsweise nach einem Plugin-Update “zerschossen” aussieht, kannst du ganz easy ein aktuelles Updraft Plus Backup wiederherstellen.

Klicke dafür bei “Bestehende Sicherungen” rechts auf den “Wiederherstellen”-Button.

Das Plugin wirkt jetzt seine Magie und du musst nichts weiter tun.

Du traust dich nicht ran oder kommst gar nicht in dein WordPress-Dashboard? Deine Website weist einen kritischen Fehler auf? Dann schreib mir und ich sehe mir das im Rahmen meines WordPress-Supports gerne an!

Das hat dir geholfen? Dann pinne doch eine dieser Grafiken bei Pinterest!

Transparenzhinweis: In diesem Beitrag ist das Backup-Plugin meiner Wahl, Updraft Plus, verlinkt. Dabei handelt es sich um einen Affiliate-Link. Wenn du dir die Premium-Version des Plugins über meinen Link kaufst, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten. Um das Plugin so wie in der Anleitung zu nutzen, brauchst du aber keine Premium-Version abzuschließen, sondern kannst die kostenfreie Version nutzen.

Der Beitrag Website Backup erstellen in 5 Minuten – so sicherst du deine WordPress Website mit dem Updraft Plus Plugin erschien zuerst auf Chrissi Wagner.