Lernvideos Webdesign mit WordPress

Außerdem lernst du, wie du mit KI-Tools wie Microsoft Copilot Farbpaletten automatisch generieren kannst – passend zu Themen, Branchen oder deinem individuellen Stil.

Ich zeige dir:

• Wie Farben auf Bildschirmen funktionieren (RGB-Modell)
• Was HEX-Codes sind und wie du sie nutzt
• Wie du Farben mit Paint oder Photopea aus Bildern extrahierst
• Warum du nur zwei Hauptfarben + Weiß/Schwarz verwenden solltest
• Welche Farbe welche Wirkung hat – und welche Farbe zu welchen Branchen passt
• Wie du Farben aus deinem Logo ermittelst und zentral speicherst
• Wie du mit KI (Copilot) automatisch passende Farbpaletten erstellen lässt
• Wie du Farben von Webseiten mit der Pipette erfasst (z. B. in Firefox)
• Wie du Farben aus Office-Programmen wie PowerPoint und Word übernimmst
• Warum OneNote besonders praktisch zur Farb-Organisation ist

🔗 Nützliche Tools:

🖌️ Photopea (kostenloser Online-Bildeditor): https://www.photopea.com

💬 ChatGPT von OpenAI (KI-Farbanalyse & Unterstützung, Ideen & Farben automatisch generieren lassen): https://chat.openai.com 🤖

Microsoft Copilot (KI-Farbanalyse & Unterstützung, Ideen & Farben automatisch generieren lassen): https://copilot.microsoft.com

🔽 Downloads:

🎨 Farbkreis (Bilddatei, CC0-lizenziert): https://tinyurl.com/yb6w8yex

🖼️ Fiktives Logo (zum Üben der Farbanalyse, CC0-lizenziert): https://tinyurl.com/3pet655h

Du erfährst, wo du kostenlose und lizenzfreie Fonts findest – zum Beispiel Google Fonts und FontSquirrel – und wie du deine Schriften richtig speicherst und für den späteren Einsatz organisierst.

Außerdem gebe ich dir Tipps zur optimalen Kombination von maximal zwei Schriftarten und wie du dabei Ladezeiten und Design sauber hältst.

Außerdem besprechen wir wichtige Gestaltungsregeln wie die richtige Textgröße, ausreichend White Space, optimale Absätze und die beste Textausrichtung.

Ich zeige dir:

• Welche Schriftarten sich für WordPress-Websites am besten eignen
• Den Unterschied zwischen serifenlosen und Serifenschriften
• Wie du passende Schriften auswählst und sinnvoll kombinierst
• Was Fallback-Schriften sind und warum sie wichtig sind
• Kostenlose Schriftquellen: Google Fonts & FontSquirrel
• Wie du Schriften für den späteren Gebrauch speicherst und organisierst
• Tipps zu Textgröße, Weißraum, Absätzen und Textausrichtung

🖥️ Schriftarten unter Windows finden:

1. Windows Explorer öffnen
2. „Dieser PC“ und „Lokaler Datenträger (C:)“ auswählen
3. Doppelklick auf „Windows“ und „Fonts“
4. Die Schriften in einen Ordner bei OneDrive oder in ein OneNote-Notizbuch ziehen (Drag & Drop)

🖥️ Schriftarten unter macOS finden:

1. Finder öffnen
2. CMD + Shift + G kombinieren
3. „/System/Library/Fonts/“ ODER „/Library/Fonts/“ aufrufen
4. Die Schriften in einen Ordner bei iCloud oder in ein OneNote-Notizbuch im Browser ziehen (Drag & Drop)

🖥️ Schriften (Fonts) aus dem Web:

🌐 Google Fonts – kostenlose, lizenzfreie Webfonts: https://fonts.google.com

🔍 Font Squirrel – eine Schatztruhe für hochwertige Gratis-Schriften: https://fontsquirrel.com

💼 DaFont – große Auswahl an kreativen Schriften, meist kostenpflichtig: https://dafont.com

