In 10+ Schritte eine Website erstellen: so mach ichs mit DIVI!

Seit 2021 erstelle ich jede WordPress Website nach demselben Schema. Solltest du selbst eine Website erstellen wollen oder sogar als Dienstleistung anbieten, kannst du dich gerne an meinem Schema orientieren. So vermeidest du Chaos, dein Aufbau ist logisch und du vergisst nichts.

Klar kannst dus auch anders machen oder was weglassen – dann wird’s halt nicht gut. Sieht dann vorne rum vielleicht ok aus, hintenrum is aber Pfui. Welche Auswirkungen das haben kann, erzähl ich dir zum Schluss.

Außerdem siehst du so mal, wieso so eine Website eben nicht in 2-3 Stunden gemacht ist und mehr als 300€ wert ist, wenns richtig gemacht wird! Da sind die 1.500-2.000 €, die so eine Website im Schnitt kostet, schon berechtigt. 😊

Wenn du dir sagst „Puh, das ist mir echt zu viel, Nadin mach du mir die Website.“ Dann schreib mir und wir beide sorgen dafür, dass du bald deine eigene WordPress Website erstellt hast – von dir oder von mir! Ich coache nämlich auch.

Achso, bevor ich mit irgendwas starte, führe ich ein langes Gespräch mit dem Kunden. Ich lasse mir erzählen, worum es geht, was die Website ausdrücken soll, kläre alle Möglichkeiten und Vorstellungen ab und lasse mir Bilder, Texte, Schriften und Farben schicken. Meist sind das 2-4 h an Abstimmung, bevor in irgendeiner Art losgelegt wird.

Meine Schritte beim Website erstellen

1. Host & Domain

Zuerst kümmern wir uns um darum, der Website ein Zuhause zu geben. Wir suchen uns einen passenden Host (ich liebe AllInkl* ) aus, auf dessen Server die Daten der Website liegen. Denn so eine Website schwirrt nicht etwa wild im www rum, sondern ist ein komplexes Konstrukt aus Code und Dateien, die gesammelt auf einem Server liegen und sich bei Aufruf der Domain im Browser zu einem fragilen Konstrukt zusammenbauen. DAS ist dann die fertige Website, wenn wir sie denn erstellt haben. Mehr zu den technischen Details und allen Begriffen findest du hier: Host bis Plugin – der Komplettüberblick über WordPress-Webseiten

Ich empfehle immer, die Domain erst beim Host deiner Wahl zu registrieren. Sonst hast du sie schon irgendwo reserviert und musst sie umziehen. Notfalls machen wir aber auch das gemeinsam. Einfacher ist es, die Wunschdomain, in meinem Fall nadinschmidt.com, beim Hoster zu registrieren. Jetzt achte ich noch auf die aktuellste PHP Version, aktiviere das SSL-Zertifikat und in den Zertifikatseinstellungen aktiviere ich https erzwingen. So wechselt das http auf https und die Website stellt bei Aufruf eine geschützte, sichere Verbindung her. Diese Einstellungen sind bei jedem Host ein bisschen anders. Bei AllInkl findest du das alles in der Technischen Verwaltung unter Domain.

2. WordPress Installieren

Die meisten Hoster bieten eine One Click WordPress Installation an. Bei AllInkl* finde ich das unter Software. Hier wähle ich WordPress und weise es meiner Domain zu. Ich lasse dazu immer eine neue Datenbank erstellen, ich will einfach Datensalat vermeiden. Passiert schnell, wenn du mal mehrere Webseiten hast. Jetzt warte ich kurz, bis WordPress installiert ist.

Mit dem Link Domain/wp-admin kann ich mich dann im Backend einloggen und endlich mit der Website Erstellung starten!

3. WordPress Index deaktivieren

Damit meine Website im Aufbau nicht in den Suchergebnissen von Suchmaschinen erscheint, gehe ich einmal in die WordPress Einstellungen und setze bei Lesen den Haken bei Suchmaschinen davon abhalten, diese Seite zu indexieren.

4. DIVI Upload + Key

Hier arbeite ich am Beispiel von DIVI. Die Schritte sind in jedem Theme dieselben.

Jetzt wechsel ich zu Design -> Themes und lade DIVI als .zip Datei hoch. Sobald du dich bei Elegant Themes registriert hast, kannst du das dort herunterladen. Manche Hoster haben hier eine Upload-Begrenzung. Solltest du eine Fehlermeldung dazu sehen, dass der Link abgelaufen ist, frag bei deinem Host nach der Upload Begrenzung (oder geh zu AllInkl im Plus Tarif.)

Theme aktivieren nicht vergessen.

Bei Elegant Themes kann ich mir in meinem Account einen neuen Key erstellen lassen, damit auch diese Website mit Updates versorgt wird. Diesen gebe ich in WordPress in den DIVI Optionen unter Aktualisierungen ein.

5. Plugins löschen & enhanced media library

