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/download.php

☁️⬇️ 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.

Ich zeige dir:

• Customizer öffnen & den Header Builder verstehen
• Elemente hinzufügen, entfernen oder per Drag & Drop verschieben (Menü, Suche, Social Media Icons, Buttons etc.)
• Logo einfügen + optimale Logo-Höhen für Desktop, Tablet & Smartphone
• Zeilenhöhen je Gerät einstellen und gestalten
• Dezente Designs mit Farben, Rändern & Schatten erzeugen (Best Practices)

⚠️ 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.

Themen im Video:

• Social Media Links im Customizer hinterlegen
• Telefon, WhatsApp und E-Mail klickbar einfügen
• Soziale Medien im Header-Builder positionieren
• Icons entfernen, hinzufügen und Reihenfolge ändern
• Icon-Größe und Abstände festlegen
• Farben und Hover-Farben einstellen
• Zeilenhöhe anpassen

⚠️ 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.

Themen im Video:

• Menüvorlagen im Blocksy Theme nutzen
• Elementabstand & Artikelhöhe einstellen
• Hauptmenüpunkte designen (Schriftarten, Farben, Hintergründe)
• Dropdown-Menüs gestalten (Abstände, Farben, Schatten)
• Sticky-Menü aktivieren und im Detail anpassen

⚠️ 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.

Viele WordPress-Themes bieten hier nur sehr eingeschränkte Möglichkeiten – Blocksy hingegen erlaubt dir eine separate, flexible und durchdachte Gestaltung für mobile Menüs.

🎯 Das lernst du in diesem Video:

• separates mobiles Menü für Smartphone & Tablet anlegen
• Hamburger-Button gezielt für mobile Geräte gestalten
• Off-Canvas-Menü konfigurieren (Fullscreen oder Side-Panel)
• Breite, Ausrichtung & Menü-Überschrift einstellen
• Hintergrundfarben, Bilder, Overlay & Deckkraft richtig einsetzen
• Schließen-Button individuell gestalten
• Farben, Schrift, Abstände & Icons der Menüpunkte anpassen
• getrennte Einstellungen für Smartphone und Tablet nutzen
• mobiles Menü im Browser testen (Responsive Ansicht)

⚠️ 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.

🎯 In diesem Video verwendete Funktionen:

• Blocksy Footer Builder (kostenlose Version)
• Reihen & Spalten-Layouts
• Menü-Element konfigurieren
• Widget-Bereiche nutzen
• Telefonnummer & E-Mail korrekt verlinken
• Copyright dynamisch anpassen
• Social Media Icons integrieren
• Hintergrundfarben & Reihenteiler gestalten
• Backend-Widget-Anpassung als Lösung für Logo-Skalierung

⚠️ 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.

Dieses Video bildet die Basis für alle weiteren Gutenberg-Videos.

⚠️ 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 erkläre dir praxisnah den Unterschied zwischen einem neuen Absatz und einer Zeilenschaltung innerhalb desselben Blocks.
• Außerdem zeige ich dir die wichtigsten Funktionen der Werkzeugleiste – darunter Textausrichtung, Fett- und Kursiv-Formatierung sowie das Einfügen, Bearbeiten und Entfernen von Links.
• Zusätzlich gehen wir auf optionale Textfunktionen ein wie Durchstreichen, Fußnoten, farbliche Hervorhebungen, Hoch- und Tiefstellen. Inline-Bild und Inline-Code werden kurz erläutert.
• Im zweiten Teil des Videos zeige ich dir die zusätzlichen Block-Einstellungen: Text- und Hintergrundfarben, Typografie-Einstellungen, individuelle Schriftgrößen sowie Innen- und Außenabstände. Auch das Erstellen von Rahmen mit Farbe, Stärke und Radius wird demonstriert.
• Besonders wichtig ist der Hinweis auf globale Einstellungen: Wenn du Design-Anpassungen direkt im Block vornimmst, überschreiben diese die Einstellungen aus dem Customizer. Deshalb solltest du solche Anpassungen nur gezielt und mit Bedacht für spezielle Bereiche verwenden.
• Zum Abschluss zeige ich dir, wie du Block-Einstellungen wieder vollständig zurücksetzt, damit die globalen Vorgaben erneut greifen.