🤖 KI-Nutzung – ChatGPT von OpenAI: https://chat.openai.com

💬 KI-Nutzung – Copilot von Microsoft: https://copilot.microsoft.com

🅰️➔🅱️ Fallback-Schriftarten (Sichere Schriften):

Sans-Serif (serifenlos):

• Arial
• Calibri
• Geneva
• Gill Sans (eingeschränkt verbreitet)
• Helvetica
• Lucida Grande
• Segoe UI
• Tahoma
• Trebuchet MS
• Verdana

Serif (mit Serifen):

• Book Antiqua
• Cambria (MS Office, nicht auf allen Systemen)
• Georgia
• Palatino Linotype
• Times New Roman

⚠️ Hinweis: Dieses Video ersetzt keine Rechtsberatung. Ich bin kein Anwalt – bei Unsicherheiten wende dich bitte an eine rechtliche Fachperson.

Ich zeige dir die besten Plattformen für lizenzfreie Bilder und wie du dort passende Bilder in verschiedenen Größen (640px und 1280px Breite) herunterladen kannst. Danach lernst du, wie du deine Bilder im Windows Explorer oder Mac Finder ganz einfach auf ihre Größe prüfst und sinnvoll sortierst.

Das moderne WebP-Format wird vorgestellt – der neue Standard für schnelle Ladezeiten und hohe Bildqualität im Web. Ich zeige dir, wie du mit praktischen Online-Tools viele Bilder gleichzeitig in WebP umwandelst und so Speicher sparst.

Eigene Fotos sind meist zu groß für das Web. Deshalb zeige ich dir mit dem Online-Dienst „Bulk Resize“, wie du viele Bilder gleichzeitig verkleinerst und webtauglich machst – ideal, um Ladezeiten zu verbessern und Speicherplatz zu sparen. Du lernst, wann du besser die 640px-Variante nutzt (z. B. für Illustrationen neben Texten) und wann die größere 1280px-Version sinnvoll ist (z. B. für Slideshows oder Galerien).

Mit Photopea, dem kostenlosen Photoshop-Ersatz im Browser, erkläre ich dir, wie du Bilder professionell zuschneidest und im WebP-Format speicherst – ganz ohne Installation. Ein weiterer wichtiger Punkt ist das Vergeben aussagekräftiger Dateinamen: maximal drei Wörter, mit Bindestrichen getrennt, die klar beschreiben, was auf dem Bild zu sehen ist – das hilft später beim SEO und der Übersicht.

Zum Schluss zeige ich dir, wie du mit dem Online-Dienst „WebRename“ mehrere Bilder gleichzeitig umbenennst und so deinen Workflow enorm beschleunigst.

Ich zeige dir:

• Die rechtssichere Nutzung von Bildern für deine Website
• Wie und wo du lizenzfreie Bilder findest
• Wie man Bilder gleichzeitig in WebP konvertiert – Vorteile & Anwendung
• Wie man Bilder gleichzeitig verkleinert
• Wie man Bilder auf eine feste Größe zuschneidet (640px & 1280px)
• Wie man aussagekräftige Dateinamen vergibt und vielen Bildern gleichzeitig denselben Dateinamen mit fortlaufender Nummer zuweist
• Effiziente Bildverwaltung für WordPress-Websites

🔗 Nützliche Links & Tools aus dem Video:

• Pixabay (lizenzfreie Bilder): https://pixabay.com
• Pexels (lizenzfreie Bilder): https://pexels.com
• Unsplash (lizenzfreie Bilder): https://unsplash.com
• bulkresize.com (Bildgröße ändern & WebP konvertieren): https://bulkresizephotos.com
• Photopea Online Editor (Bilder bearbeiten): https://www.photopea.com
• webrename.com (Bilder umbenennen): https://webrename.com

Ich zeige dir:

