Webdesign mit WordPress – Videokurs zur Divi-Umsetzung

Du willst Webseiten mit WordPress so bauen, wie ein Profi es tut? Dann bist du hier richtig. Webdesign mit WordPress zeigt dir, wie du eine Design-Vorlage Schritt für Schritt in eine fertige, responsive Webseite verwandelst. Im deutschsprachigen Online-Videokurs von Oli Gehrmann begleitest du ein durchgehendes Kundenprojekt mit WordPress und dem Divi-Theme: vom ersten Blick auf den Entwurf über das technische Setup bis zum Feinschliff für unterschiedliche Bildschirmgrößen.

Wie wird aus deinem HTML- und CSS-Wissen ein sicherer WordPress-Workflow?

Du hast Gestaltungsideen, kennst HTML und CSS und hast bereits mit WordPress gearbeitet. Sobald daraus jedoch eine vollständige Kundenwebseite werden soll, tauchen Fragen auf: Welches Divi-Modul passt zum Entwurf? Wo gehört eigener Code hin? Und wie bleibt ein ungewöhnliches Layout auch auf dem Smartphone übersichtlich? Genau an dieser Schnittstelle setzt der Kurs an.

Statt einzelne Tricks ohne Zusammenhang zu sammeln, verfolgst du ein einziges Beispielprojekt vom Entwurf über die Konzeption bis zur finalen Umsetzung. Du siehst, wie einzelne Entscheidungen zusammenwirken und aus Fonts, Buttons, Bildern und Textabschnitten eine stimmige Seite entsteht. Das gibt dir einen nachvollziehbaren Ablauf, den du auf eigene Kundenprojekte übertragen kannst.

Die 12 Module mit mehr als 8 Stunden Video-Material in HD machen die Arbeitsschritte sichtbar: Du kannst verfolgen, welche Einstellungen Oli Gehrmann auswählt, welche Code-Zeilen er schreibt und wie sich dadurch das Design verändert. Fachbegriffe werden sparsam eingesetzt, damit du dich auf die Umsetzung konzentrieren und das Gelernte auch in Kundengesprächen verständlich erklären kannst.

Zur professionellen Umsetzung gehört mehr als die Desktop-Ansicht. Du lernst Best Practices für responsive Webseiten, insbesondere für Smartphones, und Techniken für DSGVO-konforme Projekte bis hin zum Online-Shop. Dazu zählen lokal eingebundene Google Fonts und der rechtskonforme Einsatz von Tracking-Tools wie Google Analytics oder Facebook Pixel, um typische Abmahnrisiken zu vermeiden.

Wie legst du die technische Basis für dein Divi-Projekt?

Bevor du am Layout arbeitest, richtest du deine Werkzeuge ein und verstehst die Struktur des Projekts. Die ersten drei Module verbinden Vorbereitung und Umsetzung, damit du anschließend nicht bei jeder Designentscheidung neu überlegen musst, wo du ansetzt.

Modul 1: Einführung in den Kurs

Du verschaffst dir einen Überblick über die Design-Vorlage und die Entwicklungsumgebung. So erkennst du früh, welche Elemente auf der Seite gebraucht werden und wie der Weg vom Entwurf zur fertigen Umsetzung aufgebaut ist. Die Vorlage wird zum roten Faden für alle weiteren Schritte.

Modul 2: Technisches Setup

Du lernst das empfohlene Setup für Visual Studio Code kennen, einen kostenlosen Code-Editor, und gehst die Bestandteile der mitgelieferten Child-Theme-Vorlage durch. Ein Child Theme dient dir als Grundlage für eigene Anpassungen am Design. Außerdem zeigt der Kurs, wie du eine lokale Entwicklungsumgebung aufsetzt, um an deinem Projekt auf dem eigenen Rechner zu arbeiten.

