In diesem Tutorial zeige ich dir Schritt für Schritt, wie du eine professionelle WordPress-Webseite erstellst, die auch verkauft! Wir erstellen gemeinsam die Webseite für Sarah, eine Autorin – aber du kannst das Ganze 1:1 für dein Business übernehmen.
1) Hosting und Domain besorgen
Was ist eine Domain und warum brauchst du sie?
Stell dir deine Domain wie deine digitale Adresse vor. So wie dein Laden eine Straße und Hausnummer hat, brauchst du im Internet einen Namen, unter dem dich deine Kunden finden können. Das ist deine Domain, zum Beispiel deinfirmenname.de. Ohne Domain geht es nicht – sie ist quasi dein digitaler Türöffner fürs Internet.
Hostinger: Meine pragmatische Empfehlung
Als Webdesignerin nutze ich und empfehle für dieses Tutorial ganz bewusst Hostinger, weil das einfach funktioniert. Wir werden hier eine ganze Weile sitzen, bis die Website fertig ist. Das dauert sowieso lang genug – da machen wir es uns nicht noch schwieriger mit einem Hoster, der ein Backend hat, was man als Laie überhaupt nicht überblicken kann.
Du bekommst schnelle NVME-Server, die bis zu 6x schneller sind als normale SSDs. Das bedeutet: Deine Website lädt blitzschnell, was sowohl deine Besucher als auch Google lieben werden. Dazu kommt eine kostenlose Domain im ersten Jahr, das SSL-Zertifikat ist automatisch dabei und es gibt einen 24/7 Support auf Deutsch.
Falls du unsicher bist, welcher Plan der richtige für dich ist, schau dir mein Video “Welcher Plan ist der richtige” an:
Alle Details zu Hostinger und warum ich es empfehle, findest du in meinem ausführlichen Hostinger-Blogartikel:
Wenn du dich für Hostinger entscheidest, nutze gern meinen Affiliate-Link*. Du zahlst keinen Cent mehr, ich bekomme eine kleine Provision und so kannst du kostenlose Tutorials wie dieses hier unterstützen.
2) WordPress installieren
Hostinger* hat einen 1-Click-Install für für WordPress, den ich extrem schätze!
Vorteile 1-Click-Installation
Es ist einfach.
Du kannst direkt starten.
Hostinger installiert eigene Plugins, die wirklich gut sind!
Nachteile 1-Click-Installation
Du lernst nicht, wie WordPress wirklich funktioniert.
Je nach Hoster wird hier wirklich viel Werbung oder installiert.
Ich bin hier nicht dogmatisch unterwegs: Meiner Meinung nach muss nicht jeder Webseiten-Besitzer wissen, wie man eine WordPress aufsetzt. Es muss auch nicht jeder Autobesitzer wissen, wie man das Fahrzeug baut. Tatsächlich reicht es, wenn man die Kiste sicher bedienen kann.
Hostinger SSL anlegen
Die SSL-Verwaltung bei Hostinger ist erfrischend unkompliziert. Anders als bei manch anderen Hostern (ich schaue dich an, Webgo!) werden SSL-Zertifikate automatisch installiert und eingerichtet. Du musst nichts manuell aktivieren oder in WordPress integrieren. Das ist heute eigentlich Standard – aber überraschend viele Hoster machen da noch ein unnötiges Theater drum.
Hostinger WordPress installieren
Unter „Webseite hinzufügen“ kannst du deine WordPress installieren. Einfach Aussuchen, welches CMS du installieren willst. In dem Fall „WordPress“
Wir gehen das mal zusammen durch.
Zuerst entscheidest du, was du installieren willst. In dem Fall WordPress.
Dann wählst du, für wen die Webseite ist:
Du kannst die Anmeldedaten selbst vergeben oder Hostinger übernimmt das (super komfortabel).
Wähle aus, wie du starten willst. Ich empfehle dir mit einer leeren WordPRess zu starten (Button unten rechts).
Wähle die Domain aus. Du kannst auch erst mal eine temporäre verwenden. Denn bei Hostinger ist es so einfach wie bei keinem anderen Hoster die Domain später zuzuweisen.
Fertig! Du wirst direkt ins WordPress Backend weiter geleitet.
Einfacher geht es wirklich nicht!
3) WordPress Grundlagen
Was ist das Dashboard?
Nach dem Einloggen kommst du immer auf dein Dashboard. Mit dem Dashboard kannst du deine Webseite verwalten.
Die Infoboxen kannst du beliebig anordnen. Einfach mit Drag und Drop verschieben. Was du nicht brauchst, kannst du auch einfach ausblenden. Das hilft zuerst, eine Übersicht zu bekommen.
WordPress Menü und Admin-Bar verstehen
Hier links siehst du das WordPress Menü. Hier kannst du Beiträge erstellen, deine Medien verwalten, neue Seiten anlegen und alles andere machen, was du für deine Webseite brauchst. Es gibt hier oben auch noch die Admin-Bar, die hat ein paar praktische Shortcuts. Das, wofür ich die am meisten nutze, ist, um mir die fertige Website anzugucken. Wenn man nämlich hier aufs Häuschen geht und dann “Zur Website”, kann man sich die Webseite anschauen, wie sie gerade aussieht.
Die wichtigsten Einstellungen
Wir stellen deine Webseite mal so ein, wie wir sie später auch brauchen. Dazu gehst du auf Einstellungen → Allgemein und schreibst deinen Firmennamen rein und den Untertitel. Wichtig: Finger weg von der Website-Adresse! Das hier, die WordPress-Adresse und die Website-Adresse, lässt du so wie es ist. Wenn du deine Domain noch mal änderst, änderst du das im Hosting Dashboard und nicht hier. Sonst crasht du dir die Website und fängst wieder bei null an.
Als nächstes optimieren wir die Permalinks.
Jede Seite und jeder Blogbeitrag auf deiner Website hat eine URL. Das sind fixe / permanente Links auf deine Inhalte, also Permalinks.
Sobald du den Titel deiner Seite oder deines Beitrags eingegeben hast und speicherst erstellt WordPress einen Permalink daraus. Der Link wird direkt unterhalb des Artikel- oder Seitentitels angezeigt und kann verändert werden.
In den WordPress Einstellungen, kannst du einstellen, nach welchem System diese Links gebildet werden sollen. Das solltest du am besten nach der Installation von deinem Backup Plugin machen.
Im Menü unter Einstellungen => Permalinks einfach “Beitragsname” anklicken.
4) Astra Theme installieren
Warum ein Theme wichtig ist
Das Theme sorgt für die Grundstruktur deiner Website. Es kümmert sich um Header und Footer, während wir den mittleren Contentbereich später mit Elementor gestalten. Im Prinzip brauchen wir also nur ein Theme, was schnell ist, mit Elementor gut arbeitet und sich unfassbar gut mit dem verträgt, was wir später noch an Plugins dazu installieren.
Warum Astra meine Empfehlung ist
Ich nutze total gerne Astra und mache auch überhaupt kein Geheimnis daraus. Das ist das Theme, was ich schon nutze, seit ich 2017 Webdesignerin geworden bin. Alle Kriterien, die ein modernes Theme erfüllen sollte, deckt Astra einwandfrei ab. Dabei ist es auch noch vom Preis-Leistungsverhältnis her ein absoluter Schnapper.
Warum Astra und Elementor so perfekt harmonieren, erkläre ich in diesem Video: https://youtu.be/tK_dYhSQupo
Free vs Pro: Was brauchst du wirklich?
Du kannst Astra-Theme schon in der kostenlosen Version nutzen. Alle Details zu den Unterschieden findest du in meinem ausführlichen Astra-Test.
Für wen lohnt sich Astra Theme Essential Toolkit?
Die Kombination aus Astra Pro, den Ultimate Addons und den Starter Templates ist der Hot Shit. Ich muss das jetzt einfach so sagen.
Das Essential Bundle ist der einzige Weg, um den Zugang zu allen Starter Templates zu bekommen. Also nicht nur ein paar wenige, sondern wirklich das komplette Set. Das ist vor allen Dingen so, weil in den Pro Templates auch Widgets aus den Ultimate Addons verbaut sind und damit kann man noch mal ganz andere Designs erstellen. Wenn du noch nicht final überzeugt bist, lies dir den Abschnitt zu den Starter Templates durch. Ich feiere die wirklich sehr!
Wann lohnt sich die Lifetime Lizenz?
Da muss man wirklich hart gegen rechnen. Die Lifetime ist 5x so teuer wie die jährliche. Das ist eine extrem lange Zeit im Internet. Ich bin jetzt schon deutlich länger als fünf Jahre Webdesignerin und habe einige Tools und Themes kommen und gehen sehen. Da muss man wirklich hart kalkulieren und viele Faktoren in Betracht ziehen.
Wie ist das eigene Geschäftsmodell? Was hat man nach einer so langen Amortisationszeit als potentiellen Gewinn? Lohnt sich dieses Risiko in ein so langfristiges Investment?
Installation
Jetzt installieren wir Astra. Dazu gehen wir unter Design → Themes → Neu hinzufügen. Da suchen wir “Astra”, installieren und aktivieren es auch direkt.
5) Die richtigen Plugins installieren
Diese Plugins brauchst du definitiv für den Start. Den Rest können wir später noch nachrüsten.
Elementor – dein digitaler Baukasten
Das ist der Page Builder schlechthin und macht Website-Gestaltung kinderleicht. Perfekt für Nicht-Techniker! Als Webdesignerin arbeite ich immer mit der Pro Version, weil die einfach so viel mehr Möglichkeiten bietet. Den Affiliate-Link dazu findest du unter teamstreber.de/affiliate-elementor
UpdraftPlus – deine Website-Versicherung
Automatische Backups sind wie eine Versicherung – besser haben als brauchen! Wenn du irgendwas kaputt gemacht hast oder mal ganz mutig warst, ist es so gut zu wissen, dass man einfach wieder zurück kann.
WP Maintenance Mode – bis alles perfekt ist
Das ist der Wartungsmodus, so dass nicht jeder sehen kann, wie deine Website aussieht, wenn sie noch nicht fertig ist. Da schalten wir einfach einen Wartungsmodus davor.
Installation der Plugins
Im Menü links: “Plugins” → “Installieren”, Plugin-Namen eingeben, “Jetzt installieren” klicken und “Aktivieren” nicht vergessen.
Mit diesen drei Plugins kannst du direkt loslegen. Wenn du später mehr brauchst, habe ich noch weitere Power-Plugins für dich zusammengestellt: https://teamstreber.de/wordpress-plugins
Worauf ich achte, wenn ich Plugins installiere:
Eine hohe Anzahl aktiver Installationen (da mache ich nur Ausnahmen, wenn Entwickler, die ich sehr schätze, ein neues Plugin entwickeln) und die letzte Aktualisierung. Je länger die Aktualisierung zurückliegt, desto höher ist die Wahrscheinlichkeit, dass eine Sicherheitslücke vorliegt.
6) Backup erstellen
Als Webdesignerin weiß ich: Backup ist wie eine Versicherung – man braucht sie hoffentlich nie, aber wenn doch, ist man mega froh drum!
UpdraftPlus einrichten
Gehe zu “Einstellungen” → “UpdraftPlus Backups”. Hier legst du deinen Backup-Zeitplan fest. Bei den Dateien empfehle ich wöchentlich, bei der Datenbank täglich. Bei der Anzahl der Backups solltest du mindestens 3 behalten, ich empfehle aber 8 – schon allein weil die Sommerferien in Deutschland 6 Wochen sind.
Externes Backup ist Pflicht
Wichtig: Backup immer extern speichern! Als kostenlose Optionen stehen dir Google Drive und Dropbox zur Verfügung. Google Drive ist mein Favorit, weil es einfach funktioniert. Klick einfach auf den gewünschten Speicherort und folge der Anleitung zur Verknüpfung. Dauert keine 5 Minuten.
Erstes Backup erstellen
Jetzt machen wir das erste Backup: “Jetzt sichern” klicken, Häkchen bei “Dateien” und “Datenbank”, “Backup jetzt” klicken und eine kleine Kaffeepause machen. Fertig!
Die kostenlose Version mit Google Drive reicht für die meisten völlig aus. Eine ausführliche Anleitung mit Screenshots findest du in meinem Artikel: https://teamstreber.de/updraft
Wichtig: Mach nach jeder größeren Änderung an deiner Website ein manuelles Backup. Besser einmal zu viel als einmal zu wenig!
7) Erste Seite erstellen und zur Homepage machen
WordPress-Startseite im Menü festlegen
Wenn du ein anderes Theme nutzt, kann der Customizer etwas anders aussehen, dann kannst du die Einstellungen auch direkt im Menü machen.
- Im WordPress-Menü den Punkt „Einstellungen“ auswählen
- Jetzt weiter auf „Lesen“.
- Unter dem Punkt „Startseite zeigt“ siehst du die beiden Optionen.
- Für eine statische Unternehmenswebseite „eine statische Seite“ und dann bei „Startseite:“ aus der Liste deine Startseite auswählen.
- Für eine dynamische WordPress-Blog-Startseite: Auf „deine letzten Beiträge“klicken.
- Nicht vergessen: „Änderungen übernehmen“ klicken (Button ganz unten).
Du kannst die Startseite auch im Customizer festlegen. Das kannst du in meinem Blogartikel nachlesen zu Startseite festlegen.
8) Weitere Seiten erstellen
Jetzt kannst du alle Seiten erstellen, die du später brauchst. Geh immer wieder auf “Seiten” → “Erstellen” und leg sie an, eine nach der anderen: Über mich, Services, Kontakt, Newsletter, Impressum, Datenschutz – was du eben brauchst.
Wenn du das jetzt schon machst, sind alle Seiten bereits erstellt und können untereinander verlinkt werden. Das spart später Zeit und die Struktur steht schon mal.
9) Elementor Grundlagen
Jetzt kommt mein Lieblingsteil: Wir starten mit der Website-Erstellung im Elementor. Warum Elementor der beste Page Builder ist, erkläre ich in diesem Video:
Elementor öffnen und verstehen
Gehe auf “Seiten”, wähle deine “Startseite” und klicke auf “Mit Elementor bearbeiten”. Der Elementor ist ziemlich übersichtlich aufgebaut: Hier links ist deine Werkzeugkiste und hier rechts ist die Live-Vorschau deiner Seite. Hier oben kannst du immer noch einstellen, ob du Desktop-, Tablet- oder die Handy-Vorschau anschauen willst. Du kannst übrigens immer den Editor ausblenden, dann siehst du die Seite in ihrer ganzen Pracht.
Container und Widgets verstehen
Es gibt zwei Bausteine, die du im Elementor immer wieder benutzen wirst: Container und Widgets. Die Container kannst du dir vorstellen wie Räume in deinem Haus – sie strukturieren die ganze Seite und die Inhalte. Die Widgets sind die Einrichtung, die du innerhalb dieser Räume so hin und her schieben kannst, dass am Ende eine stimmige Gesamtsituation entsteht.
Container sind pink markiert in Elementor, Widgets haben ein Stift-Icon. Du kannst deine Seite so komplex gestalten, wie du möchtest – Container in Container verschachteln und dort dann Widgets reinsetzen. Ich rate dir, simpel zu starten und dich dann langsam in der Komplexität hochzuarbeiten.
Alle Grundlagen zu Elementor und wie du am effizientesten damit arbeitest, findest du in meinem ausführlichen Elementor-Tutorial.
10) Mobile OptimierungMobile First ist Realität
Als Webdesignerin sage ich immer Mobile First – und das ist für mich nicht nur ein Buzzword, das ist meine Realität. Die meisten schauen sich Webseiten inzwischen auf dem Handy an. Die wichtigste Funktion im Elementor und der allerwichtigste Schritt bei der Website-Bearbeitung ist es, nach jeder Änderung auf das kleine Handy-Symbol zu klicken und zu kontrollieren, ob deine Seite auch am Handy gut aussieht.
Das bedeutet konkret: Du musst jede Seite dreimal optimieren – Desktop, Tablet und Mobile. Das ist zusätzliche Arbeit, die viele unterschätzen.
Starter Templates sparen dir Stunden
Gerade weil die mobile Optimierung so aufwendig ist, empfehle ich immer eine gute Vorlage zu verwenden. Die Astra Starter Templates sind von professionellen Designern erstellt, bereits mobiloptimiert und durchdacht strukturiert. Du sparst dir die doppelte und dreifache Perfektionierung der Website, so dass sie auch auf Tablet und Handy gut aussieht – das ist dann nämlich schon so.
Die Templates arbeiten mit globalen Farben und Schriften. Das bedeutet: Du stellst einmal deine Markenfarben ein und sie ziehen sich durch die komplette Vorlage. Du musst nicht jeden einzelnen Text und jede Überschrift nachbearbeiten.
Astra Starter Templates: Für mich die besten Vorlagen!
Eine ähnliche Qualität habe ich bisher nur bei Kadence Theme gesehen. Es gibt auch hervorragende Vorlagen auf Envato Elements* oder von Elementor* direkt, aber die meisten davon nutzen die globalen Farben und Schriften nicht.
Die Starter Templates sind eine Sammlung von über 100 vorgefertigten Layouts für verschiedene Branchen und Anwendungsbereiche. Die Auswahl ist groß und man kann sich sehr gut zurechtfinden, da die einzelnen Vorlagen in Themenbereiche unterteilt sind. Du findest hier Vorlagen für Unternehmenswebseiten, Online-Shops, Blogs und vieles mehr. Jede Vorlage ist anpassbar, sodass du sie ganz leicht an deine individuellen Bedürfnisse anpassen kannst.
11) Text bearbeiten
Globale Farben & Schriften – der wichtigste Schritt
Das Herzstück unserer Website sind Texte und Bilder. Mit den Texten verkaufen wir unsere Produkte. Bevor wir anfangen, müssen wir die globalen Farben und Schriften einrichten. Das ist der wichtigste Schritt überhaupt: Du stellst einmal deine Markenfarben und Schriften ein und sie sind überall verfügbar. Gehe zu Elementor → “Einstellungen” → “Globale Farben” und trage deine Markenfarben ein.
ZU den globalen Farben und Schriften im Elementor habe ich auch einen Blogartikel.
Text-Widgets bearbeiten
Wenn du auf eine Überschrift oder einen Text klickst, hast du drei grundlegende Einstellungsmöglichkeiten: Inhalt (was steht da?), Stil (wie sieht’s aus?) und Erweitert (Special Effects). Wie du Überschriften richtig einsetzt, zeige ich dir hier: https://youtu.be/yJmRYwjp0pw?list=PL61bn66jCkRR2wnucSTnRgQ2XOyQUjyi2
Für Text-Widgets gilt dasselbe Prinzip: https://youtu.be/jyiIIYJ57vM
H-Überschriften für SEO nutzen
Die Überschriften sind wichtig für Suchmaschinenoptimierung und Übersicht im Text. Google kann nicht wie ein normaler Mensch Texte lesen, sondern orientiert sich an formalen Strukturen. Die erste Überschrift ist die H1 (wie der Titel auf einem Buch), die H2 sind die Kapitelüberschriften, H3 die Unterkapitel. Das hilft Google beim Verstehen deiner Inhalte.
Linksbündig ist gehirnfreundlich
Vergiss, was du vom Print-Design kennst – im Web gelten andere Regeln. Nutzer scannen Texte, haben wenig Aufmerksamkeit und brauchen einen klaren Startpunkt jeder Zeile. Zentrierter Text kostet das Gehirn unnötig Energie, weil es ständig den Zeilenanfang suchen muss.
Linksbündiger Text = natürlicher Lesefluss. Ausnahmen sind kurze Headlines und Call-to-Actions, aber der eigentliche Content sollte immer linksbündig sein.
12) Buttons bearbeiten
Button einfügen und gestalten
Was uns jetzt noch fehlt, um richtig zu verkaufen, ist ein Button. Ziehe das Button-Widget dahin, wo du es brauchst. Der Button sieht automatisch genau so aus, wie du es in den globalen Farben und Schriften eingestellt hast. Wie du Buttons professionell gestaltest, zeige ich dir in diesem Video: https://youtu.be/EETA5LFh-f8
Du kannst hier einen Text anpassen und vor allem einen Link setzen – das ist wichtig für die Customer Journey. Du kannst zu internen Seiten verlinken oder externe Links verwenden.
Verkaufstipp: Externe Anbieter nutzen
Ich empfehle auf keinen Fall, einen eigenen Shop zu erstellen. Da bist du Wochen beschäftigt mit dem Einrichten. Was ich empfehle, ist für den Start immer erst mal einen externen Dienstleister wie Copecart zu benutzen. Du kannst digitale Produkte in unter zwei Minuten verkaufen. Das ist ein Reseller mit Sitz in Deutschland – du hast nur Vorteile, weil du dich nicht um das Shopsystem kümmern musst.
Wenn etwas nicht geht, ist der Support kostenlos mit drin. Du hast ruckzuck deine Produkte angelegt, zahlst eine kleine Provision und den Rest übernimmt Copecart – automatisierte Zahlungserinnerungen, Rechnungsversand, alles. Damit ist deine Buchhaltung erledigt. Den Link zu Copecart findest du hier: teamstreber.de/affiliate-copecart
Buttons kopieren und anpassen
Du kannst Buttons einfach kopieren (Rechtsklick → Kopieren) oder nur den Stil übernehmen (Rechtsklick → “Stil anwenden”). So erstellst du schnell verschiedene Button-Varianten für deine Website.
12) Buttons bearbeiten
Button einfügen und gestalten
Was uns jetzt noch fehlt, um richtig zu verkaufen, ist ein Button. Ziehe das Button-Widget dahin, wo du es brauchst. Der Button sieht automatisch genau so aus, wie du es in den globalen Farben und Schriften eingestellt hast. Wie du Buttons professionell gestaltest, zeige ich dir in diesem Video:
Du kannst hier einen Text anpassen und vor allem einen Link setzen – das ist wichtig für die Customer Journey. Du kannst zu internen Seiten verlinken oder externe Links verwenden.
Verkaufstipp: Externe Anbieter nutzen
Ich empfehle auf keinen Fall, einen eigenen Shop zu erstellen. Da bist du Wochen beschäftigt mit dem Einrichten. Was ich empfehle, ist für den Start immer erst mal einen externen Dienstleister wie Copecart* zu benutzen. Du kannst digitale Produkte in unter zwei Minuten verkaufen. Das ist ein Reseller mit Sitz in Deutschland – du hast nur Vorteile, weil du dich nicht um das Shopsystem kümmern musst.
Wenn etwas nicht geht, ist der Support kostenlos mit drin. Du hast ruckzuck deine Produkte angelegt, zahlst eine kleine Provision und den Rest übernimmt Copecart – automatisierte Zahlungserinnerungen, Rechnungsversand, alles. Damit ist deine Buchhaltung erledigt.
Buttons kopieren und anpassen
Du kannst Buttons einfach kopieren (Rechtsklick → Kopieren) oder nur den Stil übernehmen (Rechtsklick → “Stil anwenden”). So erstellst du schnell verschiedene Button-Varianten für deine Website.
14) Container-Einstellungen
Elementor arbeitet mit Flexbox Containern
In der Version 3.6 stellte das Entwickler Team vom Elementor die Flexbox Container vor. Das war ziemlich bahnbrechend, denn die Container lösen die Zeilen und Spalten ab.
Sorgen musst du dir deswegen aber keine machen: Deine Layouts bleiben alle erhalten und genießen bislang Bestandsschutz. Es wird lediglich die Art und Weise geändert, wie neue Inhalte erstellt werden.
Damit du dich darauf vorbereiten kannst, habe ich in diesem Artikel zu Elementor Flexbox-Container alles zusammengefasst, was es dazu aus meiner Sicht als Webdesigner zu wissen gibt.
Mein Workflow Tipp: Arbeite von außen nach innen: Erst die Container perfekt einstellen, dann die Widgets. Kategorisiere deine Templates und schreib alles in dein Style Sheet. So profitierst du bei jedem neuen Projekt davon.
15) Hintergründe gestalten
Du hast drei Optionen für Hintergründe: einfache Farben, Farbverläufe oder Bilder. Während Farben und Verläufe unkompliziert sind, solltest du bei Bildhintergründen sehr vorsichtig sein.
Einfache Farben
Nutze die Farben aus deinem Style Guide und verwende immer die global definierten Farben. Das sorgt für ein einheitliches Design und du kannst später alles zentral ändern.
Farbverläufe
Farbverläufe mit zwei harmonischen Farben wirken modern und professionell. Du kannst sie linear oder radial anlegen und den Winkel anpassen.
Bild-Hintergründe: Vorsicht geboten
Lass uns ehrlich sein: Bild-Hintergründe mit Text sind eines der kniffligsten Themen im Webdesign. Warum? Weil wir nicht für Print designen, sondern für tausend verschiedene Bildschirme! Was auf deinem Laptop perfekt aussieht, ist auf dem Handy völlig verschoben – Gesichter sind nicht mehr im Bild oder verschwinden hinter dem Text.
Wenn du trotzdem Bilder als Hintergrund nutzen willst: Stelle die Bildgröße auf “Ausfüllen”, wähle eine Position (z.B. “Mitte Mitte”) und erstelle unbedingt ein schwarzes Overlay mit 40-60% Deckkraft. Dann wird weißer Text darüber gut lesbar.
Mein Rat: Bleib bei einfachen Layouts
Hero-Sections mit Bild-Hintergründen sind die Königsdisziplin. Such dir lieber ein Layout, das du beherrschst, als ewig an einem Bild rumzuschrauben. Einfache, gut funktionierende Layouts sind mobil deutlich leichter zu optimieren.
Video-Hintergründe machen die Seite langsam, nerven auf Mobile und kosten unnötig Performance – also Finger weg!
16) Bilder hinzufügen
Bilder vorbereiten
Welche Bilder du für deine Website auswählen solltest und worauf du dabei achten musst, erkläre ich ausführlich hier.
Bevor du Bilder hochlädst, solltest du sie richtig benennen. Benenne sie so, dass du sie später in der Mediathek wiederfindest – einfach vor die Bildnummer etwas einfügen, was Sinn ergibt.
Bild-Widget nutzen
Ziehe das Bild-Widget dahin, wo du es brauchst, lade dein Bild hoch oder wähle es aus der Mediathek. Eine ausführliche Anleitung findest du in diesem Video:
Styling-Optionen nutzen
Im Stil-Bereich kannst du die Bildbreite anpassen (Prozent oder Pixel), eine Deckkraft einstellen oder einen Ecken-Radius für abgerundete Ecken angeben. Was immer professionell aussieht: zwei runde und zwei eckige Ecken.
Im erweiterten Bereich kannst du Bilder auch maskieren – auf Kreise, Formen oder Siebenecke setzen. Das hat einen ganz eigenen Zauber und lässt deine Website gleich professioneller wirken.
SEO nicht vergessen
Vergiss nicht, für jedes Bild einen Alt-Text einzugeben. Das hilft nicht nur Menschen mit Sehbehinderungen, sondern auch Google beim Verstehen deiner Bilder.
17) Mit Vorlagen und Blöcken arbeiten
Arbeite smart, nicht hart
Als Webdesignerin verrate ich dir einen meiner wichtigsten Workflow-Hacks: Erstelle dir deine eigene Template-Bibliothek! Investiere am Anfang mehr Zeit in ein perfektes Setup – das zahlt sich später tausendfach aus.
Template-System aufbauen
Der effiziente Weg: Eine Seite perfekt machen, komplettes Design umsetzen, alle Farben und Schriften anpassen, Mobile Version optimieren und alles durchtesten. Dann als Template speichern und für andere Seiten wiederverwenden.
Du kannst ganze Seiten speichern (oben rechts “Seite speichern”), einzelne Blöcke per Rechtsklick speichern oder wichtige Widgets als Standard definieren.
Ultimate Addons macht es richtig effizient
Mit Ultimate Addons aus dem Astra Essential Bundle wird dein Workflow noch professioneller. Du kannst Widgets als Standard speichern – Container mit passendem Padding und Margin in allen Ansichten, Newsletter-Formulare oder Icon-Listen.
Besonders praktisch sind die globalen Elemente: Bio-Texte zentral pflegen, Kontaktdaten einheitlich halten, CTA-Links für deine Angebote automatisch updaten oder Formulare synchron halten. Einmal ändern – überall aktualisiert!
Ultimate Addons bringt auch erweiterte Widgets mit, die du in der kostenlosen Elementor-Version nicht hast – wie filterbare Tabs oder erweiterte Blog-Ansichten.
18) Navigation und Header erstellen
Menü erstellen
Damit wir das Menü erstellen können, gehen wir auf “Design” → “Menüs” und erstellen das Hauptmenü. Du kannst hier alle Seiten hinzufügen, die du brauchst. Die Reihenfolge lässt sich per Drag & Drop anpassen. Wichtig: Wähle unter “Menü-Position” den Punkt “Primary Menu” aus und vergiss das Speichern nicht.
Regel: Beschränke dich auf maximal 5-7 Menüpunkte. Das ist benutzerfreundlicher und übersichtlicher.
Header im Customizer erstellen
Gehe zu “Design” → “Customizer” → “Header”. Hier kannst du dein Logo hochladen, die Menü-Position festlegen und alle Farben definieren. Für die Desktop-Version empfehle ich: Logo links, Menü in der Mitte oder rechts.
Fürs Smartphone: Logo links, Hamburger-Menü rechts. Vergiss nicht, die Mobile-Optimierung zu checken – Logo-Größe, Breakpoint und Dropdown-Verhalten.
Call-to-Action Button hinzufügen
Das Beste am Astra Header Builder: Du kannst ein letztes Element im Menü angeben und da einen Button reinpacken. Wenn du Beratung oder Coaching verkaufst, wäre “Vorgespräch” oder “Termin buchen” perfekt.
Für die Terminbuchung empfehle ich Meetergo – das ist 100% DSGVO-konform, deutscher Anbieter und absolut bezahlbar. Alle Details zur DSGVO-konformen Calendly Alternative Meetergo findest du in meinem Artikel: oder in diesem Video:
Professionelle Header mit Elementor Pro
Falls du einen noch individuelleren Header möchtest, kannst du ihn auch mit Elementor Pro* erstellen. Das zeige ich dir hier:
19) Footer bearbeiten
Footer-Struktur planen
Jetzt fehlt nur noch der Footer. Ich zeige dir, wie du mit Astra einen professionellen Footer erstellst, der nicht nur gut aussieht, sondern auch alle wichtigen Infos enthält.
Gehe in den Customizer unter “Design” → “Customizer” → “Footer” und klicke auf “Footer Builder”. Hier kannst du verschiedene Bereiche anlegen: Footer-Widgets für Infoblöcke, Copyright-Bereich und zusätzliche Menüs.
Typische Footer-Aufteilung
Meine Empfehlung für eine 3-Spalten Aufteilung: Spalte 1 mit kurzer Unternehmensinfo, Spalte 2 mit Newsletter-Anmeldung und Spalte 3 mit rechtlichen Links. Organisiere deine Widgets in Spalten – das macht den Footer übersichtlich und responsiv.
Footer-Menü und rechtliche Links
Erstelle unter “Design” → “Menüs” ein Footer-Menü und lege es als “Footer Menu” fest. Hier gehören wichtige Seiten rein – vor allem Impressum und Datenschutz nicht vergessen! Diese rechtlichen Links sind verpflichtend und sollten gut sichtbar sein.
Für den Cookie-Hinweis und DSGVO-konforme Einstellungen nutze ich Real Cookie Banner. Das fügt automatisch die entsprechenden Links in den Footer ein.
Styling anpassen
Lege Hintergrundfarbe fest, passe Schriftfarben an, optimiere Abstände und füge bei Bedarf Linien oder Trenner ein. Auf dem Smartphone werden die Spalten zu gestapelten Blöcken – achte auf klare Hierarchie und gut lesbare Schriftgrößen.
Falls du einen individuelleren Footer möchtest, kannst du ihn auch mit Elementor Pro erstellen:
20) Abschluss und nächste Schritte
Letzte Kontrolle
Du bist fast fertig! Jetzt kommt die finale Kontrolle: Teste alle Links – funktionieren sie? Lies deine Texte noch mal Korrektur. Und das Wichtigste: Checke jede Seite am Handy. Das ist deine Hauptzielgruppe!
Rechtliches ergänzen
Bevor du deine Website veröffentlichst, brauchst du noch die rechtlichen Grundlagen. Impressum und Datenschutzerklärung sind rechtlich verpflichtend. Für die Rechtstexte empfehle ich eRecht24* – da bekommst du rechtssichere Texte für deine Website.
Für den Cookie-Banner nutze ich Real Cookie Banner. Das sorgt dafür, dass deine Website DSGVO-konform ist und deine Besucher selbst entscheiden können, welche Cookies sie zulassen möchten. Alle Details dazu findest du hier:
Wartungsmodus beenden und Website veröffentlichen
Jetzt ist es soweit! Gehe zu “Plugins” → “WP Maintenance” und deaktiviere den Wartungsmodus. Erstelle noch einmal ein finales Backup und dann ist deine Website live!
Was du geschafft hast
Du hast es geschafft! In 20 strukturierten Schritten hast du eine professionelle WordPress-Website erstellt, die verkauft statt nur schön aussieht, mobile-optimiert ist, schnell lädt dank professionellem Hosting, suchmaschinenfreundlich aufgebaut ist und professionell durch durchdachtes Design wirkt.
Meine wichtigsten Learnings für dich
Nutze professionelle Templates – sie sparen Zeit und Nerven. Mobile First ist Realität, 80% deiner Besucher kommen vom Handy. Globale Farben und Schriften stellst du einmal ein und nutzt sie überall. Regelmäßige Backups sind wie eine Versicherung – haben ist besser als brauchen. Und nutze externe Tools für Shop, Terminbuchung und Rechtliches.
Wie es weitergeht
Deine Website ist der Grundstein – jetzt geht’s ums Verkaufen! Falls du merkst, dass du Unterstützung bei der Strategie brauchst oder unsicher bist, ob deine Website wirklich verkauft: Ich schaue gern mit dir drauf. In meiner Strategie Session analysieren wir gemeinsam deine Website und optimieren deinen Verkaufsprozess:
Ich schau noch mal drüber und dann hast du eine Website, die wirklich funktioniert!
Strategie Session
Ich checke deine Homepage auf Herz und Nieren.
Wir arbeiten an deinem Verkaufsprozess.
Du bekommst meine besten Ideen und Tipps, um deine Produkte und Dienstleistungen noch besser zu verkaufen.
Du kriegst meine volle Aufmerksamkeit, mein Fachwissen und meine Erfahrung.
90 Minuten Einzelcoaching
Danach hast du konkrete Verbesserungsvorschläge, die du umsetzen kannst.