Ich lösche grundsätzlich alle vorhandenen Plugins und installiere erstmal nur eins: Enhanced Media Library. Das brauche ich, um Schriften lokal hochzuladen. Wie das geht, erkläre ich hier im 2. Teil: https://nadinschmidt.com/schrift-divi-wird-nicht-angezeigt/.

Falls du das möchtest, kannst du auch eine Wartungsseite vorschalten. Das geht ganz schnell mit dem Plugin CMP

6. WordPress Optionen

Jetzt einmal schnell die WordPress Einstellungen durchgehen:

1. Allgemein: Untertitel & Datumsformat

2. Lesen: Sobald ich die Startseite erstellt habe, gebe ich sie hier als Homepage an.

3. Permalinks: Hier wähle ich Beitragsname für die Permalink Struktur

4. Datenschutz: sobald die Datenschutzerklärung erstellt wurde, wähle ich sie hier aus

7. DIVI Optionen

Allgemein: Logo hinterlegen, Brandingfarben in der Farbpalette speichern, Google Fonts deaktivieren, Button nach oben & responsive Images aktivieren. Alles Weitere sollte bereits passen. Da ich gerne mit zusätzlichem Code arbeite, trage ich diesen jetzt direkt unten bei Eigenes CSS ein. Speichern.

Leistung: Google Fonts deaktivieren

Builder: Beitragstypintegration -> Builder für Beiträge deaktivieren. Fortgeschritten -> Klassischen Editor aktivieren (optional. Gutenberg wäre auch ok).

Thats it.

8. DIVI Customizer

Bevor ich den Customizer starte, öffne ich auf einer beliebigen Seite den Visual Builder und lade meine Fonts hoch. Die Anleitung war die hier: https://nadinschmidt.com/schrift-divi-wird-nicht-angezeigt/

Den Customizer klicke ich einmal von oben nach unten durch.

Favicon, allgemeine Einstellungen zu Typografie, Menü und Mobile Designs.

Was ich auslasse, sind die Einstellungen zu Blog, Farbschema, Menüs, Widgets, Footer, Homepage und Eigenes CSS.

9. Custom Footer erstellen

Ich erstelle immer einen eigenen Footer im Theme Builder. Dazu einfach bei den DIVI Optionen den Theme-Builder öffnen und eine globale Fußzeile designen.

10. Layout erstellen und Presets festlegen

Endlich startet das eigentliche Design!

Dazu kann ich am wenigsten schreiben. Ich öffne eine Seite und erstelle ein grobes Layout.

Dann lege ich meine Presets für die wichtigsten Module wie Text und Buttons fest. Wie das geht, hab ich grob hier erklärt: https://nadinschmidt.com/tricks-divi/

11. Bilder platzieren

So ein Layout macht erst Sinn mit den passenden Bildern. Jedes Bild bearbeite ich vor dem Upload.

Ausnahme: ich bin noch total unsicher mit der Bildverteilung. Dann lade ich sie einfach mal hoch, wie sie sind und spiele mit der Platzierung rum. Später, wenn ich festgelegt habe, welche Bilder ich haben will, bearbeite ich sie, tausche sie aus und lösche die alten Bilder wieder aus der Mediathek.

Worauf du bei Bildern unbedingt achten solltest, ist hier erklärt: https://nadinschmidt.com/tipps-zu-richtigen-bildgroessen-fuer-deine-website/

12. Präsentation des Erstentwurfs

Es ist Zeit, meinem Kunden 2-3 Layouts der Startseite zu präsentieren. Ich baue in jedem Layout unterschiedliche Funktionen und Farbverteilungen ein, um verschiedene Möglichkeiten für die besprochenen Inhalte darzustellen.

13. Layout festlegen und restliche Website erstellen

Nachdem wir uns auf ein Layout festgelegt haben, erstelle ich die restlichen Webseiten im gleichen Stil. Da das Layout steht, brauchen die restlichen Seiten je nach Umfang und Schnickschnack jeweils etwa 1-3 Stunden. Wenns wenig Inhalt und sehr cleane Seiten sind gehts ganz schnell, je mehr Bilder/Text und Schnörkel, umso länger.

Auch so eine Landingpage kann gut mal mehr als 5 Stunden Zeit in Anspruch nehmen.

Im Anschluss verbinde ich sie alle im Menü, füge die Datenschutzerklärung und das Impressum ein und erstelle auch hierzu das Footermenü.

Wenn ich die Inhalte schon früher hab, mach ich das im selben Schritt, in welchem ich den Footer gestalte. Meist kann die Datenschutzerklärung aber erst erstellt werden, wenn wir wissen, über welche Plugins und Funktionen die Website zum Schluss verfügen wird. Und das ist nicht immer schon von Beginn an klar….

14. Änderungswünsche umsetzen

Da die Website eigentlich schon fertiggestellt ist, werden jetzt alle Feinheiten angepasst. Zusammen mit dem Kunden spreche ich die Website mehrmals durch, berate und passe an, bis alles sitzt.