Für umfangreichere Gestaltungsregeln kommt SCSS zum Einsatz. Diese Erweiterung von CSS hilft dir, viele Style-Angaben übersichtlich zu organisieren. Du baust damit eine Arbeitsweise auf, die auch dann nachvollziehbar bleibt, wenn dein Projekt wächst.

Modul 3: Beginn der Umsetzung

Jetzt übersetzt du die Elemente des Entwurfs in passende Divi-Module und gestaltest sie mithilfe des Child Theme. Du siehst konkret, wie visuelle Vorlage, Divi-Einstellungen und eigener Code zusammenspielen. So entwickelst du ein Verständnis dafür, wie du Designideen systematisch in WordPress umsetzt.

Wie gestaltest du Fonts, Buttons und anspruchsvolle Seitenabschnitte?

In den Modulen 4 bis 8 nimmt die Webseite sichtbar Form an. Du arbeitest an den Elementen, die ihren Charakter prägen: Typografie, wiederkehrende Bedienelemente, Header, Textanordnung und Bildsprache. Dabei bleibt die Darstellung auf mobilen Geräten von Anfang an Teil der Gestaltung.

Modul 4: Font-Setup

Du hinterlegst Google Fonts lokal und lernst, wie sich Schriftgrößen an das jeweilige Endgerät anpassen lassen. Damit verbindest du einen wichtigen Aspekt rechtskonformer Umsetzung mit gut lesbarer Typografie. Deine Schriftgestaltung orientiert sich nicht nur am großen Bildschirm, sondern auch am Platz auf dem Smartphone.

Modul 5: Buttons

Buttons sollen auf deiner Seite zusammenpassen und als wiederkehrende Gestaltungselemente erkennbar sein. Du lernst, sie einheitlich zu gestalten, und steigst dafür tiefer in Pseudoklassen in SCSS ein. Mit Pseudoklassen lassen sich bestimmte Zustände eines Elements ansprechen. Das Wissen hilft dir nicht nur bei Buttons, sondern auch bei weiteren wiederkehrenden Gestaltungsaufgaben.

Modul 6: Header-Design

Der Header des Beispielprojekts ist bewusst ausgefallen. Du setzt ihn Schritt für Schritt um und lernst dabei Vorgehensweisen kennen, die du auf anspruchsvolle Header-Varianten übertragen kannst. Statt dich auf einfache Standardlösungen zu beschränken, gewinnst du mehr Spielraum für individuelle Kundenwünsche.

Modul 7: Setzen der Text-Abschnitte

Die Textabschnitte des Projekts sind teilweise ungewöhnlich angeordnet. Du erfährst, wie du diese Gestaltung umsetzt und direkt für mobile Endgeräte optimierst. So bleibt die Idee des Entwurfs erhalten, während die Inhalte auch auf kleineren Displays sinnvoll angeordnet werden.

Modul 8: Gestaltung des Bilder-Grids und der folgenden Abschnitte

Mit einem Bilder-Grid, also einem Raster aus mehreren Bildern, lockerst du das Hauptseiten-Design auf. Im Beispielprojekt werden damit Produkte und ihre nachhaltige Herstellung sichtbar gemacht. Du lernst, Bilder als Teil der Seitenstruktur einzusetzen und Besuchern einen anschaulichen Eindruck des Angebots zu vermitteln.

Wie führst du die Seite vom Shop-Feed zum responsiven Feinschliff?

Eine überzeugende Hauptseite endet nicht nach dem ersten eindrucksvollen Abschnitt. In den letzten vier Modulen führst du das Design konsequent weiter: Du bindest Produkte ein, gestaltest den Seitenabschluss und überprüfst die Darstellung über unterschiedliche Bildschirmauflösungen hinweg.

Modul 9: Einbau des Shop-Feeds

Du integrierst den Shop-Feed in das Beispielprojekt und optimierst die betreffenden Abschnitte für mobile Endgeräte. Damit werden die Shop-Inhalte Teil des Gesamtauftritts. Du verbindest die Produktdarstellung mit dem bestehenden Layout und behältst dabei die Nutzung auf kleineren Bildschirmen im Blick.

