Moodle Formedia

Ein zentraler Bestandteil von WordPress sind Themes und Plugins, die es ermöglichen, eine Website individuell zu gestalten und funktional zu erweitern. Sie bilden die Grundlage dafür, dass WordPress so flexibel und vielseitig einsetzbar ist.

Themes bestimmen in erster Linie das Design und das Erscheinungsbild einer Website. Dazu gehören Layout, Farben, Schriftarten und die allgemeine Struktur der Seite. Mit wenigen Klicks kann das Aussehen einer Website komplett verändert werden, ohne dass Inhalte verloren gehen. So lässt sich das Design optimal an Zielgruppe, Thema oder Corporate Design anpassen.

Plugins hingegen erweitern die Funktionen der Website. Sie ermöglichen zusätzliche Features wie Kontaktformulare, Bildergalerien, Suchmaschinenoptimierung (SEO), Sicherheitsfunktionen oder Online-Shops. Statt alles selbst programmieren zu müssen, können gewünschte Funktionen einfach über Plugins integriert werden.

Im Kurs lernst du, wie man passende Themes auswählt, installiert und anpasst sowie wie Plugins sinnvoll eingesetzt werden. Dabei wird auch thematisiert, worauf man bei der Auswahl achten sollte – zum Beispiel Kompatibilität, Aktualität und Performance – damit die Website stabil, sicher und benutzerfreundlich bleibt.

In der Vertiefung zu HTML und CSS gehen wir einen Schritt weiter über die Grundlagen hinaus und beschäftigen uns mit dem gezielten Aufbau und der individuellen Gestaltung moderner Webseiten. Während HTML weiterhin die Struktur vorgibt, ermöglicht fortgeschrittenes CSS eine präzisere und professionellere visuelle Umsetzung.

Im Bereich HTML-Vertiefung lernst du, wie semantische Elemente sinnvoll eingesetzt werden, um Inhalte klar zu strukturieren und die Barrierefreiheit sowie Suchmaschinenfreundlichkeit zu verbessern. Dazu gehören unter anderem Bereiche wie Header, Navigation, Main-Content, Sections und Footer. Eine saubere Struktur erleichtert nicht nur die Gestaltung, sondern auch die Wartung der Website.

In der CSS-Vertiefung steht die Gestaltung komplexerer Layouts im Fokus. Themen wie Flexbox und Grid ermöglichen es, moderne, responsive Layouts zu erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Zusätzlich beschäftigen wir uns mit Abständen, Positionierungen, Schriftgestaltung, Farben sowie Hover- und Übergangseffekten, die für ein professionelles Nutzererlebnis sorgen.

Darüber hinaus lernst du, wie eigenes CSS in WordPress eingebunden wird, zum Beispiel über den Customizer oder ein Child-Theme. Dadurch kannst du Designs gezielt anpassen, ohne das ursprüngliche Theme zu verändern. Diese Vertiefung hilft dir, mehr Kontrolle über das Design zu gewinnen und individuelle Lösungen umzusetzen, die über Standard-Einstellungen hinausgehen.

Im Modul Design Basics mit Affinity beschäftigen wir uns mit den gestalterischen Grundlagen, die für ein professionelles Webdesign unerlässlich sind. Dabei lernen wir, wie visuelle Gestaltung gezielt eingesetzt wird, um Inhalte klar, ansprechend und benutzerfreundlich zu präsentieren.

Affinity-Programme wie Affinity Designer oder Affinity Photo werden häufig im Webdesign eingesetzt, um Grafiken, Layouts und visuelle Elemente für Webseiten zu erstellen und vorzubereiten. Sie bieten leistungsstarke Werkzeuge zur Bildbearbeitung, Vektorgestaltung und Layoutentwicklung, die sich ideal für die Gestaltung von Webinhalten eignen.