⚠️ 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.

• Erweiterte Typografie-Einstellungen pro Block
• Text-Schatten und zusätzliche Text-Formatierungen
• Erweiterte Rahmen- und Border-Einstellungen
• Box-Shadow für ganze Blöcke
• Hintergrundfarben, Farbverläufe und Bilder
• Kombination von Hintergrund-Bild + Farbüberlagerung für bessere Lesbarkeit
• Erweiterte Margin- und Padding-Einstellungen ohne CSS
• Transform-Effekte wie Rotate, Translate, Skew und Scale
• Hover-Effekte mit Schatten und Vergrößerung
• Animationen wie Fade oder Bounce mit einstellbarer Dauer
• Dynamische Effekte beim Scrollen oder beim Überfahren mit der Maus

⚠️ 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.

Zusätzlich zeige ich dir, wie du das Aussehen deiner Überschriften global über den Customizer anpasst – damit Schriftgröße, Farbe und Typografie auf deiner gesamten Website konsistent bleiben.

In diesem Video lernst du:

• wie du einen Überschriften-Block im Gutenberg Editor erstellst
• welche Bedeutung die Ebenen H1, H2, H3 bis H6 haben
• warum es pro Seite nur eine einzige H1-Überschrift geben sollte
• wie Überschriften logisch aufgebaut sein müssen (wie Kapitel in einem Buch)
• welche typischen Fehler Anfänger bei Überschriften machen
• wie du Schriftgröße, Farben und Typografie global über den Customizer festlegst
• warum eine saubere Überschriftenstruktur auch für SEO und Google wichtig ist

Wichtig zu wissen:
✔ Überschriften strukturieren deine Inhalte
✔ sie verbessern die Lesbarkeit deiner Website
✔ sie helfen Suchmaschinen, deine Inhalte besser einzuordnen

Eine saubere Struktur ist deshalb ein wichtiger Bestandteil von professionellem Webdesign und Suchmaschinenoptimierung.

⚠️ 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.

In diesem Video lernst du:

• wie du einen Spalten-Block erstellst und konfigurierst
• wie du die Spaltenanzahl und Aufteilung anpasst (z. B. 50/50 oder 1/3 – 2/3)
• wie du Inhalte per Block oder Drag & Drop in Spalten einfügst
• wie du den Bild-Block richtig einsetzt
• wichtige Bild-Einstellungen wie Ausrichtung, Rahmen, Rundungen und Schatten
• wie du Innen- und Außenabstände anpasst
• wie du Inhalte vertikal ausrichtest
• wie du Spalten auf mobilen Geräten testen und optimieren kannst
• wie du Spalten schnell vertauschen kannst

So kannst du mit wenigen Klicks moderne Layouts erstellen, die sowohl auf Desktop-Geräten als auch auf Smartphones gut funktionieren.

⚠️ 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.

Du lernst außerdem, wie du die Reihenfolge der Bilder änderst, die Anzahl der Spalten festlegst und warum die Option „Bilder passend zuschneiden“ unbedingt aktiviert bleiben sollte.

Zusätzlich zeige ich dir, wie du ein kleines Problem mit dem Plugin Editor Plus beheben kannst und wie du mit einem leichtgewichtigen Lightbox-Plugin dafür sorgst, dass Besucher deine Bilder bequem vergrößern und durch die Galerie blättern können. Am Ende gestalten wir die Galerie noch etwas mit Schatteneffekt und Animation, sodass sie auch optisch gut zur Website passt.

In diesem Video lernst du:

• Galerie-Block in WordPress hinzufügen
• Bilder aus der Mediathek auswählen
• Reihenfolge der Bilder ändern
• Anzahl der Spalten festlegen
• Vorschau-Bilder korrekt zuschneiden
• Lightbox für Bilder aktivieren
• Galerie mit Schatten und Animation gestalten

💡 Mein Tipp: Achte darauf, dass deine Bilder bereits vor dem Upload sinnvoll benannt und optimiert sind. Das verbessert nicht nur die Ladezeit deiner Website, sondern auch die SEO-Auffindbarkeit.