• Warum klare Ziele und Zielgruppen entscheidend für deinen Website-Erfolg sind
• Wie du Ziele und Zielgruppen Schritt für Schritt in OneNote dokumentierst
• Wie du ChatGPT und Copilot nutzt, um dir in Sekunden passende Ideen und Anregungen zu holen
• Was Domains, Subdomains, Hosting und Serverumgebung eigentlich bedeuten
• Wie du einen seriösen Hosting-Anbieter auswählst und welche Anbieter du besser vermeidest
• Wie du eine bestehende Domain mit einem Auth-Code beim neuen Hoster nutzt
• Wie du eine neue Domain strategisch auswählst – Firmenname, Leistung oder Kombination
• Welche Hosting-Tarife für kleine und große Websites sinnvoll sind und wie du ein Hosting-Paket bestellst
• Wie du deine Zugangsdaten sicher speicherst – inklusive Passwortschutz und Backup in OneNote
• Warum eine Sitemap der perfekte Fahrplan für deine Website ist
• Wie du mit PowerPoint und SmartArt in wenigen Minuten eine grafische Sitemap erstellst
• Wie du deine Sitemap sowohl als Präsentation für spätere Änderungen als auch als Bild für OneNote speicherst
• Wie du alle Informationen sauber organisierst, um jederzeit den Überblick zu behalten

🔗 Nützliche Links & Text-Vorlagen:

• 🤖 KI-Nutzung – ChatGPT von OpenAI: https://chat.openai.com
• 💬KI-Nutzung – Copilot von Microsoft: https://copilot.microsoft.com

📝 Anpassbare Texte für Ziele und Zielgruppen bei ChatGPT und Copilot:

„Ich plane eine Website für meine Firma ABC, die PC-Reparaturen und IT-Schulungen im Bezirk Liezen anbietet. Bitte schlage mir 3-5 passende primäre und sekundäre Ziele und dazugehörige primäre und sekundäre Zielgruppen vor.“

„Bitte liste die Ziele und Zielgruppen separat auf jeweils bei primär und sekundär.“

Empfohlene Hosting-Anbieter:

• All-Inkl – sehr guter Support, faire Preise, einfach bedienbar https://all-inkl.com/
• DomainFactory – viele Profi-Funktionen, schnelle Server https://www.df.eu/
• Hetzner – technisch aktuell, zuverlässig und transparent https://www.hetzner.com/

Ich zeige dir:

• Den Unterschied zwischen Short-Tail und Long-Tail Keywords
• Wie du Suchvolumen, Wettbewerb und CPC richtig einschätzt und passende Keywords findest
• Wie du mit der Hilfe von KI Keywords findest
• Warum Regionalisierung deiner Keywords so wichtig ist
• Wie du in kürzester Zeit den perfekten Seitentitel findest
• Worauf du bei guten SEO-Texten unbedingt achten musst
• Wie du mit KI (z. B. ChatGPT) schneller und besser schreibst

🔗 Nützliche Links, Tabellen & Text-Vorlagen:

Kostenloses Keyword-Tool:

https://www.keyword-tools.org/

• 🤖 KI-Nutzung – ChatGPT von OpenAI: https://chat.openai.com
• 💬KI-Nutzung – Copilot von Microsoft: https://copilot.microsoft.com

📝 Beispieltexte Keyword-Recherche ChatGPT/Copilot:

„Ich erstelle gerade die Website für die Firma ABC, die IT-Dienstleistungen in den Bereichen Reparaturen und Schulungen anbietet. Für eine Unterseite plane ich, Computerkurse für Anfänger anzubieten. Als Keyword habe ich „Computerkurse für Anfänger im Bezirk Liezen“ gefunden – hast du dazu noch treffendere Vorschläge für mich?“

„Ich erstelle gerade die Website der Firma ABC aus Bad Mitterndorf im Bezirk Liezen. Die Firma bietet IT-Dienstleistungen in den Bereichen Reparaturen und Schulungen an. Für die Seite „Anfängerkurse“ suche ich passende Keywords – gib mir Short Tail- und Long-Tail-Keywords.“