Ein wichtiger Schwerpunkt liegt auf den Grundlagen des Designs: Farbtheorie, Typografie, Bildkomposition und visuelle Hierarchie. Du lernst, wie Farben gezielt eingesetzt werden, um Stimmungen zu erzeugen und die Markenwirkung zu unterstützen. Ebenso wird vermittelt, wie Schriftarten harmonisch kombiniert und leserfreundlich eingesetzt werden.

Darüber hinaus beschäftigen wir uns mit der Erstellung von Webgrafiken, Bannern, Icons und Layout-Mockups in Affinity. Dabei geht es auch um die richtige Auflösung, Dateiformate und den Export von Grafiken für die Nutzung im Web, um eine optimale Performance und Bildqualität sicherzustellen.

Diese Design-Grundlagen helfen dir, nicht nur funktionale, sondern auch ästhetisch überzeugende Webseiten zu gestalten. Durch den Einsatz von Affinity als Design-Tool lernst du, kreative Ideen professionell umzusetzen und optimal für die spätere Verwendung in WordPress vorzubereiten.

Elementor ist ein visuelles Page-Builder-Plugin für WordPress, das die Gestaltung von Webseiten enorm vereinfacht und flexibilisiert. Mit Elementor kannst du Inhalte direkt im Frontend bearbeiten – also genau so sehen, wie sie später auf der Website dargestellt werden – ohne dabei programmieren zu müssen.

Das Plugin arbeitet mit einem Drag-and-Drop-System: Texte, Bilder, Buttons, Formulare oder ganze Layouts lassen sich per Maus auf der Seite platzieren und sofort anpassen. Gleichzeitig bietet Elementor umfangreiche Design-Optionen wie Farben, Schriftarten, Abstände, Animationen oder responsives Design für verschiedene Endgeräte.

Ein großer Vorteil von Elementor ist die Kombination aus Flexibilität und Effizienz: Du kannst komplette Seitenlayouts erstellen, wiederverwendbare Templates speichern und sogar individuelle Header, Footer oder Landingpages gestalten. Darüber hinaus lassen sich viele Funktionen durch Add-ons erweitern, sodass nahezu alle Design- und Funktionswünsche umgesetzt werden können.

Im Kurs lernst du, wie du Elementor installierst, grundlegende Elemente einsetzt, Layouts gestaltest und die Seite für unterschiedliche Bildschirmgrößen optimierst. So erhältst du ein praxisnahes Werkzeug, um professionelle und individuell gestaltete Webseiten zu erstellen – ganz ohne tiefgehende Programmierkenntnisse.

Die Projektarbeit bildet den praxisnahen Höhepunkt unseres Kurses: Hier setzt ihr alles Gelernte in einem eigenen Webprojekt um. Ziel ist es, dass jeder Teilnehmer eine eigene Website erstellt – von der Planung über das Design bis hin zur fertigen Umsetzung in WordPress.

Zu Beginn steht die Konzeptionsphase: Ihr überlegt euch, welche Art von Website ihr erstellen möchtet, definiert Zielgruppe, Inhalte und Struktur und skizziert erste Layoutideen. Anschließend wendet ihr die erlernten Designgrundlagen an, erstellt Grafiken und bereitet Inhalte auf.

Im nächsten Schritt geht es an die Umsetzung in WordPress: Ihr wählt ein passendes Theme, richtet Seiten und Menüs ein, integriert Plugins und gestaltet das Layout, ggf. mit Elementor. Wer möchte, kann auch WooCommerce für Produktseiten nutzen oder individuelle Anpassungen über CSS oder Programmierung vornehmen.

Während der Projektarbeit steht praxisnahes Arbeiten im Vordergrund: Eigenständiges Planen, Umsetzen und Problemlösen. Am Ende habt ihr nicht nur eine fertige Website, sondern auch ein greifbares Ergebnis eurer Arbeit, das eure Kreativität, euer Designverständnis und eure technischen Fähigkeiten zeigt.

Dieses Projekt ist außerdem eine wertvolle Gelegenheit, Feedback zu erhalten, Ideen zu vergleichen und voneinander zu lernen – genau wie im echten Arbeitsalltag im Webdesign.