⚠️ 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.

Du lernst unter anderem:

• Buttons-Block hinzufügen und mehrere Schaltflächen erstellen
• Unterschiede zwischen Buttons-Block und einzelnen Button-Blöcken verstehen
• Schaltflächen sinnvoll beschriften und als Handlungsaufforderung (CTA) einsetzen
• Buttons zur Kontaktseite oder anderen Seiten deiner Website verlinken
• Buttons duplizieren und an mehreren Stellen auf einer Seite einsetzen
• globale Gestaltung aller Buttons im Customizer anpassen
• Höhe, Farben und Schriftgröße der Schaltflächen einstellen
• Abstände, Ausrichtung und Block-Optionen im Gutenberg-Editor nutzen
• externe Links mit Buttons erstellen (inkl. Öffnen in neuem Tab)

⚠️ 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.

Du lernst außerdem, wie du Listen sauber in dein Seitenlayout integrierst und welche Gestaltungsmöglichkeiten dir Gutenberg standardmäßig bietet.

In diesem Video lernst du unter anderem:

• Listen im Gutenberg-Editor erstellen
• Aufzählungen und nummerierte Listen verwenden
• Listenelemente verschieben und neu sortieren
• Einträge schnell löschen oder ändern
• Hintergrundfarben und Typografie anpassen
• Listen sauber im Layout einer Seite platzieren
• Aufzählungszeichen durch Icons ersetzen
• Farbe und Größe der Aufzählungszeichen anpassen
• vertikale Abstände zwischen Listenelementen einfach verändern

⚠️ 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.

Das lernst du in diesem Video:

• Tabellenblock richtig einfügen und aufbauen
• Spalten und Zeilen nachträglich hinzufügen und löschen
• Inhalte sauber ausrichten (links, mittig, rechts)
• Tabellenbreite flexibel an Inhalte anpassen
• Tabelle korrekt im Layout platzieren (Spaltenblock)
• Texte innerhalb von Zellen optimieren für bessere Darstellung
• Überschriften hervorheben und gestalten
• Tabellen mit Farben und Gitternetzlinien designen
• Erweiterte Gestaltung mit Editor Plus (Schatten, Hintergrund, Animation)
• Tabelle mit Bild kombinieren (professionelles Layout)
• Responsive Darstellung für Smartphone optimieren
• Call-to-Action (Kontaktaufnahme) sinnvoll einbauen

💡 Besonderes Highlight
✔️ Komplettes Praxisbeispiel (keine Theorie)
✔️ Professionelles Ergebnis ohne eine Zeile CSS
✔️ Perfekt für Einsteiger und Fortgeschrittene
✔️ Direkt auf echte Websites übertragbar

🎯 Ergebnis

Am Ende des Videos hast du eine vollständig gestaltete Preisliste, die du direkt in deine eigene Website integrieren kannst – inklusive sauberem Layout, Design und mobiler Optimierung.

🔧 Wichtiger Hinweis

Einige Gestaltungsmöglichkeiten, die ich im Video zeige, sind nur mit dem Plugin „Gutenberg Blocks Library & Toolkit – Editor Plus“ möglich.

⚠️ 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.

Das erwartet dich im Video:

• Datei-Block einfügen und richtig einsetzen
• PDF-Datei über die Mediathek hochladen
• Titel und Beschriftung sinnvoll verwenden
• Inline-Einbettung verstehen und deaktivieren
• Download-Button optimieren (z. B. neuer Tab)
• Unterschiede zwischen Chrome, Firefox & Co.
• Mehrere Downloads sauber und bündig darstellen
• Struktur verbessern mit Überschrift und Trennelement

🚀 Ziel dieses Videos

Nach diesem Video kannst du Downloads professionell auf deiner Website einbauen – übersichtlich, funktional und direkt nutzbar für deine Besucher.

⚠️ 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.

Außerdem zeige ich dir, wie du den Abstand zwischen Header und Content entfernst, sodass ein sauberer, fließender Übergang entsteht. Genau dieser Übergang ist in der Praxis oft die Voraussetzung für moderne Layouts und bildet die Basis für sogenannte Hero-Sections und visuell ansprechende Bereiche.