👉 Tool zum Testen der Länge deines Seitentitels:

https://keyperformance.de/serp-generator

Ich zeige dir:

• Wie du prüfst, ob deine Domain bereits SSL-verschlüsselt ist
• Wo du die technischen Einstellungen beim Hoster (am Beispiel all-inkl.com) findest
• Wie du SSL aktivierst und erzwingst
• Wie du eine neue MySQL-Datenbank samt Benutzer anlegst
• Wie du den FTP-Zugang für den Webserver einrichtest und alle Infos sicher in OneNote speicherst

🔗 Nützliche Links zu Hosting-Anbietern:

👉 Im Video zeige ich die Einrichtung am Beispiel von all-inkl.com:

https://www.all-inkl.com/

Andere beliebte Hosting-Anbieter:

• DomainFactory – https://www.df.eu/
• Hetzner – https://www.hetzner.com/

Haftungsausschluss:

Alle gezeigten Schritte führst du auf eigene Verantwortung durch. Ich übernehme keine Haftung für eventuelle Schäden, Datenverluste oder Fehlkonfigurationen, die durch die Umsetzung entstehen können.

Ich zeige dir:

• Wie du den kostenlosen FTP-Client FileZilla herunterlädst und installierst
• Wie du deine FTP-Zugangsdaten in FileZilla speicherst und dich mit dem Server verbindest
• Wie du den richtigen Ordner für deine Domain findest und nicht benötigte Dateien entfernst
• Wie du WordPress herunterlädst, entpackst und alle Dateien in den Webspace überträgst
• Wie du die Installation direkt im Browser durchführst
• Wie du dich zum ersten Mal im WordPress-Backend anmeldest
• Wie du die Zugangsdaten in OneNote speicherst

🔗 Nützliche Links:

☁️⬇️ FileZilla FTP Client:

https://filezilla-project.org/downloa…

☁️⬇️ WordPress Deutsch:

https://de-at.wordpress.org/download/

Haftungsausschluss:

Alle gezeigten Schritte führst du auf eigene Verantwortung durch. Ich übernehme keine Haftung für eventuelle Schäden, Datenverluste oder Fehlkonfigurationen, die durch die Umsetzung entstehen können.

Ich zeige dir:

• Wie du dich in WordPress anmeldest
• Den Unterschied zwischen Backend und Frontend
• Das Dashboard und alle wichtigen Bereiche im Überblick
• Wie du vorinstallierte Inhalte löschst
• Wichtige Einstellungen für Sicherheit und Datenschutz
• Wie du deinen Benutzernamen, dein Passwort und dein Profil anpasst
• Was Permalinks sind und wie du sie optimierst
• Wichtige Tipps für Suchmaschinen und rechtliche Vorgaben

🔗 Nützliche Tools und Texte:

💬 ChatGPT von OpenAI:

https://chat.openai.com

Ich zeige dir:

• Wie du Profilbilder unkompliziert beim Benutzerkonto hochlädst
• Die volle Kontrolle über alle Bilddateien behältst
• Keine Drittanbieter-Abfragen (Gravatar) einbaust und die DSGVO einhältst
• Wie du einen einfachen Zuschnitt und eine saubere Darstellung des Profilbilds erzielst

🔗 Nützliche Tools:

🖼️ Photopea – Online Bildbearbeitung kostenlos nutzen:

https://www.photopea.com

Ich zeige dir:

• Was ein Website-Icon eigentlich ist und warum es wichtig ist
• Wie du dein Logo quadratisch zuschneidest (640×640 px) und perfekt vorbereitest
• Wie du das Favicon als WebP-Datei speicherst und richtig benennst
• Wie du das Website-Icon in WordPress einfügst
• Wie du das Website-Icon im Browser-Tab und in Lesezeichen anzeigst

🔗 Nützliche Tools:

🖼️ Photopea – Online Bildbearbeitung kostenlos nutzen:

https://www.photopea.com

Ich zeige dir:

• Wie du das Duplicator-Plugin installierst und aktivierst
• Wie du ein komplettes WordPress-Backup erstellst
• Wie du deine Sicherung sicher bei OneDrive, iCloud & Co. ablegst
• Wie du alte Backups auf dem Server löschst
• Warum automatische Backups direkt auf dem Server gefährlich sind
• Was du über Cloud-Zugangsdaten & Sicherheitsrisiken wissen solltest
• Eine sichere Backup-Strategie für deine WordPress-Website

🔗 Nützliche Links:

Plugin „Duplicator“ – https://de.wordpress.org/plugins/duplicator/

Ich zeige dir:

• Was du vor dem Wiederherstellen vorbereiten musst
• Wie du FileZilla nutzt, um die beschädigte Website zu entfernen und die Backup-Dateien zu übertragen
• Wie du mit „installer.php“ dein Backup wiederherstellst
• Wie du typische Fehler vermeidest und richtig validierst
• Wie du deine Seite wieder erfolgreich zum Laufen bringst

🔗 Nützliche Links:

Plugin „Duplicator“ – https://de.wordpress.org/plugins/duplicator/

✅ Haftungsausschluss: Alle gezeigten Schritte führst du auf eigene Verantwortung durch. Ich übernehme keine Haftung für eventuelle Schäden, Datenverluste oder Fehlkonfigurationen, die durch die Umsetzung entstehen können.

Ich zeige dir:

• Was ein WordPress-Theme eigentlich ist
• Warum du niemals die Standard-Themes verwenden solltest
• Wie du Themes direkt in WordPress verwendest und wieder entfernst
• Worauf du im Customizer achten musst
• Warum das mobile Menü entscheidend ist
• Was Widgets sind
• Warum Premium-Themes oft überladen sind
• Welche kostenlosen Themes wirklich stark sind (Blocksy & Kadence)

Meine Top-Empfehlungen für WordPress-Themes, die wirklich was taugen:

🥇 Blocksy – modern, blitzschnell, anpassbar bis ins Detail 🔗https://creativethemes.com/blocksy/

🥈 Kadence – stark, flexibel und ein echter Geheimtipp

🔗https://www.kadencewp.com/

✅ Beide bieten dir schon in der kostenlosen Version fast alles, was du brauchst – ohne Programmierkenntnisse!

🛑 Lass die Finger von überladenen Premium-Themes – diese hier liefern, was du brauchst.

Ich zeige dir:

• Wie du Blocksy als Parent-Theme installierst und aktivierst
• Wie du das passende Child-Theme herunterlädst und korrekt einbindest
• Was der Unterschied zwischen Parent- und Child-Theme ist
• Warum du niemals das Parent-Theme löschen darfst
• Wie das Zusammenspiel der beiden Themes funktioniert
• Erste Schritte im Blocksy Customizer
• Wie du geräteübergreifend designen kannst
• Wie du Header- und Footer-Bereich später ohne Code anpasst
• Wo sich weitere wichtige Einstellungen verstecken

🔗 Download Blocksy Child-Theme:

👉 https://creativethemes.com/downloads/blocksy-child.zip

✅ Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

Ich zeige dir:

• Wie du das CMP Wartungs-Plugin installierst und aktivierst
• Wie du das Design deiner Wartungsseite gestaltest
• Wie du ein Logo, Text & Hintergrundbilder einfügst
• Wie du anklickbare Kontakt-Links und Social-Media-Icons einbindest
• Wie du Farben an dein Branding anpasst
• Wie du lokale Schriftarten DSGVO-konform einbindest (Google & andere)
• Wie du mit dem Google Fonts Checker die Einbindung überprüfst
• Bonus: Wie du Schriftarten manuell auch für andere Themes per Code einbinden kannst

🔗 Nützliche Links:

CMP Plugin

https://wordpress.org/plugins/cmp-coming-soon-maintenance/

Blocksy Media Font Uploader

https://it-leitner.at/wordpress/blocksy-media-font-uploader.zip

Google-Fonts-Checker

