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.

📌 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!