Ein weiterer wichtiger Punkt in diesem Video sind die Hintergrund-Einstellungen: Du erfährst, wie du Farben, Farbverläufe oder Bilder pro Seite oder auch global für deine gesamte Website einsetzen kannst. Dabei gehe ich auch darauf ein, welche Einstellungen sinnvoll sind (z. B. Cover, Fixed, Overlay), damit dein Design hochwertig wirkt und der Inhalt trotzdem jederzeit gut lesbar bleibt.

Du siehst außerdem den Unterschied zwischen globalen Einstellungen im Customizer und individuellen Anpassungen direkt auf der Seite – ein wichtiger Punkt, um später gezielt und effizient arbeiten zu können.

Dieses Video ist ein zentrales Fundament im Kurs, auf dem wir in den nächsten Videos direkt aufbauen.

• Seitentitel gezielt ausblenden und manuell als H1 setzen
• Abstand zwischen Header und Inhalt entfernen
• Nahtlosen Übergang für moderne Layouts schaffen
• Unterschied zwischen Übersichtsseiten und Unterseiten verstehen
• Seitenhintergründe mit Farben, Verläufen oder Bildern gezielt einsetzen
• Globale vs. seitenbezogene Einstellungen sicher anwenden

🔗 Nützliche Links:

Blocksy WordPress Theme – https://creativethemes.com/blocksy/

⚠️ 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.

💡 Du baust ein vollständiges Praxisbeispiel, das du direkt übernehmen, aber auch individuell anpassen kannst.

Das lernst du in diesem Video:

• Hero-Section mit Spalten (3 Bereiche) erstellen
• Überschriften, Texte und Buttons sauber strukturieren
• Buttons sinnvoll einsetzen („Jetzt starten“)
• Gruppen-Funktion verstehen und gezielt einsetzen
• Hintergrundbild mit Overlay (Farbe & Transparenz) nutzen
• Inhalte über gesamte Breite darstellen
• Abstände (Padding) korrekt einstellen
• Farben und Kontraste für bessere Lesbarkeit optimieren
• Buttons mit Seiten verlinken
• Darstellung auf Smartphone optimieren
• Typisches Problem lösen: unterschiedliche Textlängen
• KI sinnvoll einsetzen, um Inhalte anzupassen

Du kannst das gezeigte Beispiel jederzeit anpassen:

✔️ weniger Spalten verwenden
✔️ andere Farben wählen
✔️ eigene Inhalte einsetzen

👉 Wichtig ist, dass du das Prinzip verstehst – dann kannst du jede Hero-Section selbst erstellen.

⚙️ Achtung

Einige der gezeigten Einstellungen (z. B. erweiterte Hintergrund- und Designoptionen) sind nur mit dem installierten und aktivierten Plugin „Gutenberg Blocks Library & Toolkit – Editor Plus“ verfügbar.

⚠️ 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.

👉 Der Cover-Block eignet sich aber nicht nur dafür, sondern generell für hervorgehobene Abschnitte, Einstiege oder Call-to-Actions auf deiner Website.

Das lernst du in diesem Video:

• Cover-Block einfügen und sinnvoll einsetzen
• Bilder, Farben und Overlay gezielt nutzen
• Inhalte über dem Bild sauber positionieren
• Überschriften und Texte optimal darstellen
• Buttons einfügen und richtig verlinken
• Abschnitte duplizieren und effizient arbeiten
• Mehrere Bereiche strukturiert aufbauen
• Mobile Ansicht prüfen und optimieren

💡 Ziel des Videos:

Du lernst nicht nur den Cover-Block kennen, sondern verstehst auch:

👉 wie du Besucher nach der Hero-Section weiter „abholst“
👉 wie du Inhalte klar strukturierst und optisch aufwertest
👉 und wie du deine Website insgesamt professioneller wirken lässt

⚠️ 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.

Das lernst du in diesem Video:

• Wie du lizenzfreie Videos für deine Website findest
• Worauf du bei Videos unbedingt achten musst (Länge, Auflösung, Dateigröße)
• Wie du Videos direkt im Browser schneidest
• Wie du Videos stark komprimierst, ohne sichtbaren Qualitätsverlust
• Warum MP4 mit H264 wichtig ist und du H265 vermeiden solltest
• Wie du das Video im Cover-Block als Hintergrund einsetzt
• Wie du deine bestehende Hero-Section schnell anpasst
• Wie du Overlay, Breite, Position und Design optimal einstellst
• Wie du Performance-Probleme vermeidest

🔧 Verwendete Tools & Quellen:

Pixabay (lizenzfreie Videos): https://pixabay.com
Pexels (lizenzfreie Videos): https://pexels.com
Online Video Cutter: https://online-video-cutter.com
Video Compress (läuft direkt im Browser): https://compress.addy.ie/

👉 Hinweis: Achte trotz lizenzfreier Inhalte immer darauf, dass keine geschützten Marken, Personen oder privaten Grundstücke dargestellt werden.

⚡ Wichtige Tipps aus dem Video:
✔️ Verwende kurze Videos (ca. 4–5 Sekunden)
✔️ Halte die Dateigröße möglichst unter 300 KB
✔️ Nutze eine Auflösung von etwa 1280 Pixel Breite
✔️ Setze Videos sparsam ein (max. 1 pro Seite)
✔️ Achte auf gute Lesbarkeit durch Overlay-Farben
✔️ Verwende MP4 mit H264 für maximale Kompatibilität

Ein dezentes Hintergrundvideo kann deine Website deutlich aufwerten – wenn du es richtig einsetzt.

⚠️ 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 Schritt für Schritt:

• Wie du ein Pattern auswählst und kopierst
• Wie du es in Gutenberg einfügst
• Wie du Bilder, Texte und Buttons anpasst
• Worauf du bei Farben und Overlay achten solltest
• Wie du typische Probleme im Cover-Block löst
• Wie du deine Hero-Section optisch veredelst

Am Ende hast du eine fertige Hero-Section, die genauso gut aussieht wie eine selbst erstellte – nur deutlich schneller umgesetzt.

👉 Wichtig: Templates sind kein Ersatz für Verständnis – sondern dienen eher zur Inspiration und als ein Werkzeug, um schneller ans Ziel zu kommen.

🔗 Verwendete Ressourcen:
https://gutenlayouts.com

⚙️ Hinweis
Einige der gezeigten Einstellungen sind nur mit dem installierten und aktivierten Plugin „Gutenberg Blocks Library & Toolkit – Editor Plus“ verfügbar.

⚠️ Haftungsausschluss: 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.

Du wirst sehen:
Mit Vorlagen kommst du schnell zu einem professionellen Ergebnis – aber ganz ohne Anpassungen geht es trotzdem nicht.

Das lernst du in diesem Video:

• Vorlagen (Patterns) auf gutenlayouts.com finden und nutzen
• Abschnitte kopieren und in Gutenberg einfügen
• Layouts anpassen (Farben, Abstände, Inhalte)
• Call-to-Action Abschnitt mit Kontakt-Button umsetzen
• Typische Probleme bei Vorlagen erkennen und lösen

⚖️ Wichtiger Punkt aus der Praxis:
✔️ Vorlagen sparen dir viel Zeit
✔️ Du musst sie aber fast immer an dein Design anpassen

👉 Genau hier liegt die Balance:
Selbst erstellen oder Vorlage nutzen – beides hat seine Vorteile.

🧰 Verwendete Tools & Quellen:
✔️ https://gutenlayouts.com – kostenlose Gutenberg Patterns
✔️ Plugin „Gutenberg Blocks Library & Toolkit – Editor Plus“ (für zusätzliche Designoptionen)

👉 Wichtig: Templates sind kein Ersatz für Verständnis – sondern dienen eher zur Inspiration und als ein Werkzeug, um schneller ans Ziel zu kommen.

⚙️ Hinweis
Einige der gezeigten Einstellungen sind nur mit dem installierten und aktivierten Plugin „Gutenberg Blocks Library & Toolkit – Editor Plus“ verfügbar.

⚠️ Haftungsausschluss: 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!