15. Plugins

Updraft Plus für regelmäßige, automatische Backups und Website-Migrationen arbeite ich gerne mit Updraft Plus. Hier steht, wies geht: https://nadinschmidt.com/backup-fuer-deine-wordpress-website/

Wp Optimize für Bildoptimierung und Ladezeit. Da DIVI bereits über eine Cachingfunktion verfügt, aktiviere ich diese nicht zusätzlich. Bei manchesnWebseiten bringt die Komprimierung von CSS und HTML ein paar extra Ladezeitpunkt, manchmal richtet es aber auch mehr Schaden an. Dann lieber weglassen.

NinjaFirewall für die Sicherheit und Loginbegrenzung.

Matomo, wenn Tracking der Besucherzahlen gewünscht ist. Hier aber dann ohne Cookies und mit anonymisierten IP Adressen.

RankMath als SEO-Hilfsmittel meiner Wahl. Damit kann ich SEO-Tital und Metabeschreibungen ausfüllen, Indexierungen einzelner Seiten deaktivieren, Linkweiterleitungen einrichten und einiges mehr.

Cookie-Consent-Tool, wenn nicht-essentielle Cookies gesetzt werden. Am liebsten nehm ich Borlabs oder Real Cookie Banner.

Plugins die nicht mehr benötigt werden, wie zB Enhanced Media library oder CMP, lösche ich.

Mehr zum Datenschutz und Plugins hier: https://nadinschmidt.com/datenschutz-auf-deiner-website-dsgvo-co/

16. Bilder nochmal optimieren und anpassen

Wenn ich bisher Platzhalter verwendet habe, dann tausche ich die Bilder jetzt aus. Korrekte Abmessungen und geringe Dateigröße sind hier wichtig. Alle ausgetauschten oder nicht verwendeten Bilder werden aus der Mediathek gelöscht.

Mit dem Plugin WP Optimize lasse ich die Bilder zusätzlich komprimieren und als webP ausspielen.

17. Links setzen und testen

Ich gehe Webseite für Webseite durch und setze Querverlinkungen oder Links nach außen. Zum Schluss teste ich jeden Link.

18. Responsive

Da ich bereits bei den Voreinstellungen auf die Mobile Anpassung achte und auch die Presets direkt für mobil einstelle, muss ich hier kaum etwas anpassen.

Meist sind es Bilder oder besondere, verschobene Module, die ich mit ein paar wenigen Klicks für die Mobilansicht optimiere.

19. SEO, Meta und Bildbeschreibung ausfüllen

Für jede Seite fülle ich noch den SEO Tital und Metabeschreibung sinnvoll mit Keywords aus. Meist schreibe bekomme ich fertige Texte, ansonsten führe ich vor der Texterstellung eine kurze Keywordrecherche durch.

Da ich keine SEO-Texte anbiete und das dem Kunden auch so mitteile, reicht das erstmal aus.

Dasselbe mach ich mit den Bildtiteln und Bild-Alt-Texte sowie -beschreibung. Auch hier arbeite ich – wenn sinnvoll – ein paar Keywords ein.

20. WordPress Index an

Unter Einstellungen -> Lesen stelle ich den Index wieder auf an.

Wenn noch nicht erledigt, gebe ich jetzt auch die Homepage und Datenschutzseiten in den Einstellungen an.

21. Einweisung & Übergabeprotokoll

Alle meine Kunden erhalten eine Übergabe. Hier sage ich ein paar zusammenfassende Worte zur Website, gebe wichtige Links durch und biete eine Einweisung an.

Für Spezialfälle schreibe ich eine kurze Dokumentation. Zum einen für den Kunden, zum anderen auch für mich, falls ich irgendwann wieder an der Website arbeiten muss und nicht mehr genau weiß, was ich wie gemacht habe. Fast jede Website hat 1-2 besondere Dinge eingebaut, für die ich eine spezielle Lösung finden musste.

Die meisten meiner Kunden erhalten einen Zugang zu meiner DIVI Miniacademy. Hier hab ich extra kurze Tutorials erstellt, damit einfache Änderungen an der Website schnell selbst erledigt werden können. Das hat den Vorteil, dass die Kunden auch noch Monate später schnell mal nachschauen können. Denn eine Einweisung bei Übergabe ist wenig sinnvoll, das ist einfach too much information und wird direkt wieder vergessen.

Zum Schluss lasse ich mir noch ein Übergabeprotokoll ausfüllen und so bestätigen, dass die Website nach Wunsch erstellt und vollständig übergeben wurde.

Alles in allem kommen für das gesamte Projekt zwischen 20-30 Arbeitsstunden zusammen. Abstimmungen, Beratungen, Einweisung und eben die wirkliche Arbeit an der Website. Wissen und Wert wollen ja auch bezahlt werden . 🙂

Bist du jetzt bereit, für deine erste Website?

Vereinbare ein Erstgespräch* mit mir und wir besprechen dein Thema gemeinsam. 🙂