In 40 Minuten zu einer fertigen WordPress-Website

Wie viel Zeit braucht man, um eine WordPress Website mit 3 Unterseiten zu erstellen? Was schätzt Ihr? Ein Tag? Zwei Tage? Länger? Nach meiner Einschätzung braucht man etwa 35 Minuten, vorausgesetzt, es sind bereits alle notwendigen Bilder und Textmaterialien vorbereitet. Im Fall der Fälle könnt Ihr manche Aufgaben auch delegieren, falls Ihr z.B. nicht so gut mit Grafiken oder Texten umgeht.

Ich kann Euch sogar ein paar Voschläge machen:


Schritt #1: Ordnung ist das halbe Leben.

Der erste Schritt ist wie immer sich zu sammeln. Ich habe alle notwendigen Bilder selbstständig vorbereitet, aber ich habe mich nicht um die Texte gekümmert, nur für die Über mich-Seite habe ich ein paar Zeilen geschrieben. Es ist das erste, was mir in den Sinn kam, also beurteilt mich nicht allzu streng.

WordPress-in-40-Minuten-Bio

Für die restlichen Textblöcke habe ich hipsum.co verwendet, um mehrere Zeilen von sinnlosem Text zu generieren. Der längste Vorbereitungsschritt war das Logo, jetzt verstehe ich, warum es so viel kostet. Manchmal ist es viel besser, eine fertige Logo-Vorlage zu kaufen, als viele Stunden damit zu verbringen, etwas zu schaffen, was nachher so fürchterlich wie bei mir aussieht 🙁

Für mein Logo verwendete ich die gleiche Schriftart wie bei den Überschriften - Rubik.

Hier ist die letzte Überarbeitung davon:

WordPress-in-40-Minuten-Logo

Ich ahne schon, was Ihr denkt. Das Ganze sieht jämmerlich aus, besonders die Schrift, aber wisst Ihr was?

WordPress-in-40-Minuten-Ruhe


Schritt #2: Vorbereitung

Bevor ich den Screencast aufgenommen habe, habe ich einen Plan gemacht, was ich tun muss:

  • Site Identity (Website-Identität)
    1. Site Title >> Hit Sacker
    2. Tagline >> Professional Sleepyhead
    3. Show tagline after logo >> tick
  • General Site Settings (Allgemeine Website-Einstellungen)
    1. Logo
    2. Logo Type >> Image
    3. Logo Upload >> logo-small.png
    4. Retina logo >> logo-big.png
    5. Breadcrumbs >> Enable Breadcrumbs >> OFF
  • Color Scheme (Farbschema)
    1. Regular Scheme
    2. Accent color 1 #897c66
    3. Accent color 2 #474034
    4. Accent color 3 #776850
    5. Accent color 4 #9d937d
    6. Text #474034
    7. Link #9d937d
    8. Link hover #474034
    9. H1-H6 #222222
  • Typography (Typografie)
    1. Body >> Roboto >> Font weight 400
    2. H1 >> Rubik >> Font weight 500
    3. H2 >> Rubik >> Font weight 500
    4. H3 >> Rubik >> Font weight 400
    5. H4 >> Rubik >> Font weight 400
    6. H5 >> Rubik >> Font weight 400
    7. H6 >> Rubik >> Font weight 600
    8. Breadcrumbs/Entry meta >> Roboto >> Font weight 400
  • Header (Header)
    1. Styles >> Layout (Style 3)
    2. Top panel >> OFF
    3. Main menu >> Enable Sticky Menu
  • Menus (Menüs)
    1. Menu locations
      1. Main >> new
        1. Blog
        2. About
        3. Services
        4. Contacts
        5. Social >> Social
  • Sidebar (Seitenleiste)
    1. No sidebar
  • Footer (Footer)
    1. Footer styles
      1. Show Footer Logo >> OFF
      2. Layout >> Style 1
      3. Footer Contact Block >> OFF
  • Blog settings (Blog-Einstellungen)
    1. Blog
      1. Layout >> Grid (2 columns)
      2. Post content >> Hide
      3. Show post author >> ON
      4. Show publish date >> ON

Das Farbschema wurde auf Basis vom Katzenfoto, dass als Beitragsbild dient, mit dem kostenlosen Tool colormind.io generiert. Dieses Tool kann eine unbegrenzte Anzahl von Farbschemata aus jedem von ihm gerenderten Bild erzeugen.


Wozu ist dieser Plan gut?

Macht Ihr normalerweise keine Pläne oder Listen, bevor Ihr eine wichtige Aktivität beginnt? Dieser Plan hat mir geholfen, eine Menge Zeit zu sparen und baldmöglichst eine Website zu erstellen. Wenn Ihr es noch schneller, als ich, machen wollt, können wir einen Screencast-Wettbewerb veranstalten, wer Websites schneller erstellen kann: das könnte echt Spaß machen! Für meinen Test habe ich MaxPaxton WordPress Theme verwendet, da ich ein Portfolio erstellt habe, also war es für meine Zwecke genau richtig. Alle Bilder für dieses Experiment habe ich auf unsplash.com genommen.


Schritt #3: Die Aufnahme

Die einfachste Möglichkeit, einen Screencast aufzunehmen, bietet YouTube.

Öffnet Euer Creator Studio: 
WordPress-in-40-Minuten-Profil
Dann wählt Live Streaming im linken Menü:

WordPress-in-40-Minuten-Creator-Studio

Öffnet Live streaming und drückt auf Events:

WordPress-in-40-Minuten-Event

Jetzt müsst Ihr den Button im oberen Bereich der Seite drücken + New live event. Auf dem nächsten Bildschirm müsst Ihr Titel, Beschreibung hinzufügen und die Sichtbarkeit auf Private ändern.

WordPress-in-40-Minuten-Events

Alles ist fast fertig, um live zu gehen.

Wenn Ihr diese Benachrichtigung sieht, dann ist es definitiv soweit.

WordPress-in-40-Minuten-Fertig

Wenn Ihr auf OK klickt, wird Google Hangouts geladen. Wenn es geladen wird, müsst Ihr auswählen, ob Ihr das Video von Eurer Webkamera aus oder als Screencast übertragen möchtet.

WordPress-in-40-Minuten-Hangouts

Icons von oben nach unten: Chat, Screenshare, Cameraman, Control Room.

Um einen Screencast zu initiieren, müsst Ihr Screenshare drücken. Sobald Ihr Euren Desktop im Hangouts-Fenster seht, vergesst nicht, einen großen grünen Knopf am unteren Rand des Fensters zu drücken.

WordPress-in-40-Minuten-Start

Drückt darauf und Ihr werdet live gehen. Jetzt schaut Euch meinen Screencast an.

Die Länge des Videos beträgt 21:46.

Die Wiedergabegeschwindigkeit für den Screencast wurde um 45% erhöht, sodass Ihr es bequem ansehen könnt, ohne dass Ihr 40 Minuten damit verbringen müsst, mir zuzusehen. An dem Tag, an dem ich dies aufzeichnete, entschied mein ISP, dass 30MB/s für mich zu viel ist, und verringerte die Geschwindigkeit auf 2MB/s. 🙁


Wenn Ihr weitere Screencasts zur Installation/Anpassung für andere Produkte sehen möchtet, gebt mir Bescheid im Kommentarbereich und ich erstelle es für Euch. Danke fürs Lesen!


Der Artikel ist ursprünglich auf dem TemplateMonster.com-Blog erschienen und wurde aus dem Englischen übersetzt


Olga Wirth

Hat sich Texterin auf den Bereich Webdesign und Online-Marketing spezialisiert. Olga auf Facebook.