https://sicher3.de/google-fonts-checker/

FileZilla FTP Client

https://filezilla-project.org/download.php

Notepad++

https://notepad-plus-plus.org/downloads/

Code für „functions.php“:

https://it-leitner.at/wordpress/code-functions-php.txt

Nützliche Texte für das CMP-Plugin:

✅ Überschrift: Firma ABC – IT-Services | Neue Website – demnächst online!

✅ Nachricht: Wir überarbeiten aktuell unseren Internetauftritt. Schon bald findest du hier aktuelle Informationen rund um unsere IT-Dienstleistungen. In der Zwischenzeit erreichst du uns wie gewohnt per E-Mail unter office@firma-abc.at oder telefonisch unter +43 1234 56789. Vielen Dank für dein Verständnis!

✅ Social Media Titel: Folge uns auf Social Media!

✅ Inhalt Footer: 2025 – Firma ABC

Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

Ich zeige dir:

• Wie du neue Seiten mit sinnvollem Seitentitel in WordPress korrekt erstellst
• Warum die Reihenfolge laut Sitemap wichtig ist
• Wie du die Startseite definierst
• Wie du die Beitragsseite (Blog) festlegst

✅ Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

Ich zeige dir:

• Wie du ein Hauptmenü für die Desktop-Ansicht erstellst
• Wie du ein separates Menü für Mobilgeräte einrichtest
• Wie du ein Footer-Menü für Impressum & Datenschutz baust
• Welche Menüpunkte du hinzufügen kannst (Seiten, Beiträge, Kategorien, Links)
• Wie du zwischen Menüs wechselst oder eines löschst
• Wie du das Footer-Menü über den Customizer korrekt einbindest
• Warum manche Themes unvollständige Menübereiche bieten – und was du dann tun solltest

✅ Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

Ich zeige dir:

• Wie du Medien in WordPress hochlädst
• Warum Bilder vor dem Upload optimiert werden sollten
• Wie du Titel, Beschreibung, Alternativtext & Untertitel richtig verwendest
• Wie du mit guten Alt-Texten Barrierefreiheit & SEO verbesserst
• Wie du einzelne oder mehrere Medien gleichzeitig löschst
• Wie du bei Bedarf eine KI wie ChatGPT um Hilfe bittest

🤖 Dir fallen keine guten Titel, Beschreibungen oder Alt-Texte ein? Kein Problem! Nutze ChatGPT:

https://chatgpt.com

✅ Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

Ich zeige dir:

• Wie du das Plugin Blocksy Companion installierst
• Wie du den Customizer öffnest und globale Designeinstellungen verstehst
• Wie du die Basisschriftart für deine gesamte Website festlegst
• Was es mit der Vererbung auf Überschriften, Header und Footer auf sich hat
• Wie du Google Fonts im Customizer verwendest
• Wie du eine Fallback-Schriftart einstellst
• Wie du eine eigene Farbpalette mit Hex-Codes erstellst und überall nutzt
• Wie du Textfarben, Linkfarben und Auswahlfarben definierst
• Wie du das Seitenlayout bestimmst
• Wie du den Seitentitel aktivierst oder ausblendest und individuell gestaltest
• Wie du die Brotkrümelnavigation (Breadcrumbs) aktivierst, gestaltest und gezielt auf Desktop & Tablet nutzt

✅ Hinweis: Bitte beachte, dass du alle Schritte auf eigene Verantwortung durchführst. Ich zeige dir alles so genau wie möglich – trotzdem kann ich keine Haftung für mögliche Schäden oder Datenverluste übernehmen.

📌 Starte von Grund auf mit WordPress – verständlich, praxisnah und ohne Fachchinesisch. Alle Videos dieser Reihe findest du in der YouTube-Playlist: „WordPress Komplettkurs für Einsteiger – Website erstellen mit Farben, Texten, Bildern & SEO“
🔗 HIER KLICKEN

👉 Abonniere auch meinen YouTube-Kanal, um keine weiteren Videos zu verpassen!