Modul 10: Gestaltung der Abschnitte über dem Footer

Ein Trenner bringt Abwechslung in den Seitenverlauf, bevor ein Testimonial und ein besonderes Shop-Produkt folgen. Du lernst, wie du diesen Bereich gestalterisch aufwertest und Inhalte gezielt platzierst, um Besucher auf dem Weg zur Kaufentscheidung zu unterstützen.

Modul 11: Gestaltung des Footers

Zum Abschluss des Hauptseiten-Designs gestaltest du den Footer. Dabei geht es erneut um wichtige Grundlagen erfolgreichen Webdesigns, insbesondere um auffällige Call-to-Action-Elemente. Diese Handlungsaufforderungen zeigen Besuchern, welchen nächsten Schritt sie auf der Webseite gehen können.

Modul 12: Abschließende Überarbeitung der Hauptseite

Im letzten Modul prüfst und verfeinerst du die Hauptseite für eine bestmögliche Darstellung auf wirklich jeder Bildschirmauflösung. Du führst die abschließenden Anpassungen durch und lernst, responsive Gestaltung als festen Abschluss deines Workflows zu behandeln. Aus den einzelnen Bausteinen wird ein durchgearbeitetes Gesamtprojekt.

Wie lernst du im eigenen Tempo und überträgst das Wissen auf Kundenprojekte?

Im Mitgliederbereich sind alle 12 Module von Beginn an freigeschaltet. Du kannst den Kurs der Reihe nach durcharbeiten oder gezielt zu einer Stelle zurückkehren, die du gerade für dein Projekt brauchst. Lektionen lassen sich als „gelernt“ markieren, damit du deinen Fortschritt im Blick behältst.

Die Child-Theme-Vorlage und die Snippets darfst du uneingeschränkt in eigenen Projekten verwenden. Damit bleibt es nicht beim Nachbauen der Kursseite: Du kannst die Ressourcen als Grundlage für deine weitere Arbeit einsetzen. Interne Kursinhalte sind für deine persönliche Nutzung bestimmt und dürfen nicht an Dritte weitergegeben werden.

Auch dein Betriebssystem legt dich nicht fest. Die Videos wurden auf macOS aufgezeichnet; alle verwendeten Tools laufen ebenfalls unter Windows und Linux. Du kannst den gezeigten Workflow daher auf deinem bevorzugten System nachvollziehen.

Am Ende hast du ein vollständiges Beispielprojekt umgesetzt: von der Design-Vorlage über Fonts, Buttons, Header, Textabschnitte und Bilder-Grid bis zum Shop-Feed, zum Footer und zur finalen responsiven Überarbeitung.

Kursleiter Oli Gehrmann zeigt dabei durchgehend die konkreten Arbeitsschritte, die hinter einem professionell umgesetzten Kundenprojekt stehen.

Wenn du deine HTML- und CSS-Kenntnisse in einen klaren WordPress-Workflow übersetzen möchtest, gibt dir diese Webdesigner-Ausbildung ein zusammenhängendes Praxisprojekt an die Hand. Du verfolgst nicht nur das Ergebnis, sondern die Arbeitsschritte dahinter – und kannst daraus eine strukturierte Vorgehensweise für deine eigenen Kundenwebseiten entwickeln.

Inhalt und Aufbau im Überblick

Häufige Fragen zu Webdesign mit WordPress

Autor: Oli Gehrmann

Als Webdesigner und Agenturinhaber verbindet Oli Gehrmann WordPress-Praxis mit Online-Marketing. Sein Angebot umfasst Fachbeiträge, Live-Tutorials zu WordPress und Divi sowie den Onlinekurs „Webdesign mit WordPress (alpha)“.

Alle Produkte von Oli Gehrmann